根據(jù)數(shù)據(jù)和模板動態(tài)渲染頁面(實現(xiàn)一個簡單的模板引擎)
準備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>
創(chuàng)建服務器server.js 文件
//引入http和文件系統(tǒng)(均為node內(nèi)置模塊遣耍,無需安裝)
let http = require('http');
let fs = require('fs');
/**
* 模擬數(shù)據(jù)庫
*/
const MockDataBase = {
//定義一個查詢電影記錄的方法,返回一個movie對象
getMovie : function(){
let movie = {
name:'黑暗正義聯(lián)盟:天啟星戰(zhàn)爭',
brief:'正義聯(lián)盟集結地球上所有超級英雄一起對抗強大的反派達克賽德。',
author:'馬特·皮特斯 Matt Peters'
};
return movie;
}
}
/**
* 實現(xiàn)一個簡單的模板引擎,接收模板路徑和數(shù)據(jù)模型兩個參數(shù)。
* 原理就是讀取模板文件肌割,根據(jù)自定義的模板語法解析,然后替換為模型數(shù)據(jù)
*/
function defaultTemplateEngine(path,model){
console.log('執(zhí)行模板引擎帐要,渲染數(shù)據(jù)把敞。')
fs.readFile(path,{encoding:"utf-8",flag:"r"},(err,data)=>{
if(err){
this.end(err);
}else{
/**
* 使用正則替換掉要渲染的數(shù)據(jù)
* 本例中只模擬了簡單對象的渲染處理
* 其他 if,for等未實現(xiàn)榨惠。
*/
let reg = /\{\{(.*?)\}\}/igs
let result;
while(result = reg.exec(data)){
//去除2邊的空白
let strKey = result[1].trim()
let strValue = model[strKey]
//將模板中的語法位置替換為要響應的數(shù)據(jù)
data = data.replace(result[0],strValue)
}
/**
* 返回渲染完成的html內(nèi)容
* 因為回調(diào)函數(shù)使用的是匿名函數(shù)奋早,所在可以使用this對象盛霎,此處的this指向的是調(diào)用者,
* 此例中耽装,調(diào)用者是http請求的響應對象res愤炸,end是res對象中內(nèi)置的一個函數(shù),此函數(shù)作用是結束請求掉奄,并發(fā)送響應數(shù)據(jù)规个。
*/
this.end(data);
}
})
}
/**
* 實現(xiàn)一個簡單的模型引擎過濾器
* 此過濾器中向res對象追加了模板渲染引擎函數(shù)render。
*/
function templateEngineFilter(req,res){
if(req.url == '/'){
console.log('執(zhí)行模板引擎過濾器姓建,向響應對象追加一個模板渲染引擎函數(shù)')
res.render = defaultTemplateEngine;
}
}
//創(chuàng)建一個服務
let server = http.createServer();
//服務監(jiān)聽請求
server.on('request',async function(req,res){
console.log('收到請求:' + req.url);
//執(zhí)行請求過濾器
templateEngineFilter(req,res);
//設置響應類型及字符集編碼
res.setHeader('Content-Type','text/html;charset=utf-8')
//如果請求路徑是根路徑 ‘/’ 則返回電影信息頁面诞仓,否則返回404
if(req.url=='/'){
//從數(shù)據(jù)庫中獲取電影信息
let movie = await MockDataBase.getMovie();
//調(diào)用響應對象的模板渲染函數(shù),將數(shù)據(jù)渲染到頁面
res.render('./index.html',movie)
}else{
res.end('404速兔!資源不存在墅拭。')
}
})
//服務監(jiān)聽80端口
server.listen(80,function(){
console.log('服務啟動成功。')
})
運行命令涣狗,啟動服務
node server.js
1593919958598-9683465b-b239-4462-a08f-311bdc8305c2.gif