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

時間 2019-11-08

標籤 express 系列教程十一渲染 ejs 模板引擎简体版

原文原文鏈接

1、簡介

相比於jade模板引擎，ejs對原HTML語言就未做出結構上的改變，只不過在其交互數據方面作出了些許修改，相比於jade更加簡單易用。所以其學習成本是很低的。您也可參考ejs官網：https://ejs.bootcss.com/javascript

2、ejs基本使用

這裏咱們使用以下配置文件：css

咱們啊能夠經過下面的方式實現基本的ejs操做：html

app.js文件：java

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>

　　這時咱們會獲得以下圖的結果：express

由此能夠知道：
<% xxx %>：裏面寫入的是js語法，
<%= xxx %>：裏面是服務端發送給ejs模板轉義後的變量，輸出爲原html
<%- xxx %>：裏面也是服務端發送給ejs模板後的變量，不過他會把html輸出來json

同理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
});

　　3、ejs標籤各類含義

<% '腳本' 標籤，用於流程控制，無輸出。
<%_ 刪除其前面的空格符
<%= 輸出數據到模板（輸出是轉義 HTML 標籤）
<%- 輸出非轉義的數據到模板
<%# 註釋標籤，不執行、不輸出內容
<%% 輸出字符串 '<%'
%> 通常結束標籤
-%> 刪除緊隨其後的換行符
_%> 將結束標籤後面的空格符刪除服務器

4、option的配置：

cache 		緩存編譯後的函數，須要提供 filename
filename 	被 cache 參數用作鍵值，同時也用於 include 語句
context 	函數執行時的上下文環境
compileDebug 當爲 false 時不編譯調試語句
client 		返回獨立的編譯後的函數
delimiter 	放在角括號中的字符，用於標記標籤的開與閉
debug 		將生成的函數體輸出
_with 		是否使用 with() {} 結構。若是爲 false，全部局部數據將存儲在 locals 對象上。
localsName 	若是不使用 with ，localsName 將做爲存儲局部變量的對象的名稱。默認名稱是 locals
rmWhitespace 刪除全部可安全刪除的空白字符，包括開始與結尾處的空格。對於全部標籤來講，它提供了一個更安全版本的 -%> (在一行的中間並不會剔除標籤後面的換行符)。
escape 	爲 <%= 結構設置對應的轉義（escape）函數。它被用於輸出結果以及在生成的客戶端函數中經過 .toString() 輸出。(默認轉義 XML)。

　　以上就爲ejs基本用法，日後對數據庫操做就直接把json數據從服務器返送給模板引擎就行；