後臺模板引擎ejs與前臺模板引擎artTemplate的簡單介紹

時間 2020-01-10

標籤後臺模板引擎 ejs 前臺 arttemplate 簡單介紹简体版

原文原文鏈接

動態網頁是指前端頁面當中的數據內容來源於後臺數據庫，前端的html代碼會隨着後臺數據的變化而變化，是動態生成的。製做動態網頁有兩種方式，一種方式是在後臺拿到前端的html模板，利用後臺模板引擎（如ejs等）在後臺完成數據與html模板的拼接，最後把拼接完成的完整html代碼返回給前端。可是這種工做模式會逐步走向過期，由於它不符合先後端分離的趨勢。而第二種方式則更加符合咱們所提倡的先後端分離的概念，即後臺只提供json數據，不作模板拼接的工做，前端經過ajax來向後臺請求json數據，而後在前臺利用前臺模板引擎（如artTemplate等）完成數據與模板的拼接工做，從而生成完整的html代碼。下面就詳細介紹這兩種模板引擎的經常使用用法。html

1、後臺模板引擎ejs

如今比較著名的後臺模板引擎有ejs和jade。這兩個都屬於node的第三方模塊包，均可以經過npm的方式進行下載，咱們下面具體介紹ejs的用法。前端

一、下載並引包

在當前的項目文件夾下，用命令->npm install ejs來下載這個模塊包。而後經過const ejs = require('ejs');來引包。node

二、書寫前端模板

因爲以後要在後臺完成模板拼接的工做，而且前端的數據也來源於後臺，故對於前端模板，咱們只須要根據ejs所須要的模板的語法規則，把以後要填入數據的部分用特殊的標識符標出便可。咱們用<% %>來包裹在html代碼當中出現的js代碼，對於html代碼當中須要數據輸出的部分用<%= %>來包裹表示，這些標識符內部出現的變量、數組、對象等均來源於後臺數據。如index.html當中示例：git

<!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>

三、後臺模板引擎完成模板拼接

咱們將前端模板index.html文件，與主文件1.js放在同一個目錄下，在1.js當中使用http模塊能夠新建一個服務器，當用戶訪問指定ip和指定端口號時，會利用fs模塊去讀index.html文件當中的內容，直接獲得爲buffer類型，再使用.toString()方法將其轉換爲字符串類型。在後臺利用ejs.render()方法把模板字符串和json數據拼接，生成完整的html代碼字符串，而後設置好響應頭，把完整的內容經過響應體的方式呈遞給前端頁面。下面爲主文件1.js的示例代碼：github

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');

開啓該服務器以後，訪問對應的網址，則呈遞的頁面結果以下圖所示：ajax

2、前臺模板引擎artTemplate

一、下載並引包

咱們在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>的方式引入。數據庫

二、書寫模板

咱們在該前端頁面當中在<script type="text/html" id="test"></script>標籤對當中書寫html模板字符串，其中給該script標籤訂義一個id名，便於識別。咱們用<% %>來包裹在html代碼當中出現的js代碼，對於html代碼當中須要數據輸出的部分用<%= %>來包裹表示，這些標識符內部出現的變量、數組、對象等均來源於後臺數據。這種用法與以前介紹的ejs相相似。下面爲模板的示例代碼：npm

<script type="text/html" id="test">
    <h3><%= title %></h3>
    <ul>
        <% for(var i = 0; i < list.length; i++){ %>
            <li><%= list[i] %></li>
        <% } %>
    </ul>
</script>

三、前臺模板引擎完成模板拼接

在此咱們在前端定義一個json數據，實際上數據應該來自於ajax請求的後臺數據。再利用固定的方法名template(),將模板字符串與json數據進行模板拼接，造成完整的html代碼，注入到dom元素當中。其中index.html的示例代碼爲：json

<!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>

前端頁面渲染的結果以下圖所示：後端