----由于刚刚接触vue，使用过程中也是绕了很多圈子，难受。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小编。

express.js中间件说明详解

express的新开发人员往往对路由处理程序和中间件之间的区别感到困惑。因此他们也对app.use(),app.all(),app.get(),app.post(),app.delete()和app.put()方法的区别感到困惑。

在本文中,我将解释中间件和路由处理程序之间的区别。以及如何正确使用app.use(),app.all(),app.get(),app.post(),app.delete()和app.put()方法。

路由处理

app.use(),app.all(),app.get(),app.post(),app.delete()和app.put()全部是用来定义路由的。这些方法都用于定义路由。路由用于处理HTTP请求。路由是路径和回调的组合，在请求的路径匹配时执行。回调被称为路由处理程序。

它们之间的区别是处理不同类型的HTTP请求。例如： app.get()方法仅仅处理get请求，而app.all()处理GET、POST等请求。

下面是一个例子,如何定义一个路由：

var app = require("express")();

app.get("/", function(req, res, next){
  res.send("Hello World!!!!");
});

app.listen(8080);

每个路由处理程序都获得对当前正在提供的HTTP请求的请求和响应对象的引用。

可以为单个HTTP请求执行多个路由处理程序。这是一个例子：

var app = require("express")();

app.get("/", function(req, res, next){
  res.write("Hello");
  next();
});

app.get("/", function(req, res, next){
  res.write(" World !!!");
  res.end();
});

app.listen(8080);

这里第一个句柄写入一些响应，然后调用next()。 next()方法用于调用与路径路径匹配的下一个路由处理程序。

路由处理程序必须结束请求或调用下一个路由处理程序。

我们还可以将多个路由处理程序传递给app.all()，app.get()，app.post()，app.delete()和app.put()方法。

这是一个证明这一点的例子：

var app = require("express")();

app.get("/", function(req, res, next){
  res.write("Hello");
  next();
}, function(req, res, next){
  res.write(" World !!!");
  res.end();
});

app.listen(8080);

中间件

中间件是一个位于实际请求处理程序之上的回调。它采用与路由处理程序相同的参数。

要了解中间件，我们来看一个带有dashboard和profile页面的示例站点。要访问这些页面，用户必须登录。还会记录对这些页面的请求。

以下是这些页面的路由处理程序的代码：

var app = require("express")();

function checkLogin(){
  return false;
}

function logRequest(){
  console.log("New request");
}

app.get("/dashboard", function(req, res, next){

  logRequest();

  if(checkLogin()){
    res.send("This is the dashboard page");
  }
  else{
    res.send("You are not logged in!!!");
  }
});

app.get("/profile", function(req, res, next){

  logRequest();

  if(checkLogin()){
    res.send("This is the dashboard page");
  }
  else{
    res.send("You are not logged in!!!");
  }
});

app.listen(8080);

这里的问题是有很多重复的代码，即我们不得不多次使用logRequest()和checkLogin()函数。这也使得更新代码变得困难。因此，为了解决这个问题，我们可以为这两条路径编写一条通用路径。

这是重写的代码：

var app = require("express")();

function checkLogin(){
  return false;
}

function logRequest(){
  console.log("New request");
}

app.get("/*", function(req, res, next){
  logRequest();
  next();
})

app.get("/*", function(req, res, next){
  if(checkLogin()){
    next();
  }
  else{
    res("You are not logged in!!!");
  }
})

app.get("/dashboard", function(req, res, next){
  res.send("This is the dashboard page");
});

app.get("/profile", function(req, res, next){
  res.send("This is the dashboard page");
});

app.listen(8080);

这里的代码看起来更清晰，更易于维护和更新。这里将前两个定义的路由处理程序称为中间件，因为它们不处理请求，而是负责预处理请求。

Express为我们提供了app.use()方法，该方法专门用于定义中间件。 app.use()方法可能看起来与app.all()类似，但它们之间存在很多差异，这使得app.use()非常适合于声明中间件。让我们看看app.use()方法是如何工作的：

app.use() 和 app.all() 的不同:

CALLBACK

app.use()只需要一个回调，而app.all()可以进行多次回调。

PATH

app.use()只查看url是否以指定路径开头,app.all()匹配完整路径。

这里有一个例子来说明:

app.use( "/product" , mymiddleware);
// will match /product
// will match /product/cool
// will match /product/foo

