Java前后端分離微服務(wù)架構(gòu)項目實戰(zhàn)

一、認識前后端分離

????在傳統(tǒng)的web應(yīng)用開發(fā)中，大多數(shù)的程序員會將瀏覽器作為前后端的分界線。將瀏覽器中為用戶進行頁面展示的部分稱之為前端，而將運行在服務(wù)器，為前端提供業(yè)務(wù)邏輯和數(shù)據(jù)準備的所有代碼統(tǒng)稱為后端。

????由于前后端分離這個概念相對來說剛出現(xiàn)不久，很多人都知道只聞其聲，不見其形，所以可能會對它產(chǎn)生一些誤解，誤以為前后端分離只是一種web應(yīng)用開發(fā)模式，只要在web應(yīng)用的開發(fā)期進行了前后端開發(fā)工作的分工就是前后端分離。

????其實前后端分離并不只是開發(fā)模式，而是web應(yīng)用的一種架構(gòu)模式。在開發(fā)階段，前后端工程師約定好數(shù)據(jù)交互接口，實現(xiàn)并行開發(fā)和測試；在運行階段前后端分離模式需要對web應(yīng)用進行分離部署，前后端之前使用HTTP或者其他協(xié)議進行交互請求。然而作為一種架構(gòu)模式，我們在實施的過程中主要對以下四個方面來進行比較和重新認識。

前后端分離大概可以從四個方面來理解：

• 交互形式

• 代碼組織方式

• 開發(fā)模式

• 數(shù)據(jù)接口規(guī)范流程

1、交互形式

在前后端分離架構(gòu)中，后端只需要負責按照約定的數(shù)據(jù)格式向前端提供可調(diào)用的API服務(wù)即可。前后端之間通過HTTP請求進行交互，前段獲取到數(shù)據(jù)后。進行頁面的組裝和渲染，最終返回給瀏覽器。

2、代碼組織方式

在傳統(tǒng)架構(gòu)模式中，前后端代碼存放于同一個代碼庫中，甚至是同一工程目錄下。頁面中還夾雜著后端代碼。前后端工程師進行開發(fā)時，都必須把整個項目導入到開發(fā)工具中。

而前后端分離模式在代碼組織形式上有以下兩種:

• 半分離
  前后端共用一個代碼庫，但是代碼分別存放在兩個工程中。后端不關(guān)心或很少關(guān)心前端元素的輸出情況，前端不能獨立進行開發(fā)和測試，項目中缺乏前后端 交互的測試用例。

• 分離?
  前后端代碼庫分離，前端代碼中有可以進行Mock測試(通過構(gòu)造虛擬測試對 象以簡化測試環(huán)境的方法)的偽后端，能支持前端的獨立開發(fā)和測試。而后端 代碼中除了功能實現(xiàn)外，還有著詳細的測試用例，以保證API的可用性，降低 集成風險。

3、開發(fā)模式

????我們之前的架構(gòu)屬于傳統(tǒng)的MVC架構(gòu)，整體沒有進行前后端分離，在項目的開發(fā)階段，前端工程師負責編寫HTML，完成前端的頁面設(shè)計并套頁面，然后再使用模板技術(shù)將寫好的前端代碼轉(zhuǎn)換為Smarty腳本，同時內(nèi)嵌一些后端提供的模板變量和一些邏輯操作。應(yīng)用運行期，將全部代碼進行打包，和后端代碼部署到同一服務(wù)器上，同時會進行簡單的動靜態(tài)分離部署。

此時，應(yīng)用的開發(fā)流程如下圖所示。

????而在實現(xiàn)前后端分離架構(gòu)之后，前端工程師只需要編寫HTML、js、CSS等前端資源，然后通 過HTTP請求調(diào)用后端提供的服務(wù)即可。除了開發(fā)期的分離，在運行期前后端資源也會進行分離部署。

前后端分離之后，開發(fā)流程將如下圖所示。

通過上面的兩幅流程圖，不難發(fā)現(xiàn)，在開發(fā)模式上，前后段分離不僅僅只是工程師的分工開發(fā)，更重要的意義在于實現(xiàn)了前后端的并行開發(fā)，簡化了開發(fā)流程。

4、數(shù)據(jù)接口規(guī)范流程

在開發(fā)期間前后端共同商定好數(shù)據(jù)接口的交互形式和數(shù)據(jù)格式。然后實現(xiàn)前后端的并行開發(fā)，其中前端工程師再開發(fā)完成之后可以獨自進行mock測試，而后端也可以使用接口測試平臺進行接口自測，然后前后端一起進行功能聯(lián)調(diào)并校驗格式，最終進行自動化測試。

