在前一个案例中,我们把一个单项目通过 Nodejs 拆分成了三个文件,现在我们需要通过 Nodejs 实现 clock 的后端。
核心思路
需要将文件存放路径作为每个资源请求的 URL 。
图示:
创建了一个文件夹,结构为:
+根目录
++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
:
默认情况:
访问 /index.html
:
在浏览器调试器中打开 网络 选项卡,刷新页面可以看到被请求的文件:
优化资源请求路径
在没有写具体路径时,访问根页面展示 404 ,因此我们希望直接写 index 可以直接访问页面。
let fpath = "";
if (url === "/") {
fpath = path.join(__dirname, "./clock/index.html");
} else {
fpath = path.join(__dirname, "./clock", url);
}