使用静态页面 nodejs - Javascript

静态页面是由 HTML、CSS 和脚本 (Javascript) 组成的，能够呈现出相应的内容，但不能与服务器交互。对于一些简单的静态页面，我们可以直接放在服务器的文件夹中进行访问，但对于一些复杂的页面，我们需要借助 Node.js 来进行处理。

使用 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。它可以让 JavaScript 在服务器上运行，常常被用来构建高效、可扩展的网络应用程序。对于静态页面处理，我们可以用 Node.js 来启动一个本地服务器，以方便进行开发和测试。

建立本地服务器

我们可以使用 Node.js 自带的 http 模块来建立一个本地服务器。下面是一个简单的例子：

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

const server = http.createServer((req, res) => {
  let filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);
  let 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;
  }

  fs.readFile(filePath, (err, content) => {
    if (err) {
      if (err.code == 'ENOENT') {
        // 页面不存在，返回 404 错误
        fs.readFile(path.join(__dirname, '404.html'), (err, content) => {
          res.writeHead(404, { 'Content-Type': 'text/html' });
          res.end(content, 'utf-8');
        });
      } else {
        // 服务器出错，返回 500 错误
        res.writeHead(500);
        res.end('Server Error: ' + err.code);
      }
    } else {
      // 返回相应的内容
      res.writeHead(200, { 'Content-Type': contentType });
      res.end(content, 'utf-8');
    }
  });
});

const PORT = process.env.PORT || 3000;

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

上面的代码中，我们使用 http 模块创建了一个本地服务器，并根据请求的页面路径返回相应的内容。如果路径指向的是一个不存在的页面，我们就返回 404 错误；如果出现服务器错误，我们返回 500 错误。

启动本地服务器

我们可以使用 node 命令来运行上面的代码：

node server.js

如果一切正常，我们的本地服务器就成功启动了。在浏览器中输入地址 http://localhost:3000 就能看到我们的主页了。

结论

使用 Node.js 来启动一个本地服务器可以方便我们进行静态页面的开发和测试。我们只需要向服务器发出请求，就可以获得相应的内容。在开发完成后，我们只需要把静态页面部署到服务器即可上线。