什么是前后端分离
对于这个问题，其实可以看看我的学习历程，我觉得很好的体现了Web开发模式的演化。
石器时代：那正是本人刚学JSP的时候，写了一个简单的商城DEMO，所有的业务逻辑，数据库的交互以及Javascript代码等都杂糅在.jsp文件中，好处就是简单，几个JSP页面就能解决问题，但也正是由于内嵌了大量的Java代码，前后端的代码挤在一个文件中，后期可维护性很差，代码完全没有可读性，而且更改一个CSS样式都必须要重启服务器才行
文明兴起：那之后学习了Servlet，开始重构商城Demo，将数据库的交互，业务逻辑，抽象到Servlet类中，JSP中的Java代码慢慢消失，但还是造成了Controller类过于肥胖的问题
近现代：这个时候已经学习了SSH、Spring Family，搞过PlayFramework，JFinal等各种小玩意，对于MVC模式以及架构慢慢有了自己的理解，代码的可维护性，可读性各方面有了明显的提升，项目各个层次的职责比较清晰：Model层采用SpringDATA,Entity只需少量注解，DAO层只需实现相应的接口，实现交给Spring去注入，Controller层则采用SpringMVC，View采用Freemarker，Velocity等模板，功能很强大，最重要的是断了你在前端页面中写Java代码的念头。但是这个阶段依然存在相关的问题：
View层仍然职责不清晰，究竟是该让前端学习点后台技术去直接套JSP模板，还是应该先在自己的机器上写好页面，然后交给后台开发人员去改造成JSP/FTL等
开发效率底下，不利于前后台的开发测试，后端不仅需要写逻辑代码，还需要去关注视图层
可以看出，前后端分离其实是职责的分离，将不同逻辑抽象出来，让前后端开发人员能够更好的合作，对于我个人说，能够更专一，开发后端的时候，只需要专心解决后端的问题，前端同理。
怎么做前后端的分离
我目前的做法是：将Java作为一种服务存在，仅需要提供RESTFul接口即可，前端目前采用AngularJS，调用后端API，解析JSON数据，静态HTML页面。
交给Nginx代理，下面是具体配置：
Java Layer
Java采用SpringMVC，方法返回JSON数据，然后运行带后台中，监听8080端口，处理来自前台的请求
@RestController @RequestMapping("api") public class APIController { @Autowired private NewsItemService itemService; @Autowired private NewsDetailService detailService; /** * API:获取单页新闻 * @param pageable * @return */ @RequestMapping(value = "/news") public List showNewsPage(Pageable pageable){ return itemService.findAll(pageable); } /** * API：根据指定NewsItem ID * 获取新闻详情 */ @RequestMapping(value = "/news/detail/{id}") public NewsDetail showNewsDetail(@PathVariable("id")Long id){ NewsDetail detail = detailService.findByNewsItemId(id); return detail; } /** * 获取指定ID新闻 * @param id * @return */ @RequestMapping(value = "/news/{id}") public NewsItem showNewsItem(@PathVariable("id") Long id){ NewsItem item = itemService.get(id); return item; } 。。。 } FrontEnd
采用AngularJS，充当Controller层，前后端实现了真正的分离，但还是有点问题的。
index.htmlDzNews
app.js:var dznews = angular.module('dznews', [ 'ngRoute', 'newsControllers',]);dznews.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) { $routeProvider. when('/',{ templateUrl: 'part/news_list.html', controller: 'listController' }). when('/news', { templateUrl: 'part/news_list.html', controller: 'listController' }). when('/news/:id', { templateUrl: 'part/news_detail.html', controller: 'newsDetailCtrl' }). otherwise({ redirectTo: '/news' }); // use the HTML5 History API $locationProvider.html5Mode(true); }]);var newsControllers = angular.module('newsControllers', []);newsControllers.controller('listController', function ($scope,$http) { $scope.page = 0; $http.get('/api/news').success(function(data) { $scope.newses = data; });});newsControllers.controller("newsDetailCtrl",['$scope', '$routeParams','$http','$sce', function($scope, $routeParams,$http,$sce) { $http.get("/api/news/detail/"+$routeParams.id).success(function (data) { $scope.detail = data ; $scope.detail.content = $sce.trustAsHtml($scope.detail.content); });}]); Nginx Layer
Nginx监听80端口，静态请求交由Nginx处理，动态请求转发给8080端口的Java后端服务，配置如下供参考：
try_files：由于AngularJS是单页应用，一个ng-app对应一个页面，而且实现了自己的前端路由机制，这样就可以由一个ng-app管理多个页面，只需替换局部的ng-view,但是这样就会有一个问题，当我们直接访问首页，跳转到/news/:id的时候是没问题的，
但是当直接访问/news/:id这个网址的时候，就会出现404的错误，就其原因，是因为WebServer找不到对应的页面，所以需要将所有的由AngularJS路由管理的URL都转发到ng-app即可，
location / { root DzNewsBackEnd/app; #index index.html index.htm; try_files $uri $uri/ /index.html =404;}location /api/ { proxy_pass http://localhost:8080; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; client_max_body_size 10m; client_body_buffer_size 128k; proxy_connect_timeout 90; proxy_send_timeout 90; proxy_read_timeout 90; proxy_buffer_size 4k; proxy_buffers 4 32k; proxy_busy_buffers_size 64k; proxy_temp_file_write_size 64k;} 总结
在用这种方式进行开发的时候，当我完成后端API的开发，就可以专注去写前端的页面和JS逻辑，遇到BUG的时候，也相当容易调试，因为很容易发现是哪一层的问题，但还是存在一些短板，将所有的逻辑交由前端JS去执行，安全及性能方面存在很多短板，当进去首页的时候，会发现有一个明显的白屏，而且会暴露后端的API，因此需要在后端进行一些验证，例如OAUTH等方案，我个人倾向于中间加一层NodeJS,将所有的逻辑，session管理等都交由这层处理，也可以部署多个Node实例，再加上Nginx进行负载均衡处理，与Java部署在不同的服务器上，这样Java只作为无状态的服务存在，可以部署多个实例。