我們開始通過前端瀏覽器發送ajax請求獲取服務器數據的，前端獲取數據后進行遍歷展示；
缺點就是發送多次請求、不利於搜索引擎查找。
那么如何改善呢？
可以修改為后端渲染數據，如 使用模板引擎art-template
art-template一些資源
#npm 地址
https://www.npmjs.com/package/art-template
#github 地址
https://github.com/aui/art-template
#官方文檔(經常被牆，可以看看下面這個)
https://aui.github.io/art-template/zh-cn/index.html
#看雲文檔資料
https://www.kancloud.cn/lanju/art-template
介紹
art-template 是一個簡約、超快的模板引擎。
它采用作用域預聲明的技術來優化模板渲染速度，從而獲得接近 JavaScript 極限的運行性能，並且同時支持 NodeJS 和瀏覽器。
特性
- 擁有接近 JavaScript 渲染極限的的性能
- 調試友好：語法、運行時錯誤日志精確到模板所在行；支持在模板文件上打斷點（Webpack Loader）
- 支持 Express、Koa、Webpack
- 支持模板繼承與子模板
- 瀏覽器版本僅 6KB 大小
安裝
Npm
npm install art-template --save
如上路表示安裝完成
瀏覽器版本直接去下載即可
語法
art-template 支持標准語法與原始語法。標准語法可以讓模板易讀寫，而原始語法擁有強大的邏輯表達能力。
標准語法支持基本模板語法以及基本 JavaScript 表達式；原始語法支持任意 JavaScript 語句，這和 EJS 一樣。
輸出
標准語法
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
原始語法
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
模板一級特殊變量可以使用 $data 加下標的方式訪問：
{{$data['user list']}}
原文輸出
標准語法
{{@ value }}
原始語法
<%- value %>
原文輸出語句不會對
HTML內容進行轉義處理，可能存在安全風險，請謹慎使用。
條件
標准語法
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
原始語法
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
循環
標准語法
{{each target}}
{{$index}} {{$value}}
{{/each}}
原始語法
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
target支持array與object的迭代，其默認值為$data。$value與$index可以自定義：{% raw %}{{each target val key}}{% endraw %}。
變量
標准語法
{{set temp = data.sub.content}}
原始語法
<% var temp = data.sub.content; %>
模板繼承
標准語法
{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}
原始語法
<% extend('./layout.art') %>
<% block('head', function(){ %> ... <% }) %>
模板繼承允許你構建一個包含你站點共同元素的基本模板“骨架”。范例：
<!--layout.art-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{block 'title'}}My Site{{/block}}</title>
{{block 'head'}}
<link rel="stylesheet" href="main.css">
{{/block}}
</head>
<body>
{{block 'content'}}{{/block}}
</body>
</html>
<!--index.art-->
{{extend './layout.art'}}
{{block 'title'}}{{title}}{{/block}}
{{block 'head'}}
<link rel="stylesheet" href="custom.css">
{{/block}}
{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}
渲染 index.art 后，將自動應用布局骨架。
子模板
標准語法
{{include './header.art'}}
{{include './header.art' data}}
原始語法
<% include('./header.art') %>
<% include('./header.art', data) %>
data數默認值為$data；標准語法不支持聲明object與array，只支持引用變量，而原始語法不受限制。- art-template 內建 HTML 壓縮器，請避免書寫 HTML 非正常閉合的子模板，否則開啟壓縮后標簽可能會被意外“優化。
過濾器
注冊過濾器
template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};
template.defaults.imports.timestamp = function(value){return value * 1000};
過濾器函數第一個參數接受目標值。
標准語法
{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}
{% raw %}{{value | filter}}{% endraw %} 過濾器語法類似管道操作符，它的上一個輸出作為下一個輸入。
原始語法
<%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm:ss') %>
如果想修改
{% raw %}{{{% endraw %}``{% raw %}}}{% endraw %}與<%``%>，請參考 解析規則
API
template(filename, content)
根據模板名渲染模板。
-
參數
：
{string} filename{Object,string} content
-
返回值
：
- 如果
content為Object，則渲染模板並返回string - 如果
content為string，則編譯模板並返回function
- 如果
var html = template('/welcome.art', {
value: 'aui'
});
瀏覽器版本無法加載外部文件，
filename為存放模板的元素id
示例
編譯模板並緩存。
// compile && cache
template('/welcome.art', 'hi, <%=value%>.');
// use
template('/welcome.art', {
value: 'aui'
});
.compile(source, options)
編譯模板並返回一個渲染函數。
-
參數
：
{string} source{Object} options
-
返回值：
{function}
示例
var render = template.compile('hi, <%=value%>.');
var html = render({value: 'aui'});
.render(source, data, options)
編譯並返回渲染結果。
-
參數
：
{string} source{Object} options
-
返回值：
{string}
示例
var html = template.render('hi, <%=value%>.', {value: 'aui'});
.defaults
模板引擎默認配置。參考 選項。
- 類型：
{Object}
.extension
給 NodeJS require.extensions 注冊的模板渲染函數。
- 類型：
{Object}
示例
加載 .ejs 模板：
var template = require('art-template');
require.extensions['.ejs'] = template.extension;
var view = require('./index.ejs');
var html = view(data);
.art 默認被注冊，可以直接使用：
var template = require('art-template');
var view = require('./index.art');
var html = view(data);
需要注意的是：此功能僅對 NodeJS 生效，如果要在瀏覽器中使用模板文件渲染功能，請使用 Webpack art-template-loader。
使用
簡單Demo
art-test.html
<body>
<h1>你好</h1>
<h2>{{data[0].name}}</h2>
</body>
test.js
//引入art-template模塊
var template = require('art-template');
//設置 模板根目錄 到當前路徑。如果 filename 字段不是本地路徑，則在 root 查找模板
template.defaults.root = './';
//根據模板名渲染模板
var html = template('./art-test.html',{data:[{name:123,age:345},{a:678,b:987}]});
console.log(html);
運行結果
