Notes
Node.js
案例:时钟后端

在前一个案例中,我们把一个单项目通过 Nodejs 拆分成了三个文件,现在我们需要通过 Nodejs 实现 clock 的后端。

核心思路

需要将文件存放路径作为每个资源请求的 URL 。
图示
1

创建了一个文件夹,结构为:

+根目录
++clock
  |--index.html
  |--index.css
  |--index.js

导入模块和服务器创建

const fs = require("fs");
const path = require("path");
const http = require("http");
 
// 服务器创建
const server = http.createServer();
 
// 绑定 request 事件
server.on("request", function (req, res) {
  // 事件内容
});
 
// 启动服务器
server.listen(80, () => {
  console.log("正在监听 127.0.0.1 地址");
});

将资源请求url地址映射为文件的存放路径

server.on("request", function (req, res) {
  // 事件内容
  // 获取客户端的 url 地址
  const url = req.url;
  // 把请求的 url 地址映射为文件存放路径
  // /clock/index.html
  // /clock/index.js
  // /clock/index.css
  const fpath = path.join(__dirname, url);
});

读取文件内容并响应到客户端

  // 根据映射的文件路径读取文件内容
  fs.readFile(fpath, "utf8", function (err, dataStr) {
    // 读取失败,响应错误消息
    if (err) {
      return res.end("404!");
    }
    //成功之后返回文件项目内容
    res.return(dataStr);
  });

启动服务器

node clockweb

浏览器打开 127.0.0.1 :

默认情况
1 访问 /index.html:
2 在浏览器调试器中打开 网络 选项卡,刷新页面可以看到被请求的文件:
3

优化资源请求路径

在没有写具体路径时,访问根页面展示 404 ,因此我们希望直接写 index 可以直接访问页面。

  let fpath = "";
  if (url === "/") {
    fpath = path.join(__dirname, "./clock/index.html");
  } else {
    fpath = path.join(__dirname, "./clock", url);
  }