Express の静态资源请求

落日映苍穹つ 2024-05-24 04:05 78阅读 0赞

## Express の 静态资源请求 ##

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

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

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

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

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

### 使用 static 中间件 ###

一边情况，我们都会将所有静态文件放在一个目录下，比如下图。那如果当用户访问`/index.css`，`/index.js`这样静态资源时可以直接返回。使用`express.static(root, [options])`中间件。  
![在这里插入图片描述][1387a044c06b4efd878e5e7473056417.png]  
注意目录解构哦，我们传给`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`  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6K6h56eR55qE55S35Lq657ud5LiN6K6k6L6T_size_9_color_FFFFFF_t_70_g_se_x_16 1]

#### 使用多个静态资源目录 ####

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

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

![在这里插入图片描述][4d6f0907a0fc44c7862964a4d7419b9b.png]

#### 创建静态资源 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'));

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

#### 使用绝对路径 ####

我的`JS`文件都写在`node/express`目录下，静态资源都保存在`node/resource`下，所以我在`node/express`下启动`node`进程，访问静态资源是没问题的。但如果我在`node`目录下启动进程，就会找不到这个文件。  
![在这里插入图片描述][f239e10907204666a9e9d336ea3669ba.png]  
![在这里插入图片描述][9a04896856514011a3ecbcae2502b2aa.png]  
如何解决这个问题？官网建议使用绝对路径更加安全。

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

这次正常了  
![在这里插入图片描述][ce5fb981ff744c7c8ff6f5a224d0d98d.png]

#### options 参数 ####

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

##### index 属性 #####

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

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

![在这里插入图片描述][e05e918c5c8e472586459d919b7455c5.png]

[Link 1]: https://blog.csdn.net/broken_promise/article/details/120578936
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6K6h56eR55qE55S35Lq657ud5LiN6K6k6L6T_size_9_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/52bef1c095244a16a7766888a8c5637c.png
[1387a044c06b4efd878e5e7473056417.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/0422d77e65cb48f9b7b468a0da921bdc.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6K6h56eR55qE55S35Lq657ud5LiN6K6k6L6T_size_9_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/039948aac1a34d10814af94f234f4cf4.png
[fa39a309be204667931141f540532229.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/06ef72a4f5d34afaa33668c2f296660b.png
[4d6f0907a0fc44c7862964a4d7419b9b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/fcecfb022d424ef792a3eed61e295ec9.png
[efbaa3c1d55f43328ee1143129868d8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/d7c152143d454be68f072972aee9359b.png
[da790dfafc8549da9e4174f7974e93ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/5e94fb1dc4f54a42897afd7d671fcd17.png
[f239e10907204666a9e9d336ea3669ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/ea1f6b09005444ab97f5807c5713661f.png
[9a04896856514011a3ecbcae2502b2aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/d11d3ca588c64302920248ed86c5efab.png
[ce5fb981ff744c7c8ff6f5a224d0d98d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/39cc64139024424ea9031eec6633bdeb.png
[Link 2]: https://www.expressjs.com.cn/resources/middleware/serve-static.html
[e05e918c5c8e472586459d919b7455c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/3045ce8446224c8b9cc800662cded116.png