Node.js Express 处理静态资源

[1. 什么是静态资源？](#1. 什么是静态资源？)

[2. 安装 Express](#2. 安装 Express)

[4. 创建 server.js](#4. 创建 server.js)

[5. 创建 public/index.html](#5. 创建 public/index.html)

[6. 创建 public/style.css](#6. 创建 public/style.css)

[7. 创建 public/script.js](#7. 创建 public/script.js)

[8. 运行服务器](#8. 运行服务器)

[9. 结语](#9. 结语)

1. 什么是静态资源？

静态资源指的是 HTML、CSS、JavaScript、图片 等文件，Express 可以使用 express.static() 让这些文件被浏览器直接访问。

2. 安装 Express

javascript 复制代码

mkdir express-static && cd express-static  # 创建项目目录
npm init -y  # 初始化项目
npm install express  # 安装 Express

3. 目录结构

javascript 复制代码

express-static/
│── public/      # 存放静态资源
│   ├── index.html
│   ├── style.css
│   ├── script.js
│   ├── image.jpg
│── server.js    # Express 服务器

4. 创建 `server.js`

文件名：server.js（JavaScript 代码）

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 代码）

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 代码）

css 复制代码

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f4;
}
h1 {
    color: #333;
}

7. 创建 `public/script.js`

文件名：script.js（JavaScript 代码）

javascript 复制代码

console.log('静态资源加载成功！');

8. 运行服务器

在终端执行：

javascript 复制代码

node server.js

然后在浏览器访问：
http://localhost:3000/index.html

页面将展示 "欢迎访问 Express 静态页面！"，同时加载 CSS 样式和 JavaScript 脚本。

9. 结语

本文介绍了如何使用 Express 提供静态资源，包括 HTML、CSS、JavaScript 和图片。只需使用 express.static('public')，即可让浏览器直接访问 public 目录中的文件，适合构建简单的静态网站或前后端分离项目。🚀