輕量級artTemplate引擎 實現前後端分離—語法篇（實戰）
阿新 • • 發佈：2019-02-14
語法篇通過本系列文章，你將獲得以下問題的答案：
1、什麼是前後端分離
2、如何用artTemplate實現前後端分離
3、SpringMVC 實現後端 rest 介面
4、徹底解決ajax跨域訪問
5、效果演示、demo原始碼下載
上篇文章主要介紹了前後端分離與不分離的區別和優缺點；以及如何安裝Node、執行demo；本篇文章主要講解artTemplate的基本語法；
一、下載可以直接下載原始碼閱讀。
結構如下
如果沒有下載原始碼，可以在“二、閱讀原始碼”中檢視
二、閱讀原始碼grammarModule.html
<!DOCTYPE html><html grammarSub.html
<!-- 子模板 -->
{{if subData}}
{{subData.content}}<br/>
{{#subData.content}}<br/>
{{subData.person.name}}-{{subData.person.age}}<br/>
{{/if}}grammar.html
<!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><!-- 使用jsonp可以解決跨域訪問，後面文章介紹 --><scripttype="text/javascript"src="./res/js/jquery.jsonp.js"></script><!-- 語法 grammarModule 編譯後的 template.js --><scripttype="text/javascript"src="./template/build/template.js"></script><!-- 引入自定義的js（頁面載入完會執行），這樣js就不用寫在 HTML 檔案中了 --><scripttype="text/javascript"src="./grammar.js"></script></head><body><!-- 語法介紹DIV-start --><divid="grammarModuleDIV"></div><!-- 語法介紹DIV-end --></body></html>grammar.js
/**
* 將系統使用的js放在這個檔案中，避免了將js的程式碼寫到HTML中
*/
jQuery(document).ready(function($){//頁面載入完成，自動執行var data ={//參考 grammarModule.html中語法//取值語法"content":"<font color=\"red\">hello world</font>","person":{"name":"王陽明","age":21},//邏輯語法"index":4,//遍歷語法"personList":[{"name":"王陽明","age":21},{"name":"朱熹","age":30},{"name":"程顥","age":50}],//子模板巢狀"subData":{"content":"<font color=\"red\">hello world</font>","person":{"name":"王陽明","age":21},},//輔助方法"s1":'hello ',"s2":"world"};//輔助方法template.helper('append',function(str1, str2){return str1 + str2;});var gmHTML =template('grammarModule',data);//動態獲取的
$('#grammarModuleDIV').html(gmHTML);});1）SpringMVC提供後臺介面，並部署在Tomcat伺服器
2）前端frontDemo部署在Apache伺服器
3）解決跨域訪問問題（如果前後端都部署在tomcat中，不存在此問題）
作者： qicong88
連結：http://www.imooc.com/article/20293
來源：慕課網
本文原創釋出於慕課網 ，轉載請註明出處，謝謝合作！