Express框架---中间件

使用中间件

Express是一个自身功能极简，完全是路由和中间件构成一个web开发框架：从本质上来说，一个Express应用就是在调用各种中间件。

中间件是可以访问请求对象 （req），响应对象（res）以及next应用程序请求-响应周期中的函数。

中间件就是在请求后，响应前要执行的函数，中间件就是函数使用app.use() 方法，可以给express应用，添加任意中间件功能函数。

中间件分类

• 内置中间件

• 自定义中间件

• 错误处理中间件

• 第三方中间件

---

1.​​​​​​内置中间件

从版本4.x开始， Express不再依赖于 Connect。之前包含在 Express中的中间件功能现在位于单独的模块中; 查看 中间件功能列表。

Express具有以下内置中间件功能：

• express.static提供静态资源，如HTML文件，图像等。
• express.json使用JSON有效负载解析传入的请求。注意：适用于Express 4.16.0+
• express.urlencoded用URL编码的有效负载解析传入的请求。 注意：适用于Express 4.16.0+

  ---

1. express.static()

指定一个目录为静态资源目录

客户端可以直接访问静态资源目录中的文件(目录暴露出来)

代码示例：

app.use(express.static(path.join(__dirname,"public")))

2. express.json()

解析post方式提交的application/json格式的数据

代码示例：

app.use(express.json())

3. express.urlencoded()

解析post方式提交的application/x-www-form-urlencoded 格式的数据

代码示例：

app.use(express.urlencoded({extended:false}))

---

2.自定义中间件

根据需求自己定义中间件

代码示例：

//自定义中间件
app.use(function (req, res, next) {
    console.log(Date.now() + ':我是中间环节....');
    next();
})
​
 
//跨域
app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");//解决跨域
    next()  //转发请求
})
 
 
//调用postData函数，会得到一个函数
let postData = function () {
    return function (req, res, next) {
        let arr = []
        req.on('data', chunk => {
            arr.push(chunk)
        })
        req.on("end", () => {
            // console.log(Buffer.concat(arr).toString());
            req.body = Buffer.concat(arr).toString();
 
            next();
        })
    }
}
//自定义中间件 ---->取出post参数
app.use(postData())

---

3.错误处理中间件

错误处理中间件总是需要四个参数。您必须提供四个参数以将其标识为错误处理中间件函数。即使您不需要使用该next对象，也必须指定它以保持签名。否则，该next对象将被解释为常规中间件，并且将无法处理错误。

以与其他中间件函数相同的方式定义错误处理中间件函数，除了四个参数而不是三个，特别是签名(err, req, res, next)）：

 注意：错误处理中间件，一般出现在代码的下面

//错误处理中间件
app.use(function(req,res){
    res.send({
        code:500,
        msg:"地址错误，请检查后重新访问"
    })
})

---

4.第三方中间件

使用第三方中间件为Express应用程序添加功能。

安装Node.js模块以获得所需的功能，然后在应用程序级别或路由器级别将其加载到您的应用程序中。 

示例：

1. serve-favicon

可以设置前端页面访问时的图标

安装：
npm install  server-favicon
 
引入：
const favicon=require("serve-favicon")

 代码示例：

app.use(favicon(path.join(__dirname,"favicon.ico")))

2. svg-captcha

是一个可以生成验证码的第三方中间件

安装：

npm  install  svg-captcha

 引入：

//导入验证码生成中间件
const svgCaptcha= require("svg-captcha")

代码示例： 

//生成验证码
router.get('/code',(req,res)=>{
    //创建验证码对象
    // const captcha= svgCaptcha.create();
    const captcha= svgCaptcha.create({
        size:5, //验证码字符个数
        ignoreChars:"0oi1l",//忽略字符
        noise:5,//干扰线
        background:"#eeeeee",
        color:true,//字符是否有颜色
 
    });
    console.log(captcha.text);
 
    res.type("svg");//设置媒体类型(MIME)
    res.send(captcha.data);//将svg格式的图片响应给前端
})

3. formidable

文件上传

安装：

npm install formidable

 引入：

const formidable=require(“formidable”)

代码示例：

服务器端代码：

//文件上传
app.post("/upload", (req, res) => {
    const fd = formidable({//配置项
        // encoding:""// 编码
        // uploadDir:"",//上传文件保存目录
        //filename:""
        uploadDir: path.join(__dirname, "temp")
    });
 
    //解析文件----接收文件
    fd.parse(req, function (err, fields, files) {
        if (err) {
            res.send("上传失败：" + err)
            return;
        }
        //上传成功
        // console.log("fields:", fields);//字段  { usernmae: '李四' }
        // console.log("files:", files);//文件信息
 
        //将缓存文件，处理为正常文件
        //1.取后缀名
        let extName = path.extname(files.myfile.originalFilename) //从文件的默认名称中，取出后缀名   xx.jpg---> .jpg
        //2,生成新文件
        let oldPath = files.myfile.filepath;//旧路径
        let newPath = oldPath + extName//新路径
        fs.renameSync(oldPath, newPath)
 
 
        res.send("上传成功")
    })
});

前端代码：

表单格式提交

    
"http://localhost:3000/upload" method="post" enctype="multipart/form-data">
        <label for="">用户名：label>
        头像：
        
    

补充

前后端数据交互总结