app.all( "/product" , handler);
// will match /product
// won''t match /product/cool  <-- important
// won''t match /product/foo  <-- important

app.all( "/product/*" , handler);
// won''t match /product    <-- Important
// will match /product/cool
// will match /product/foo

NEXT()

中间件内的next()调用下一个中间件或路由处理程序，具体取决于接下来声明的那个。但是路由处理程序中的next()仅调用下一个路由处理程序。如果接下来有中间件，则跳过它。因此，必须在所有路由处理程序之前声明中间件。

这里有一个例子来说明:

var express = require(''express'');
var app = express();

app.use(function frontControllerMiddlewareExecuted(req, res, next){
 console.log(''(1) this frontControllerMiddlewareExecuted is executed'');
 next();
});

app.all(''*'', function(req, res, next){
 console.log(''(2) route middleware for all method and path pattern "*", executed first and can do stuff before going next'');
 next();
});

app.all(''/hello'', function(req, res, next){
 console.log(''(3) route middleware for all method and path pattern "/hello", executed second and can do stuff before going next'');
 next();
});

app.use(function frontControllerMiddlewareNotExecuted(req, res, next){
 console.log(''(4) this frontControllerMiddlewareNotExecuted is not executed'');
 next();
});

app.get(''/hello'', function(req, res){
 console.log(''(5) route middleware for method GET and path patter "/hello", executed last and I do my stuff sending response'');
 res.send(''Hello World'');
});

app.listen(80);

现在我们看到了app.use()方法的唯一性以及它用于声明中间件的原因。

让我们重写我们的示例站点代码：

var app = require("express")();

function checkLogin(){
  return false;
}

function logRequest(){
  console.log("New request");
}

app.use(function(req, res, next){
  logRequest();
  next();
})

app.use(function(req, res, next){

  if(checkLogin()){
    next();
  }
  else{
    res.send("You are not logged in!!!");
  }
})

app.get("/dashboard", function(req, res, next){
  res.send("This is the dashboard page");
});

app.get("/profile", function(req, res, next){
  res.send("This is the dashboard page");
});

app.listen(8080);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

express_webpack自动刷新

现在，webpack可以说是最流行的模块加载器（module bundler）。一方面，它为前端静态资源的组织和管理提供了相对较完善的解决方案，另一方面，它也很大程度上改变了前端开发的工作流程。在应用了webpack的开发流程中，想要继续“自动刷新”的爽快体验，就可能得额外做一些事情。

webpack与自动刷新

本文并不打算介绍webpack，如果你还不清楚它是什么，推荐阅读下面几篇入门文章：

• Beginner’s guide to Webpack

• Developing with Webpack

• webpack-howto

webpack要求静态资源在被真正拿来访问之前，都要先完成一次编译，即运行完成一次webpack命令。因此，自动刷新需要调整到适当的时间点。也就是说，修改了css等源码并保存后，应该先触发一次webpack编译，在编译完成后，再通知浏览器去刷新。

开发Express项目的问题

现在有这样的一个应用了webpack的Express项目，目录结构如下：

其中，client内是前端的静态资源文件，比如css、图片以及浏览器内使用的javascript。server内是后端的文件，比如express的routes、views以及其他用node执行的javascript。根目录的app.js，就是启动express的入口文件了。

开发的时候我们会怎样做呢？

先启动Express服务器，然后在浏览器中打开某个页面，接下来再编辑源文件。那么，问题就来了，比如我编辑.scss源文件，即使我只改了一小点，我也得在命令行里输入webpack等它编译完，然后再切到浏览器里按一下F5，才能看到修改后的效果。

再比如，我修改了routes里的.js文件想看看结果，我需要到命令行里重启一次Express服务器，然后同样切到浏览器里按一下F5。

这可真是太费事了。

所以，我们要让开发过程愉快起来。

改进目标

我们希望的Express&Webpack项目的开发过程是：

• 如果修改的是client里的css文件（包括.scss等），保存后，浏览器不会整页刷新，新的样式效果直接更新到页面内。

• 如果修改的是client里的javascript文件，保存后，浏览器会自动整页刷新，得到更新后的效果。

• 如果修改的是server里的文件，保存后，服务器将自动重启，浏览器会在服务器重启完毕后自动刷新。

经过多次尝试，我最终得到了一个实现了以上这些目标的项目配置。接下来，本文将说明这个配置是如何做出来的。

从webpack-dev-server开始

