vue-cli脚手架+webpack结合的时候,后台用的是express框架搭建的简单服务器,包括热加载等等,都用到了express中的中间件概念。
代码大概如下:
// handle fallback for HTML5 history API app.use(require('connect-history-api-fallback')()) // serve webpack bundle output app.use(devMiddleware) // enable hot-reload and state-preserving // compilation error display app.use(hotMiddleware) // serve pure static assets var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) app.use(staticPath, express.static('./static'))上述的app.use()就是用中间件
从官方网站摘抄的笔记。
中间件(Middleware)是一个函数,它可以访问请求对象,响应对象,和web应用中处于请求-响应循环中的中间件,一般被命名为next的变量。
中间件的功能包括:
执行任何代码修改请求和响应对象终结请求响应循环调用堆栈中的下一个中间件如果当前中间件没有终结请求-响应循环,则必须调用next()方法将控制权交给下一个中间件,否则请求就会挂起。
Express应用可使用如下几种中间件:
应用级中间件路由级中间件错误处理中间件内置中间件第三方中间件使用可选择挂载路径,可在应用级别或路由级别装载中间件。另外,还可以同时装在一系列中间件函数,从而在一个挂载点上创建一个子中间件栈。
应用级中间件绑定到 app 对象 使用 app.use() 和 app.METHOD(), 其中, METHOD 是需要处理的 HTTP 请求的方法,例如 GET, PUT, POST 等等,全部小写。
例子
var app = express(); // 没有挂载路径的中间件,应用的每个请求都会执行该中间件 app.use(function (req, res, next) { console.log('Time:', Date.now()); next(); }); // 挂载至 /user/:id 的中间件,任何指向 /user/:id 的请求都会执行它 app.use('/user/:id', function (req, res, next) { console.log('Request Type:', req.method); next(); }); // 路由和句柄函数(中间件系统),处理指向 /user/:id 的 GET 请求 app.get('/user/:id', function (req, res, next) { res.send('USER'); });下面这个例子展示了在一个挂载点装载一组中间件。
// 一个中间件栈,对任何指向 /user/:id 的 HTTP 请求打印出相关信息 app.use('/user/:id', function(req, res, next) { console.log('Request URL:', req.originalUrl); next(); }, function (req, res, next) { console.log('Request Type:', req.method); next(); });作为中间件系统的路由句柄,使得为路径定义多个路由成为可能。在下面的例子中,为指向 /user/:id 的 GET 请求定义了两个路由。第二个路由虽然不会带来任何问题,但却永远不会被调用,因为第一个路由已经终止了请求-响应循环。
// 一个中间件栈,处理指向 /user/:id 的 GET 请求 app.get('/user/:id', function (req, res, next) { console.log('ID:', req.params.id); next(); }, function (req, res, next) { res.send('User Info'); }); // 处理 /user/:id, 打印出用户 id app.get('/user/:id', function (req, res, next) { res.end(req.params.id); });如果需要在中间件栈中跳过剩余中间件,调用 next(‘route’) 方法将控制权交给下一个路由。 注意: next(‘route’) 只对使用 app.VERB() 或 router.VERB() 加载的中间件有效。
// 一个中间件栈,处理指向 /user/:id 的 GET 请求 app.get('/user/:id', function (req, res, next) { // 如果 user id 为 0, 跳到下一个路由 if (req.params.id == 0) next('route'); // 否则将控制权交给栈中下一个中间件 else next(); // }, function (req, res, next) { // 渲染常规页面 res.render('regular'); }); // 处理 /user/:id, 渲染一个特殊页面 app.get('/user/:id', function (req, res, next) { res.render('special'); });路由级中间件和应用级中间件一样,只是它绑定的对象为 express.Router()。
var router = express.Router();路由级使用 router.use() 或 router.VERB() 加载。
上述在应用级创建的中间件系统,可通过如下代码改写为路由级:
var app = express(); var router = express.Router(); // 没有挂载路径的中间件,通过该路由的每个请求都会执行该中间件 router.use(function (req, res, next) { console.log('Time:', Date.now()); next(); }); // 一个中间件栈,显示任何指向 /user/:id 的 HTTP 请求的信息 router.use('/user/:id', function(req, res, next) { console.log('Request URL:', req.originalUrl); next(); }, function (req, res, next) { console.log('Request Type:', req.method); next(); }); // 一个中间件栈,处理指向 /user/:id 的 GET 请求 router.get('/user/:id', function (req, res, next) { // 如果 user id 为 0, 跳到下一个路由 if (req.params.id == 0) next('route'); // 负责将控制权交给栈中下一个中间件 else next(); // }, function (req, res, next) { // 渲染常规页面 res.render('regular'); }); // 处理 /user/:id, 渲染一个特殊页面 router.get('/user/:id', function (req, res, next) { console.log(req.params.id); res.render('special'); }); // 将路由挂载至应用 app.use('/', router);错误处理中间件和其他中间件定义类似,只是要使用 4 个参数,而不是 3 个,其签名如下: (err, req, res, next)。
app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send('Something broke!'); });express.static(root, [options])
参数root指提供静态资源的根目录。 可选的options参数拥有如下属性。
属性描述类型缺省值dotfiles是否对外输出文件名以点(.)开头的文件。可选值为 “allow”、“deny” 和 “ignore”String“ignore”etag是否启用 etag 生成Booleantrueextensions设置文件扩展名备份选项Array[]index发送目录索引文件,设置为 false 禁用目录索引。Mixed“index.html”lastModified设置 Last-Modified 头为文件在操作系统上的最后修改日期。可能值为 true 或 false。BooleantruemaxAge以毫秒或者其字符串格式设置 Cache-Control 头的 max-age 属性。Number0redirect当路径为目录时,重定向至 “/”。BooleantruesetHeaders设置 HTTP 头以提供文件的函数。Function var options = { dotfiles: 'ignore', etag: false, extensions: ['htm', 'html'], index: false, maxAge: '1d', redirect: false, setHeaders: function (res, path, stat) { res.set('x-timestamp', Date.now()); } } app.use(express.static('public', options));通过使用第三方中间件从而为 Express 应用增加更多功能。
安装所需功能的 node 模块,并在应用中加载,可以在应用级加载,也可以在路由级加载。
下面的例子安装并加载了一个解析 cookie 的中间件: cookie-parser。
$ npm install cookie-parser var express = require('express'); var app = express(); var cookieParser = require('cookie-parser'); // 加载用于解析 cookie 的中间件 app.use(cookieParser());http://www.expressjs.com.cn/guide/using-middleware.html