本系列文章分三篇：基础篇、语法篇、实战篇。

通过本系列文章，你将获得以下问题的答案：
1、什么是前后端分离
2、如何用artTemplate实现前后端分离
3、SpringMVC 实现后端 rest 接口
4、彻底解决ajax跨域访问
5、效果演示、demo源码下载

上篇文章主要介绍了前后端分离与不分离的区别和优缺点；以及如何安装Node、运行demo；本篇文章主要讲解artTemplate的基本语法；

可以直接下载源码阅读。

链接：http://pan.baidu.com/s/1eR2v8x8 密码：cl2w

结构如下

如果没有下载源码，可以在“二、阅读源码”中查看

grammarModule.html

<!-- 加上html、header、body 标签
        是为了避免 直接通过浏览器打开 grammar.html 乱码
        一旦运行到服务中(比如Apache)不会出现乱码，即可将它们去掉
    --><!-- 语法例子 -->
1、取值语法
    

    {{content}}

    {{#content}}

    {{person.name}}-{{person.age}}



    
2、逻辑语法
    

    <!-- data中没有定义 flag 数据 -->
    {{if flag}} 我是Flag 
{{/if}}
    {{if !flag}} 我不是Flag 
{{/if}}

    {{if index == 0 }} 
        index = 0
    {{else if index > 0 && index 
    

    
3、遍历语法（index，指下标）
    

    {{each personList as person index}}
        
{{index}} : {{person.name}} - {{person.age}}
    {{/each}}
    

    
4、子模板嵌套
    

    {{include './grammarSub'}} 
    

    
5、辅助方法
    

    {{s1 | append:s2}}
    

    

grammarSub.html

<!-- 子模板 -->
{{if subData}}
    {{subData.content}}

    {{#subData.content}}

    {{subData.person.name}}-{{subData.person.age}}

{{/if}}

grammar.html

    
        
<!-- 使用jsonp可以解决跨域访问，后面文章介绍 --><!-- 语法 grammarModule 编译后的 template.js --><!-- 引入自定义的js（页面加载完会执行），这样js就不用写在 HTML 文件中了 --><!-- 语法介绍DIV-start -->

        <!-- 语法介绍DIV-end -->
    

grammar.js

/**
 * 将系统使用的js放在这个文件中，避免了将js的代码写到HTML中
 */
jQuery(document).ready(function($){ //页面加载完成，自动执行

    var data = { //参考 grammarModule.html中语法
            //取值语法
            "content":"hello world",
            "person":{"name":"王阳明","age":21},

            //逻辑语法
            "index":4,

            //遍历语法
            "personList":[
                          {"name":"王阳明","age":21},
                          {"name":"朱熹","age":30},
                          {"name":"程颢","age":50}
                          ],

            //子模板嵌套
            "subData":{
                "content":"hello world",
                "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中，不存在此问题）