Express 公用文件夹 - JavaScript

简介

在使用 Express 框架开发 Web 应用程序时，会经常涉及到处理静态资源（例如样式文件、脚本文件、图像等）。为了更有效地管理这些静态资源，可以通过在 Express 中设置公用文件夹来统一存放和访问这些资源。

本文将介绍如何在 Express 中设置和使用公用文件夹，并提供相关的代码示例。

设置公用文件夹

在 Express 中，可以通过使用 express.static 中间件来设置公用文件夹。该中间件接受一个文件夹路径作为参数，并将该文件夹中的静态资源暴露给客户端。

首先，我们需要在 Express 应用程序的代码中添加以下代码来设置公用文件夹：

// 引入 Express 框架
const express = require('express');
// 创建一个 Express 应用程序
const app = express();

// 设置公用文件夹
app.use('/public', express.static('public'));

上述代码中，'/public' 是用来指定公用文件夹在 URL 中的路径，可以根据实际需求进行修改。'public' 是公用文件夹的相对路径，假设它位于 Express 应用程序的根目录下。

使用公用文件夹中的资源

一旦设置了公用文件夹，在客户端可以直接通过 URL 访问该文件夹中的资源。例如，如果公用文件夹的路径设置为 '/public'，那么可以通过以下方式来获取其中的资源：

<link rel="stylesheet" href="/public/styles.css">
<script src="/public/scripts.js"></script>

上述代码中的 URL 路径 /public/styles.css 和 /public/scripts.js 就对应着公用文件夹中的 styles.css 和 scripts.js 文件。

除此之外，还可以通过动态生成 URL 的方式来获取公用文件夹中的资源。在 Express 中，可以使用 __dirname 全局变量来获取当前文件的目录路径。结合这个路径和公用文件夹的路径，可以生成相对路径来访问静态资源。

// 创建 Express 路由
const router = express.Router();

// 处理路由请求
router.get('/about', (req, res) => {
  const stylesUrl = `${req.baseUrl}/public/styles.css`;
  const scriptsUrl = `${req.baseUrl}/public/scripts.js`;

  // 将生成的 URL 发送给客户端
  res.send(`
    <link rel="stylesheet" href="${stylesUrl}">
    <script src="${scriptsUrl}"></script>
  `);
});

// 将路由应用到 Express 应用程序
app.use('/app', router);

上述代码中，使用 req.baseUrl 和 /public/styles.css 或 /public/scripts.js 的相对路径来动态生成资源的 URL，然后将生成的 URL 发送给客户端。

注意事项

• 公用文件夹中的所有文件都可以被客户端直接访问，因此应该确保敏感文件不会被暴露。
• 可以设置多个公用文件夹，只需在 app.use 中多次调用 express.static。
• 公用文件夹中的文件路径是相对于设置的公用文件夹路径的相对路径。

结论

通过在 Express 中设置公用文件夹，可以更方便地管理和访问静态资源。本文介绍了如何设置公用文件夹以及如何在客户端使用公用文件夹中的资源。希望能帮助你更好地使用 Express 框架开发 Web 应用程序。