前后端分離的Web 平臺技術研究與實現(xiàn)

馬雪山 張輝軍 陳輝 田娟 李寧

（1.克拉瑪依職業(yè)技術學院 新疆維吾爾自治區(qū)克拉瑪依市 834000）（2.克拉瑪依油城數(shù)據(jù)有限公司 新疆維吾爾自治區(qū)克拉瑪依市 834000）

1 緒論

在移動互聯(lián)網(wǎng)的的時代，訪問Web 的終端設備呈現(xiàn)一個多元化的特征，如平板、手機和電腦等，Web 應用的復雜性在增加，用戶對前端體驗的要求也更高。同時企業(yè)在開發(fā)web 應用時，要追求高效率的開發(fā)和維護。傳統(tǒng)的Web 開發(fā)存在著前后端耦合的情況，開發(fā)和維護效率低下，無法滿足企業(yè)對web 應用快速迭代升級和維護的需求。

Web 應用開發(fā)技術要求更加高效率地開發(fā)，并兼顧性能要求，方便快速迭代及后期維護簡單。隨著Web 應用開發(fā)技術的不斷飛速發(fā)展，前后端分離技術已經(jīng)成為Web 應用開發(fā)的一個主流趨勢。在這種開發(fā)模式下，前后端實現(xiàn)了解耦，極大的提高了開發(fā)的效率。

本文首先探討了Vue+Element UI+spring boot 的前后端分離開發(fā)模式和主要關鍵技術，并基于此開發(fā)模式設計實現(xiàn)了一個校園固定資產(chǎn)管理系統(tǒng)。通過此系統(tǒng)的開發(fā)實踐，證明了前后端分離的開發(fā)模式的有效性。

2 相關概念

2.1 什么是前后端分離

傳統(tǒng)的Web 應用開發(fā)模式中，前端開發(fā)人員負責設計靜態(tài)的前端頁面，而不需要考慮具體的業(yè)務邏輯，后端開發(fā)人員在靜態(tài)頁面的基礎上，使用模板引擎，完成前后端的集成工作。因此前后端代碼耦合比較嚴重，開發(fā)人員需要將大量精力放在了溝通和系統(tǒng)調(diào)試上，并增加了項目后期的維護和擴展的難度和成本。

近年來各種新的前端框架技術不斷出現(xiàn)，如Vue、AnagularJS 和React 這三個框架，前端技術更加關注用戶的體驗和性能的優(yōu)化。前后端分離發(fā)開模式開始出現(xiàn)，如圖1 所示，前后端的分工變得清晰，前端開發(fā)人員專注于UI交互和展示邏輯的設計，后端開發(fā)人員專注于業(yè)務邏輯和數(shù)據(jù)存儲等，前后端通過接口進行數(shù)據(jù)的交換，從而大大減輕了開發(fā)人員的的負擔，極大的提高了開發(fā)的效率。

圖1： 前后端分離開發(fā)模式

2.2 前后端分離的優(yōu)勢

采用前后端分離開發(fā)模式后，帶來的優(yōu)勢是非常明顯的：

2.2.1 從職責劃分上，前后端開發(fā)人員的分工更加明確

通過商定定好的接口文檔，分別專注于自己的技術領域：前端開發(fā)人員負責前端UI 交互設計，后端開發(fā)人員專注于業(yè)務的開發(fā)，雙方互不干擾，如果出現(xiàn)問題，能很快的定位到問題出現(xiàn)在哪一方。

2.2.2 前后端可以并行開發(fā)，提升開發(fā)效率

在商定好接口文檔后，前后端系統(tǒng)可以同時進行開發(fā)和測試。如果后端系統(tǒng)暫時無法提供接口的數(shù)據(jù)，可以利用模擬數(shù)據(jù)提供接口，使得前端開發(fā)的工作不會因此停滯。

2.2.3 前后端系統(tǒng)獨立部署，提升性能

與傳統(tǒng)的Web 開發(fā)系統(tǒng)不同，前后端系統(tǒng)分別部署在單獨的服務器上，前端系統(tǒng)負責渲染頁面和前端的路由，將數(shù)據(jù)加載進入到頁面的模板中，后端系統(tǒng)只需要提供接口和數(shù)據(jù)，從而降低的服務器的負荷，極大的提高了系統(tǒng)的響應速度。

2.2.4 降低維護成本

前端框架支持組件化、模塊化的開發(fā)，極大的提高了代碼的復用率。同時，前后端實現(xiàn)了解耦，在未來系統(tǒng)的升級和維護中，局部的改變不會影響所有業(yè)務功能，有效的降低了維護成本。

