Node.js 動手實現(xiàn)簡單的模板引擎

根據(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
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末谍婉,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子镀钓,更是在濱河造成了極大的恐慌屡萤,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件掸宛,死亡現(xiàn)場離奇詭異,居然都是意外死亡招拙,警方通過查閱死者的電腦和手機唧瘾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來别凤,“玉大人饰序,你說我怎么就攤上這事」婺模” “怎么了求豫?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長诉稍。 經(jīng)常有香客問我蝠嘉,道長,這世上最難降的妖魔是什么杯巨? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任蚤告,我火速辦了婚禮,結果婚禮上服爷,老公的妹妹穿的比我還像新娘杜恰。我一直安慰自己获诈,他們只是感情好,可當我...
    茶點故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布心褐。 她就那樣靜靜地躺著舔涎,像睡著了一般。 火紅的嫁衣襯著肌膚如雪逗爹。 梳的紋絲不亂的頭發(fā)上亡嫌,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天,我揣著相機與錄音桶至,去河邊找鬼昼伴。 笑死,一個胖子當著我的面吹牛镣屹,可吹牛的內(nèi)容都是我干的圃郊。 我是一名探鬼主播,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼女蜈,長吁一口氣:“原來是場噩夢啊……” “哼持舆!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起伪窖,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤逸寓,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后覆山,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體竹伸,經(jīng)...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年簇宽,在試婚紗的時候發(fā)現(xiàn)自己被綠了勋篓。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡魏割,死狀恐怖譬嚣,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情钞它,我是刑警寧澤拜银,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站遭垛,受9級特大地震影響尼桶,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜锯仪,卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一疯汁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧卵酪,春花似錦幌蚊、人聲如沸谤碳。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蜒简。三九已至,卻和暖如春漩仙,著一層夾襖步出監(jiān)牢的瞬間搓茬,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工队他, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留卷仑,地道東北人。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓麸折,卻偏偏與公主長得像锡凝,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子垢啼,可洞房花燭夜當晚...
    茶點故事閱讀 43,490評論 2 348