起因:在前後端分離的情況下,一般後端API返回的數據都是json格式,這時渲染數據就需要使用到前端的模版引擎來提高開發效率.但是查詢全網,直接使用art-template來渲染數據的文章並不多.對於我個小白又不想用Node來開發的人來說真是頭痛.
折騰了一天,終於研究出來一個比較靠譜的使用方法,在此記錄一下.
需要的文件
- jq.js(官網下載的3.x.x版本)
- art-template.js(官網web版複製的)
使用要求
- 在html中引入以上兩個文件
- 對於要渲染的元素需要id命名(名字隨意)
- 渲染的模版(script標籤)也需要id命名
- 渲染的數據(script標籤)推薦使用
$ajax獲取後臺API返回的數據,$get沒有弄清楚賦值原理,不能綁定數據
以下直接代碼部分
html:
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件夾管理</title>
<!--引入art-template文件-->
<script src="./art-template.js" type="text/javascript" charset="utf-8"></script>
<!--引入JQ文件-->
<script src="./JQ.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1 class="TC ">文件夾管理系統</h1>
<!-- 渲染的位置 -->
<table class="Mcenter TC" id="main"> </table>
<!-- 渲染模版 -->
<script type="text/html" id='box1' >
<tr>
<th>\</th><th>文件夾名稱</th><th>文件夾圖片</th><th>操作</th>
</tr>
// 循環渲染數據 如有報錯請將這句話刪除
{{ each aa }}
<tr>
<td>{{ $index }}</td>
<td>{{ $value.Name }}</td>
<td><img src="{{ $value.ImgUrl }}" alt=""/> </td>
<td>
<a href="">編輯</a>
<a href="">刪除</a>
</td>
</tr>
{{ /each }}
</script>
</div>
</body>
<!-- 渲染數據 -->
<script type="text/javascript">
var datas = {
"aa": [],
}
// 請求後臺數據
$.ajax({
type:'get',
url:'./Files.php',
async:false,
success:function(data){
datas.aa = JSON.parse( data )
}
})
//console.log(datas)
var html = template('box1', datas); //box1對應上面的渲染模版id
document.getElementById('main').innerHTML = html; //main對應上面的 元素(table)的id
</script>
</html>
用到的js和art文件代碼:
art-template:
鏈接：https://pan.baidu.com/s/1SKfwD5gW61zzLDbN65t0Iw
提取碼：brx2
JQ:
鏈接：https://pan.baidu.com/s/1o2w-z3OI1AUsKqtDNbA9FA
提取碼：i0hz
這樣就能渲染出後臺獲取到的json數據了(不在Nodejs環境中)
有更好的方法也可以提出來學習一下
如有問題請指出謝謝