一.主要目标
1.前后端解耦。前端主要任务是将原有页面中的大量的Python Flask框架里的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 API 接口，前端可以自己按数据格式模拟数据，与后端并行开发。
方案二：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（解耦） + Mock.js（用于模拟伪后端数据）
方案优点：
1.重构思路清晰，此法案使用的人很多，可以避免踩一些坑。
2.VUE生态健壮，各种方案极多，避免重复造轮子。
3.降低了部署的难度。
方案缺点：
1.重构成本高，对前端来说基本属于重写项目。
2.vue为spa单页应用，对于复杂的项目来说前端的复杂性会提高。
3.有一点学习成本，需要前端具备一定的 ES6，webpack，babel 的基础。