輕量級artTemplate引擎 實現前後端分離—基礎篇（實戰）
基礎篇本系列文章分三篇：基礎篇、語法篇、實戰篇。
通過本系列文章，你將獲得以下問題的答案：
1、什麼是前後端分離
2、如何用artTemplate實現前後端分離
3、SpringMVC 實現後端 rest 介面
4、徹底解決ajax跨域訪問
5、效果演示、demo原始碼下載
“前後端分離”是目前比較火的技術，很多大公司已經選擇將前後端進行分離，比如騰訊qq空間、愛奇藝網站等...對於這枚好技術，作為程式設計師的你，肯定也想了解或者掌握。但是你也許會有疑問，我可以在短時間內掌握嗎？
答案是：60分鐘（一集美劇的時間）就可以完全掌握！
前後端不分離，以freemarker模板引擎為例，看一下不分離的前後端請求的流程是什麼樣的？
從上圖可以看出，前後端開發人員的工作耦合主要在（3）Template的使用。
後端程式設計師和前端程式設計師會出現同時修改template的情況，這樣就造成了前後端的耦合，不利於快速開發和靜態展示。
前後端分離，以artTemplate為例
一旦前後端分離了（如上圖），前端只需要關注rest介面以及返回的json資料即可。所以前端程式設計師可以通過自定義json實現簡單的預覽與展示，這樣就解決了前後端的耦合，前後端只通過介面進行互動。
artTemplate是比較輕量級的前端引擎技術，相比較於vue等框架，這個技術就是蠅量級的；但是卻具備了開發web前端的所有渲染技術，效能也很出色，最重要的是很容易掌握。官方文件
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，正常的網頁程式碼應該是這樣的：
<body><!-- 頭部選單-start --><div><ul><!-- 如果需要從後臺獲取資料，這裡需要freemarker引擎進行資料解析
比如${var}這種方式，但是前端程式設計師可能不瞭解freemarker語法，
從而需要後端程式設計師也要編輯此頁面（前後端產生了耦合）；
如果var可以通過json進行渲染，就可以解決耦合的問題；
--><li>我的選單1</li><li>我的選單2</li><li>我的選單3</li></ul></div><!-- 頭部選單-end --></body>如何用artTemplate解決前後端耦合的問題：
1）在template資料夾中（模板檔案一般都放在其中），新建header.html檔案，內容如下：
<ul><!--通過artTemplate引擎{{}}語法解析，更多語法後續文章介紹--><li>{{menu1}}</li><li>{{menu2}}</li><li>{{menu3}}</li></ul>2）通過CMD進入template資料夾，執行tmod . 即可編譯成template.js：
tmod .
3）在index.html中引入 template.js 即可使用模板引擎解析json資料了，程式碼如下：
<!DOCTYPE html><htmllang="utf-8"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><scripttype="text/javascript"src="./res/js/jquery-1.11.3.min.js"></script><!-- header.html 編譯後的 template.js --><scripttype="text/javascript"src="./template/build/template.js"></script><!-- 使用jsonp可以解決跨域訪問，後面文章介紹 --><scripttype="text/javascript"src="./res/js/jquery.jsonp.js"></script><scripttype="text/javascript">//Jquery在頁面載入完成後執行；
jQuery(document).ready(function($){/**
*1）一般data 是通過 ajax 請求後臺rest介面的資料；
*2）也可以通過ajax請求 json檔案 實現；
*3）我們這裡暫時寫死；（前2種後面文章做介紹）
**/var data ={menu1:'我的選單1',menu2:'我的選單2',menu2:'我的選單3'};//渲染資料，template返回值是HTMLvar headerHTML = template('header',data);
$('#headerDIV').html(headerHTML);//內容插入到 headerDIV標籤中 });</script></head><body><!-- 頭部-start --><divid="headerDIV"></div><!-- 頭部-end --></body></html>作者： qicong88
連結：http://www.imooc.com/article/20263
來源：慕課網
本文原創釋出於慕課網 ，轉載請註明出處，謝謝合作！