📜  如何使用 Node.js 提供静态内容?(1)

📅  最后修改于: 2023-12-03 15:23:56.663000             🧑  作者: Mango

如何使用 Node.js 提供静态内容?

Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。它可以让 JavaScript 代码运行在服务器端,可以用来构建高性能、可扩展的网络应用程序。在 Node.js 中,可以使用内置的 http 模块来创建 HTTP 服务器,从而提供静态内容。

创建 HTTP 服务器

要提供静态内容,需要创建一个 HTTP 服务器。可以使用 Node.js 内置的 http 模块来创建 HTTP 服务器。

const http = require('http');

const server = http.createServer((req, res) => {
  // 处理请求
});

server.listen(3000, () => {
  console.log('Server started on port 3000');
});

这段代码创建了一个 HTTP 服务器,并在端口 3000 上监听请求。现在,需要在处理请求时提供静态内容。

使用 fs 模块读取文件

要提供静态内容,需要将文件内容发送给客户端。可以使用 Node.js 内置的 fs 模块来读取文件内容。

const fs = require('fs');

fs.readFile('path/to/file.html', (err, data) => {
  if (err) {
    console.error(err);
    return;
  }
  res.end(data);
});

这段代码读取了一个名为 file.html 的文件,并将其内容发送给客户端。

处理请求

在 HTTP 服务器上收到请求时,需要根据请求路径找到对应的文件,并将文件的内容发送给客户端。可以使用 fs 模块的 readFile 方法来读取文件内容。

const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
  // 根据请求路径生成文件路径
  const filePath = path.join(__dirname, 'public', req.url === '/' ? 'index.html' : req.url)

  // 读取文件内容
  fs.readFile(filePath, (err, data) => {
    if (err) {
      console.error(err);
      // 文件不存在,返回 404
      res.writeHead(404, { 'Content-Type': 'text/html' });
      res.end('<h1>404 Not Found</h1>');
      return;
    }
    // 根据文件类型设置 Content-Type
    const extname = path.extname(filePath);
    let contentType = 'text/html';
    switch(extname) {
      case '.js':
        contentType = 'text/javascript';
        break;
      case '.css':
        contentType = 'text/css';
        break;
      case '.json':
        contentType = 'application/json';
        break;
      case '.png':
        contentType = 'image/png';
        break;
      case '.jpg':
        contentType = 'image/jpg';
        break;
    }
    res.writeHead(200, { 'Content-Type': contentType });
    res.end(data);
  });
});

server.listen(3000, () => {
  console.log('Server started on port 3000');
});

这段代码在收到请求时,根据请求路径生成文件路径,并使用 fs 模块的 readFile 方法读取文件内容。如果文件不存在,返回 404,否则根据文件类型设置 Content-Type,并将文件内容发送给客户端。

使用中间件

在实际开发中,可以使用 Express.js 等框架来提供静态内容。Express.js 可以使用 express.static 中间件来提供静态文件。

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

const app = express();

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

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

这段代码使用 express.static 中间件来提供静态文件。可以将静态文件放在 public 目录下,通过访问 http://localhost:3000/index.html 来访问静态文件。