Express の静态资源请求-蒲公英云

Express の静态资源请求

之前我们讲了文件的下载，其实讲完文件下载，就可以处理静态资源了。常见的静态资源文件包括图像，CSS 和 JS 文件。

使用 sendFile() 响应静态资源请求

const express = require('express');
const path = require('path');
const app = express();
app.get('/static/:file', (req, res) => {
  let filename = req.params.file;
  let options = {
    root: path.join(__dirname, '../resource')
  };
  if (filename.indexOf('.css') !== -1) {
    res.sendFile('index.css', options);
  }
  // .js .jpg 省略
});
app.listen(3000, () => {
  console.log('server started ...');
});

要提前看文件的下载这部分哦，不然我担心你要猜代码里究竟在搞什么名堂。

这样的请求是没问题的，最关键的就是sendFile()函数根据文件后缀名自动设置Content-Type的响应头，都避免我们多写一行代码?

在这里插入图片描述
现在的问题是，我们使用三个if分别处理CSS，JS和图片类型的文件。如果有一天你要新增对PDF类型的处理，还要在家一个if；如果我不想处理图片类型文件了，还要删除一个if。所以这样做可以，但不是最好的。

使用 static 中间件

一边情况，我们都会将所有静态文件放在一个目录下，比如下图。那如果当用户访问/index.css，/index.js这样静态资源时可以直接返回。使用express.static(root, [options])中间件。
在这里插入图片描述
注意目录解构哦，我们传给static函数的可是相对路径哦。

const express = require('express');
const app = express();
// 关键
app.use(express.static('../resource'));
app.listen(3000, () => {
  console.log('server started ...');
});

当我们访问http://localhost:3000/index.js
在这里插入图片描述

使用多个静态资源目录

如果我们想在resource下分别创建两个文件夹用来存储 CSS, JS 文件，像这样。只需多次调用express.static()即可。express会根据代码中添加目录的顺序查找静态资源文件。
在这里插入图片描述

app.use(express.static('../resource/css'));
app.use(express.static('../resource/js'));

在这里插入图片描述

创建静态资源 URL 统一访问路径

如果我们想在所有访问静态资源的URL加上/static，像这样，http://localhost:3000/static/index2.js。

app.use(express.static('../resource');
app.use('/static', express.static('../resource/css'));
app.use('/static', express.static('../resource/js'));

在这里插入图片描述
看上面的代码，指定前缀和不指定前缀可以共存。看下图，我没有使用/static前缀哦~

使用绝对路径

我的JS文件都写在node/express目录下，静态资源都保存在node/resource下，所以我在node/express下启动node进程，访问静态资源是没问题的。但如果我在node目录下启动进程，就会找不到这个文件。
在这里插入图片描述

如何解决这个问题？官网建议使用绝对路径更加安全。

app.use('/static', express.static(path.join(__dirname, '../resource/js')));
app.use('/static', express.static(path.join(__dirname, '../resource/css')));

这次正常了
在这里插入图片描述

options 参数

options是个对象参数，可以设置很多值。我就选了一个我感觉比较有用的，其他大家可以看文档，虽然不是每个都介绍了?

index 属性

平常我们访问一个网站，一般都是直接输入http://localhost:3000就跳转到首页了，而不是输入http://localhost:3000/index.html。所以使用index可以。这个属性可以接收字符串或者数组。

app.use(express.static(path.join(__dirname, '../resource'), {
  index: ['index.html']
}));

在这里插入图片描述

Express の静态资源请求