一、不分離與分離的比較
1、前後端不分離,以freemarker模闆引擎為例,看一下不分離的前後端請求的流程是什麼樣的?
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuUmZxEWMyImMyYWM0UWNhBzM0cDZ4IWOlRWO1ImZjFmYfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)
從上圖可以看出,前後端開發人員的工作耦合主要在(3)Template的使用。
後端程式員和前端程式員會出現同時修改template的情況,這樣就造成了前後端的耦合,不利于快速開發和靜态展示。
2、前後端分離,以artTemplate為例
一旦前後端分離了(如上圖),前端隻需要關注rest接口以及傳回的json資料即可。是以前端程式員可以通過自定義json實作簡單的預覽與展示,這樣就解決了前後端的耦合,前後端隻通過接口進行互動。
二、artTemplate的介紹與安裝
artTemplate是比較輕量級的前端引擎技術,相比較于vue等架構,這個技術就是輕量級的;但是卻具備了開發web前端的所有渲染技術,性能也很出色,最重要的是很容易掌握。官方文檔
https://aui.github.io/art-template/docs/Windows平台安裝與使用artTemplate實作前後端分離
1、安裝NodeJs并安裝
可以從官網下載下傳,也可以從這裡
下載下傳,輕按兩下安裝即可!
2、安裝artTemplate(Tmod)
通過CMD進入NodeJs的安裝目錄,執行如下指令
npm install -g tmodjs
執行完成後,即可使用 tmod 進行HTML編譯了;編譯後的檔案是template.js,通過在HTML中引用template.js,即可實作前端引擎解析json資料,進而實作前後端分離;我們來看個例子:
3、下載下傳源碼以及代碼說明
可以直接下載下傳源碼進行閱讀;代碼中有注釋和詳解(當然也可以參考 “4、demo代碼詳解”)。輕按兩下index.html即可運作。
下載下傳連結:
http://pan.baidu.com/s/1pLr4dbt密碼:2nst
template下的所有 .html 檔案都會編譯到 template.js檔案中(每次編輯.html檔案,都會自動編譯):
如果已經明白了源碼,“4、demo代碼詳細” 可以忽略
4、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>