首先，webpack已经想到了开发流程中的自动刷新，这就是webpack-dev-server。它是一个静态资源服务器，只用于开发环境。

一般来说，对于纯前端的项目（全部由静态html文件组成），简单地在项目根目录运行webpack-dev-server，然后打开html，修改任意关联的源文件并保存，webpack编译就会运行，并在运行完成后通知浏览器刷新。

和直接在命令行里运行webpack不同的是，webpack-dev-server会把编译后的静态文件全部保存在内存里，而不会写入到文件目录内。这样，少了那个每次都在变的webpack输出目录，会不会觉得更清爽呢？

如果在请求某个静态资源的时候，webpack编译还没有运行完毕，webpack-dev-server不会让这个请求失败，而是会一直阻塞它，直到webpack编译完毕。这个对应的效果是，如果你在不恰当的时候刷新了页面，不会看到错误，而是会在等待一段时间后重新看到正常的页面，就好像“网速很慢”。

webpack-dev-server的功能看上去就是我们需要的，但如何把它加入到包含后端服务器的Express项目里呢？

webpack-dev-middleware和webpack-hot-middleware

Express本质是一系列middleware的集合，因此，适合Express的webpack开发工具是webpack-dev-middleware和webpack-hot-middleware。

webpack-dev-middleware是一个处理静态资源的middleware。前面说的webpack-dev-server，实际上是一个小型Express服务器，它也是用webpack-dev-middleware来处理webpack编译后的输出。

webpack-hot-middleware是一个结合webpack-dev-middleware使用的middleware，它可以实现浏览器的无刷新更新（hot reload）。这也是webpack文档里常说的HMR（Hot Module Replacement）。

参考webpack-hot-middleware的文档和示例，我们把这2个middleware添加到Express中。

webpack配置文件部分

首先，修改webpack的配置文件（为了方便查看，这里贴出了webpack.config.js的全部代码）：

var webpack = require(''webpack'');
var path = require(''path''); var publicPath = ''http://localhost:3000/''; var hotMiddlewareScript = ''webpack-hot-middleware/client?reload=true''; var devConfig = { entry: { page1: [''./client/page1'', hotMiddlewareScript], page2: [''./client/page2'', hotMiddlewareScript] }, output: { filename: ''./[name]/bundle.js'', path: path.resolve(''./public''), publicPath: publicPath }, devtool: ''source-map'', module: { loaders: [{ test: /\.(png|jpg)$/, loader: ''url?limit=8192&context=client&name=[path][name].[ext]'' }, { test: /\.scss$/, loader: ''style!css?sourceMap!resolve-url!sass?sourceMap'' }] }, plugins: [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ] }; module.exports = devConfig; 

这是一个包含多个entry的较复杂的例子。其中和webpack-hot-middleware有关的有两处。一是plugins的位置，增加3个插件，二是entry的位置，每一个entry后都增加一个hotMiddlewareScript。

hotMiddlewareScript的值是webpack-hot-middleware/client?reload=true，其中?后的内容相当于为webpack-hot-middleware设置参数，这里reload=true的意思是，如果碰到不能hot reload的情况，就整页刷新。

在这个配置文件中，还有一个要点是publicPath不是/这样的值，而是http://localhost:3000/这样的绝对地址。这是因为，在使用?sourceMap的时候，style-loader会把css的引入做成这样：

这种blob的形式可能会使得css里的url()引用的图片失效，因此建议用带http的绝对地址（这也只有开发环境会用到）。有关这个问题的详情，你可以查看github上的issue。

Express启动文件部分

接下来是Express启动文件内添加以下代码：

var webpack = require(''webpack''),
    webpackDevMiddleware = require(''webpack-dev-middleware''), webpackHotMiddleware = require(''webpack-hot-middleware''), webpackDevConfig = require(''./webpack.config.js''); var compiler = webpack(webpackDevConfig); // attach to the compiler & the server app.use(webpackDevMiddleware(compiler, { // public path should be the same with webpack config publicPath: webpackDevConfig.output.publicPath, noInfo: true, stats: { colors: true } })); app.use(webpackHotMiddleware(compiler)); 

以上这段代码应该位于Express的routes代码之前。其中，webpack-dev-middleware配置的publicPath应该和webpack配置文件里的一致。

webpack-dev-middleware和webpack-hot-middleware的静态资源服务只用于开发环境。到了线上环境，应该使用express.static()。

