在我之前的 Web 文章當中介紹過一個模闆引擎也就是
art-template
官方文檔位址：https://aui.github.io/art-template/zh-cn/docs/index.html
接下來就使用這個模闆來改造一下我之前的那個動态網站的案例吧，首先需要安裝好
arte-template
Node 的安裝方式如下就是一行安裝指令即可。
npm install art-template --save 安裝好了之後開始修改 index.js 核心檔案的内容即可，如下，首先需要導入這個模闆引擎。
let template = require("art-template"); 然後将我圖中的内容進行删除，在加入
art-template
模闆的文法即可。
最終
index.js
的内容如下：
let http = require("http");
let path = require("path");
let fs = require("fs");
let url = require("url");
let queryString = require("querystring");
let template = require("art-template");
let persons = {
"lisi": {
name: "lisi",
gender: "male",
age: "33"
},
"zhangsan": {
name: "zhangsan",
gender: "female",
age: "18"
}
};
// 1.建立一個伺服器執行個體對象
let server = http.createServer();
// 2.注冊請求監聽
server.on("request", function (req, res) {
if (req.url.startsWith("/index") && req.method.toLowerCase() === "get") {
let obj = url.parse(req.url);
let filePath = path.join(__dirname, obj.pathname);
fs.readFile(filePath, "utf8", function (err, content) {
if (err) {
res.writeHead(404, {
"Content-Type": "text/plain; charset=utf-8"
});
res.end("Page Not Found");
}
res.writeHead(200, {
"Content-Type": "text/html; charset=utf-8"
});
res.end(content);
});
} else if (req.url.startsWith("/info") && req.method.toLowerCase() === "post") {
let params = "";
req.on("data", function (chunk) {
params += chunk;
});
req.on("end", function () {
let obj = queryString.parse(params);
let per = persons[obj.userName];
let filePath = path.join(__dirname, req.url);
let html = template(filePath, per);
res.writeHead(200, {
"Content-Type": "text/html; charset=utf-8"
});
res.end(html);
});
}
});
// 3.指定監聽的端口
server.listen(3000); 緊接着修改一下結果頁的模闆代碼，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>姓名: <%=name%></li>
<li>性别: <%=gender%></li>
<li>年齡: <%=age%></li>
</ul>
</body>
</html> 啟動服務，浏覽器進行測試效果如下：