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' } }); 

效果同上

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/10849.html