到此，client部分的目标就完成了。现在到网页里打开控制台，应该可以看到[HMR] connected的提示。这个项目中我只要求css使用HMR，如果你希望javascript也使用HMR，一个简单的做法是在entry文件内添加以下代码：

if(module.hot) {
    module.hot.accept(); } 

这样，与这个entry相关的所有.js文件都会使用hot reload的形式。关于这一点的更多详情，请参考hot module replacement。

接下来是server部分。

reload和supervisor

server部分的自动刷新，会面临一个问题：自动刷新的消息通知依靠的是浏览器和服务器之间的web socket连接，但在server部分修改代码的话，一般都要重启服务器来使变更生效（比如修改routes），这就会断开web socket连接。

所以，这需要一个变通的策略：浏览器这边增加一个对web socket断开的处理，如果web socket断开，则开启一个稍长于服务器重启时间的定时任务（setTimeout），相当于等到服务器重启完毕后，再进行一次整页刷新。

reload是一个应用此策略的组件，它可以帮我们处理服务器重启时的浏览器刷新。

现在，还差一个监听server文件，如果有变更就重启服务器的组件。参考reload的推荐，我们选用supervisor。

下面将reload和supervisor引入到Express项目内。

监听文件以重启服务器

通过以下代码安装supervisor（是的，必须-g）：

npm install supervisor -g

然后，在package.json里设置新的scripts：

"scripts": {
    "start": "cross-env NODE_ENV=dev supervisor -i client app"
}

这里的主要变化是从node app改为supervisor -i client app。其中-i等于--ignore，这里表示忽略client，显然，我们可不希望在改前端代码的时候服务器也重启。

这里的cross-env也是一个npm组件，它可以处理windows和其他Unix系统在设置环境变量的写法上不一致的问题。

把会重启的服务器和浏览器关联起来

把Express启动文件最后的部分做这样的修改：

var reload = require(''reload'');
var http = require(''http''); var server = http.createServer(app); reload(server, app); server.listen(3000, function(){ console.log(''App (dev) is now running on port 3000!''); }); 

Express启动文件的最后一般是app.listen()。参照reload的说明，需要这样用http再增加一层服务。

然后，再到Express的视图文件views里，在底部增加一个<script>：

<% if (env !== "production") { %> <script src="/reload/reload.js"></script> <% } %> 

所有的views都需要这样一段代码，因此最好借助模板引擎用include或extends的方式添加到公共位置。

这里的reload.js和前面webpack的开发环境bundle.js并不冲突，它们一个负责前端源文件变更后进行编译和刷新，另一个负责在服务器发生重启时触发延时刷新。

到此，server也完成了。现在，修改项目内的任意源文件，按下ctrl + s，浏览器里的页面都会对应地做一次“适当”的刷新。

完整示例

完整示例已经提交到github：express-webpack-full-live-reload-example

效果如下：

附加的可选方案

前面说的server部分，分为views和routes，如果只修改views，那么服务器并不需要重启，直接刷新浏览器就可以了。

针对这样的开发情景，可以把views文件的修改刷新变得更快。这时候我们不用reload和supervisor，改为用browsersync，在Express的启动文件内做如下修改：

