寫個動態(tài)的頁面
1.直接看效果：
布卡動漫.png
使用到的是我們今天的主角 art-template胎食，一個簡約誓焦、超快的模板引擎何址。
2.它有2種語法（原始語法、標準語法）：
標準語法：
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
原始語法：（有點像.ASP 風格）
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
注意：上面的 “=” 表是 賦值瞬痘。原始語法一定要記得添加蒿秦。
渲染模板
var template = require('art-template');
var html = template(__dirname + '/tpl-user.art', {
user: {
name: 'aui'
}
});
核心方法
// 基于模板名渲染模板
template(filename, data);
// 將模板源代碼編譯成函數(shù)
template.compile(source, options);
// 將模板源代碼編譯成函數(shù)并立刻執(zhí)行
template.render(source, data, options);
常用的語法
1. 原文輸出
就是后臺輸出的格式是 標簽 的形式：
例如：
后臺返回標簽形式.png
語法
{{@ value }}
原始語法
<%- value %>
2. 條件
標準語法
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
原始語法
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
3. 循環(huán)
標準語法
{{each target}}
{{$index}} {{$value}}
{{/each}}
原始語法
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
注意：
- target 支持 array 與 object 的迭代，其默認值為 $data盲再。
- value 與index 可以自定義：{{each target val key}}西设。
4.變量
標準語法
{{set temp = data.sub.content}}
原始語法
<% var temp = data.sub.content; %>
更多請看官網(wǎng)。答朋。贷揽。
現(xiàn)在看我們的真實項目如何使用吧！
這是下面將要動態(tài)顯示的數(shù)據(jù)Ｃ瓮搿Ｇ菪鳌蓖救！
模板.png
1.導入模板
art-template.png
- 引入js到代碼
<!-- 1.1 引入 art-template 模板 -->
<script src="./assets/art-template/template-web.js"></script>
<!-- 處理某小塊的請求數(shù)據(jù) -->
<script src="./script/getIndex.js"></script>
- 2.使用模板
新建 getIndex.js （上圖引入的 js腳本），里面注釋很詳細了印屁。
// 1.入口函數(shù)
$(function(){
// 2.Ajax 請求 (4個參數(shù)URL循捺、type、dataType雄人、請求成功和失敗的函數(shù))
$.ajax({
url:"http://193.112.55.79:9093/php/gameCenter.php",
type:"get",
dataType:"json",
success:function(res){
// console.log(res);
/*
注意：
這里的 template參數(shù)：id="gameCenterTmp" , 表示對應的.html要渲染模板的id表記从橘；
參數(shù)2：表示 返回的數(shù)據(jù)，看情況础钠。是對象就 {data:res}
*/
var htmlStr = template("gameCenterTmp",{
data: res
})
// console.log(htmlStr);
// 對模板渲染 （tabContent 是元素的id ）
$("#tabContent ul").html(htmlStr);
}
})
})
這時看到的效果就是：（這說明有請求到數(shù)據(jù)）
解析結(jié)果.png
- 回到.html頁面恰力，渲染就可以了。
<!-- 2.使用模板 -->
<!-- 注意：
1.type：處script外都可以命名旗吁。因為我們不想讓它變成script 解析牺勾。通常使用 template
2.id :這個是在解析 后臺數(shù)據(jù)時標記是哪個 模板的請求數(shù)據(jù)
3.添加一個 新的 js 文件用來Ajax處理請求數(shù)據(jù)
-->
<script type="text/template" id="gameCenterTmp">
{{each data value index}}
<li>
<script type="text/template" id="gameCenterTmp">
{{each data value index}}
<li>
<!--
原本是這樣的：
<a href='chapter.html'>
<img src="./images/lhsl_199x259.jpg" alt="">
<p class='bookname'>靈魂撕裂</p>
</a> -->
<a href='chapter.html?id={{value.id}}'>
<img src="{{value.gamePic}}" alt="">
<p class='bookname'>{{value.gameName}}</p>
</a>
</li>
{{/each}}
</script>
-
最后：一刷新bring bring 出來了：
使用模板渲染出來數(shù)據(jù).png
總結(jié)：
使用的知識點：
- art-template 模板引擎的使用。其性能無論在前端還是后端都有極其出色的表現(xiàn)阵漏。
2.循環(huán)遍歷表達式:無論數(shù)組或者對象都可以用 each 進行遍歷.
-
jQuery中的Ajax
$.ajax({}) 可配置方式發(fā)起Ajax請求
- url 接口地址 *
- type 請求方式 *
- timeout 請求超時 *
- dataType 服務器返回格式 *
- data 發(fā)送請求數(shù)據(jù) *
- beforeSend:function () {} 請求發(fā)起前調(diào)用 *
- success 成功響應后調(diào)用 *
- error 錯誤響應時調(diào)用 *
其它的基本都是這樣操作了驻民，小伙伴趕緊動起手來實踐吧！
