一、不分離與分離的比較
1、前后端不分離，以freemarker模板引擎為例，看一下不分離的前后端請求的流程是什么樣的？
從上圖可以看出，前后端開發人員的工作耦合主要在（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>