Node.js 处理静态文件-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，处理静态文件是一个非常重要的环节。这些文件通常包括 HTML、CSS、JavaScript 文件、图片以及字体等资源。Node.js 本身并不直接支持静态文件的处理，但是通过一些流行的库和中间件，我们可以很容易地让 Node.js 应用程序处理静态文件。

使用 Express 处理静态文件

Express 是一个基于 Node.js 的流行 Web 框架，它提供了强大的中间件系统，可以方便地处理静态文件。下面将详细介绍如何使用 Express 来处理静态文件。

安装 Express 和相关依赖

首先，确保已经安装了 Node.js 环境。然后，在项目目录下初始化一个新的 Node.js 项目，并安装 Express：

mkdir my-static-server
cd my-static-server
npm init -y
npm install express

创建基本服务器

创建一个名为 server.js 的文件，并添加以下代码来创建一个简单的 Express 服务器：

// www.javascriptcn.com code example
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

运行服务器：

node server.js

此时，服务器已经启动，并且可以通过浏览器访问 http://localhost:3000 查看页面。

添加静态文件服务

为了提供静态文件服务，我们需要使用 express.static 中间件。这个中间件会自动处理静态文件请求，并从指定的目录中读取文件。

假设我们的静态文件位于 public 目录中。首先，创建这个目录，并添加一些静态文件，如 index.html、style.css 和 script.js。

创建 `public` 目录

mkdir public

在 `public` 目录中添加静态文件

在 public 目录下创建以下文件：

index.html
style.css
script.js

index.html

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Static File Server</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <h1>Hello from Static File Server!</h1>
    <script src="/script.js"></script>
</body>
</html>

style.css

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

script.js

document.body.innerHTML += '<p>Script loaded successfully.</p>';

修改 `server.js` 以添加静态文件服务

在 server.js 文件中，添加如下代码：

const path = require('path');

// 静态文件服务
app.use(express.static(path.join(__dirname, 'public')));

现在，当你访问 http://localhost:3000 时，Express 将会自动查找并返回 public 目录下的文件。

路径配置

express.static 接受一个路径参数，该参数指定静态文件所在的目录。如果希望更改默认的 URL 路径，可以通过第二个参数传递配置对象：

app.use('/assets', express.static(path.join(__dirname, 'public')));

这样，静态文件将通过 /assets 路径访问。例如，/assets/style.css 将指向 public/style.css 文件。

使用 Connect 处理静态文件

除了 Express，我们还可以使用 Connect 框架来处理静态文件。Connect 是 Express 的底层库，提供了许多有用的中间件。

安装 Connect

首先安装 Connect：

npm install connect

创建静态文件服务器

创建一个名为 connect-server.js 的文件，并添加以下代码：

// www.javascriptcn.com code example
const connect = require('connect');
const serveStatic = require('serve-static');

const app = connect();

// 配置静态文件服务
app.use(serveStatic(__dirname + '/public'));

app.listen(3000);
console.log('Server running on http://localhost:3000');

启动服务器

运行服务器：

node connect-server.js

此时，你可以通过 http://localhost:3000 访问静态文件。

总结

本章介绍了如何使用 Express 和 Connect 处理静态文件。通过这两个框架提供的中间件，我们可以轻松地为 Node.js 应用程序添加静态文件服务功能。希望这些示例能够帮助你在实际项目中更有效地处理静态文件。

Node.js 处理静态文件