動態網頁是指前端頁面當中的數據內容來源於后台數據庫，前端的html代碼會隨着后台數據的變化而變化，是動態生成的。制作動態網頁有兩種方式，一種方式是在后台拿到前端的html模板，利用后台模板引擎（如ejs等）在后台完成數據與html模板的拼接，最后把拼接完成的完整html代碼返回給前端。但是這種工作模式會逐步走向過時，因為它不符合前后端分離的趨勢。而第二種方式則更加符合我們所提倡的前后端分離的概念，即后台只提供json數據，不做模板拼接的工作，前端通過ajax來向后台請求json數據，然后在前台利用前台模板引擎（如artTemplate等）完成數據與模板的拼接工作，從而生成完整的html代碼。下面就詳細介紹這兩種模板引擎的常用用法。
一、后台模板引擎ejs
現在比較著名的后台模板引擎有ejs和jade。這兩個都屬於node的第三方模塊包，都可以通過npm的方式進行下載，我們下面具體介紹ejs的用法。
1、下載並引包
在當前的項目文件夾下，用命令->npm install ejs來下載這個模塊包。然后通過const ejs = require('ejs');來引包。
2、書寫前端模板
由於之后要在后台完成模板拼接的工作，並且前端的數據也來源於后台，故對於前端模板，我們只需要根據ejs所需要的模板的語法規則，把之后要填入數據的部分用特殊的標識符標出即可。我們用<% %>來包裹在html代碼當中出現的js代碼，對於html代碼當中需要數據輸出的部分用<%= %>來包裹表示，這些標識符內部出現的變量、數組、對象等均來源於后台數據。如index.html當中示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ejs-template</title> </head> <body> <h1>模板字符串<%= a %></h1> <ul> <% for(var i = 0; i < list.length; i++){ %> <li><%= list[i] %></li> <% } %> </ul> </body> </html>
3、后台模板引擎完成模板拼接
我們將前端模板index.html文件，與主文件1.js放在同一個目錄下，在1.js當中使用http模塊可以新建一個服務器，當用戶訪問指定ip和指定端口號時，會利用fs模塊去讀index.html文件當中的內容，直接得到為buffer類型，再使用.toString()方法將其轉換為字符串類型。在后台利用ejs.render()方法把模板字符串和json數據拼接，生成完整的html代碼字符串，然后設置好響應頭，把完整的內容通過響應體的方式呈遞給前端頁面。下面為主文件1.js的示例代碼：
const ejs = require('ejs');
const http =require('http');
const fs = require('fs');
const path = require('path');
var server = http.createServer((req,res)=>{
var dictionary = {
a:'ejs',
list:['apple','banana','pear','tomato']
};
var target = path.join(__dirname,'./index.html');
fs.readFile(target,(err,data)=>{
if(err) throw err;
var template = data.toString();
var html = ejs.render(template,dictionary);
res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});
res.end(html);
});
});
server.listen(3000,'192.168.155.1');
開啟該服務器之后，訪問對應的網址，則呈遞的頁面結果如下圖所示：
二、前台模板引擎artTemplate
1、下載並引包
我們在github上搜索artTemplate,下載地址為 https://github.com/lhywork/ar...，下載完成之后在dist文件夾下可以看到對應的四個js源文件，由於artTemplate支持兩種語法，簡潔語法版和原生語法版，其中js文件名當中帶-native的為原生語法版，帶-debug的為帶注釋的js文件。下面我們只介紹原生語法版的用法，為了使引入的文件盡可能的小，所以選擇template-native.js文件進行引入。
由於是前台模板引擎，所以我們在前端文件index.html當中用<script src="template-native.js"></script>的方式引入。
2、書寫模板
我們在該前端頁面當中在<script type="text/html" id="test"></script>標簽對當中書寫html模板字符串，其中給該script標簽定義一個id名，便於識別。我們用<% %>來包裹在html代碼當中出現的js代碼，對於html代碼當中需要數據輸出的部分用<%= %>來包裹表示，這些標識符內部出現的變量、數組、對象等均來源於后台數據。這種用法與之前介紹的ejs相類似。下面為模板的示例代碼：
<script type="text/html" id="test">
<h3><%= title %></h3>
<ul>
<% for(var i = 0; i < list.length; i++){ %>
<li><%= list[i] %></li>
<% } %>
</ul>
</script>
3、前台模板引擎完成模板拼接
在此我們在前端定義一個json數據，實際上數據應該來自於ajax請求的后台數據。再利用固定的方法名template(),將模板字符串與json數據進行模板拼接，形成完整的html代碼，注入到dom元素當中。其中index.html的示例代碼為：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>artTemplate-demo</title> <script src="template-native.js"></script> <script type="text/html" id="test"> <h3><%= title %></h3> <ul> <% for(var i = 0; i < list.length; i++){ %> <li><%= list[i] %></li> <% } %> </ul> </script> <script> window.onload = function(){ var dictionary = { title : 'artTemplate-demo', list: ['apple','banana','pear','tomato'] }; var html = template('test',dictionary); document.getElementById('content').innerHTML = html; } </script> </head> <body> <div id="content"></div> </body> </html>
前端頁面渲染的結果如下圖所示：
