企业网站和展板建设网站设计说明
目录
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 目录中的文件，适合构建简单的静态网站或前后端分离项目。🚀