2.3 MVVM模式

隨著前端技術的發(fā)展，在Web 應用開發(fā)中，很多的業(yè)務邏輯和數(shù)據(jù)開始轉向前端處理。MVVC（Model-View-ViewModel）模式被引入前端開發(fā)領域。MVVM 模式是對傳統(tǒng)的MVC（Model-View-Controller）模式的進一步的發(fā)展，目的都是為實現(xiàn)模型層和視圖層的分離，具備有低耦合、高復用性、獨立開發(fā)和方便測試的優(yōu)點。

如圖2 所示，MVVM 模式包括三個部分，模型層（Model）存放著程序所需要的數(shù)據(jù)，視圖層（View）是系統(tǒng)的UI 界面部分，視圖模型層（ViewModel）是MVVM 模式的核心部分，實現(xiàn)了視圖層與模型層的解耦。視圖模型層將原本視圖層的業(yè)務邏輯進行封裝，負責視圖層的顯示邏輯，并實現(xiàn)模型層與視圖層的雙向數(shù)據(jù)綁定，起到承上啟下的作用。當模型層的數(shù)據(jù)發(fā)生變化時，視圖模型層能同步更新到視圖層；當視圖層發(fā)生改變時，視圖模型層能及時做出響應，進行相應的處理并同步到模型層。

圖2： MVVC 模式

3 前后端分離發(fā)開框架

3.1 Vue

Vue 是一個關注于視圖層，用于構建用戶界面的漸進式輕量級JavaScript 框架。Vue 框架采用自底向上增量開發(fā)的設計，通過與Vue 生態(tài)系統(tǒng)的支持庫和第三方庫的整合，可以為復雜的單頁面應用（SAP）提供驅動。相對于其他框架，Vue 容易使用，學習難度低，開發(fā)效率高。

Vue 雖然沒有完全遵循MVVM 模式，但是Vue 設計收到MVVM 模式的啟發(fā)。Vue 最核心的功能包括組件化的系統(tǒng)和響應式的雙向數(shù)據(jù)綁定。組件是可復用的Vue 實例，是Vue 最強大的功能之一，可以擴展HTML 元素，封裝可重用的代碼。Vue 的組件化系統(tǒng)可以通過使用小型的、獨立可復用的組件來構建一個大型復雜的Web 應用程序。

響應式的雙向數(shù)據(jù)綁定是Vue 的另一個最獨特的功能，數(shù)據(jù)模型是普通的JavaScript 對象，當它發(fā)生改變時，對應的視圖層的數(shù)據(jù)會自動改變，反過來也是一樣的，這使得狀態(tài)管理變得非常簡單。Vue 響應式系統(tǒng)原理如圖3 所示，當一個普通的JavaScript 對象傳入Vue 實例的data 配置項中，Vue 將遍歷這個對象的所有屬性，使用Object.defineProperty()方法將這些屬性添加到Vue 的實例對象中，并添加相應的getter 和setter 方法。通過getter 和setter 方法，Vue 實例可以追蹤到屬性被訪問或發(fā)生改變。每一個組件都對應著一個watcher 實例，它會把在組件渲染過程中接觸到屬性記錄為依賴。當依賴屬性的setter 方法被調(diào)用時，會通知watcher 實例，使得相關聯(lián)的組件重新渲染。

圖3： Vue 響應式的原理

除了Vue 框架本身提供的核心功能外，Vue 官方還提供腳手架工具Vue-cli、路由管理Vue Router、狀態(tài)管理庫Vuex 和Vue 的服務渲染等優(yōu)秀的插件擴展Vue 框架的功能。在Vue 的開發(fā)生態(tài)圈中，Element UI 是一款由餓了么前端團隊推出的基于Vue2.0 的的桌面端的UI 組件庫，是目前和VUE 結合做項目開發(fā)的主流UI 框架。

3.2 Spring Boot

Spring Boot 是目前在Java 中比較熱門的一個微服務框架。Spring 是一個開源的Java EE 應用程序框架，提供了統(tǒng)一的、高效的企業(yè)級軟件開發(fā)的解決方案，簡化了Java EE 開發(fā)的復雜性。使用Spring 開發(fā)應用程序已經(jīng)有很長一段時間，隨著新技術的出現(xiàn)，使用Spring 開發(fā)，相比起來具有繁重而大量的配置文件，復雜的開發(fā)和部署流程，顯得異常笨重，開發(fā)效率低下，尤其是對新學習的開發(fā)者，具有陡峭的學習曲線。在2013 年，為了簡化基于Spring 框架的應用程序的開發(fā)過程，Pivotal 團隊推出的基于Spring 的開源開發(fā)框架Spring Boot。Spring Boot框架具有以下的特點：

