淺析先後臺分離

1、傳統開發模式（先後臺不分離）

　　概念：傳統項目都是單節點項目，即全部的模塊都是在一個項目中，而後把先後臺代碼都編譯打包部署到一個web容器中，靜態資源和數據庫訪問都是在一個項目中。

　　開發方式：前臺人員開發模板頁面，而後將開發好的頁面交給後臺，後臺去套模板，而後進行後臺開發，先後臺高度耦合，出現一些問題就須要重新將也模板頁面打回或者後臺人員進行修改。

　　軟件運行流程：用戶經過url發出請求到服務器，服務器查找數據而且以流的形式生成頁面返回到用戶。若是頁面中有ajax請求，當頁面在瀏覽器總渲染的時候，再次發送ajax請求到服務器請求，當數據徹底到頁面則當前請求渲染成功。

　　優勢：對於小型項目開發比較快，對於瀏覽器的渲染壓力比較小，服務器將頁面大部分數據加載好而後返回給瀏覽器，對於seo也有較好的支持，對於權限管理比較好。

　　缺點：不適合大型項目的分工，一旦有需求的改變，須要先後臺同時作出改變，頗有可能將全部的代碼做廢，不支持集羣開發，不支持負載均衡。

2、先後臺分離開發

　　概念：前臺和後臺部署在不一樣的服務器上，開發的時候約定一個接口，而後各自去開發，而且能夠單獨進行測試用例。在開發的途中先後臺能夠不相互依賴，而且上線後先後臺的耦合度也比較低。

　　類別：目前主流的有三種形式，nginx+server、node.js+server和nginx+node.js+server。

　　一、nginx+server

　　　　工做流程：這是咱們目前使用的方式，nginx最爲一個轉發的服務器，具備動靜分離、負載均衡的做用。瀏覽器發送url請求，全部的請求都通過nginx，若是是靜態的資源（html、css等），直接將頁面發送給瀏覽器，瀏覽器接收頁面後進行渲染，頁面中的ajax請求再次發送請求，Nginx判斷是動態請求，將請求進行轉發到web服務器，web服務器訪問數據庫將數據進行序列化（目前主流是json格式）返回給瀏覽器，瀏覽器完成頁面渲染。

　　　　優勢：開發的時候前端人員部署一個Nginx服務器，開發過程能夠不用徹底依賴後臺，能夠作到前臺後臺同時開發。上線後後臺服務也是能夠部署多個，可以進行橫向的擴展，而且能夠配置Nginx進行負載均衡或者使用一致性hash算法加強高可用。

              

　　　　缺點：對於瀏覽器的渲染負擔加劇，而且對於seo支持很差。局部響應時間快。

　　　　配置：Nginx配置 略，後臺放開跨域權限

　　　　　　springboot配置（使用java配置方案，也能夠用xml形式）：其中allowedOrigins表示哪些域名可以來跨域訪問（*表示全部）。

@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter  {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST","PUT", "DELETE", "OPTIONS")
                .allowCredentials(false).maxAge(3600);
    }
}

　

 

　二、node.js+server

　　　　工做流程：目前node.js很是的火，因此使用的也很多，這種架構和第一種Nginx+server很是類似，node.js充當前臺和後臺的中間層。運行的過程略有不一樣，首先用戶經過url進行請求，node.js將靜態頁面以及靜態頁面須要的數據加載好，而後返回給瀏覽器，這個和傳統有點相同，可是能夠經過rpc調用web服務，減小瀏覽器渲染。至關於多加了一箇中間層。

　　　　優勢：和第一個大體相同。

　　三、node.js+nginx+server　　　

　　　　　　先後端分離以後，咱們在原先的架構只上再單獨增長了一個Node Server做爲中間層，將前端資源部署到Node Server中。Node Server還實現了一層數據代理服務，負責與提供數據的後端服務進行通訊。

　　　　而且還在這個基礎上增長並使用了前端機（前端機是對全部的請求進行預處理和負載均衡，而後再轉發給後端機。）的Nginx服務，瀏覽器發起的請求通過前端機的Nginx進行分發，URL請求統一分發到Node Server，在Node Server中根據請求類型從後端

　　　　服務器上經過RPC服務請求頁面的模板數據，而後進行頁面的組裝和渲染；API請求則直接轉發到後端服務器，完成響應。

　　　　

　

結語

先後端分離並不是僅僅只是先後端開發的分工，而是在開發期進行代碼存放分離、先後 端開發職責分離，先後端可以獨立進行開發測試;在運行期進行應用部署分離，先後 端之間經過HTTP請求進行通信。先後端分離的開發模式與傳統模式相比，能爲咱們 提高開發效率、加強代碼可維護性，讓咱們有規劃地打造一個先後端並重的精益開發 團隊，更好地應對愈來愈複雜多變的Web應用開發需求。