趙圓圓，伍 岑

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

0 引言

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

1 方案綜述

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

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

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

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

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

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

圖2 前后端分離交互模式

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

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

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

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

2 技術(shù)分析

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

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

Spring boot：

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

Mybatis：

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

VUE：

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

3 項(xiàng)目部署

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

在項(xiàng)目部署前需要做以下的前置工作，在Windows系統(tǒng)中下載安裝VMwareworkstation工作站，在VMware中安裝CentOS7虛擬鏡像。當(dāng)有了這樣的環(huán)境后開(kāi)始對(duì)項(xiàng)目部署，此過(guò)程省略了前后端代碼的打包操作。由于采用前后端分離部署的方案，因此必須要在虛擬機(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依賴(lài)庫(kù)：

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

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

⑹放行NGINX 啟動(dòng)端口（NGINX 默認(rèn)啟動(dòng)端口為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；

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

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

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

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

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

⑶初始化MySQLmysqld --initialize；

⑷啟動(dòng)MySQLsystemctl start mysqld；

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

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

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

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

4 結(jié)束語(yǔ)

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