代码不提供公共文件夹中的静态html文件

Question

探索快递框架。 学习了express.static中间件，但它没有按我期望的方式运行。

码：

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

app.use((req, res, next) =>{
    express.static('public');
    next();
}); 

app.use((req, res) => {
  console.log("Starting first middleware");
});

app.listen(3000);

上面的代码无法在publlic文件夹中提供我的静态html文件。 公用文件夹与此JS文件位于同一目录，例如，当我使用URL http：// localhost：3000 / home.html尝试访问公用文件夹中的home.html文件时，我无法访问它。

当我切换express.static最后的顺序时，它确实在公共文件夹中提供了我的静态html文件。

码：

app.use((req, res, next) => {
  console.log("Starting first middleware");
  next();
});

app.use(express.static('public'));

题：

为什么我的第一个代码示例中的应用程序不提供静态文件？

Answer 1

express.static是一个函数，它返回另一个函数（中间件），而Express中间件需要2或3个参数（req，res [，next]）。

用作回调时，如下所示：

app.use(express.static('public'));

您无需显式为其提供参数，因为app.use会为您提供参数。

但是，当您自己使用它时，需要使用其参数显式调用该函数：

app.use((req, res, next) =>{
    express.static('public')(req, res, next);
    next();
});

在第一个示例中，您正在生成中间件，但没有执行它。

Answer 2

两个摘要之间存在根本差异。 您会看到第一个基本上是在声明的中间件的回调函数中调用带有参数'public'的函数express.static的，这只会返回一个不会在下一个中间件中使用的函数，因为没有参数传递给该函数。 req对象应该传递给它。 但是，在第二个函数中，它将返回一个可以使用req对象的函数，该对象通常与app.use中的res一起传递。 看一下“静态”函数的一些源代码，以了解一个想法：

 function serveStatic (root, options) {
  if (!root) {
    throw new TypeError('root path required')
  }

  if (typeof root !== 'string') {
    throw new TypeError('root path must be a string')
  }

  // copy options object
  var opts = Object.create(options || null)

  // fall-though
  var fallthrough = opts.fallthrough !== false

  // default redirect
  var redirect = opts.redirect !== false

  // headers listener
  var setHeaders = opts.setHeaders

  if (setHeaders && typeof setHeaders !== 'function') {
    throw new TypeError('option setHeaders must be function')
  }

  // setup options for send
  opts.maxage = opts.maxage || opts.maxAge || 0
  opts.root = resolve(root)

  // construct directory listener
  var onDirectory = redirect
    ? createRedirectDirectoryListener()
    : createNotFoundDirectoryListener()

  return function serveStatic (req, res, next) { // the funciton returned
    if (req.method !== 'GET' && req.method !== 'HEAD') {
      if (fallthrough) {
        return next()
      }

      // method not allowed
      res.statusCode = 405
      res.setHeader('Allow', 'GET, HEAD')
      res.setHeader('Content-Length', '0')
      res.end()
      return
    }

    var forwardError = !fallthrough
    var originalUrl = parseUrl.original(req)
    var path = parseUrl(req).pathname

    // make sure redirect occurs at mount
    if (path === '/' && originalUrl.pathname.substr(-1) !== '/') {
      path = ''
    }

    // create send stream
    var stream = send(req, path, opts)
    //rest of code...