一.主要目標
1.前後端解耦。前端主要任務是將原有頁面中的jinja2模板內容給替換，採用純粹的javascript模板引擎來進行解耦。
2.前後端分離。前端擁有自己的靜態資源服務器和路由，負責靜態文件的轉發和html頁面的返回。
二.幾種技術選型方案
選型方案，將從重構成本，人員成本(即學習成本)，部署難度等幾方面考慮。
方案一： art-template（用於html文件解耦） + node.js(express)(用於靜態資源返回 + 前端路由) + Mock.js（用於模擬僞後端數據）
方案優缺點：
1.art-template。由騰訊出品，github有人維護，API詳細，插件相關生態也還不錯，利於快速上手，重構成本相對較低。但是此模板引擎的模板繼承功能必須由node服務提供，所以前端中間層只能是node，強耦合。
2. node.js(express)。node + express 提供前端的本地服務和路由層，學習成本不高，利於快速上手。但是不適合初級前端工程師來維護，另外，部署項目是，合併前後端資源時也是個需要處理的問題，因爲需要將node引擎打進包裏。
3.mock.js，不論什麼技術方案，mockjs都能極大地提高前端的開發效率，它讓前端不再需要等待後臺接口開發完畢，只要拿到restful接口，前端可以自己按數據格式模擬數據，與後端並行開發。
方案二：art-template（用於html文件解耦） + Nginx（用於靜態資源返回） + 前端路由攔截器（類似vue-router,需要自己造輪子） + Mock.js（用於模擬僞後端數據）
方案優點：
1.最大限度的減少其他庫的引入，降低了重構的成本
2.最大限度的降低了部署的難度。
方案缺點：
1.缺點是部分關鍵功能需要自己實現，踩坑，填坑的過程必不可少，當然，研發同樣能得到鍛鍊。
2.art-template中的模板繼承功能由於是非node提供服務所以使用不了，需要前端自己實現。
方案三:
marko.js（用於解耦html文件） + Nginx（用於靜態資源返回） + 前端路由攔截器（類似vue-router,需要自己造輪子） + Mock.js（用於模擬僞後端數據）
方案優點：
1.最大限度的減少其他庫的引入，降低了重構的成本
2.最大限度的降低了部署的難度。
3.marko.js自帶SSI的shtml模板繼承功能。
方案缺點：
1.缺點是路由攔截器需要自己實現，踩坑，填坑的過程必不可少，當然，研發同樣能得到鍛鍊。
2.marko.js爲ebay研發，現已開源。但是社區生態不太好，活躍度低；庫過於龐大，其實我們只需要使用它的模板繼承功能。
方案四:
vue.js（解耦） + Nginx（靜態資源轉發） + Mock.js（用於模擬僞後端數據）
方案優點：
1.重構思路清晰，此法案使用的人很多，可以避免踩一些坑。
2.VUE生態健壯，各種方案極多，避免重複造輪子。
3.降低了部署的難度。
方案缺點：
1.重構成本高，對前端來說基本屬於重寫項目。
2.vue爲spa單頁應用，對於複雜的項目來說前端的複雜性會提高。
3.有一點學習成本，需要前端具備一定的ES6，webpack，babel的基礎。