Spring Boot實戰系列《二》：白話理解前後端分離

一、前言

在上面簡單介紹[大白話說微服務架構](https://blog.csdn.net/ITBigGod/article/details/84025445)之後，跟隨著微服務的產兒之一就是——前後端分離。一般來說，我學習完以後，轉為自己的白話來理解，所以難免有失偏頗之處，請看官們取其精華即可。

1.什麼是前後端分離？

在學習之前，我對 “前後端分離” 產生一些誤解，誤以為前後端分離只是一種web應用開發模式，只要在web應用的開發期進行了前後端開發工作的分工就是前後端分離？

而實際上其實 前後端分離並不只是開發模式，而是web應用的一種架構模式

。在開發階段，前後端工程師約定好資料互動介面，實現並行開發和測試；在執行階段前後端分離模式需要對web應用進行分離部署，前後端之前使用HTTP或者其他協議進行互動請求。

說通俗點就是以後你在後端專案裡面看不到頁面程式碼（JSP|HTML），後端給前端提供介面，前端呼叫後端提供的REST風格介面就行，前端專注寫頁面（html|jsp）和渲染（JS|CSS|各種前端框架）；後端專注寫程式碼就行。

前後端分離的核心：後臺提供資料，前端負責顯示。

從以下四個方面來看前後端分離。

2. 前後端互動形式

如圖：

在前後端分離架構中，後端只需要負責按照約定的資料格式向前端提供可呼叫的API服務即可。前後端之間通過HTTP請求進行互動，前端獲取到資料後，進行頁面的組裝和渲染，最終返回給瀏覽器。

3.程式碼存放方式

如圖：

前後端未分離模式：

前後端程式碼存放於同一個程式碼庫中，甚至是同一工程目錄下。頁面中還夾雜著後端程式碼。前後端工程師進行開發時，都必須把整個專案匯入到開發工具中。

而前後端分離模式有以下兩種:

半分離狀態：

前後端共用一個程式碼庫，但是程式碼分別存放在兩個工程中。後端不關心或很少 關心前端元素的輸出情況，前端不能獨立進行開發和測試，專案中缺乏前後端
互動的測試用例。

全分離狀態：

前後端程式碼庫分離，前端程式碼中有可以進行Mock測試(通過構造虛擬測試對 象以簡化測試環境的方法)的偽後端，能支援前端的獨立開發和測試。而後端
程式碼中除了功能實現外，還有著詳細的測試用例，以保證API的可用性，降低 整合風險。

4.專案開發模式

在實現前後端分離架構之後，前端工程師只需要編寫HTML、js、CSS等前端資源，然後通 過HTTP請求呼叫後端提供的服務即可。除了開發期的分離，在執行期前後端資源也 會進行分離部署。

如圖：

在開發模式上，前後段分離不僅僅只是工程師的分工開發，更重要的意義在於實現了前後端的並行開發，簡化了開發流程。

5.資料介面規範

在開發期間前後端共同商定好資料介面的互動形式和資料格式。然後實現前後端的並行開發，其中前端工程師再開發完成之後可以獨自進行測試，而後端也可以使用介面測試平臺進行介面自測，然後前後端一起進行功能聯調並校驗格式，最終進行自動化測試。

如圖：

以上四個模組分析了前後端分離的大致情況，從目前應用軟體開發的發展趨勢來看：

越來越注重使用者體驗，隨著網際網路的發展，開始多終端化。

大型應用架構模式正在向雲化、微服務化發展。

主要通過前後端分離架構來提升這些需求，同時也對開發人員來說應用程式碼將會變得整潔清晰，不論是程式碼閱讀還是程式碼維護都會比以前輕鬆。

分析完前後端分離的好處和傳統模式的不同以後，那麼怎麼實現前後端分離呢？

二、實現前後端分離

前後端的工作：

前端的工作：實現整一個前端頁面以及互動邏輯，以及利用ajax與nodejs伺服器（中間層)互動。

後端的工作：提供API介面，利用redis來管理session,與資料庫互動。

前後端分離專案架構如下:

1.常用的工具:Node.js、Mock.js、

舉個栗子，要實現前後端分離：

• 前端：需要開啟一個本地的伺服器來執行自己的前端程式碼，以此來模擬真實的線上環境，你需要在本地執行一個伺服器node.js，利用node.js的express框架來開啟一個本地的伺服器，然後利用node.js的一個http-proxy-middleware外掛將客戶端發往node.js的請求轉發給真正的伺服器，nodejs作為一箇中間層。這樣，前端就可以無憂無慮的開發了。

• 在專案裡，通過 mock工具 來提供一些假資料，我們先規定好了API介面，設計API文件，然後我們就可以通過API文件，利用Mock.js官網 來返回一些假資料，這樣就可以模擬傳送API到接受響應的整一個過程，因此前端也不需要依賴於後端開發了，可以獨立開發，等到後臺的API全部設計完之後，就可以比較快速的聯調。

2.mock.js是什麼？

是什麼我覺得官網寫的比我清楚多了，直接說什麼作用。
mock.js官網：http://mockjs.com/

舉個栗子：

前後端分離後，前端和後臺同時開發時，就可能遇到前端已經開發好一個頁面了，可是卻等待後臺API介面的情況。比如說A是負責前端，B是負責後臺，A可能用了一週做好了基本的結構，並且需要API介面聯調後，才能繼續開發，而此時B卻還沒有實現好所需要的介面，這種情況，怎麼辦呢？這就需要利用mock.js工具來返回一些假資料，這樣就可以模擬傳送API到接受響應的整一個過程，因此前端也不需要依賴於後端開發了，可以獨立開發。

3.Node.js是什麼？

照樣直接看官網咖。我是個實在人，哈哈…
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境。 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。

Node.js 英文官網：https://nodejs.org/en/
中文官網：http://nodejs.cn/

1.為什麼要引入nodejs作為中間層（實際上就是前端的伺服器）？

• 引入nodejs主要是為了分層開發，職責劃分，nodejs作為前端伺服器，由前端開發人員負責，前端開發人員不需要知道java後臺是如何實現的，也不需要知道API介面是如何實現的，我們只需要關心我們前端的開發工作，並且管理好nodejs前端伺服器，而後臺開發人員也不需要考慮如何前端是如何部署的，他只需要做好自己擅長的部分，提供好API介面就可以；
• nodejs本身有著獨特的非同步、非阻塞I/O的特點，這也就意味著他特別適合I/O密集型操作，在處理併發量比較大的請求上能力比較強，因此，利用它來充當前端伺服器，向客戶端提供靜態檔案以及響應客戶端的請求，我覺得這是一個很不錯的選擇。

2.nodejs前端伺服器的作用：

1. 作為靜態檔案伺服器，當用戶訪問網站的時候，將index.html以及其引入的js、css、fonts以及圖片返回給使用者。

2. 負責將客戶端發來的ajax請求轉發給後臺伺服器。

---

上述就是關於博主白話理解的前後端分離概念，科技時代就是更新換代快，底層東西還沒有學透徹，就迫不得已要去接受新的東西，微服務架構的興起也讓前後端分離體系早日來到，我再也不用學習全棧了。本來是寫spring boot的實戰系列的，沒想到說了這麼一大堆廢話，下一篇開始我們的spring boot之旅。

---

參考文獻：

https://segmentfault.com/a/1190000009329474#articleHeader6
http://blog.jobbole.com/111624/