Express全系列教程之(十一):渲染ejs模板引擎

一筐带、簡介

相比于jade模板引擎蝉绷,ejs對原HTML語言就未作出結構上的改變,只不過在其交互數據方面做出了些許修改樟氢,相比于jade更加簡單易用解愤。因此其學習成本是很低的镇饺。您也可參考ejs官網:https://ejs.bootcss.com/

二、ejs基本使用

這里我們使用如下配置文件:


我們啊可以通過下面的方式實現基本的ejs操作:

app.js文件:

const express=require("express");

const ejs=require("ejs");

const fs=require("fs");

var app=express();

//引用ejs

app.set('views',"public"); //設置視圖的對應目錄

app.set("view engine","ejs"); //設置默認的模板引擎

app.engine('ejs', ejs.__express); //定義模板引擎

app.get("/",function(req,res){

????res.render("index.ejs",{title: "<h4>express</h4>"});

});

app.listen(8080);

ejs文件:

<!DOCTYPE html>

<html>

????<head>

????????<meta charset="utf-8">

????????<title></title>

????</head>

????<body>

????????<% for(var i=0;i<10;i++){ %>

????????????<%= i %>

????????<% } %>

????????<!-- 獲取變量 -->

????????<div class="datas">

????????????<p>獲取變量:</p>

????????????<%- title %>

????????????<%= title %>

????????</div>

????</body>

</html>

這時我們會得到如下圖的結果:


由此可以知道:

<% xxx %>:里面寫入的是js語法送讲,

<%= xxx %>:里面是服務端發(fā)送給ejs模板轉義后的變量奸笤,輸出為原h(huán)tml

<%- xxx %>:里面也是服務端發(fā)送給ejs模板后的變量,不過他會把html輸出來

同理res.render()函數也是支持回調的:

res.render('user', { name: 'Tobi' }, function(err, html) {

? console.log(html);

});

這樣我們即可將看到heml的內容哼鬓。另外值得說明的是ejs模塊也有ejs.render()和ejs.renderFile()方法监右,他在這里與res.render()作用類似,如下:

ejs.render(str, data, options);

ejs.renderFile(filename, data, options, function(err, str){

? ? // str => 輸出繪制后的 HTML

});

三异希、ejs標簽各種含義

<% '腳本' 標簽健盒,用于流程控制,無輸出称簿。

<%_ 刪除其前面的空格符

<%= 輸出數據到模板(輸出是轉義 HTML 標簽)

<%- 輸出非轉義的數據到模板

<%# 注釋標簽扣癣,不執(zhí)行、不輸出內容

<%% 輸出字符串 '<%'

%> 一般結束標簽

-%> 刪除緊隨其后的換行符

_%> 將結束標簽后面的空格符刪除

四憨降、option的配置:

cache 緩存編譯后的函數父虑,需要提供 filename

filename 被 cache 參數用做鍵值,同時也用于 include 語句

context 函數執(zhí)行時的上下文環(huán)境

compileDebug 當為 false 時不編譯調試語句

client 返回獨立的編譯后的函數

delimiter 放在角括號中的字符授药,用于標記標簽的開與閉

debug 將生成的函數體輸出

_with 是否使用 with() {} 結構士嚎。如果為 false,所有局部數據將存儲在 locals 對象上烁焙。

localsName 如果不使用 with 航邢,localsName 將作為存儲局部變量的對象的名稱。默認名稱是 locals

rmWhitespace 刪除所有可安全刪除的空白字符骄蝇,包括開始與結尾處的空格。對于所有標簽來說操骡,它提供了一個更安全版本的 -%> (在一行的中間并不會剔除標簽后面的換行符)九火。

escape 為 <%= 結構設置對應的轉義(escape)函數。它被用于輸出結果以及在生成的客戶端函數中通過 .toString() 輸出册招。(默認轉義 XML)岔激。

以上就為ejs基本用法,往后對數據庫操作就直接把json數據從服務器返送給模板引擎就行是掰;

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末虑鼎,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌炫彩,老刑警劉巖匾七,帶你破解...
    沈念sama閱讀 212,816評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異江兢,居然都是意外死亡昨忆,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 90,729評論 3 385
  • 文/潘曉璐 我一進店門杉允,熙熙樓的掌柜王于貴愁眉苦臉地迎上來邑贴,“玉大人,你說我怎么就攤上這事叔磷÷<荩” “怎么了?”我有些...
    開封第一講書人閱讀 158,300評論 0 348
  • 文/不壞的土叔 我叫張陵改基,是天一觀的道長独旷。 經常有香客問我,道長寥裂,這世上最難降的妖魔是什么嵌洼? 我笑而不...
    開封第一講書人閱讀 56,780評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮封恰,結果婚禮上麻养,老公的妹妹穿的比我還像新娘。我一直安慰自己诺舔,他們只是感情好鳖昌,可當我...
    茶點故事閱讀 65,890評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著低飒,像睡著了一般许昨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上褥赊,一...
    開封第一講書人閱讀 50,084評論 1 291
  • 那天糕档,我揣著相機與錄音,去河邊找鬼拌喉。 笑死速那,一個胖子當著我的面吹牛,可吹牛的內容都是我干的尿背。 我是一名探鬼主播端仰,決...
    沈念sama閱讀 39,151評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼田藐!你這毒婦竟也來了荔烧?” 一聲冷哼從身側響起吱七,我...
    開封第一講書人閱讀 37,912評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎鹤竭,沒想到半個月后踊餐,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 44,355評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡诺擅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,666評論 2 327
  • 正文 我和宋清朗相戀三年市袖,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片烁涌。...
    茶點故事閱讀 38,809評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡苍碟,死狀恐怖,靈堂內的尸體忽然破棺而出撮执,到底是詐尸還是另有隱情微峰,我是刑警寧澤,帶...
    沈念sama閱讀 34,504評論 4 334
  • 正文 年R本政府宣布抒钱,位于F島的核電站蜓肆,受9級特大地震影響,放射性物質發(fā)生泄漏谋币。R本人自食惡果不足惜仗扬,卻給世界環(huán)境...
    茶點故事閱讀 40,150評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蕾额。 院中可真熱鬧早芭,春花似錦、人聲如沸诅蝶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽调炬。三九已至语盈,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間缰泡,已是汗流浹背刀荒。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留匀谣,地道東北人照棋。 一個月前我還...
    沈念sama閱讀 46,628評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像武翎,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子溶锭,可洞房花燭夜當晚...
    茶點故事閱讀 43,724評論 2 351

推薦閱讀更多精彩內容