入门案例
在浏览器中输入 http://localhost:8080/index.html 打开一个页面。这个 index.html 页面位于服务器上 assets 目录下。
const path = require("path");
const express = require("express");
const app = express();
app.use(express.static(path.join(__dirname, "assets")));
app.listen(8080, 'localhost', function() {
console.log('server is running on 8080');
});
复制代码
问题:既然是访问 assets 目录下的 index.html 文件。为什么访问方式不是http://localhost:8080/assets/index.html
,而是http://localhost:8080/index.html
。这就牵涉到 express.static。
express.static 的工作原理
在 express 官方文档中,明确指出 express.static 是一个中间件函数。它的作用是服务于静态文件,它是基于 serve-static
。
exports.static = require('serve-static');
复制代码
所以想知道 express.static 的详细使用方法,可以参考 serve-static 中间件。app.use(express.static(path.join(__dirname, "assets")))
这段代码的含义是:任何路由都首先当成对静态资源的访问,如果 url 路径和 assets 目录下的某个文件匹配,那么直接返回这个资源。没有没有任何一项匹配,那么请求就当成动态资源请求。走路由表的逻辑。因此客户端对服务器的任何请求,首先都看出静态资源请求,当没有找到匹配的静态资源文件时,请求被视为动态资源请求。动态资源请求走路由逻辑。
设置多个静态资源目录
如果静态资源目录不止一个呢,如何处理?多指定几个目录作为静态资源目录就可以啦。
app.use(express.static(path.join(__dirname, "assets")));
app.use(express.static(path.join(__dirname, "public")));
复制代码
当在浏览器中输入http://localhost:8080/index.html
时,首先去 assets 目录下寻找 index.html 文件,如果找到,直接返回,不用往下执行。如果没有找到,再去 public 目录下寻找。 归纳:静态资源目录的优先级和它定义的位置成正相关。
虚拟路径
对服务器的资源请求可以分为静态资源请求和动态资源请求。当用户在浏览器中输入http://localhost:8080/users
时,从字面上是无法区分这个一个静态资源请求还是动态资源请求。它可能是 一个获取所有用户信息的 get 请求方法,它也有可能是一个获取 http://localhost:8080/users.html
的 静态资源请求。为了从字面上进行区分,可以将所有的静态资源请求都添加一个前缀,比如 /static。这里的 /static 就是虚拟路径,它只存在于逻辑层面,物理层面并不存在。因此,当访问 http://localhost:8080/static/users 时,一看便知这是一个静态资源请求。