express中的get post use处理，链式操作，封装中间件

1、在express中的get处理表单处理的数据，即服务器获取get方式提交的数据，通过req.query获取提交的数据，格式是json

// 客户端代码
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <form action='http://localhost:8080' method="get">
            用户名：<input type='text' name="user" value=''><br />
            密码：<input type='password' name="pass" value=""/><br />
            <input type="submit" value='提交'>
        </form>
    </body>
</html>

// 服务端的代码
const express = require('express');
let server = express();
server.listen(8080);
//get
server.get('/',(req,res)=>{
    console.log(req.query);
});

或者通过use()处理get请求，客户端代码同上

// 服务端的代码
const express = require('express');
let server = express();
server.listen(8080);
//get
server.use('/',(req,res)=>{
    console.log(req.query);
});

2、在express中处理post方式的数据，需要引进插件body-parser（只能解析数据，不能解析上传的文件，解析post数据，enctype='application/x-www-form-urlencoded'），然后通过req.body获取post提交的数据

POST的用途：上传数据；解析上传文件

关键步骤

const bodyParser = require('body-parser');

server.use(bodyParser.urlencoded({}));

//req.body

const express = require('express');
// 引进插件
const bodyParser = require('body-parser');

let server = express();
server.listen(8080);

//post需要body-parser解析body
server.use(bodyParser.urlencoded({}));

//post
server.post('/',(req,res)=>{
    // req.body获取客户端递交的数据
    console.log(req.body);  
});

// 或者写成下面的形式
server.use('/',(req,res)=>{
    console.log(req.body);
});

总之：req.query---获取get方式的数据(不需要中间价)，req.body----获取post方式的数据（需要中间件body-parser）

3、处理上传的文件：中间件multer处理enctype='multipart/form-data'，解析post文件


const multer = require('multer');

// 定义上传的文件的路径
let multerObj = multer({dest:'./www/upload/'});



server.use(multerObj.any());

server.post('/',(req,res)=>{
    // 上传的文件
    console.log(req.files[0]);
});

//输出
{ fieldname: 'uploadFile',
  originalname: 'FunwallIndex.jpg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  destination: './www/upload/',
  filename: 'db8542dc66f39ace324aa21d6e274bcc',
  path: 'www\\upload\\db8542dc66f39ace324aa21d6e274bcc',
  size: 28070 
}

需要利用fs.rename('原文件名'，‘修改后的文件名’，callback)函数给上传的文件重命名

// 新文件名  名 获取原始文件的扩展名
    let newName = req.files[0].path + pathLib.extname(req.files[0].originalname);
    // let newName = req.files[0].originalname;
    // 重命名
    fs.rename(req.files[0].path,newName,(err)=>{
        if(err){
            console.log('error');
            res.send('lose');
        }else{
            console.log('success');
            res.send('success');
        }
    });

完整的解析Post文件例子

//后台
const express = require('express');
const multer = require('multer');
const fs = require('fs');
const pathLib = require('path');
let server = express();
// 定义上传的文件的路径
let multerObj = multer({dest:'./www/upload/'});

server.listen(8080);

server.use(multerObj.any());

server.post('/',(req,res)=>{
    // 上传的文件
    console.log(req.files[0]);
    console.log(req.files[0].originalname);
    // 新文件名  名 获取原始文件的扩展名
    let newName = req.files[0].path + pathLib.extname(req.files[0].originalname);
    // let newName = req.files[0].originalname;
    // 重命名
    fs.rename(req.files[0].path,newName,(err)=>{
        if(err){
            console.log('error');
            res.send('lose');
        }else{
            console.log('success');
            res.send('success');
        }
    });
});

//前台
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <form action='http://localhost:8080/' method="post" enctype="multipart/form-data">
            <!-- 用户名：<input type='text' name="user" value=''><br />
            密码：<input type='password' name="pass" value=""/><br /> -->
            上传文件：<input type='file' name="uploadFile" value=""/><br />
            <input type="submit" value='上传'>
        </form>
    </body>
</html>

3、express中的链式操作，use post get都有next参数（option）

通过(req,res.next)=>{}中的next()调用，如果有链式操作，就调用next()，否则不调用

const express = require('express');
let server = express();
server.listen(8080);


server.use('/',(req,res,next)=>{
    console.log('a');  
    next();
});

server.use('/',(req,res,next)=>{
    console.log('b');  
});

输出结果:a,b

4、自己写个中间件

使用next()在给req添加属性

// 链式写法 + 插件的写法
const express = require('express');
let server = express();
server.listen(8080);

// 响应所有的请求
server.use((req,res,next)=>{
    req.body = 12; 
    req.a = 'dd';

    // 链式调用
    next();
});

// 响应根目录下的请求
server.use('/',(req,res)=>{
    console.log(req.body);
    console.log(req.a);  
});

输出：12 dd

自己实现body-parser，收集数据，将数据添加到新增的属性里面

// 链式写法 + 插件的写法
const express = require('express');
// 解析字符串为json
const querystring = require('querystring');
let server = express();
server.listen(8080);

// 响应所有的请求
// 实现中间件
server.use((req,res,next)=>{
    let str = '';
    //收集数据
    req.on('data',(data)=>{
        str += data;
    });
    //将数据添加自定义的属性
    req.on('end',()=>{
        // 将字符串解析为json
        req.body = querystring.parse(str);
        // 链式调用
        next();
    });
});

// 响应根目录下的请求
server.use('/',(req,res)=>{
    console.log(req.body);
});

封装成模块：

// 链式写法 + 插件的写法
const express = require('express');
// 解析字符串为json
const querystring = require('querystring');
let server = express();
server.listen(8080);

// 响应所有的请求
// 实现中间件
server.use((req,res,next)=>{
    let str = '';
    //收集数据
    req.on('data',(data)=>{
        str += data;
    });
    //将数据添加自定义的属性
    req.on('end',()=>{
        // 将字符串解析为json
        req.body = querystring.parse(str);
        // 链式调用
        next();
    });
});

// 响应根目录下的请求
server.use('/',(req,res)=>{
    console.log(req.body);
});

express中的get post use处理，链式操作，封装中间件

猜你喜欢