Node.js Express 处理静态资源
目录
1. 什么是静态资源？
2. 安装 Express
3. 目录结构
4. 创建 server.js
5. 创建 public/index.html
6. 创建 public/style.css
7. 创建 public/script.js
8. 运行服务器
9. 结语
1. 什么是静态资源？
静态资源指的是 HTML、CSS、JavaScript、图片 等文件，Express 可以使用 express.static() 让这些文件被浏览器直接访问。
2. 安装 Express
mkdir express-static && cd express-static # 创建项目目录
npm init -y # 初始化项目
npm install express # 安装 Express
3. 目录结构
express-static/
│── public/ # 存放静态资源
│ ├── index.html
│ ├── style.css
│ ├── script.js
│ ├── image.jpg
│── server.js # Express 服务器
4. 创建 server.js
文件名：server.js（JavaScript 代码）
// server.js
const express = require('express'); // 引入 Express
const app = express(); // 创建 Express 应用
const port = 3000; // 端口号
// 配置 Express 提供静态资源
app.use(express.static('public'));
// 启动服务器
app.listen(port, () => {
console.log(`服务器运行在 http://localhost:${port}`);
});
5. 创建 public/index.html
文件名：index.html（HTML 代码）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Express 静态资源</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>欢迎访问 Express 静态页面！</h1>
<img src="image.jpg" alt="示例图片">
<script src="script.js"></script>
</body>
</html>
6. 创建 public/style.css
文件名：style.css（CSS 代码）
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
7. 创建 public/script.js
文件名：script.js（JavaScript 代码）
console.log('静态资源加载成功！');
8. 运行服务器
在终端执行：
node server.js
然后在浏览器访问：
http://localhost:3000/index.html
页面将展示 “欢迎访问 Express 静态页面！”，同时加载 CSS 样式和 JavaScript 脚本。
9. 结语
本文介绍了如何使用 Express 提供静态资源，包括 HTML、CSS、JavaScript 和图片。只需使用 express.static('public')，即可让浏览器直接访问 public 目录中的文件，适合构建简单的静态网站或前后端分离项目。🚀