var bs = require(''browser-sync'').create();
app.listen(3000, function(){ bs.init({ open: false, ui: false, notify: false, proxy: ''localhost:3000'', files: [''./server/views/**''], port: 8080 }); console.log(''App (dev) is going to be running on port 8080 (by browsersync).''); }); 

然后，使用browsersync提供的新的访问地址就可以了。这样，修改views（html）的时候，由browsersync帮忙直接刷新，修改css和javascript的时候继续由webpack的middleware来执行编译和刷新。

转载：https://segmentfault.com/a/1190000004505747

express中间件

  var offset = 0;
  var path = ''/'';

  // default path to ''/''
  // disambiguate app.use([fn])
  if (typeof fn !== ''function'') {
    var arg = fn;

    while (Array.isArray(arg) && arg.length !== 0) {
      arg = arg[0];
    }

    // first arg is the path
    if (typeof arg !== ''function'') {
      offset = 1;
      path = fn;
    }
  }

  var fns = flatten(slice.call(arguments, offset));

  if (fns.length === 0) {
    throw new TypeError(''app.use() requires a middleware function'')
  }

app.use(''/users'', usersRouter);
app.use([function (req, res, next) {
  console.log(''middleware 1....'');
  next();
}, function (req, res, next) {
  console.log(''middleWare 2....'');
  next();
}])
// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next();
  next(createError(404));
});

  // setup router
  this.lazyrouter();
  var router = this._router;

  fns.forEach(function (fn) {
    // non-express app
    if (!fn || !fn.handle || !fn.set) {
      return router.use(path, fn);
    }

    debug(''.use app under %s'', path);
    fn.mountpath = path;
    fn.parent = this;

    // restore .app property on req and res
    router.use(path, function mounted_app(req, res, next) {
      var orig = req.app;
      fn.handle(req, res, function (err) {
        setPrototypeOf(req, orig.request)
        setPrototypeOf(res, orig.response)
        next(err);
      });
    });

    // mounted an app
    fn.emit(''mount'', this);
  }, this);

app.lazyrouter = function lazyrouter() {
  if (!this._router) {
    this._router = new Router({
      caseSensitive: this.enabled(''case sensitive routing''),
      strict: this.enabled(''strict routing'')
    });

    this._router.use(query(this.get(''query parser fn'')));
    this._router.use(middleware.init(this));
  }
};

var proto = module.exports = function(options) {
  var opts = options || {};

  function router(req, res, next) {
    router.handle(req, res, next);
  }

  // mixin Router class functions
  setPrototypeOf(router, proto)

  router.params = {};
  router._params = [];
  router.caseSensitive = opts.caseSensitive;
  router.mergeParams = opts.mergeParams;
  router.strict = opts.strict;
  router.stack = [];

  return router;
};

  var offset = 0;
  var path = ''/'';

  // default path to ''/''
  // disambiguate router.use([fn])
  if (typeof fn !== ''function'') {
    var arg = fn;

    while (Array.isArray(arg) && arg.length !== 0) {
      arg = arg[0];
    }

    // first arg is the path
    if (typeof arg !== ''function'') {
      offset = 1;
      path = fn;
    }
  }

  var callbacks = flatten(slice.call(arguments, offset));

  for (var i = 0; i < callbacks.length; i++) {
    var fn = callbacks[i];

    if (typeof fn !== ''function'') {
      throw new TypeError(''Router.use() requires a middleware function but got a '' + gettype(fn))
    }

    // add the middleware
    debug(''use %o %s'', path, fn.name || ''<anonymous>'')

    var layer = new Layer(path, {
      sensitive: this.caseSensitive,
      strict: false,
      end: false
    }, fn);

    layer.route = undefined;

    this.stack.push(layer);
  }

function Layer(path, options, fn) {
  if (!(this instanceof Layer)) {
    return new Layer(path, options, fn);
  }

  debug(''new %o'', path)
  var opts = options || {};

  this.handle = fn;
  this.name = fn.name || ''<anonymous>'';
  this.params = undefined;
  this.path = undefined;
  this.regexp = pathRegexp(path, this.keys = [], opts);

  // set fast path flags
  this.regexp.fast_star = path === ''*''
  this.regexp.fast_slash = path === ''/'' && opts.end === false
}

proto.handle = function handle(req, res, out) {
  var self = this;
  var idx = 0;
  // middleware and routes
  var stack = self.stack;
  req.next = next;
  next();
  function next(err) {
    var layer;
    var match;
    var route;
    // 找到match的layer
    while (match !== true && idx < stack.length) {
      layer = stack[idx++];
      match = matchLayer(layer, path);
      route = layer.route;
      if (match !== true) {
        continue;
      }
      if (!route) {
        // process non-route handlers normally
        continue;
      }
    }
    // this should be done for the layer
    self.process_params(layer, paramcalled, req, res, function (err) {
      if (err) {
        return next(layerError || err);
      }

      if (route) {
        // 执行layer的handle_request方法，其实就是中间件传入的函数
        return layer.handle_request(req, res, next);
      }

      trim_prefix(layer, layerError, layerPath, path);
    });

    if (this.regexp.fast_slash) {
      this.params = {}
      this.path = ''''
      return true
    }
    --------------------
    this.regexp.fast_slash = path === ''/'' && opts.end === false

app.use(''/'', function (req, res, next) {
  console.log(''hello world'');
  next()
});
app.use(''/users'', function (req, res, next) {
  console.log(''/users-------'');
  next();
});
//hello world
// /users-------
//GET /users 304 1.280 ms - -