时间戳

首页 > 解决方案 > 如何从我的静态 js 文件中提取数据并将信息放入 express 然后将其发送到数据库？

javascript - 如何从我的静态 js 文件中提取数据并将信息放入 express 然后将其发送到数据库？

问题描述

我已经建立了一个网站，我想从表单中提取数据。我已经设置了逻辑，但需要在提交表单时将信息转到数据库。如何提取变量并将它们放入我的快速应用程序中，然后将该信息发送到我正在使用的数据库 mongoDB。另外，提交表单时，html中的表单应该采取什么行动。它不应该是 index.html 因为我不希望用户离开网站。任何正确方向的帮助将不胜感激。

这是我的代码：

HTML

<

div class="contactform">
                <form action="/" method="POST" class="form">
                    <input type="text" name='name' id='name' placeholder="Name">
                    <input type="email" name='email' id='email' placeholder="Email">
                    <textarea class="messages" placeholder="Messages...."></textarea>
                    <button class="submit">Send</button>
                </form>
<div>

Main.JS 
const alertMessage = document.querySelector('.alert');
function collectInfo () {
    if (name.value === '' || email.value === '') {
        alertMessage.innerHTML = 'Name And Email Required';

    } else {
        alertMessage.innerHTML = 'Success! Someone will be in touch with your soon!'

    }
}

const submit = document.querySelector('.submit');
submit.addEventListener('click', () => {
    const email = document.querySelector('#email').value;
    const name = document.getElementById('name').value;
    collectInfo();
});

JS where express is deployed
const express = require('express');
const mongoose = require('mongoose');
const ejs = require('ejs');
const bodyParser = require('body-parser');
const Form = require('./models/form.js');
const {MongoClient} = require('mongodb');
const app = express();


mongoose.connect('mongodb://localhost:/airplane_port', { useNewUrlParser: true,
useUnifiedTopology: true
});

mongoose.connection.on('error', function(err) {
    console.error('MongoDB connection error: ' + err);
});

app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({extended: true}));
app.set('view engine', 'ejs');



// Index Route
app.get('/index.html', function(req, res){
    console.log(Form.name);
});

app.post("/index.html", (req, res) => {

  });

常量端口 = process.env.PORT || 5500; app.listen(port, () => { console.log( http://localhost:${port}: server started); })

标签： javascriptnode.jsmongodbexpress

解决方案

表单提交动作的默认方法是 POST，因此您需要一个 POST 路由：

app.post( (req, res) => {
    console.log(req.body)
    res.send("ok");
})

我建议您也设置 JSON 中间件：

app.use(express.json());

然后，将接收表单输入的值：

req.body === {inputOne: 'valueOne', inputTwo: 'valueTwo')

您只需要设置name表单输入的属性，以及您想要接收它的键：

<input type="text" name='inputOne' ...>

推荐阅读