静态文件服务
在构建Web应用时，静态文件（如HTML、CSS、JavaScript、图像等）是不可或缺的。Express.js 提供了一种简单的方式来服务这些静态文件，使得开发者可以专注于业务逻辑的实现。本教程将详细介绍如何在Express.js中设置和使用静态文件服务。
1. 静态文件服务的基本概念
静态文件是指那些内容不会因为请求的不同而变化的文件。例如，一个CSS文件在不同的用户请求中内容是相同的。静态文件服务就是将这些文件直接发送给客户端，而不需要经过复杂的处理。
1.1 为什么需要静态文件服务？
- 提高性能：静态文件可以直接从服务器缓存中读取，减少服务器处理时间。
- 简化开发：开发者可以将前端资源（如CSS、JS、图片）与后端逻辑分离，专注于各自的开发。
- 用户体验：静态文件的快速加载可以提升用户体验。
2. 在Express.js中设置静态文件服务
Express.js 提供了一个内置的中间件 express.static，用于服务静态文件。通过这个中间件，你可以轻松地将静态文件目录映射到URL路径。
2.1 安装Express.js
首先，确保你已经安装了Node.js和npm。然后，创建一个新的项目目录并初始化npm：
mkdir express-static-demo
cd express-static-demo
npm init -y
接下来，安装Express.js：
npm install express
2.2 创建静态文件目录
在项目根目录下创建一个名为 public 的目录，并在其中放置一些静态文件。例如：
mkdir public
touch public/index.html
touch public/style.css
touch public/script.js
2.3 编写Express应用
在项目根目录下创建一个名为 app.js 的文件，并编写以下代码：
const express = require('express');
const app = express();
const port = 3000;
// 使用express.static中间件服务静态文件
app.use(express.static('public'));
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
2.4 运行应用
在终端中运行以下命令启动服务器：
node app.js
现在，打开浏览器并访问 http://localhost:3000/index.html，你应该能够看到 public 目录中的 index.html 文件。
3. 静态文件服务的进阶用法
3.1 设置虚拟路径前缀
有时，你可能希望为静态文件设置一个虚拟路径前缀，而不是直接暴露文件目录结构。例如，你希望所有的静态文件都通过 /assets 路径访问。
修改 app.js 文件如下：
app.use('/assets', express.static('public'));
现在，你可以通过 http://localhost:3000/assets/index.html 访问 index.html 文件。
3.2 多个静态目录
你还可以为不同的静态文件设置多个目录。例如，你可能有一个目录用于存放公共资源，另一个目录用于存放用户上传的文件。
app.use('/public', express.static('public'));
app.use('/uploads', express.static('uploads'));
3.3 缓存控制
为了提高性能，你可以通过设置HTTP头来控制静态文件的缓存。Express.js 允许你通过 express.static 的选项来设置缓存控制。
app.use(express.static('public', {
maxAge: '1d' // 设置缓存时间为1天
}));
4. 实践练习
4.1 创建一个简单的静态网站
- 在
public目录下创建一个简单的HTML文件index.html，包含一些基本的HTML结构和样式。 - 在
public目录下创建一个style.css文件，并添加一些CSS样式。 - 在
public目录下创建一个script.js文件，并添加一些JavaScript代码。 - 启动Express应用，访问
http://localhost:3000/index.html，查看效果。
4.2 设置虚拟路径前缀
- 修改
app.js文件，为静态文件设置一个虚拟路径前缀/assets。 - 访问
http://localhost:3000/assets/index.html，确保页面正常显示。
4.3 添加缓存控制
- 修改
app.js文件，为静态文件设置缓存控制，例如maxAge: '1d'。 - 重新启动应用，查看浏览器开发者工具中的网络请求，确认缓存头已正确设置。
5. 总结
通过本教程，你已经学会了如何在Express.js中设置和使用静态文件服务。静态文件服务是Web开发中的一个重要组成部分，能够显著提高应用的性能和用户体验。希望你能将这些知识应用到实际项目中，进一步提升你的开发技能。
下一步
接下来，你可以继续学习Express.js的其他高级主题，如模板引擎、错误处理、中间件开发等。这些内容将帮助你构建更加复杂和功能强大的Web应用。