這裏只引入一種模板引擎的介紹,更多方法能夠查詢文檔javascript
art-Template 模板引擎介紹
簡介:css
特性:html
模板:前端
模板引擎的使用:
1.首先須要引入插件:java
<script src="./template-web.js"></script>
2.語法:jquery
{{value}} {{data.key}} {{data['key']}} {{a ? b : c}} {{a || b}} {{a + b}}
- 原始語法
<%= value %> <%= data.key %> <%= data['key'] %> <%= a ? b : c %> <%= a || b %> <%= a + b %>
{{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] %> <% } %>
核心方法:
template(filename, content): 根據模板名渲染模板。返回動態生成的頁面結構git
案例:使用模板引擎簡寫語法渲染首頁github
<html lang="en"> <head> <meta charset="UTF-8"> <title>Hero - Admin</title> <link rel="stylesheet" href="./css/bootstrap.css"> <style> .hero-list img { width: 50px; height: 50px; display: block } .hero-list td { height: 50px; line-height: 50px; } </style> </head> <body> <header> <div class="page-header container"> <h1>王者榮耀 <small>英雄管理器</small></h1> </div> </header> <div class="container hero-list"> <table class="table table-hover"> <thead> <tr> <th>編號</th> <th>名稱</th> <th>性別</th> <th>頭像</th> <th>操做</th> </tr> </thead> <tbody id="tbody"> <tr> <td>1</td> <td>jack</td> <td>男</td> <td><img src="http://127.0.0.1:3002/images/1.jpg"></td> <td><a href="#">查看</a> <a href="javascript:;">修改</a> <a href="javascript:;">刪除</a></td> </tr> </tbody> </table> </div> <!-- 下面建立頁面動態結構所須要的模板 --> <!--type屬性就是規範了裏面的代碼以何種語法進行解析 ,script默認的type爲text/javascript,script有默認的type,若是設置類型爲text/template,那麼瀏覽器知道這不是js,也不會按js語法進行解析, 同時它還知道這是一個模板結構,因此會按模板結構的語法處理 --> <script type="text/template" id='listTemp'> {{each data as value index}} <tr> <td>{{i+1}}</td> <td>{{value.name}}</td> <td>{{value.gender}}</td> <td><img src="http://127.0.0.1:3002/images/{{value.img}}"></td> <td><a href="#">查看</a> <a href="javascript:;">修改</a> <a href="javascript:;">刪除</a></td> </tr> {{/each}} </script> <!-- 引入jq --> <script src="./js/jquery.min.js"></script> <!-- 引入模板引擎 --> <script src="./js/template-web.js"></script> <script> $(function () { // 頁面一加載就發起ajax請求 $.ajax({ type: 'get', url: 'http://127.0.0.1:3002/getalldata', dataType: 'json', success: function (result) { console.log(result) if (result.code == 200) { // 調用模板引擎,生成動態結構 var html = template('listTemp', result) // 將動態結構填充到頁面指定結構 $('#tbody').html(html) } } }) }) </script> </body> </html>