Skip to main content

案例：时钟后端

在前一个案例中，我们把一个单项目通过 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);
  }