一、不分离与分离的比较

1、前后端不分离，以freemarker模板引擎为例，看一下不分离的前后端请求的流程是什么样的？

从上图可以看出，前后端开发人员的工作耦合主要在（3）Template的使用。

2、前后端分离，以artTemplate为例

一旦前后端分离了（如上图），前端只需要关注rest接口以及返回的json数据即可。所以前端程序员可以通过自定义json实现简单的预览与展示，这样就解决了前后端的耦合，前后端只通过接口进行交互。

二、artTemplate的介绍与安装

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即可运行。

template下的所有 .html 文件都会编译到 template.js文件中（每次编辑.html文件，都会自动编译）：

如果已经明白了源码，“4、demo代码详细” 可以忽略

4、demo代码详细

1  2 
      3 
     
       4 
      
        5 
       10 
       
我的菜单1
11 
       
我的菜单2
12 
       
我的菜单3
 13 
      
14 
     
15 
     16 

如何用artTemplate解决前后端耦合的问题：

1）在template文件夹中（模板文件一般都放在其中），新建header.html文件，内容如下：

1 
     
      2     
      3     
      
{
   {menu1}}
4     
      
{
   {menu2}}
5     
      
{
   {menu3}}
6 
     

2）通过CMD进入template文件夹，执行tmod . 即可编译成template.js：

tmod .

3）在index.html中引入 template.js 即可使用模板引擎解析json数据了，代码如下：

1  2  3      4         
      5          6  7         
      8          9 10         
     11         12 13         28 29     30 31     32         
     33         
     
34         
     35     36 37