分離的四個好處

前后端分離模式和傳統(tǒng)的web應(yīng)用架構(gòu)相比有很大的不同，到底分還是不分，這還真是個問題。

從目前應(yīng)用軟件開發(fā)的發(fā)展趨勢來看，主要有兩方面需要注意：

1. 越來越注重用戶體驗，隨著互聯(lián)網(wǎng)的發(fā)展，開始多終端化。

2. 大型應(yīng)用架構(gòu)模式正在向云化、微服務(wù)化發(fā)展。

我們主要通過前后端分離架構(gòu)，為我們帶來以下四個方面的提升：

• 為優(yōu)質(zhì)產(chǎn)品打造精益團隊
  通過將開發(fā)團隊前后端分離化，讓前后端工程師只需要專注于前端或后端的開發(fā)工作，是的前后端工程師實現(xiàn)自治，培養(yǎng)其獨特的技術(shù)特性，然后構(gòu)建出一個全棧式的精益開發(fā)團隊。

• 提升開發(fā)效率
  前后端分離以后，可以實現(xiàn)前后端代碼的解耦，只要前后端溝通約定好應(yīng)用所需接口以及接口參數(shù)，便可以開始并行開發(fā)，無需等待對方的開發(fā)工作結(jié)束。與此同時，即使需求發(fā)生變更，只要接口與數(shù)據(jù)格式不變，后端開發(fā)人員就不需要修改代碼，只要前端進行變動即可。如此一來整個應(yīng)用的開發(fā)效率必然會有質(zhì)的提升。

• 完美應(yīng)對復雜多變的前端需求
  如果開發(fā)團隊能完成前后端分離的轉(zhuǎn)型，打造優(yōu)秀的前后端團隊，開發(fā)獨立化，讓開發(fā)人員做到專注專精，開發(fā)能力必然會有所提升，能夠完美應(yīng)對各種復雜多變的前端需求。

• 增強代碼可維護性
  前后端分離后，應(yīng)用的代碼不再是前后端混合，只有在運行期才會有調(diào)用依賴關(guān)系。????

應(yīng)用代碼將會變得整潔清晰，不論是代碼閱讀還是代碼維護都會比以前輕松。

二、項目簡介

????livegoods房屋海選平臺，就是一個前后端分離架構(gòu)項目?？蛻舳税苿涌蛻舳恕C客戶端的微服務(wù)項目。項目包含了用戶在線房屋租賃、房屋買賣、和房屋相關(guān)的商城功能。

????只要是前后端分離的項目，就一定有前端團隊和后端團隊。前端團隊負責編寫客戶端頁面，后端團隊負責實現(xiàn)服務(wù)端操作。

使用的技術(shù)：

• Spring Boot

• Spring Cloud

• Spring?Data?MongoDB

• Spring?Data?Elasticsearch

• SpringMVC

• Spring Cache

• Vue.js

• ......

軟件及工具：

• IDEA?

• FastDFS

• Nginx

• MongoDB

• Elasticsearch

• Redis

• Docker

????上面羅列使用的技術(shù)、軟件、工具都是針對需要實現(xiàn)接口中功能使用的，實際上還需要很多其他技術(shù)及軟件。例如整個項目的后臺就是沒有要求進行實現(xiàn)。很多和電商項目重復的內(nèi)容被調(diào)換掉了，沒有在當前項目中進行完成。

項目總體結(jié)構(gòu)

????整個項目使用微服務(wù)架構(gòu)，并使用Spring Cloud作為微服務(wù)架構(gòu)總體實現(xiàn)技術(shù)。拆分顆粒度為接口（接口文檔一個接口），每個接口對應(yīng)一個項目。

• 使用Eureka作為注冊中心

• 使用Gateway作為網(wǎng)關(guān)

• 使用Config作為分布式配置中心

• 使用OpenFeign進行接口通信

• 使用Hystrix進行服務(wù)容災(zāi)

• 搜索使用Elasticsearch提升搜索效率

• 緩存工具使用Redis

• 緩存技術(shù)使用Spring Cache

• 數(shù)據(jù)庫使用MongoDB

• 數(shù)據(jù)訪問技術(shù)使用Spring Data

• 分布式事務(wù)處理方案使用Tx-LCN

• 圖片上傳下載使用FastDFS.

????MongoDB身為NoSQL數(shù)據(jù)庫，又帶有索引，本身讀取性能就很高，此處可以使用redis作為緩存工具，也可以直接從MongoDB中取數(shù)據(jù)。在本次項目中使用redis作為緩存工具，Spring Cache作為緩存技術(shù)。

快來跟著視頻一起做項目吧~