Node.js 动手实现简单的模板引擎

根据数据和模板动态渲染页面（实现一个简单的模板引擎）

准备HTML模板文件index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>电影祥情</h1>
    <hr>
    <!-- 自定义模板语法，这里只演示简单对象渲染,其他复杂对象， if,for此处未演示 -->
    <h2>名称：{{name}}</h2>
    <hr>
    <h2>导演：{{author}}</h2>
    <hr>
    <h2>简介：</h2>
    <p>{{brief}}</p>
</body>
</html>

创建服务器server.js 文件

//引入http和文件系统（均为node内置模块，无需安装）
let http = require('http');
let fs = require('fs');

/**
 * 模拟数据库
 */
const MockDataBase = {
    //定义一个查询电影记录的方法，返回一个movie对象
    getMovie : function(){
        let movie =  {
            name:'黑暗正义联盟：天启星战争',
            brief:'正义联盟集结地球上所有超级英雄一起对抗强大的反派达克赛德。',
            author:'马特·皮特斯 Matt Peters'
          };
          return movie;
    }
}



/**
 * 实现一个简单的模板引擎，接收模板路径和数据模型两个参数。
 * 原理就是读取模板文件，根据自定义的模板语法解析，然后替换为模型数据
 */
function defaultTemplateEngine(path,model){
    console.log('执行模板引擎，渲染数据。')
    fs.readFile(path,{encoding:"utf-8",flag:"r"},(err,data)=>{
        if(err){
            this.end(err);
        }else{
            /**
             * 使用正则替换掉要渲染的数据
             * 本例中只模拟了简单对象的渲染处理
             * 其他 if，for等未实现。
             */
           
            let reg = /\{\{(.*?)\}\}/igs
            let result;
            while(result = reg.exec(data)){
                //去除2边的空白
                let strKey = result[1].trim()
                let strValue = model[strKey]
                //将模板中的语法位置替换为要响应的数据
                data = data.replace(result[0],strValue)
            }
            /**
             * 返回渲染完成的html内容
             * 因为回调函数使用的是匿名函数，所在可以使用this对象，此处的this指向的是调用者，
             * 此例中，调用者是http请求的响应对象res，end是res对象中内置的一个函数，此函数作用是结束请求，并发送响应数据。
             */
            this.end(data);
        }
    })
}

/**
 * 实现一个简单的模型引擎过滤器
 * 此过滤器中向res对象追加了模板渲染引擎函数render。
 */
function templateEngineFilter(req,res){
    if(req.url == '/'){
        console.log('执行模板引擎过滤器，向响应对象追加一个模板渲染引擎函数')
        res.render = defaultTemplateEngine;
    }
}    


//创建一个服务
let server = http.createServer();
//服务监听请求
server.on('request',async function(req,res){
    console.log('收到请求：' + req.url);
    //执行请求过滤器
    templateEngineFilter(req,res);
     //设置响应类型及字符集编码
    res.setHeader('Content-Type','text/html;charset=utf-8')

    //如果请求路径是根路径 ‘/’ 则返回电影信息页面，否则返回404
    if(req.url=='/'){
        //从数据库中获取电影信息
      let movie = await MockDataBase.getMovie();
      //调用响应对象的模板渲染函数，将数据渲染到页面
      res.render('./index.html',movie)
    }else{
        res.end('404！资源不存在。')
    }
})

//服务监听80端口
server.listen(80,function(){
    console.log('服务启动成功。')
})

运行命令，启动服务

node server.js

1593919958598-9683465b-b239-4462-a08f-311bdc8305c2.gif