5.ejs模版
#5.1.什么是模版引擎翅阵？
為了使用戶界面與業(yè)務(wù)數(shù)據(jù)（內(nèi)容）分離而產(chǎn)生的，它可以生成特定格式的文檔迁央，用于網(wǎng)站的模板引擎就會生成一個標(biāo)準(zhǔn)的HTML文檔掷匠。
image
在后端開發(fā)中，處理數(shù)據(jù)的代碼和展示數(shù)據(jù)的代碼是分離的岖圈，這就是前面說的讹语，用戶界面和業(yè)務(wù)數(shù)據(jù)內(nèi)容分離，但是真的展現(xiàn)到前端給用戶看到的界面都是數(shù)據(jù)和界面融合在一起的蜂科，模版引擎的作用就是把html文件和后端的數(shù)據(jù)柔和在一起生成一個html文件返回給前端展示顽决，這種方式又叫做服務(wù)端渲染。
#5.2.在express中使用ejs模版引擎
第一步导匣，安裝ejs
npm install ejs --save
第二步才菠，在app.js中引入ejs
var ejs = require('ejs')
第三步，設(shè)置express的模版文件夾贡定，app.set方法赋访，表示設(shè)置某個屬性名的value，例如：設(shè)置express的views缓待，views指express中模版文件的路徑蚓耽，路徑的值為第二個參數(shù)給的值
app.set('views', path.join(__dirname, 'views'))
第四步，告訴express使用ejs來作為模板引擎命斧，并且設(shè)置模板文件后綴
app.engine('html', ejs._express)
第五步田晚，注冊模板引擎
app.set('view engine', 'html')
第六步，ejs模板引擎初體驗
1.在"/"路由中国葬，渲染"index.html"文件，并帶參數(shù)
app.get('/', function (req, res){
// res.sendFile(path.resolve('./views/index.html'))
res.render('index.html', {title: '螺釘課堂！；闼摹接奈！'})
})
2.在‘index.html’文件中去使用數(shù)據(jù)
<h1><%= title %></h1>
#5.3.ejs的常用語法
1.基本語法，后臺數(shù)據(jù)是融和在html模板中的通孽，在html模板中序宦，通過自定義標(biāo)簽的形式來區(qū)分到底是ejs的標(biāo)簽還是html的標(biāo)簽 例如：
<%= title %>
常用的標(biāo)簽：
1、<% if|for %> 這種叫做腳本標(biāo)簽背苦，用于寫流程控制
2互捌、<%= 變量 %> 這種標(biāo)簽的作用是把數(shù)據(jù)輸出到html
3、<%- %>這種標(biāo)簽的作用和<%= %>相同行剂，區(qū)別是這種標(biāo)簽可以解析html秕噪，<%= %>這種標(biāo)簽會把html標(biāo)簽給轉(zhuǎn)義了
2.流程控制語句
- if 語句
// 1.后臺傳入一個 isLogin字段
app.get('/', function (req, res){
// res.sendFile(path.resolve('./views/index.html'))
res.render('index.html', {title: '螺釘課堂！：裨住腌巾！', isLogin: false})
})
// 2.在模板中使用這個isLogin字段來做判斷
<% if (isLogin) { %>
<div id="wrap">
<a href="/login">歡迎admin，登錄２酢３候！</a>
<a href="/user">用戶中心</a>
</div>
<% } else { %>
<div id="wrap">
<a href="/login">登錄 | </a>
<a href="/user">用戶中心</a>
</div>
<% } %>
- for循環(huán)渲染
// 1.在后臺傳入一個數(shù)組
app.get('/', function (req, res){
// res.sendFile(path.resolve('./views/index.html'))
var userList = [
{name: '張飛', age: 29},
{name: '關(guān)羽', age: 30},
{name: '劉備', age: 31},
]
res.render('index.html', {title: '螺釘課堂Ｄ煊摹５朴！', isLogin: false, userList: userList})
})
// 2.在模板中循環(huán)出這個數(shù)組
<ul>
<% for (var i = 0; i < userList.length; i++) {%>
<li><%= userList[i].name %> ----> <%= userList[i].age %></li>
<% } %>
</ul>
// 3.也可以使用forEach方法來循環(huán)
<ul>
<% userList.forEach(function (item){%>
<li><%= item.name %> ----> <%= item.age%></li>
<% }) %>
</ul>