（1）配置更簡單，基于“約定優(yōu)于配置”，極大減少了配置的工作量，最終的目標是實現(xiàn)“零配置”。

（2）使編碼簡單。通過Spring Boot 提供的各種注解，可以實現(xiàn)豐富的功能，極大減少了代碼的編寫量。絕對不需要生成代碼，也不需要進行XML 配置。

（3）自動裝配，通過@EnableAutoConfiguration 注解，Spring Boot 啟動后會掃描類路徑下的所有類，合理地推斷出應用程序所需的bean，實現(xiàn)bean 類的自動裝配。

（4）內(nèi)嵌了各種Servlet 容器，如Tomcat，可以直接通過jar 包的方式快速部署和運行，而無需使用外部的服務器應用。

（5）開箱即用的工具包，Spring Boot 提供了很多開箱即用的工具包，只需將相應的starter 配置項加入到項目的pom 文件中，就能很方便地使用對應的功能，如springboot-starter。

（6）便于監(jiān)控程序的狀況，Spring Boot 提供了便于查看當前項目的運行情況的各種度量和性能指標的功能。

Spring Boot 通過踐行“約定優(yōu)于配置”的理念，使開發(fā)者不再需要像之前Spring 那樣定義大量的配置，只需要非常少的幾個配置，就可以迅速方便的搭建起來一個應用或者微服務，做到開箱即用（out of box），從而使開發(fā)者從繁瑣的配置工作中解脫出來，專注于業(yè)務邏輯的開發(fā)。結合Spring Cloud 和Docker 技術，使得在云中部署和管理微服務變得更加方便。

4 基于前后端段分離的學院固定資產(chǎn)系統(tǒng)設計與實現(xiàn)

隨著院校的發(fā)展，管理的固定資產(chǎn)的規(guī)模日益增大，并且具有種類多，存放地分散，設備存在損壞和報廢期限，所屬機構和保管人可能發(fā)生變化等特點，這就導致學院需要投入很大的人力和物力來管理這些資產(chǎn)，傳統(tǒng)的管理固定資產(chǎn)的方式效率低下，因此，本文采用基于Vue+Element UI+spring boot 的前后端分離技術開發(fā)了一個校園固定資產(chǎn)管理平臺。

4.1 需求分析

如圖4 所示，根據(jù)功能，整個系統(tǒng)主要劃分為角色權限管理、用戶管理和資產(chǎn)管理這三個模塊，此外還包含統(tǒng)計分析和日志管理等功能。在資產(chǎn)管理系統(tǒng)中，權限管理是非常重置的一個部分，系統(tǒng)采用基于角色的訪問控制（RBAC）分配權限，根據(jù)崗位劃分角色，包括校級領導，部門領導，校級資產(chǎn)管理員，院級資產(chǎn)管理員和一般用戶，不同角色對應的權限應該符合崗位的需求。資產(chǎn)管理系統(tǒng)的業(yè)務流程主要包括新資產(chǎn)的登記審核、定期的資產(chǎn)清查以及廢舊資產(chǎn)的報廢審核。

圖4： 系統(tǒng)功能模塊設計

4.2 系統(tǒng)總體設計

如圖5 所示，系統(tǒng)采用前后分離的架構開發(fā)，其中前端系統(tǒng)采用vue+Element UI 組件實現(xiàn)，后端系統(tǒng)使用Spring Boot 框架開發(fā)，前后端之間通過RESTful 架構的接口進行通信。RESTful 架構是遵循統(tǒng)一REST 風格接口原則的Web 服務，使用標準的HTTP 方法如GET，PUT、POST 和DELETE 對URL 資源進行增刪改查的操作。

圖5： 系統(tǒng)總體結構

4.3 后端系統(tǒng)的開發(fā)

4.3.1 系統(tǒng)設計

系統(tǒng)后端采用Spring Boot 框架開發(fā)，在pom.xml 文件中添加spring-boot-starter-web 的啟動器配置項，使用@SpringBootApplication 注解來標注主程序類，系統(tǒng)使用多層架構：

（1）實體層（Entity 層），是業(yè)務領域的最基本的一層，存放的是實體類（entity 類），與數(shù)據(jù)庫的表一致，作用是在不同層之間傳遞數(shù)據(jù)。

