前后端分離的系統解耦部署方案設計與實現＊

趙圓圓，伍 岑

(湛江科技學院，廣東 湛江 524000)

0 引言

傳統模式下的軟件開發過程一般是前端工程師設計用戶界面，交由后端開發工程師進行修改，嵌套模板引擎，最后打包部署。這樣的方式在小型項目中固然可取，而在當今爆發式的數據流量大背景下，傳統的開發模式帶來的不僅是開發效率低下，耦合度高，更加大了開發人員的學習成本。面對以上問題，前后端分離架構應運而生，前端工程師只需負責設計人機交互接口、渲染后端數據；后端工程師不必關心頁面效果，只需關心實現約定接口和相關業務邏輯。如此前后端代碼實現完全解耦，項目發布后可維護性高，同時可以實現并行開發，能大大的提高開發效率，在團隊分工中達到職責清晰、術業專攻。

1 方案綜述

1.1 傳統模式下開發的Web應用

傳統方式下的Web 應用開發主要方式為“模板引擎混合開發模式”，這樣的工作流程如圖1所示。客戶端向Web 服務器發送一次請求，交由Servlet作簡單的邏輯判斷，接著向后臺查詢對應的結果，再將數據與模板引擎進行數據的渲染，最后將渲染后的模板以HTML的形式返回給瀏覽器。這樣一套流程不難看出要實現一個Web 應用后端工程師需要對HTML 頁面嵌套諸如JSP、Freemarker 的模板引擎，在模板引擎中參與數據的輸出渲染。雖然在開發中不會產生問題，但是在后期維護中顯得捉襟見肘，Web 應用在每一次迭代升級的過程中要需要前后端工程師不斷溝通，效率低下。

圖1 模板引擎混合開發模式

1.2 前后端解耦的Web應用

前后端解耦的核心在于如何將前端代碼與后端實現畫出一條清晰的分界線，在項目設計中，以接口作為前后端交互的橋梁，在項目開發前就定義好接口文檔，例如通信時的請求方式、返回值數據類型、異常操作返回格式等一系列約定，這在項目開發前就需要準備好，這樣，前端按照約定接口開發前端代碼，后端根據約定接口實現具體功能。

而在接口設計中以“RESTful”（表現層狀態轉換）為約定風格，這也是前后端分離的最佳實踐。RESTful 架構是實現前、后端分離的根本所在，如圖2所示為前后端分離交互模式，客戶端通過url方式通過向服務器發送一次資源請求，Web 服務器向客戶端返回的是一段json 或xml 格式的數據，前端將數據渲染到客戶端界面。而通過返回數據的方式將前后端代碼徹底解耦，前端需要做的就是渲染數據，再展現到客戶端。在前面說到傳統的MVC 模式是服務器向客戶端輸出的是頁面，導致前后端不能解耦，而以數據的形式傳遞到客戶端則徹底解放了前后端的耦合性。

圖2 前后端分離交互模式

1.3 后臺服務器與數據庫服務器的解耦

在實現接口具體操作時不可避免的需要對數據庫進行CRUD 操作，一般情況下會將簡單的SQL語句、以及連接數據庫的寫在后端代碼中，這樣也能實現數據持久化操作，這樣帶來的弊端就是SQL 語句與后端代碼融合，在項目部署上線后如要進行數據查詢規則的調整則需要修改后臺代碼，改動代碼意味著要重新對程序進行編譯，這樣對項目上線后維護是及其不方便的。

而在Mybatis 框架下可以將SQL 語句與后臺代碼完全分離，將SQL 語句通過mapper.xml 文件進行統一管理，將主要的環境配置（用戶名、密碼、驅動、url 等）放置在mybatis-config.xml 核心配置文件中，同時在核心文件中配置類的掃描路徑。這樣當后臺需要對數據進行持久化操作時的工作流程就演變成了如圖3所示的后臺服務器與SQL 分離工作模式：后臺根據接口找到對應的mapper 文件，在mapper 文件中找到相對應的數據操作語句，然后對數據庫進行CRUD操作，最后向Dao 層返回操作結果。這樣帶來的好處就是后臺服務器與數據庫完全解耦，在系統后續優化SQL語句時，直接修改mapper文件，無需改動后臺代碼。

