node/静态路由/express框架中的express.static()和app.use()

此篇文章转载于

express框架中的express.static()和app.use()

Express框架在使用app.use中传入express.static设置静态路由时，这个文件夹下的所有文件夹和文件都会变成路由文件，也就是说当在URL输入该路径时，会直接捕捉到该请求。

在使用express框架的时候，我们会遇到设置静态文件目录，代码如下

//将静态文锦啊目录设置为：项目根目录+/public
app.use(express.static(__dirname +"/public"))
app.use(express.static(path.join(__dirname,"public")))

那么，什么是静态文件资源？以及express是怎么利用这句话来设置静态目录的

静态资源文件

可以理解成，对于不同的用户来说，内容都不会变化的文件，他们所接受看到的图片，css，前端js文件都是一样的，我们称这类文件为静态资源文件。这些都是前端开发完给到后端的

动态资源文件

而张三李四登录百度，百度会分别对他们显示”你好张三”、”你好李四”，那么负责这么动态逻辑的文件就是动态文件了，根据你使用的技术不同，动态文件可能是.jsp文件、php文件或者我们node.js的服务器端js文件。

app.use()

将指定的一个或多个中间件函数安装在指定的路径上：当所请求路径的基数匹配时，将执行中间件函数path

可以理解为 app.use是用来给path注册中间函数的，这个path的默认是 /， 也就是处理用户的任何url请求。同时会处理path下的子路径：

比如设置path为“/hello” 那么当请求路径为“/hello/” “/hello/nihao”等等这样的请求，都会交给中间函数处理的。

于是我们现在知道了app.use(express.static(__dirname + ‘/public’))是将所有的请求，先交给express.static(__dirname + ‘/public’)来处理一下。express.static()的返回值肯定是一个函数

express.static()

为了提供对静态资源文件（图片，css，js）的服务。一般用Express内置的中间函数express。static

传递一个包含静态资源的目录给express.static中间件用于立刻开始提供文件。比如如下代码来提供public目录下的图片，css，js文件

app.use(express.static("public"))

express会在静态资源目录下查找文件，所以不需要把静态目录public作为url的一部分。

现在可以加载public目录下的文件了

http://localhost:3000/hello.html
http://localhost:3000/images/1.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/index.js

可以多次使用express.static添加多个静态资源目录，express会按照目录的顺序查找静态资源文件

app.use(express.static("static"))
app.use(express.static("public"))

为了给静态资源文件创建一个虚拟的文件前缀（实际文件系统中并不存在），可以使用express.static函数指定一个虚拟的静态目录，就像下面

app.use("/static", express.static("public"))

现在可以用/static作为前缀来加载public文件夹下的子文件了

http://localhost:3000/static/hello.html
http://localhost:3000/static/images/1.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/index.js

然后，你提供给express.static函数的路径是一个相对node进程启动位置的相对路径。

如果你在其他的文件夹中启动express app，更稳妥的方式是是用静态资源文件夹的绝对路径

app.use("/static", express.static(__dirname + "/public"))