Express中间件概念

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

1.中间件（Middleware）

Middleware是一个函数，它可以访问请求对象req , 响应对象res , 和 web 应用中处理请求-响应循环流程中的中间件，一般被命名为 next 的变量。

通俗来说，中间件就是匹配路由之前和匹配路由之后做的一系列的操作。

中间件的功能包括：
●执行任何代码。
●修改请求和响应对象。
●终结请求-响应循环。
●调用堆栈中的下一个中间件。

如果我的 get、 post 回调函数中，没有 next 参数，那么就匹配上第一个路由，就不会往下匹配了。如果想往下匹配的话，那么需要写 next()。

Express 应用可使用如下几种中间件：
●应用级中间件路由级中间件
●错误处理中间件
●内置中间件
●第三方中间件

2.Get、Post 请求的参数

● GET 请求的参数在 URL 中，在原生 Node 中，需要使用 url 模块来识别参数字符串。在Express 中，不需要使用 url 模块了。可以直接使用 req.query 对象。

● POST 请求在 express 中不能直接获得，可以使用 body-parser 模块。使用后，将可以用req.body 得到参数。但是如果表单中含有文件上传，那么还需要使用 formidable或者multiparty模块。

3.body-parser与cors中间件

body-parser用于从post请求中获取信息。
cors用于处理跨域问题。

安装：
npm install --save body-parser cors

引入和配置：

var bodyParser = require('body-parser');
var cors = require('cors');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(cors());

客户端写个简单的表单：

<form action="http://127.0.0.1:8000/login" method="post">
        username:<input type="text" name="username"><br>
        password:<input type="password" name="password"><br>
        <input type="submit" value="login">
</form>

image.png

处理post请求：

app.post('/login',function (req,res) {
    res.send(req.body);
});

image.png

4.multiparty模块，既可以获取form表单的数据也可以实现上传图片

npm install multiparty

var multiparty = require('multiparty');
  app.use(express.static('upload'));


app.post('/picture',function(req,res){

    // 获取表单的数据 以及post过来的图片

    var form = new multiparty.Form();
    form.uploadDir = 'upload'   //上传图片保存的地址  目录必须真实存在


    form.parse(req, function(err, fields, files) {
        console.log(fields);    /*fields：表单的文本信息*/
        console.log(files);     /*files：表单的图片信息*/
    }
    res.end()
})

写个表单：

<form action="/picture" method="post" enctype="multipart/form-data">
        <ul>
            <li>  商品名称: <input type="text" name="title"/></li>
            <li>  商品图片: <input type="file" name="pic"/></li>
            <li>  商品价格: <input type="text" name="price"/></li>
            <li>  商品邮费: <input type="text" name="fee"/></li>
            <li>
                商品描述:<br>
                <textarea name="description" id="" cols="60" rows="8"></textarea>
            </li>
            <li>
                <br/>
                <button type="submit">提交</button>
            </li>
        </ul>
    </form>

HTML <form> 标签的 enctype 属性:

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

application/x-www-form-urlencoded：表单数据默认编码。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。

multipart/form-data：
不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

text/plain：空格转换为 "+" 加号，但不对特殊字符编码。

image.png

将图片信息存到数据库：

app.post('/picture',function(req,res){

    var form = new multiparty.Form();
    form.uploadDir='upload'   //上传图片保存的地址  目录必须存在
    form.parse(req, function(err, fields, files) {

        var title = fields.title[0],
            price = fields.price[0],
            fee = fields.fee[0],
            description = fields.description[0],
            pic = files.pic[0].path;

        DB.insertOne('product','productlist',{
            title:title,
            price:price,
            fee:fee,
            description:description,
            pic:pic
        },function(err,data) {
            if(!err){
                res.redirect('/product'); //上传成功跳转到商品列表
            } else {
                res.send(err);
            }
        })
    });
})

图片路径（例："upload\hcCV2k2spI6sVxvemROAcDK2.png"）是相对服务器路由的，而不是文件系统，直接访问图片路径则获取不到。所以给图片配置一下虚拟路由：
app.use('/upload',express.static('upload'));

5.express-ws中间件处理websocket请求：

①最早的处理：
https://www.cnblogs.com/hustskyking/p/websocket-with-node.html

②封装好的：
https://www.npmjs.com/package/express-ws

③socket.io

Express中间件概念

1.中间件（Middleware）

2.Get、Post 请求的参数

3.body-parser与cors中间件

4.multiparty模块，既可以获取form表单的数据 也可以实现上传图片

HTML <form> 标签的 enctype 属性:

5.express-ws中间件处理websocket请求：

4.multiparty模块，既可以获取form表单的数据也可以实现上传图片