圖3 后臺服務器與SQL分離工作模式

2 技術分析

基于前后端分離的系統開發前端以Vue（一套輕量級的構建用戶的漸進式框架）為主體開發架構，summernote、echarts 等作為樣式組件，通過Axios 與后端進行交互；后臺以Springboot、Mybatis作為主要開發框架，以RESTFul 風格設計交互接口，向前端傳遞JSON格式數據。整體的邏輯架構如圖4所示。

圖4 基于前后端分離的系統架構圖

Spring boot：

Spring 框架是Java 平臺上的一種開源應用框架，提供具有控制反轉特性的容器。而springboot 是基于spring4.0設計的一套敏捷的Web開發框架。

Mybatis：

MyBatis 是一款優秀的持久層框架，它支持自定義SQL、存儲過程以及高級映射。MyBatis 免除了幾乎所有的JDBC 代碼以及設置參數和獲取結果集的工作。MyBatis 可以通過簡單的XML 或注解來配置和映射原始類型、接口和Java POJO 為數據庫中的記錄。

VUE：

Vue 是一套用于構建用戶界面的漸進式框架。與其他大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue也完全能夠為復雜的單頁應用提供驅動。

3 項目部署

基于前后端分離的Web 系統開發實現后需要進行部署、測試、上線等工作。這里以在Linux 操作系統下進行服務器部署為例加以介紹。

在項目部署前需要做以下的前置工作，在Windows系統中下載安裝VMwareworkstation工作站，在VMware中安裝CentOS7虛擬鏡像。當有了這樣的環境后開始對項目部署，此過程省略了前后端代碼的打包操作。由于采用前后端分離部署的方案，因此必須要在虛擬機中安裝Nginx 反向代理服務器，用于存放前端靜態資源。具體部署如下：

3.1 前端部署（linux操作環境）

⑴使用wgethttp://nginx.org/download/nginx-1.17.0.tar.gz將Nginx安裝包下載到虛擬機；

⑵安裝gcc環境：yuminstallgcc-c++；⑶安裝pcre、openssl依賴庫：

⑷解壓NGINX 安裝包：tar -zxvf nginx-1.17.0.tar.gz；

⑸啟動NGINX，進入sbin目錄：./nginx；

⑹放行NGINX 啟動端口（NGINX 默認啟動端口為80，因此放行80端口）：

⑺將前端項目打包后dist文件夾上傳到centos7中。

⑻修改NGINX核心配置文件，如圖5所示。

圖5 修改NGINX核心配置文件

3.2 后端部署（linux操作環境）

⑴在服務器中下載JDK8：

⑵ 解壓jdktar -zxvf jdk-8u40-linux-x64.tar.gz/usr/local/java；

⑶配置jdk環境變量：

⑷安裝jdkyum install -y java-1.8.0-openjdk；

⑸通過文件上傳工具將后端打包好的jar文件上傳至服務器；

⑹使用jar命令運行項目jar包java -jar XXXX.jar。

3.3 數據庫部署（linux操作環境）

⑴下載安裝MySQL數據庫：

⑵設置權限chownmysql:mysql -R/var/lib/mysql；

⑶初始化MySQLmysqld --initialize；

⑷啟動MySQLsystemctl start mysqld；

⑸在Windows中下載可視化工具Navicat；

⑹遠程連接Linux服務器中的MySQL；

⑺執行目標SQL文件。

通過以上操作就完成了整體項目在Linux 中的前后端分離部署，在部署完成之后需要在服務器中開放相應的防火墻端口，這樣就能在Windows 平臺中輸入IP地址進行訪問了。

4 結束語

前后端代碼分離解耦后，前端工程師只需要給后端工程師提供接口文檔，后端工程師不用關心前端代碼實現，僅關注業務邏輯的實現與優化，給后端工程師提供了更多的精力去追求高性能、高并發、高可用；前端工程師也不用關心后端如何實現功能，只關注前端界面給用戶帶來的頁面表現，速度流暢，兼容性，用戶體驗等其他工作。前后端代碼解耦后能帶來的優勢是十分明顯的，這也真正意義上達到了術業有專攻效果。