Node学习（五）022-处理静态资源——自定义中间件处理post提交的数据 & 将接收到的数据，赋值给req.body & 使用express和body-parser中间件处理post提交数据

Node学习（五）022-处理静态资源——自定义中间件处理post提交的数据 & 将接收到的数据，赋值给req.body & 使用express和body-parser中间件处理post提交数据

2.6 自定义中间件处理post提交的数据

思路：

• 如果是POST方式的请求，则接受数据。并将数据绑定到req对象的body属性上，然后next
• 如果不是POST方式的请求，则直接next

app.use((req, res, next) => {
    // 判断，看是否是POST方式的请求
    if (req.method === 'POST') {
        // 这里的代码和之前一样，还是接收数据
        let str = '';
        req.on('data', (chunk) => {
            str += chunk;
        });
        req.on('end', () => {
            // 将接收到的数据，赋值给req.body
            // req.body属性本来不存在，是自定义的，你也可以用其他的名字
            req.body = querystring.parse(str); // querystring.parse是将字符串转成对象
            next();
        });
    } else {
        // 不是POST方式的请求，继续向下走
        next();
    }
})

实例

01-使用中间件来处理POST提交的数据.js

const querystring = require('querystring');

const express = require('express');

const app = express();

app.listen(3000, () => console.log('服务器启动了'));

// 定义中间件，处理POST提交的数据
app.use((req, res, next) => {
    // console.log(req.method); // POST
    if (req.method === 'POST') {
        // 是POST方式的请求，则接收浏览器提交过来的数据
        // 1. 定义空字符串
        let str = '';
        // 2. 注册req的data事件
        req.on('data', (chunk) => {
            str += chunk;
        });
        // 3. 注册req的end事件
        req.on('end', () => {
            // console.log(str); // username=123%40123.com&pwd=123
            // 把接收到的数据，添加到req对象的一个自定义属性中
            req.body = querystring.parse(str);
            next();
        });
    } else {
        next();
    }
});

// 定义接口 loginCheck，接口要接收浏览器提交的账号和密码
app.post('/loginCheck', (req, res) => {
    console.log(req.body); // { username: '123@123.com', pwd: '123' }
});

app.post('/reg', (req, res) => {
    console.log(req.body); // { abc: '123@123.com', bcd: '123' }
});

app.post('/add', (req, res) => {

});

1-postman验证接口-post请求

2-代码事件-打印验证

2.7 使用body-parser中间件处理post提交数据

前面，为了理解中间件，都是自定义的中间件，其实，关于接收POST请求体的中间件也早就存在了，它就是body-parser

// 安装
// 找好文件夹
npm install body-parser

代码：

// 如果请求头的 Content-Type为 application/x-www-form-urlencoded，则将请求体赋值给req.body
app.use(bodyParser.urlencoded({extended: false}));

实例

02-使用body-parser来接收POST提交的数据.js

const querystring = require('querystring');

const express = require('express');

const app = express();

app.listen(3000, () => console.log('服务器启动了'));

// 使用body-parser，处理POST提交的数据
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));


// 定义接口 loginCheck，接口要接收浏览器提交的账号和密码
app.post('/loginCheck', (req, res) => {
    console.log(req.body); // { username: '123@123.com', pwd: '123' }
});

app.post('/reg', (req, res) => {
    console.log(req.body); // { abc: '123@123.com', bcd: '123' }
});

app.post('/add', (req, res) => {

});

1-postman验证接口-post请求

2-代码事件-打印验证

2.8 整体代码

// 1. 加载express和body-parser
const express = require('express');
const bodyParser = require('body-parser');

// 2. 创建app对象
const app = express();

// 3. 开启服务
app.listen(3000, () => console.log('开启服务'));

// 4. 定义中间件，处理所有的静态文件
app.use(express.static('manager'));

// 5. 定义中间件，处理POST请求提交的数据
app.use(bodyParser.urlencoded({extended: false}));

// 6/7/8.... 各种接口
app.get('/time', (req, res) => {
    res.send(Date.now() + '');
});

app.post('/loginCheck', (req, res) => {
    console.log(req.body); // { username: '123@123.com', pwd: '123' }
});

app.post('/reg', (req, res) => {
    console.log(req.body); // { abc: '123@123.com', bcd: '123' }
});

效果同上