轻量级artTemplate引擎 实现前后端分离—应用实战篇（实战）

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

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

实战篇

前2篇文章分别介绍了artTemplate基础和语法；所以我们具备了一些开发应用的基础条件。本篇文章主要通过一个小的应用来真正的实现前后端分离。对于这个小的应用的实现过程：就是将前一篇文章展示的格式为JSON的data通过服务器端的应用提供的rest url来实现。我们主要讲解实现思路和过程，其中包括了Ajax跨域访问的问题。

一、应用介绍

前端：用artTemplate实现一个项目frontDemo，并部署在Apache（或Tomcat）服务器中，然后通过Ajax请求服务器端的应用（部署在Tomcat服务器中），从而实现前后端的分离。（如果frontDemo和后端应用部署在同一个Tomcat服务器中，不存在跨域访问问题）

后端：SpringMVC实现一个Java应用：restDemo。部署在Tomcat服务器中。并提供一个url供前端访问，返回JSON数据，前端根据JSON数据就可以渲染artTemplate模板了。（restDemo中提供了2个url：跨域的和非跨域的）

二、源码下载及结构介绍（软件下载）

1、软件下载：Apache服务器和Tomcat服务器

链接：http://pan.baidu.com/s/1skAgW7j 密码：hgdk

注意：Tomcat服务器，运行的前提是本地已经安装了JDK并做了环境配置。

2、源码下载

链接：http://pan.baidu.com/s/1kV877lP 密码：s888

3、源码结构介绍

restDemo项目（详细参考源码）

frontDemo项目（详细参考源码）

三、如何运行应用

再次强调：如果运行Tomcat，需要安装JDK并配置。

1、运行restDemo项目

首先将下载的restDemo.war放到 apache-tomcat-7.0.29/webapps 目录中。然后启动：双击apache-tomcat-7.0.29/bin/startup.bat即可，启动完成后日志显示如下：

启动访问首页效果：

访问获取数据（非跨域）页面效果：

2、运行非跨域的frontDemo

将frontDemo拷贝到apache-tomcat-7.0.29/webapps中，运行结果如下：

3、运行跨域的frontDemo

3.1、配置Apache服务器的Apache2/conf/httpd.conf文件：

1）将其中的 D:/work/Apache2 改成你的Apache2的目录地址

2）将其中的 D:/workspace/ 改成你的frontDemo所在的目录

3.2、启动Apache服务器：

双击 Apache2/bin/httpd.exe

3.3、运行结果

四、跨域与不跨域前端代码的比较

详细参考源码

作者： qicong88 
链接：http://www.imooc.com/article/20334
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！