问题描述
使用 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}!`));
改造之后通过 node app.js 命令重新启动服务，然后在输入框输入任意内容，然后点击【提交】按钮，这时看一下控制台的打印信息：
到此问题解决~
写在后面的话
这个问题其实很简单，也很基础~ 可是有时候就是容易犯错，好记性不如烂笔头！
