前后端分離的系統(tǒng)解耦部署方案設(shè)計與實(shí)現(xiàn)＊

趙圓圓，伍 岑

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

0 引言

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

1 方案綜述

1.1 傳統(tǒng)模式下開發(fā)的Web應(yīng)用

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

圖1 模板引擎混合開發(fā)模式

1.2 前后端解耦的Web應(yīng)用

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

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

圖2 前后端分離交互模式

1.3 后臺服務(wù)器與數(shù)據(jù)庫服務(wù)器的解耦

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

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

圖3 后臺服務(wù)器與SQL分離工作模式

2 技術(shù)分析

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

圖4 基于前后端分離的系統(tǒng)架構(gòu)圖

Spring boot：

Spring 框架是Java 平臺上的一種開源應(yīng)用框架，提供具有控制反轉(zhuǎn)特性的容器。而springboot 是基于spring4.0設(shè)計的一套敏捷的Web開發(fā)框架。

Mybatis：

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

VUE：

Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其他大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動。

3 項(xiàng)目部署

基于前后端分離的Web 系統(tǒng)開發(fā)實(shí)現(xiàn)后需要進(jìn)行部署、測試、上線等工作。這里以在Linux 操作系統(tǒng)下進(jìn)行服務(wù)器部署為例加以介紹。

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

3.1 前端部署（linux操作環(huán)境）

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

⑵安裝gcc環(huán)境：yuminstallgcc-c++；⑶安裝pcre、openssl依賴庫：

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

⑸啟動NGINX，進(jìn)入sbin目錄：./nginx；

⑹放行NGINX 啟動端口（NGINX 默認(rèn)啟動端口為80，因此放行80端口）：

⑺將前端項(xiàng)目打包后dist文件夾上傳到centos7中。

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

圖5 修改NGINX核心配置文件

3.2 后端部署（linux操作環(huán)境）

⑴在服務(wù)器中下載JDK8：

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

⑶配置jdk環(huán)境變量：

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

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

⑹使用jar命令運(yùn)行項(xiàng)目jar包java -jar XXXX.jar。

3.3 數(shù)據(jù)庫部署（linux操作環(huán)境）

⑴下載安裝MySQL數(shù)據(jù)庫：

⑵設(shè)置權(quán)限chownmysql:mysql -R/var/lib/mysql；

⑶初始化MySQLmysqld --initialize；

⑷啟動MySQLsystemctl start mysqld；

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

⑹遠(yuǎn)程連接Linux服務(wù)器中的MySQL；

⑺執(zhí)行目標(biāo)SQL文件。

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

4 結(jié)束語

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