关于express post 在Nodejs中的使用

关于express post 在Nodejs中的使用

跟着 教程一步一步敲代码的时候 发现 <%- include header %> <form method=“post”> 标题：<br /> <input type=“text” name=“title” /><br /> 正文：<br /> <textarea name=“post” rows=“20” cols=“100”></textarea><br /> <input type=“submit” value=“发表” /> </form> <%- include footer %> 表单里不用加action 吗？ app.post(’/login’，func)这样就能是处理/login页面接收到post请求？


2 回复

当然可以！让我们来详细解释一下如何在Express中处理POST请求，并且说明为什么表单中可以不加action属性。

表单中的 action 属性

在HTML表单中，action属性指定了提交表单时应该发送到的URL。如果你没有指定action属性，那么默认情况下表单会提交到当前页面的URL。因此，在你的例子中，如果用户点击“发表”按钮，表单将提交到当前页面的URL。

Express 中的 POST 请求处理

在Express中，你可以使用路由处理器来处理不同类型的HTTP请求，包括POST请求。以下是一个简单的示例，展示如何设置一个处理POST请求的路由：

安装依赖

首先，确保你已经安装了Express：

npm install express

创建服务器

接下来，创建一个基本的Express应用来处理POST请求：

const express = require('express');
const app = express();
const port = 3000;

// 使用body-parser中间件解析请求体
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));

// 处理GET请求，渲染表单
app.get('/', (req, res) => {
    res.send(`
        <!DOCTYPE html>
        <html>
        <head>
            <title>发表文章</title>
        </head>
        <body>
            <form method="post">
                标题：<br />
                <input type="text" name="title" /><br />
                正文：<br />
                <textarea name="post" rows="20" cols="100"></textarea><br />
                <input type="submit" value="发表" />
            </form>
        </body>
        </html>
    `);
});

// 处理POST请求，处理表单数据
app.post('/', (req, res) => {
    const { title, post } = req.body;
    res.send(`感谢您的投稿！\n标题：${title}\n正文：${post}`);
});

// 启动服务器
app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

解释代码

  1. 引入依赖：我们首先引入了express和body-parser模块。
  2. 配置中间件：使用bodyParser.urlencoded来解析表单提交的数据。
  3. 处理GET请求：当用户访问根路径（/）时，我们返回一个包含表单的HTML页面。
  4. 处理POST请求：当用户提交表单时，我们从req.body中获取表单数据，并返回一条确认信息。
  5. 启动服务器：最后，我们启动服务器并监听端口。

通过这种方式，你可以轻松地在Express应用中处理POST请求，并实现表单数据的提交和处理。


在Express中处理POST请求时，如果你没有明确指定<form>标签的action属性，默认情况下表单会提交到当前页面的URL。因此，如果当前页面的URL是/，那么提交表单时会发送一个POST请求到/。

你可以通过app.post()方法来定义处理该路径上POST请求的逻辑。例如，如果你有一个简单的表单用于创建新文章，可以按照以下步骤进行操作：

示例代码

  1. HTML 表单

    <form method="post">
    标题：<br />
    <input type="text" name="title" /><br />
    正文：<br />
    <textarea name="post" rows="20" cols="100"></textarea><br />
    <input type="submit" value="发表" />
</form>

  2. Express 路由处理

    const express = require('express');
const app = express();
app.use(express.urlencoded({ extended: true })); // 解析表单数据

app.post('/', (req, res) => {
    const title = req.body.title;
    const post = req.body.post;
    console.log(`Received POST request: Title=${title}, Post=${post}`);
    
    // 处理表单数据
    res.send('表单已接收并处理');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

在这个例子中：

  • 表单提交时默认会向当前页面的URL（这里是/）发送POST请求。
  • express.urlencoded({ extended: true }) 中间件用来解析提交的表单数据。
  • app.post('/', ...) 定义了处理/路径上的POST请求的回调函数。
  • req.body 包含了从表单提交的数据。

这样，当你提交表单时，Express会接收到POST请求，并且可以通过req.body访问到表单字段的值。

回到顶部