介绍
在本文中，您将学习如何在 Express 中提供静态文件。作为 Node.js 框架，Express 可简化服务器中的数据，并包括在客户端呈现静态文件，例如图像、HTML、CSS 和 JavaScript。
如果您不熟悉 Express，请查看我们的Express 简介以了解基础知识。
先决条件
要完成本教程，您将需要以下内容：
- 建议但不要求了解 Node.js。如果您想了解有关 Node.js 的更多信息，请查看如何在 Node.js 中编码系列。
- 由于 Express 是一个 Node.js 框架，因此在执行后续步骤之前，请确保您已从 Node.js 安装了Node.js。
步骤 1 — 设置 Express
首先，在终端中运行以下命令：
为您的项目创建一个名为 的新目录express-static-file-tutorial：
- mkdir express-static-file-tutorial
切换到新目录：
- cd express-static-file-tutorial
使用默认值初始化一个新的 Node 项目。这将设置一个package.json文件来访问您的依赖项：
- npm init -y
创建您的入口文件，index.js. 这是您将存储 Express 服务器的位置：
- touch index.js
安装 Express 作为依赖项：
- npm install express --save
在您的 中package.json，更新您的start脚本以包含node和您的index.js文件。
{
"name": "express-static-file-tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"keywords": [],
"author": "Paul Halliday",
"license": "MIT"
}
这将允许您使用npm start终端中的命令来启动 Express 服务器。
第 2 步 – 构建您的文件
要将文件存储在客户端，请创建一个public目录并包含一个index.html文件和一个图像。您的文件结构将如下所示：
express-static-file-tutorial
|- index.js
|- public
|- shark.png
|- index.html
现在您的文件已设置，让我们开始您的 Express 服务器。
第 3 步 – 创建您的 Express 服务器
在您的index.js文件中，在 Express 实例中 require 并实现一个GET请求：
const express = require('express');
const app = express();
const PORT = 3000;
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(PORT, () => console.log(`Server listening on port: ${PORT}`));
现在让我们告诉 Express 处理您的静态文件。
第 4 步 – 为您的静态文件提供服务
Express 提供了一种内置方法来为您的静态文件提供服务：
app.use(express.static('public'));
当您调用 时app.use()，您是在告诉 Express使用一个中间件。中间件是 Express 在将请求发送到您的路由功能（例如您的路由）之前传递请求的功能app.get('/')。express.static()查找并返回请求的静态文件。您传入的参数express.static()是您希望 Express 提供文件的目录的名称。在这里，public目录。
在 中index.js，在PORT变量下方提供静态文件。传入您的public目录作为参数：
const express = require('express');
const app = express();
const PORT = 3000;
app.use(express.static('public'));
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(PORT, () => console.log(`Server listening on port: ${PORT}`));
设置好 Express 服务器后，让我们关注客户端。
第 5 步 – 构建您的网页
导航到index.html目录中的public文件。使用正文和图像元素填充文件：
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello, World!</h1>
<img src="shark.png" alt="shark">
</body>
</html>
注意图像元素源到shark.png。由于您已public通过 Express提供目录，因此您可以将文件名添加为图像源的值。
第 6 步 — 运行您的项目
在您的终端中，启动您的 Express 项目：
- npm start
Server listening on port: 3000
打开 Web 浏览器，然后导航到http://localhost:3000。您将看到您的项目：
结论
Express 提供了一个内置的中间件来为您的静态文件提供服务，并将客户端目录中的内容模块化为一行代码。
