express教程 express路由 express中间件 express静态资源 express mongodb

express静态资源

栏目： express 发布时间：2024-12-13

在Express框架中，静态资源是指那些不需要经过服务器端的复杂逻辑处理就可以直接提供给客户端的文件，比如HTML、CSS、JavaScript文件以及图片等。Express提供了内置的中间件来处理这些静态资源，使得你可以轻松地为你的应用提供服务。以下是一篇详细的Express静态资源教程。

一、静态资源的基本概念

什么是静态资源：静态资源是相对于动态资源而言的，它们不依赖于服务器端执行的代码来生成，而是直接存储在服务器上的文件系统中。当客户端请求这些资源时，服务器会直接将文件内容发送给客户端。
静态资源的存储位置：在Express应用中，你可以将静态资源存放在一个特定的目录中，然后通过配置中间件来指定这个目录。通常，这个目录会被命名为public、static或类似的名称，但你可以根据需要自定义。

创建静态资源目录：在你的项目根目录下创建一个用于存放静态资源的目录，比如public。
```
mkdir public
```
将静态资源放入目录：将你的HTML、CSS、JavaScript文件和图片等静态资源放入public目录中。
配置Express静态资源中间件：使用express.static中间件来配置静态资源的访问路径。这个中间件会查找指定目录下的文件，并将它们作为静态资源提供给客户端。
```
const express = require('express');
const app = express();

// 指定静态资源目录为public
app.use(express.static('public'));

const port = 3000;
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});
```
现在，当你启动Express服务器并访问http://localhost:3000/yourfile.html时，Express会查找public目录下的yourfile.html文件，并将其内容发送给客户端。

URL路径：客户端请求的URL路径会相对于静态资源目录进行解析。例如，如果静态资源目录是public，并且你访问的是http://localhost:3000/images/logo.png，那么Express会查找public/images/logo.png文件。
默认文件：你可以指定一个默认文件，当客户端请求根路径（/）时，Express会自动返回这个文件。例如，你可以将public/index.html设置为默认文件：
```
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
```
但是，请注意，这实际上并不是通过express.static中间件实现的默认文件功能，而是使用了一个额外的路由处理函数。如果你想通过express.static中间件实现类似的功能，你可以在你的public目录下创建一个名为index.html的文件，并确保它包含了你想要显示的内容。然后，当客户端访问根路径时，Express会自动返回这个文件（如果它存在的话）。
缓存控制：为了优化性能，你可以通过设置HTTP头部来控制静态资源的缓存。例如，你可以为静态资源设置Cache-Control和Expires头部来指示浏览器缓存这些资源。
```
const oneDay = 86400000; // 1天，以毫秒为单位

app.use(express.static('public', {
    maxAge: oneDay
}));
```
上面的代码会为public目录下的所有静态资源设置一个一天的缓存时间。

通过以上步骤和最佳实践，你应该已经能够轻松地在Express应用中配置和提供静态资源了。

本文地址：https://www.tides.cn/p_express-static