Node.js 动手实现简单的模板引擎
程序员文章站
2022-07-02 16:36:49
...
准备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