ejs模板引擎
一晰绎、簡(jiǎn)介
相比于jade模板引擎彼硫，ejs對(duì)原HTML語(yǔ)言就未作出結(jié)構(gòu)上的改變吃溅，只不過(guò)在其交互數(shù)據(jù)方面做出了些許修改溶诞，相比于jade更加簡(jiǎn)單易用。因此其學(xué)習(xí)成本是很低的决侈。
二螺垢、安裝
如果使用express腳手架創(chuàng)建項(xiàng)目,項(xiàng)目默認(rèn)中已經(jīng)包含了ejs模板引擎<br />如果不是采用express創(chuàng)建的項(xiàng)目,或者項(xiàng)目中沒(méi)有,可以使用以下命令安裝
cnpm install ejs --save
二、基本使用
我們?cè)趀xpress項(xiàng)目中簡(jiǎn)單使用ejs模板引擎:
movies.ejs文件
注意后綴名為.ejs,是ejs模板引擎規(guī)定的文件格式,其中使用ejs模板語(yǔ)法渲染為Html文件
<!DOCTYPE html>
<html>
<head>
<title>電影列表</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>電影列表</h1>
<ul>
<!--<% %> 是編寫(xiě)javascript代碼的ejs模板引擎語(yǔ)法 -->
<% movies.forEach(function(item){ %>
<li>
<h4>電影名稱(chēng):</h4>
<p><%= item.name %></p>
<h4>簡(jiǎn)介:</h4>
<p><%= item.brief %></p>
<h4>導(dǎo)演:</h4>
<p><%= item.author %></p>
</li>
<% }); %>
</ul>
</body>
</html>
app.js文件：
var express = require('express');
var path = require('path');
var app = express();
// 設(shè)置模板引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
//定義一個(gè)路由,此處未使用express中的Router
app.get('/movies', function(req, res, next) {
//定義需要渲染到HTML頁(yè)面中的電影列表
let movies = [{
name:'斗戰(zhàn)勝佛之大圣之淚',
brief:'成為斗戰(zhàn)勝佛的孫悟空竟被怨靈蠱惑赖歌，唐三藏遭遇滅頂之災(zāi)枉圃！危急關(guān)頭，孫悟空揪出怨靈源頭庐冯，卻發(fā)現(xiàn)她竟是與自己有三百年緣分的天人界女神——“幸運(yùn)星”孽亲！為了找出“幸運(yùn)星”黑化的原因，拯救唐三藏展父，孫悟空踏上了一場(chǎng)回到過(guò)去之旅返劲，卻最終流下了一滴眼淚玲昧。大圣之淚，為何而流篮绿，為誰(shuí)而流孵延？',
author:'鐘智行 Frankie Chung'
},{
name:'獵謊者',
brief:'三個(gè)月前，某市發(fā)生了一起惡性綁架殺人案搔耕。三個(gè)月后隙袁，兇手與被害人都死于車(chē)禍。初出茅廬的女警韓燁找到了案件的幸存者林超凡弃榨，向他求證案件發(fā)生的經(jīng)過(guò)菩收。但隨著調(diào)查的深入，韓燁發(fā)現(xiàn)林超凡的很多證詞都存在漏洞鲸睛，再三逼問(wèn)之下娜饵，林超凡無(wú)奈坦白了另一個(gè)版本的故事，但案件真相遠(yuǎn)沒(méi)有這么簡(jiǎn)單官辈，幾乎每個(gè)人都在說(shuō)謊箱舞，而故事也開(kāi)始不斷反轉(zhuǎn)。',
author:'廉欣 Xin Lian'
},{
name:'天啟大爆炸',
brief:'《天啟大爆炸》以中國(guó)古代曾真實(shí)發(fā)生的神秘爆炸為原型拳亿，加以天馬行空的巧妙構(gòu)思晴股，為觀眾解封至今困惑世人的隱秘真相。神秘機(jī)構(gòu)“夜行司”追蹤離奇謎團(tuán)勇闖“無(wú)相城”肺魁，一場(chǎng)關(guān)乎百姓蒼生命運(yùn)博弈就此展開(kāi)电湘。',
author:'黃羿 Yi Huang / 曾黎'
}];
//渲染數(shù)據(jù)并返回html.movies是我們定義的movies.ejs文件
res.render('movies', { movies:movies });
});
module.exports = app;
訪問(wèn)http://localhost:3000/movies
1595753239175-5bfde17a-3bd1-4262-814f-290bc9f39b8c.png
res.render()函數(shù)也是支持回調(diào)的,這樣可以在模板引擎中渲染完成html后可以返回渲染的內(nèi)容
res.render('movies', { movies:movies },function(err,html){
console.log(html)
});
});
另外值得說(shuō)明的是ejs模塊也有ejs.render()和ejs.renderFile()方法，他在這里與res.render()作用類(lèi)似
ejs.render(str, data, options);
ejs.renderFile(filename, data, options, function(err, str){
// str => 輸出繪制后的 HTML
});
四鹅经、ejs標(biāo)簽含義
- <% '腳本' 標(biāo)簽寂呛，用于流程控制，無(wú)輸出瘾晃。
- <%_ 刪除其前面的空格符
- <%= 輸出數(shù)據(jù)到模板（輸出是轉(zhuǎn)義 HTML 標(biāo)簽）
- <%- 輸出非轉(zhuǎn)義的數(shù)據(jù)到模板
- <%# 注釋標(biāo)簽贷痪，不執(zhí)行、不輸出內(nèi)容
- <%% 輸出字符串 '<%'
- %> 一般結(jié)束標(biāo)簽
- -%> 刪除緊隨其后的換行符
- _%> 將結(jié)束標(biāo)簽后面的空格符刪除
更多使用方法瀏覽官方文檔
