在上一章中，我们探讨了如何配置静态文件目录，使得Express.js能够有效地提供静态资源。在本章中，我们将专注于如何通过Express应用访问这些静态文件。这是构建现代Web应用的一个关键步骤，因为用户通常需要加载CSS、JavaScript和图片等文件来完成网页的呈现。

静态文件的访问原理

在Express中，静态文件服务的核心功能来自于express.static中间件。当我们将某个目录传递给此中间件后，Express会自动处理并提供该目录下的所有文件。用户可以通过浏览器直接访问这些文件。

例子：访问静态文件

让我们通过一个简单的示例来理解如何访问静态文件内容。

1. 设置项目

首先，确保您有一个基本的Express项目。如果没有，可以使用以下命令来创建一个新的项目：

mkdir express-static-example
cd express-static-example
npm init -y
npm install express

2. 创建静态文件目录

在项目根目录下，创建一个名为public的文件夹，并在其中添加一些静态文件。比如，我们可以添加一个style.css和一个image.png来演示：

public/
├── style.css
└── image.png

style.css的内容可以简单的写成：

body {
    background-color: lightblue;
}

然后，添加一张图片image.png到public目录中。

3. 配置Express应用

接下来，我们将创建一个简单的Express应用并配置静态文件服务：

const express = require('express');
const path = require('path');

const app = express();

// 静态文件目录配置
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.send('<h1>欢迎来到我的网站</h1><link rel="stylesheet" type="text/css" href="/style.css"><img src="/image.png" alt="示例图片">');
});

const PORT = 3000;
app.listen(PORT, () => {
    console.log(`服务器已启动，访问 http://localhost:${PORT}`);
});

在上述代码中，我们首先引入了express和path模块。然后，通过app.use(express.static(path.join(__dirname, 'public')));来设置public目录为静态文件目录。这样，浏览器就能直接访问那里的文件。

4. 启动服务器

运行您的Express应用：

node app.js

然后在浏览器中访问 http://localhost:3000，您将看到欢迎页面，并且样式文件和图片也会被正确加载。

访问静态文件的特性

通过上述示例，我们可以看到访问静态文件时的一些重要特性：

直接访问：用户可以直接通过URL访问任何在public目录下的文件，比如访问http://localhost:3000/style.css或http://localhost:3000/image.png。
保持目录结构：在public目录下的子目录结构将被保留。例如，如果您在public中创建了一个assets目录，并在其中放入文件，浏览器可以通过http://localhost:3000/assets/yourfile.ext路径访问它们。
文件类型的自动处理：Express会根据文件的后缀名自动设置Content-Type响应头，以确保浏览器能正确识别和渲染文件。

总结

本章介绍了如何在Express应用中访问静态文件。通过简单的配置，我们可以方便地将CSS，JavaScript，图片等静态资源提供给用户，进而提升Web应用的用户体验。

在下一章中，我们将进一步讨论如何优化静态文件服务，以提高应用的性能，让我们的Web应用在资源加载上更加高效。

Jupyter AI

23 访问静态文件的内容