NodeJS-模板引擎

在我之前的 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>

启动服务，浏览器进行测试效果如下：