如何在 Express 中提供静态文件

介绍

在本文中,您将学习如何在Express中服务静态文件. 一个Node.js框架,Express在服务器上提供数据,并包括在客户端上渲染静态文件,如图像,HTML,CSS和JavaScript。

如果您对 Express 是新手,请查看我们的 Introduction to Express以了解基本知识。

前提条件

要完成本教程,您将需要以下内容:

如果您想了解更多关于 Node.js 的信息,请查看如何在 Node.js 中编码系列

由于 Express 是 Node.js 框架,请确保您从 Node.js安装了 Node.js,然后再执行下一步

步骤 1 - 设置 Express

首先,在您的终端中运行以下操作:

为您的项目创建一个名为express-static-file-tutorial的新目录:

1mkdir express-static-file-tutorial

更改您的新目录:

1cd express-static-file-tutorial

初始化一个新的 Node 项目与默认值. 这将设置一个 package.json 文件来访问你的依赖:

1npm init -y

创建你的输入文件, index.js. 这是你将存储你的Express服务器的地方:

1touch index.js

安装 Express 作为依赖:

1npm install express --save

在package.json中,更新您的开始脚本,包括节点和您的index.js文件。

 1[label package.json]
 2{
 3  "name": "express-static-file-tutorial",
 4  "version": "1.0.0",
 5  "description": "",
 6  "main": "index.js",
 7  "scripts": {
 8    "start": "node index.js"
 9  },
10  "keywords": [],
11  "author": "Paul Halliday",
12  "license": "MIT"
13}

这将允许您在终端中使用npm start命令启动您的Express服务器。

步骤2 - 结构化您的文件

要将文件存储在客户端,请创建一个公共目录,并包括一个index.html文件以及图像。

1express-static-file-tutorial
2  |- index.js
3  |- public
4    |- shark.png
5    |- index.html

现在你的文件已经设置了,让我们开始你的Express服务器。

步骤 3 – 创建您的快递服务器

在您的 index.js 文件中,请在 Express 实例中要求并执行一个 GET 请求:

 1[label index.js]
 2const express = require('express');
 3const app = express();
 4const PORT = 3000;
 5
 6app.get('/', (req, res) => {
 7    res.send('Hello World!');
 8});
 9
10app.listen(PORT, () => console.log(`Server listening on port: ${PORT}`));

现在让我们告诉Express来处理你的静态文件。

步骤 4 – 服务您的静态文件

Express 提供了一个内置的方法来服务您的静态文件:

1app.use(express.static('public'));

当你调用app.use()时,你会告诉Express 使用中间件。 Middleware 是一个函数,Express 通过请求,然后将其发送到你的路由函数,例如你的app.get('/')路线。

在index.js中,在您的PORT变量下方服务您的静态文件。

 1[label index.js]
 2const express = require('express');
 3const app = express();
 4const PORT = 3000;
 5
 6app.use(express.static('public'));
 7
 8app.get('/', (req, res) => {
 9    res.send('Hello World!');
10});
11
12app.listen(PORT, () => console.log(`Server listening on port: ${PORT}`));

有了 Express 服务器,让我们专注于客户端。

步骤五:构建您的网站

在公共目录中导航到您的index.html文件. 将文件填充到身体和图像元素:

 1[label index.html] 
 2<html>
 3  <head>
 4    <title>Hello World!</title>
 5  </head>
 6  <body>
 7    <h1>Hello, World!</h1>
 8    <img src="shark.png" alt="shark">
 9  </body>
10</html>

注意图像元素的来源为shark.png。由于您通过Express服务了公共目录,您可以将文件名添加为图像源的值。

步骤6 - 运行您的项目

在您的终端中,启动您的 Express 项目:

1npm start

1Server listening on port: 3000

打开您的网页浏览器,并导航到 http://localhost:3000. 您将看到您的项目:

Screenshot of the web page displaying a Hello World message and shark image.

结论

Express提供内置的中间软件来服务您的静态文件,并在一个客户端目录中的内容模块化为一个代码行。