如何使用 Express 和 Node.js 从表单发送参数

Posted 2023-02-27

【中文标题】如何使用 Express 和 Node.js 从表单发送参数

【英文标题】：How to send parameters from a form using Express and Node.js

【发布时间】：2019-08-27 14:52:21

【问题描述】：

对不起英文，我是巴西人，我不知道怎么写。

我正在尝试使用 Express 邮寄表单数据：

index.html

<form action="insert" method="post">
            <p><h4> Title </h4>   <input type="text" name="title" id="title" size="40" maxlength="30" placeholder="Name of task"/> </p> 

            <p><h4>Description</h4> <textarea name="description" id="description" cols="50" rows="3" placeholder="description of task"></textarea> </p> 

            <p> 
                <h4>Grade</h4>
                <input type="radio" name="urgency" value="2"> 2
                <input type="radio" name="urgency" value="1" checked> 1
                <input type="radio" name="urgency" value="0"> 0
            </p>

            <p> 
                <h4>How?</h4>
                <select name="taskType" id="select"> 
                    <option value="2"> N* </option> 
                    <option value="1"> Hour </option> 
                    <option value="0"> Minute </option> 
                </select>
                <input type="text" name="repeats" id="options" size="40" maxlength="5" placeholder="NX?"/> </p> 
            </p>

            <p><button type="submit"> Submit </button></p>
        </form>

app.js

const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
app.use(bodyParser.urlencoded( extended: true ))


const db = mysql.createConnection(
        host     : 'localhost',
        user     : 'root',
        password : '',
        database : 'metas'
);

db.connect( (err)  => 
        if(err) throw err;
        console.log('MySQL conected...');
);

app.get('/select', (req, res) => 
        let sql = "SELECT * FROM tasks";
        db.query(sql, (err, result) => 
                if(err) throw err;
                res.send(result);
        )
)

app.post('/insert', (req, res) => 
        let post = 
                title: req.body.title, 
                description: req.body.description, 
                grau: req.body.urgency, 
                tipoRealizacao: req.body.taskType, 
                repeticoes: req.body.repeats
                
        let sql = 'INSERT INTO tasks SET ?';
        let query = db.query(sql, post, (err, result) => 
                if(err) throw err;
                res.send("Post added");
        )
)


app.listen('3000', () =>  console.log("Server initiated")  );

我正在使用mysql来存储任务，而且我在端口3306上使用wampp，但是当我提交表单时出现错误：

未找到

在此服务器上找不到请求的 URL /MetaSite/public/insert。

Apache/2.4.35 (Win64) PHP/7.2.10 服务器在 localhost 端口 80

index.html 在 public 文件夹中，app.js 在 src 中。

谁能帮帮我？我不知道我做错了什么。谢谢你。

【问题讨论】：

您发布到 apache 服务器，而不是 express 应用程序。此外，操作应该是：/insert 而不是 MetaSite/public/insert

您的“选择”路线有效吗？它的网址是什么？

@MarcosCasagrande 是在正确的轨道上，我想。但是，您的 api 在不同的端口上。您需要在操作中指定带有端口的完整 URL，如 here

所述

【参考方案1】：

根据您的代码，您的 index.html 似乎不是由服务器 javascript 托管的。为了使 express 能够处理来自该文件的 post 请求，该文件需要由 express 引用和托管。如果这是您正在做的事情，而您只是没有在代码中显示它，请告诉我，否则，这看起来像是您的问题。你应该这样做的方式是：

var path = require('path');

app.get('/', function(req, res) 
    res.sendFile(path.join(__dirname + 'public/index.html'));
);

将索引文件托管在http://localhost:3000/。

【讨论】：

这是不准确的。 HTML 可以独立于 API 托管，并且通常在云部署中。这无疑会使 XSRF 技术复杂化，但原帖并没有使用它们。

是的，但是只使用表单操作而不提及另一个服务器，例如使用 axios，除非 html 和 javascript 在同一台服务器上，否则将无法正常工作。

action方法采用完整的URL，完全可以跨域发帖。 ***.com/questions/11423682/cross-domain-form-posting。 仅在 JS 中发布（例如，使用 axios）时，您可能会遇到问题（由于跨域策略）

正确，这个程序可以做到这一点，但它正在使用它吗？不，它没有提到另一台服务器，它所做的只是使用表单操作。前端没有提到另一台服务器。因此，它正在尝试向它所在的服务器创建一个发布请求，并且不与服务器 javascript 共享。

正确。我只是不会说，“你必须在 express 中托管 html”。您可以在 express 中托管 html，它会解决这个问题。您也可以简单地更改表单操作。如果在单独的应用程序中托管静态 HTML 是经过深思熟虑的选择（就像我在 Amazon S3 部署中所做的那样），那么表单操作可以指向另一个域和/或端口。