nodejs static静态资源目录 + svg-captcha验证码中间件 + multer上传文件中间件+router

青旅半醒 2022-11-25 10:23 148阅读 0赞

1.中间件  
自定义中间件  
内置中间件  
第三方中间件  
2.如何使用中间件  
1）中间件函数  
a.有两个参数 ：callback(req,res) 路由的回调函数  
b.有三个参数：callback(req,res,next) 中间件函数  
app.use(path,callback)  
使用中间件，必须使用use方法，而且在使用中间件件是，一般需要携带next参数  
关于use方法：  
1）path参数是可选的，默认： /  
2）若传递了path参数，后续参数为中间件方法,基本格式为:  
(req,res,next)=>\{\}

use的使用情形类似于all方法，能够匹配一切http 请求方法；  
它的路径作用不同于get或post等路由配置中 path的作用，如下：  
use的path路径匹配原则：  
/ 匹配 /,/about,/admin,/a/b/c(所以use中的path / 可以匹配一切url路径)

/apple 匹配 /apple,/apple/1,/apple/1/2  
3）由于中间件的功能是为下面的路由 提供一种统一的解决方案，所以一般use中间件都会放置在路由的上面。  
重要：切记！！！在使用中间件处理完毕数据后，一定要调用next方法，否则后续代码或路由都无法执行或匹配。

3.自定义中间件  
1）自定义解析post参数的中间件

//post参数解析中间件
    function bodyParser(req,res,next){ 
        let arr = [];
        req.on("data", chunk => { 
            arr.push(chunk);//将读取到的数据存储到数组中
        });
        req.on('end', () => {        //post 数据读取完毕
            let data = Buffer.concat(arr).toString();
            // console.log(qs.parse(data));
            req.body = qs.parse(data);//将读取到的post参数数据存储到request对象中body属性中
            next();//注意，一定要数据读取完毕之后，在顺延(转发)
        })
    }
    
    //自定义post参数解析中间件
    app.use(bodyParser);

2）自定义错误处理的中间件

//错误处理中间件
    app.use((req,res,next)=>{ 
        // res.status(404)
        // res.statusCode=404;//node原生
        // res.statusMessage='error';
        res.status(404).send({ 
            msg:"页面未找到"
        });
    });

4.内置中间件

express.static能够指定指定目录为静态资源目录  
app.use(express.static(‘目录名称’));

//使用内置中间件
    //挂载静态资源
    app.use(express.static('public'));//指定public目录中内容为静态资源
    
    //虚拟目录 api/
    // app.use('/api',express.static('public'));
    
    app.use(express.json());//能够处理post请求中的json数据
    app.use(express.urlencoded());//能够处理post请求中的urlencodeed格式的数据

5.第三方中间件  
1）nodemon  
服务端代码一旦进行了修改，就需要重新将代码部署到服务器，这个操作非常频繁，可以通过nodemon来进行一个自动化配置和部署（热更新）  
npm i nodemon -D  
在项目根目录下新建文件nomon.json，将如下代码拷贝进去:

{ 
        "restartable": "rs",
        "ignore": [
            ".git",
            ".svn",
            "node_modules/**/node_modules"
        ],
        "verbose": true,
        "execMap": { 
            "js": "node --harmony"
        },
        "watch": [],
        "env": { 
            "NODE_ENV": "development"
        },
        "ext": "js json"
    }

## svg-captcha ##

图形验证码的中间件，使用该中间件，可以生产一个图形验证码  
安装：  
npm install --save svg-captcha  
使用：

## 3)serve-favicon ##

用于服务器端设置favicon视觉提示，其实就是浏览器标签标题栏上的小图标  
安装：  
npm install serve-favicon --save  
使用：  
const favicon=require(‘serve-favicon’);//引入模块

app.use(favicon(path.join(\_\_dirname,‘public’,‘youjiuye.ico’)));

## 4）multer ##

multer是一个node.js中间件，用于处理多部分/表单数据，主要用于上传文件  
安装：  
npm install --save multer  
使用：  
方式1：通过form表达上传

<form action="http://localhost:3000/uploadImg" method="post" enctype="multipart/form-data">
            <input type="file" name="avatar">
            <input type="submit" value="提交">
    </form>

//接口代码
    //接收上传的图片
    app.post('/uploadImg', upload.single('avatar'), function (req, res, next) { 
        // console.log(req.file);
        let { originalname,filename}=req.file;//解析文件的名称
        fs.renameSync(`./uploads/${ filename}`,`./uploads/${ originalname}`);//将文件重命名
        res.send({  msg: "图片上传成功" });
    })

方式2：通过ajax上传

HTML代码：
     <input type="file" name="avatar">
        <button>提交</button>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    Js代码
    <script>
            let fileObj = null;//保存要上传的文件数据
            $(':file').change(function () { 
                // console.log(this.files);
                fileObj = this.files[0];//
            });
    
            $('button').click(function () { 
                let formData=new FormData();
                formData.append("avatar",fileObj);
                // console.log(formData.get('avatar'));
    
                $.ajax({ 
                    url: 'http://localhost:3000/uploadImg',
                    type: "post",
                    data: formData,
                    contentType: false,//改变上传的数据处理格式
                    processData: false,//改变上传的数据处理格式，参考jQuery手册
                    success(data) { 
                        console.log(data);
                    },
                    error(err) { 
                        console.log(err);
                    }
                });
            });
        </script>

## 6.路由级别的路由 router ##

原先代码中使用app来进行路由的匹配和分发功能，但是它有一个弊端，不方便进行模块化的封装，若项目工程比较大，这时候推荐使用路由级别的路由。express.Router()

1）定义模块路由
    const express=require('express');
    const router=express.Router();//获取一个路由实例
    
    //跟路由
    router.get('/',(req,res)=>{ 
        res.send('index页面的根路径');
    });
    //商品列表
    router.get('/goodslist',(req,res)=>{ 
        res.send('index页面商品列表');
    })
    
    module.exports=router;

注意：一定要定义完毕之后导出这个路由  
2）在入口文件中引用定义的各个路由模块

const indexRouter=require('./router/indexRouter');//引用indexRouter
    const userRouter=require('./router/userRouter');
    const goodsRouter=require('./router/googsRouter');
    
    //设置各个页面路由
    app.get('/',(req,res)=>{ 
        res.redirect('/index');//重定向到index页面
    })
    app.use('/index',indexRouter);
    app.use('/user',userRouter);
    app.use('/goods',goodsRouter);
    //...

说明：在使用路由级别的路由的时候，在入口文件中应该使用use方法（像使用中间件一样去使用路由）去使用。  
注意 ：app.use()中配置的path是一个一级路由，也就是说，对应的router中的路由均为二级甚至是三级路由  
例如：  
app.use(‘/index’,indexRouter);

访问IndexRouter中/main路由，则需要写成： /index/main