Express中间件概念

2018-01-19  本文已影响0人  ceido

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 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

上一篇 下一篇

猜你喜欢

热点阅读