（2）數(shù)據(jù)訪問層（Dao 層），系統(tǒng)通過Dao 層實現(xiàn)與數(shù)據(jù)庫的交互，系統(tǒng)開發(fā)使用Spring Data JPA，這是Spring的一個基于ORM 的一個JPA（Java Persistence API）應用框架，底層基于Hibernate 實現(xiàn)。通過Spring Data JPA，可以使用很簡單的代碼就能實現(xiàn)持久層的服務，它提供了包括增刪改查等在內(nèi)的常用功能，并且非常容易擴展。

（3）業(yè)務邏輯層（Service 層），位于數(shù)據(jù)訪問層和控制層之間，封裝了主要的業(yè)務邏輯和對數(shù)據(jù)訪問層的操作。

（4）控制層（Controller 層），使用@RestController 注解，在控制層中定義了RESTful API 的Web 服務，負責接受前端發(fā)來的請求，調(diào)用Service 層的服務，將service 層返回的數(shù)據(jù)傳回到前端。通過@GetMapping、@PostMapping 等注解簡化常用的HTTP 請求的映射。

4.3.2 關鍵技術

（1）CROS 跨域訪問。

當前后端系統(tǒng)分別部署在不同服務器上，通過API 接口通信時，會面臨跨域的問題，瀏覽器會組織Ajax 的訪問請求，CORS（跨域資源共享）是跨域的的一種解決方案，可以通過設置CorsFilter 過濾器解決跨域問題。

（2）權限驗證。

在系統(tǒng)開發(fā)中為采用了基于Shrio+JWT 的權限驗證方案，Shiro 是apache 基金會的一個開源基金項目，是具有身份驗證、授權、密碼和會話管理的Java 安全框架，相比Spring 的SpringSecurity 安全框架，具有簡單易用的特點。

傳統(tǒng)開發(fā)模式下使用Session 會話保存用戶登陸后的身份認證信息，但在前后端分離的開發(fā)模式下，不利于再使用Session 保存認證信息。在這種場景下，基于JSON 的web令牌技術JWT（JSON Web Token）是一種有效的解決方案。在前端的登陸頁面，通過post 請求，將用戶名和密碼提交到服務器的登陸服務，驗證通過后，服務器根據(jù)用戶信息生成一個JWT 對象返回到前端。JWT 字符串有三部分組成：Head 頭部、Payload 負載和簽名。前端接收到JWT 字符串后存儲在瀏覽器中，在后續(xù)的每次請求中，都會在HTTP 的Header 中的Authorization 對象中攜帶JWT 字符串。服務端接收到后，驗證該JWT 的有效性，包括令牌Token 是否過期，根據(jù)驗證結果判斷請求是否合法。

4.4 前端系統(tǒng)的開發(fā)

系統(tǒng)前端部分采用基于vue+element UI 框架實現(xiàn)，首先通過npm 安裝vue-cli 腳手架，通過腳手架可以快速生成Vue 項目基礎的架構。然后在項目中引入Vue Router 前端路由器和element UI 組件庫，Vue Router 是Vue 的官方路由器，通過配置Vue Router，在前端根據(jù)不同的URL 渲染不用的Vue 組件展示，而無需后臺服務器的參與，因此讓Vue.js 構建單頁應用程序（SAP）變得更加容易。

在系統(tǒng)中通過安裝和配置axios 庫來實現(xiàn)AJAX 請求，axios 是基于promise 的HTTP 網(wǎng)絡請求庫。因為采用前后端分離模式開發(fā)系統(tǒng)，用戶的認證通過web token 完成。因此在后端提供的api 接口中，除了登錄接口之外，每個接口都需要token 的驗證。當用戶第一次登陸成功后，web 端會接收到服務器返回的token，保存到瀏覽器的sessionStorage中。在axios 上添加一個全局的請求攔截器，保證除了登陸以外的api 請求，都會將token 添加到HTTP 的頭部的Authorization 對象中。當token 丟失或失效的時候，設置路由守衛(wèi)，返回登陸頁重新登陸。經(jīng)過多個瀏覽器平臺的測試，系統(tǒng)運行正常。

5 總結

本文首先對前后端分離發(fā)的模式做了整體介紹，然后詳細介紹了當前主流的前端開發(fā)框架Vue 和微服務開發(fā)框架Spring Boot，最后本文采用基于Vue+Element UI+spring boot的前后端分離技術設計和實現(xiàn)了一個校園固定資產(chǎn)管理平臺，并分析了在開發(fā)中遇到的關鍵問題。通過系統(tǒng)額開發(fā)，驗證了采用Vue+Element UI+spring boot 的前后端分離技術的優(yōu)勢。下一步我們將研究基于微服務架構的SaaS 服務應用的實現(xiàn)技術，繼續(xù)對項目進行完善。