静态文件夹 express - Javascript

在Web应用程序中，静态文件是指在服务器或客户端上不会进行修改的文件，例如.css、.js和图像文件。静态文件夹是指用于存储和提供这些静态文件的文件夹。Express是一个流行的Web框架，提供了方便的功能来处理静态文件。

使用Express静态文件夹

使用Express自带的express.static中间件，我们可以轻松地在应用程序中使用静态文件夹。

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

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

上述代码段中public是一个包含静态文件的文件夹，该文件夹必须位于应用程序的根目录中。在将静态文件夹设置为中间件之后，我们可以通过浏览器请求这些静态文件。例如，我们可以通过访问http://localhost:3000/styles.css可以访问public文件夹中的styles.css文件。

更改静态文件夹的路径

如果您的静态文件夹不在应用程序的根目录下，您可以指定其路径作为中间件。例如，如果您的静态文件夹是在/usr/local/myapp/public下，可以使用如下代码：

app.use('/static', express.static('/usr/local/myapp/public'));

上述代码中/static是URL路径，我们可以通过浏览器请求http://localhost:3000/static/styles.css可以访问public文件夹中的styles.css文件。

多个静态文件夹

在一些情况下，您可能需要将多个静态文件夹添加到应用程序中。在Express中，我们可以简单地在中间件中使用多个express.static来实现这一点。

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

上述代码段中，我们在应用程序中添加了public和uploads两个静态文件夹。在请求静态文件时，Express将查找文件夹列表中的每个文件夹，以确保可以找到所请求的文件。

自定义静态文件夹选项

在使用express.static中间件时，我们可以通过传递一个选项对象来定制其行为。以下是一些可用的选项：

• maxAge：以毫秒为单位指定浏览器缓存静态资源的时间，默认情况下无限期缓存。
• etag：使用ETag头指定文件的版本判断文件是否需要重新请求
• lastModified：使用Last-Modified头指定文件的最近修改日期判断文件是否需要重新请求

例如，要将缓存时间设置为1小时，可以使用以下代码：

app.use(express.static('public', {
  maxAge: '1h'
}));

结论

在本教程中，我们了解了如何使用Express来处理静态文件，包括创建一个静态文件夹，更改文件夹的路径，添加多个文件夹以及自定义静态文件夹选项。通过使用Express中间件，我们可以轻松地将静态资源提供给Web应用程序。