摘要：怎么做前后端的分離我目前的做法是將作為一種服務(wù)存在，僅需要提供接口即可，前端目前采用，調(diào)用后端，解析數(shù)據(jù)，靜態(tài)頁(yè)面。采用，充當(dāng)層，前后端實(shí)現(xiàn)了真正的分離，但還是有點(diǎn)問(wèn)題的。

對(duì)于這個(gè)問(wèn)題，其實(shí)可以看看我的學(xué)習(xí)歷程，我覺(jué)得很好的體現(xiàn)了Web開(kāi)發(fā)模式的演化。

石器時(shí)代：那正是本人剛學(xué)JSP的時(shí)候，寫(xiě)了一個(gè)簡(jiǎn)單的商城DEMO，所有的業(yè)務(wù)邏輯，數(shù)據(jù)庫(kù)的交互以及Javascript代碼等都雜糅在.jsp文件中，好處就是簡(jiǎn)單，幾個(gè)JSP頁(yè)面就能解決問(wèn)題，但也正是由于內(nèi)嵌了大量的Java代碼，前后端的代碼擠在一個(gè)文件中，后期可維護(hù)性很差，代碼完全沒(méi)有可讀性，而且更改一個(gè)CSS樣式都必須要重啟服務(wù)器才行

文明興起：那之后學(xué)習(xí)了Servlet，開(kāi)始重構(gòu)商城Demo，將數(shù)據(jù)庫(kù)的交互，業(yè)務(wù)邏輯，抽象到Servlet類中，JSP中的Java代碼慢慢消失，但還是造成了Controller類過(guò)于肥胖的問(wèn)題

近現(xiàn)代：這個(gè)時(shí)候已經(jīng)學(xué)習(xí)了SSH、Spring Family，搞過(guò)PlayFramework，JFinal等各種小玩意，對(duì)于MVC模式以及架構(gòu)慢慢有了自己的理解，代碼的可維護(hù)性，可讀性各方面有了明顯的提升，項(xiàng)目各個(gè)層次的職責(zé)比較清晰：Model層采用SpringDATA,Entity只需少量注解，DAO層只需實(shí)現(xiàn)相應(yīng)的接口，實(shí)現(xiàn)交給Spring去注入，Controller層則采用SpringMVC，View采用Freemarker，Velocity等模板，功能很強(qiáng)大，最重要的是斷了你在前端頁(yè)面中寫(xiě)Java代碼的念頭。但是這個(gè)階段依然存在相關(guān)的問(wèn)題：

View層仍然職責(zé)不清晰，究竟是該讓前端學(xué)習(xí)點(diǎn)后臺(tái)技術(shù)去直接套JSP模板，還是應(yīng)該先在自己的機(jī)器上寫(xiě)好頁(yè)面，然后交給后臺(tái)開(kāi)發(fā)人員去改造成JSP/FTL等

開(kāi)發(fā)效率底下，不利于前后臺(tái)的開(kāi)發(fā)測(cè)試，后端不僅需要寫(xiě)邏輯代碼，還需要去關(guān)注視圖層

可以看出，前后端分離其實(shí)是職責(zé)的分離，將不同邏輯抽象出來(lái)，讓前后端開(kāi)發(fā)人員能夠更好的合作，對(duì)于我個(gè)人說(shuō)，能夠更專一，開(kāi)發(fā)后端的時(shí)候，只需要專心解決后端的問(wèn)題，前端同理。

我目前的做法是：將Java作為一種服務(wù)存在，僅需要提供RESTFul接口即可，前端目前采用AngularJS，調(diào)用后端API，解析JSON數(shù)據(jù)，靜態(tài)HTML頁(yè)面。

交給Nginx代理，下面是具體配置：

Java采用SpringMVC，方法返回JSON數(shù)據(jù)，然后運(yùn)行帶后臺(tái)中，監(jiān)聽(tīng)8080端口，處理來(lái)自前臺(tái)的請(qǐng)求

    @RestController
    @RequestMapping("api")
    public class APIController {

        @Autowired
        private NewsItemService itemService;

        @Autowired
        private NewsDetailService detailService;
        /**
         * API:獲取單頁(yè)新聞
         * @param pageable
         * @return
         */
        @RequestMapping(value = "/news")
        public List showNewsPage(Pageable pageable){
            return itemService.findAll(pageable);
        }
        /**
         * API：根據(jù)指定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;
        }
        。。。
    }

采用AngularJS，充當(dāng)Controller層，前后端實(shí)現(xiàn)了真正的分離，但還是有點(diǎn)問(wèn)題的。

index.html



    

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監(jiān)聽(tīng)80端口，靜態(tài)請(qǐng)求交由Nginx處理，動(dòng)態(tài)請(qǐng)求轉(zhuǎn)發(fā)給8080端口的Java后端服務(wù)，配置如下供參考：

try_files：由于AngularJS是單頁(yè)應(yīng)用，一個(gè)ng-app對(duì)應(yīng)一個(gè)頁(yè)面，而且實(shí)現(xiàn)了自己的前端路由機(jī)制，這樣就可以由一個(gè)ng-app管理多個(gè)頁(yè)面，只需替換局部的ng-view,但是這樣就會(huì)有一個(gè)問(wèn)題，當(dāng)我們直接訪問(wèn)首頁(yè)，跳轉(zhuǎn)到/news/:id的時(shí)候是沒(méi)問(wèn)題的，
但是當(dāng)直接訪問(wèn)/news/:id這個(gè)網(wǎng)址的時(shí)候，就會(huì)出現(xiàn)404的錯(cuò)誤，就其原因，是因?yàn)閃ebServer找不到對(duì)應(yīng)的頁(yè)面，所以需要將所有的由AngularJS路由管理的URL都轉(zhuǎn)發(fā)到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;
}

在用這種方式進(jìn)行開(kāi)發(fā)的時(shí)候，當(dāng)我完成后端API的開(kāi)發(fā)，就可以專注去寫(xiě)前端的頁(yè)面和JS邏輯，遇到BUG的時(shí)候，也相當(dāng)容易調(diào)試，因?yàn)楹苋菀装l(fā)現(xiàn)是哪一層的問(wèn)題，但還是存在一些短板，將所有的邏輯交由前端JS去執(zhí)行，安全及性能方面存在很多短板，當(dāng)進(jìn)去首頁(yè)的時(shí)候，會(huì)發(fā)現(xiàn)有一個(gè)明顯的白屏，而且會(huì)暴露后端的API，因此需要在后端進(jìn)行一些驗(yàn)證，例如OAUTH等方案，我個(gè)人傾向于中間加一層NodeJS,將所有的邏輯，session管理等都交由這層處理，也可以部署多個(gè)Node實(shí)例，再加上Nginx進(jìn)行負(fù)載均衡處理，與Java部署在不同的服務(wù)器上，這樣Java只作為無(wú)狀態(tài)的服務(wù)存在，可以部署多個(gè)實(shí)例。