Express框架如何接收POST方法的请求参数

最新推荐文章于 2024-12-29 17:11:36 发布

原创最新推荐文章于 2024-12-29 17:11:36 发布 · 911 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#node #nodejs #node.js #前端

Express 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在使用Express框架时遇到无法接收到POST请求参数的问题。通过问题描述、问题还原，展示了如何创建一个简单的Express应用来模拟问题场景。解决方案在于使用`req.body`而不是`req.params`来获取POST请求的参数，并且需要使用中间件`body-parser`来解析请求体。经过代码改造，成功解决了问题。最后，作者强调了基础问题的重要性以及记录问题的价值。

问题描述

使用 Express 框架时，通过 POST 方式处理客户端的请求参数，但是通过 req.query 接收到的一直都是 {}。

问题还原

为了清晰地记录这个问题，我将问题进行抽离单独还原这个问题的场景。现在抽离之后的工程目录如下：

|--app.js
|--index.ejs
|--package.json

这里使用了 ejs 模板引擎，所以要先安装 ejs 和 Express 框架：

npm install --save--dev express
npm install --sve--dev ejs

然后 app.js 文件作为主要的处理文件，代码如下：

const express = require("express")
const app = express()
const port = 8080

// 设置模板文件所在的目录
app.set("views", "./")
// 设置使用的模板引擎
app.set("view engine", "ejs")
// 主页路由
app.get("/", (req, res) => {
  res.render('./index.ejs')
})
// 处理POST方式的请求
app.post("/test", (req, res) => {
  // 接收请求参数
  console.log(req.query)
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

在访问主页时需要显式一个表单，用来提交 POST 方式的请求：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>问题还原</title>
</head>

<body>
  <form action="/test" method="POST">
    <input type="text" id="inputValue" name="inputValue">
    <input type="submit" value="提交">
  </form>

</body>

</html>

最后通过 node app.js 命令启动服务，这时访问 http://127.0.0.1:8080 时可以在浏览器中看到这个表单了。

在这里插入图片描述

在输入框输入任意内容，然后点击【提交】按钮，这时看一下控制台的打印信息：

在这里插入图片描述

解决方案

查询了一下 Express 框架的官网 API 文档，发现遇到这个问题有两个错误。

Express 框架接收 POST 方式的请求参数使用的不是 req.query 而是 req.body
Express 框架在接收 POST 方式的请求参数之前需要设置 app.use(express.json()) 和 app.use(express.urlencoded({ extended: true }))

改造之后的 app.js 文件的代码如下：

const express = require("express")
const app = express()
const port = 8080

app.set("views", "./")
app.set("view engine", "ejs")

app.use(express.json())
app.use(express.urlencoded({ extended: true }))

app.get("/", (req, res) => {
  res.render('./index.ejs')
})

app.post("/test", (req, res) => {
  console.log(req.body)
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))