第115天：Ajax 中artTemplate模板引擎（一）

時間 2019-11-19

標籤 115天 ajax arttemplate 模板引擎欄目 Ajax 简体版

原文原文鏈接

1、不分離與分離的比較

一、先後端不分離，以freemarker模板引擎爲例，看一下不分離的先後端請求的流程是什麼樣的？

從上圖能夠看出，先後端開發人員的工做耦合主要在（3）Template的使用。
後端程序員和前端程序員會出現同時修改template的狀況，這樣就形成了先後端的耦合，不利於快速開發和靜態展現。javascript

二、先後端分離，以artTemplate爲例

一旦先後端分離了（如上圖），前端只須要關注rest接口以及返回的json數據便可。因此前端程序員能夠經過自定義json實現簡單的預覽與展現，這樣就解決了先後端的耦合，先後端只經過接口進行交互。html

2、artTemplate的介紹與安裝

artTemplate是比較輕量級的前端引擎技術，相比較於vue等框架，這個技術就是輕量級的；可是卻具有了開發web前端的全部渲染技術，性能也很出色，最重要的是很容易掌握。官方文檔 https://aui.github.io/art-template/docs/前端

Windows平臺安裝與使用artTemplate實現先後端分離vue

一、安裝NodeJs並安裝java

能夠從官網下載，也能夠從這裏下載，雙擊安裝便可！jquery

二、安裝artTemplate（Tmod）git

經過CMD進入NodeJs的安裝目錄，執行以下命令程序員

npm install -g tmodjsgithub

執行完成後，便可使用 tmod 進行HTML編譯了；編譯後的文件是template.js，經過在HTML中引用template.js，便可實現前端引擎解析json數據，從而實現先後端分離；咱們來看個例子：web

三、下載源碼以及代碼說明

能夠直接下載源碼進行閱讀；代碼中有註釋和詳解（固然也能夠參考「四、demo代碼詳解」）。雙擊index.html便可運行。
下載連接：http://pan.baidu.com/s/1pLr4dbt 密碼：2nst

template下的全部 .html 文件都會編譯到 template.js文件中（每次編輯.html文件，都會自動編譯）：

若是已經明白了源碼，「四、demo代碼詳細」能夠忽略

四、demo代碼詳細
一個簡單的網站首頁：index0.html，正常的網頁代碼應該是這樣的：

 1 <body>
 2 <!-- 頭部菜單-start -->
 3 <div>
 4 <ul>
 5 <!-- 若是須要從後臺獲取數據，這裏須要freemarker引擎進行數據解析 
 6 好比${var}這種方式，可是前端程序員可能不瞭解freemarker語法，
 7 從而須要後端程序員也要編輯此頁面（先後端產生了耦合）；
 8 若是var能夠經過json進行渲染，就能夠解決耦合的問題；
 9 -->
10 <li>個人菜單1</li>
11 <li>個人菜單2</li>
12 <li>個人菜單3</li> 
13 </ul>
14 </div>
15 <!-- 頭部菜單-end -->
16 </body>

如何用artTemplate解決先後端耦合的問題：

1）在template文件夾中（模板文件通常都放在其中），新建header.html文件，內容以下：

1 <ul>
2     <!--經過artTemplate引擎{{}}語法解析，更多語法後續文章介紹-->
3     <li>{{menu1}}</li>
4     <li>{{menu2}}</li>
5     <li>{{menu3}}</li>
6 </ul>

2）經過CMD進入template文件夾，執行tmod . 便可編譯成template.js：

tmod .

3）在index.html中引入 template.js 便可使用模板引擎解析json數據了，代碼以下：

 1 <!DOCTYPE html>
 2 <html lang="utf-8">
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <script type="text/javascript" src="./res/js/jquery-1.11.3.min.js"></script>
 6 
 7         <!-- header.html 編譯後的 template.js -->
 8         <script type="text/javascript" src="./template/build/template.js"></script>
 9 
10         <!-- 使用jsonp能夠解決跨域訪問，後面文章介紹 -->
11         <script type="text/javascript" src="./res/js/jquery.jsonp.js"></script>
12 
13         <script type="text/javascript">
14             //Jquery在頁面加載完成後執行；
15             jQuery(document).ready(function($){
16                 /**
17                 *1）通常data 是經過 ajax 請求後臺rest接口的數據；
18                 *2）也能夠經過ajax請求 json文件 實現；
19                 *3）咱們這裏暫時寫死；（前2種後面文章作介紹）
20                 **/
21                 var data = {menu1:'個人菜單1',menu2:'個人菜單2',menu2:'個人菜單3'};
22 
23                 //渲染數據，template返回值是HTML
24                 var headerHTML = template('header',data); 
25                 $('#headerDIV').html(headerHTML);//內容插入到 headerDIV標籤中 
26             }); 
27         </script>
28 
29     </head>
30 
31     <body>
32         <!-- 頭部-start -->
33         <div id="headerDIV"></div>
34         <!-- 頭部-end -->
35     </body>
36 
37 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。