Web項目前后端分離的設(shè)計與實現(xiàn)

王建 羅政 張希 張夢琪 張科 馬文成

摘? 要：針對傳統(tǒng)互聯(lián)網(wǎng)WEB程序開發(fā)模式中存在的耦合度較高、串行開發(fā)效率低等問題，在充分分析傳統(tǒng)互聯(lián)網(wǎng)WEB程序開發(fā)模式的基礎(chǔ)上，我們引入了SSM架構(gòu)來實現(xiàn)前后端分離，從而解決人力不足，分工不明確和前后端耦合度高等問題。并在此基礎(chǔ)上，開發(fā)了一個基于GIS的土壤重金屬污染分析與模擬系統(tǒng)，系統(tǒng)為B/S架構(gòu)，后端程序采用Java的SSM架構(gòu)（Spring、Spring MVC、Mybatis），前后端交互操作利用Ajax技術(shù)實現(xiàn)。在此基礎(chǔ)上，可以得出前后端分離技術(shù)具有加快項目的開發(fā)速度，提高用戶訪問Web程序的響應(yīng)速度，并且能夠解決項目開發(fā)中人員分工不明確等問題的結(jié)論。

關(guān)鍵詞：SSM架構(gòu);前后端分離;Ajax;Spring;MVC框架

中圖分類號：TP311? ? ?文獻標(biāo)識碼：A

Abstract：Aiming at the issues of high coupling and low serial development efficiency in the traditional internet WEB program development model，based on a full analysis of the traditional internet WEB program development model，this research introduced the SSM architecture to achieve front-end and back-end separation，thereby solving the issues of insufficient human resource，unclear division of labor，and high front-end coupling.Based on this，a GIS-based heavy metal soil pollution analysis and simulation system was developed.The system adopts B/S architecture.The back-end program uses the Java SSM architecture（Spring，Spring MVC，Mybatis）.The front-end and back-end interactive operations use Ajax for technical realization.On this basis，it can be concluded that the front and back end separation technology can speed up the development of the project，improve the response speed of users accessing web programs，and solve the problem of unclear division of labor in project development.

Keywords：SSM architecture;front-end and back-end separation;ajax;spring;MVC framework.

1? ?引言（Introduction）

現(xiàn)在B/S開發(fā)模式因其開發(fā)的項目更新速度快和無須用戶安裝的優(yōu)點，逐漸成為應(yīng)用開發(fā)時的主流開發(fā)模式。但是它的缺點也十分明顯，例如難以處理復(fù)雜的業(yè)務(wù)，網(wǎng)站比較龐大或者流量較大時網(wǎng)站響應(yīng)速度較慢，并且服務(wù)端壓力較大[1]。

從項目維護和擴展的角度上說，隨著網(wǎng)站流量的增加，和項目架構(gòu)的不斷的演進，項目勢必要進行升級擴展和結(jié)構(gòu)優(yōu)化。傳統(tǒng)的開發(fā)模式中前后端代碼耦合在一起，造成了代碼的可讀性以及可擴展性不高，給后期項目的維護和擴展增加了難度，增加了維護和擴展成本，可能會影響項目的更新上線速度，降低網(wǎng)站的訪問流量，對企業(yè)造成損失[2]。

從開發(fā)的角度來看，傳統(tǒng)開發(fā)模式中開發(fā)人員在開發(fā)過程中，不僅要設(shè)計后端的結(jié)構(gòu)和功能，還要設(shè)計制作前端頁面，最后將兩者融合在一起，這會影響開發(fā)速度，增加開發(fā)時間。并且還會增加編程人員學(xué)習(xí)的成本，整個項目的前后端都是一個人設(shè)計實現(xiàn)，要求開發(fā)人員熟悉前后端開發(fā)技術(shù)，但是前后端開發(fā)技術(shù)多達十幾種，對開發(fā)人員來說是一個極大的負擔(dān)[3]。因其對開發(fā)人員要求較高，且開發(fā)周期較長，勢必會增加項目開發(fā)的成本。但是前后端分離模式的出現(xiàn)較好地解決了這個問題。

因此WEB項目用前后端分離的開發(fā)模式是十分合理和必要的。

2? 前后端分離的優(yōu)勢（Advantages of front and back end separation）

2.1? ?什么是前后端分離模式

在傳統(tǒng)的互聯(lián)網(wǎng)Web軟件開發(fā)中，程序員不僅需要負責(zé)后端，還要負責(zé)前端，這就導(dǎo)致了Web應(yīng)用程序的高度耦合，使軟件開發(fā)的效率大大降低。而在前后端分離的開發(fā)模式中，開發(fā)者都只需要各司其職，即后端程序員只負責(zé)業(yè)務(wù)邏輯等，并向前端程序員提供API接口，而前端則負責(zé)將API接口上獲得的數(shù)據(jù)渲染到HTML頁面上[4]。在這種模式中，前后端基本實現(xiàn)了高度解耦，職責(zé)分明，分工明確，開發(fā)者只需要把后端的每一個視圖視為一個接口，前端頁面通過對接口的訪問來與數(shù)據(jù)庫進行交互。

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

（1）有利于打造高質(zhì)量團隊

開發(fā)人員只需要對前端或者后端之中選其一進行深入學(xué)習(xí)，從而節(jié)省學(xué)習(xí)的時間，并且隨著不斷地學(xué)習(xí)和項目經(jīng)驗的積累，開發(fā)人員對自己所負責(zé)的部分會越來越精通，編寫的代碼質(zhì)量越來越高[5]。這有利于開發(fā)高質(zhì)量產(chǎn)品的同時，也會不斷地提升開發(fā)人員和團隊的業(yè)務(wù)水平。

（2）提高工作效率，分工更加明確

前后端分離模式能夠讓前端開發(fā)人員專門負責(zé)前端，不會因要兼顧后端而分心，后端開發(fā)人員只需專門負責(zé)后端，不用考慮前端代碼。兩者并行開發(fā)，提高開發(fā)效率，加快項目上線速度，有利于搶占市場。前端頁面中的某些不涉及數(shù)據(jù)的頁面調(diào)整只需修改前端代碼，而不用修改后端代碼。對于企業(yè)而言，程序出現(xiàn)bug，快速定位是誰的問題，這是非常重要的。頁面內(nèi)部的布局和邏輯，頁面與頁面之間跳轉(zhuǎn)時出現(xiàn)失誤，頁面與瀏覽器不兼容，頁面的樣式不合理等問題，全部由前端開發(fā)人員來負責(zé)。調(diào)用接口時數(shù)據(jù)出錯，數(shù)據(jù)提交失敗，請求超時等問題，全部由后端開發(fā)人員來解決[6]。雙方互不干擾，職責(zé)清晰。

（3）分別部署，系統(tǒng)性能提升

前后端項目成為兩個單獨的項目，每個項目都部署在單獨的服務(wù)器上，這會大大提高頁面的響應(yīng)速度，并且在頁面與用戶的交互及用戶體驗上有較大提升。特別是對于大型項目和流量巨大的網(wǎng)站，這種方式尤為重要。舉個例子，淘寶的一個頁面就要3000多臺前端服務(wù)器進行分布式集群來頂住每日平均幾億的用戶訪問量，由此可知它的后端程序有多么復(fù)雜[7]。前后端分離有利于大型項目做集群，多臺服務(wù)器共同承擔(dān)訪問流量，不易造成程序崩潰。對于其后端而言，后端程序中沒有前端代碼，只有后端代碼，服務(wù)器只需要運行后端代碼，給前端頁面提供接口和數(shù)據(jù)。這極大地降低了服務(wù)器運行的壓力，提升了頁面響應(yīng)的速度。

（4）增強代碼的可維護性

前后端代碼基本實現(xiàn)完全解耦，項目可以進行模塊化開發(fā)，前端大量的代碼以組件的方式得以復(fù)用，后端代碼的邏輯更加清晰，可以以模塊的方式得以復(fù)用。這種方式為項目的維護和升級提供了比較好的環(huán)境，以后相似項目的開發(fā)可以利用這些模塊化代碼，這會縮短開發(fā)時間。

3? 基于GIS的土壤重金屬污染分析與模擬系統(tǒng)設(shè)計（Analysis and simulation system design of heavy metal pollution in soil based on GIS）

3.1? ?前端設(shè)計

（1）用戶模塊

用戶模塊主要包括登錄頁面（包括字段驗證和提交登錄接口），用戶注冊（包括用戶名異步檢查和提交注冊接口），找回密碼（包括通過密碼提示問題和token找回密碼的邏輯實現(xiàn)，獲取密碼提示問題接口，獲取token接口，重置密碼接口），個人中心（包括顯示個人信息，修改個人信息，獲取用戶信息接口），修改密碼（包括根據(jù)原密碼修改密碼和更新密碼接口）。

（2）地圖瀏覽與基本操作模塊

地圖瀏覽（用戶可以拖動平移工作區(qū)內(nèi)的地圖區(qū)域進行查看，但不影響整個地圖的完整性和初始狀態(tài)），圖層切換（通過勾選不同的地圖，以實現(xiàn)不同的底圖風(fēng)格），地圖縮放（放大功能：系統(tǒng)可以支持用三兩種放大功能，一種是滾動鼠標(biāo)，即用戶通過滾動鼠標(biāo)，該區(qū)域按比例方大;第二種是逐級放大，用戶直接點選放大，工作區(qū)內(nèi)的地圖按一定比例放大;第三種是縮放條放大，通過滑動縮放條，實現(xiàn)對工作區(qū)一定比例的放大。縮小功能：同放大功能，方向相反。選擇高亮顯示：因選擇某要素后在地圖上形成高亮顯示）增添數(shù)據(jù)（增加污染源）等。

（3）查詢模塊

點擊查詢（通過鼠標(biāo)點擊采樣點，會將該點放入數(shù)據(jù)集中，被選中的對象高亮顯示，返回各種重金屬濃度以餅狀圖和漏斗圖顯示），繪制查詢（通過繪制多邊形，獲取多邊形覆蓋的點集合，被選中的點集合高亮顯示，并將點集合中的采樣點的各種重金屬濃度以餅狀圖和漏斗圖顯示出來），SQL查詢（在客戶端合成查詢SQL語句，向服務(wù)器提交進行SQL查詢。通過選擇重金屬的種類以及濃度的等級，顯示查詢得到的點集合，查詢到的結(jié)果在圖形顯示窗口中將高亮顯示，其屬性將以餅狀圖和漏斗圖顯示），數(shù)據(jù)集功能（保存當(dāng)前查詢到的樣本的信息，可通過點擊上一點或者下一點，可以查詢數(shù)據(jù)集中樣本點的信息）。

（4）分析模塊

污染分析模塊包括泰森多邊形、克里格分析、表面等值線、緩沖區(qū)分析、熱力圖分析等。

泰森多邊形（通過一組連接兩鄰點線段的垂直平分線組成的連續(xù)多邊形組成。一個泰森多邊形內(nèi)的任一點到構(gòu)成該多邊形的控制點的距離小于到其他多邊形控制點的距離），表面等值線（某一數(shù)量指標(biāo)值相等的各點連成的平滑曲線，由地圖上標(biāo)出的表示制圖對象數(shù)量的各點，采用內(nèi)插法找出各整數(shù)點繪制而成的），緩沖區(qū)分析（指以點、線、面實體為基礎(chǔ)，自動建立其周圍一定寬度范圍內(nèi)的緩沖區(qū)多邊形圖層）。

（5）展示模塊

專題地圖展示模塊包括點聚合顯示、折線圖展示、柱狀圖展示、餅狀圖展示和雷達圖展示等。點聚合顯示（通過聚合顯示，更直觀地顯示區(qū)域采樣點的密度），單值柱狀圖專題圖（通過指定某個字段單值柱狀圖專題圖），柱狀圖專題圖（通過指定字段或多個字段制作柱狀圖專題圖），餅狀圖專題圖（通過指定字段或多個字段制作餅狀圖專題圖），玫瑰圖專題圖（通過指定字段或多個字段制作玫瑰圖專題圖）。

（6）重金屬污染物的擴散模擬模塊

污染模擬（通過重金屬類型，將該重金屬的相關(guān)信息傳到后臺，通過重金屬擴散遷移模型，模擬出在一定時間內(nèi)，擴散的范圍，并顯示在地圖上）熱力圖顯示（實現(xiàn)展示該對象的密度，通過數(shù)量來渲染顏色的等級），具體的前端界面如圖1所示。

3.2? ?后端設(shè)計

后端主要有用戶模塊、地圖瀏覽與基本操作模塊、查詢模塊、分析模塊、展示模塊，以及重金屬污染物的擴散模擬模塊。用戶模塊主要包括用戶登錄、用戶名的驗證、用戶注冊、忘記密碼、提交問題答案、重置密碼、獲取用戶信息、更新用戶信息、退出登錄等功能。地圖瀏覽與基本操作模塊主要根據(jù)用戶操作對地圖進行放大、縮小、圖層切換、添加數(shù)據(jù)等功能。查詢模塊主要有點擊查詢、繪制查詢、SQL查詢、數(shù)據(jù)集等功能。分析模塊主要有泰深多邊形、表面等值線、緩沖區(qū)分析等功能。展示模塊主要有專題地圖展示模塊包括點聚合顯示、折線圖展示、柱狀圖展示、餅狀圖展示以及雷達圖展示等功能。重金屬污染物的擴散模擬模塊主要由污染擴散模擬和熱力圖等功能。每個模塊都有數(shù)據(jù)調(diào)用的接口。

3.3? ?數(shù)據(jù)庫設(shè)計

數(shù)據(jù)是系統(tǒng)的基礎(chǔ)，數(shù)據(jù)庫設(shè)計就是為了將信息化的海量數(shù)據(jù)統(tǒng)一、高效地組織和管理起來，本系統(tǒng)中，有用戶表，污染源表等10張關(guān)系型數(shù)據(jù)庫表，還有一張圖層空間數(shù)據(jù)庫表。系統(tǒng)的總體架構(gòu)圖如圖2所示。

4? ?前后端分離的實現(xiàn)（Implementation of front and back end separation）

4.1? ?前端項目實現(xiàn)

進行前端項目開發(fā)一般使用HTML、CSS、JavaScript、jQuery、Ajax等技術(shù)，并且可以使用主流的前端框架Vue.js、React、Angular.js等簡化開發(fā)流程。IDE可以使用WebStorm來提高開發(fā)效率。前后端數(shù)據(jù)交互使用json格式的數(shù)據(jù)，前端頁面給后端頁面發(fā)請求，請求后端的接口[8]，從后端獲取需要的數(shù)據(jù)，拿到后端數(shù)據(jù)之后解析數(shù)據(jù)然后用Ajax對數(shù)據(jù)進行渲染，將數(shù)據(jù)顯示在界面上。可以利用Node.js、webpack對前端項目進行打包壓縮和部署。

4.2? ?后端項目實現(xiàn)

后端的實現(xiàn)使用了SSM（Spring+SpringMVC+MyBatis）這款流行的后端開發(fā)框架，使用了Maven這款自動化構(gòu)建工具，使用了IDEA作為IDE，并且還使用了許多優(yōu)秀的插件，可以簡化開發(fā)流程，提高開發(fā)效率[9]。根據(jù)項目的設(shè)計進行編碼實現(xiàn)。

5? ?結(jié)論（Conclusion）

Web項目前后端分離開發(fā)實現(xiàn)了并行開發(fā)，有效地提高了開發(fā)效率。前后端分離降低了程序員的學(xué)習(xí)成本，程序員只需專精前端或者后端，不用像以前一樣前后端都要會。大大提高了代碼編寫質(zhì)量，縮短了開發(fā)周期。前后端分離可以基本實現(xiàn)前后端完全解耦，有利于提高后端代碼的復(fù)用性，同時也有利于前端使用模塊化的開發(fā)方式[10]。方便以后項目的維護和擴展升級。

參考文獻（References）

[1] 林志瑋，楊素慧，黃聯(lián)發(fā).Web與VR結(jié)合的植物實驗教學(xué)系統(tǒng)建設(shè)[J].實驗技術(shù)與管理，2020（02）：144-147.

[2] 王英，張震宇.我國省級檔案館Web可獲取性研究[J].檔案與建設(shè)，2020（01）：20-24;13.

[3] 康海燕，李昊.基于Web日志的性格預(yù)測與群體畫像方法研究[J].鄭州大學(xué)學(xué)報（理學(xué)版），2020，52（01）：39-46.

[4] 遲殿委.前后端分離的Web架構(gòu)解決方案[J].智慧工廠，2019（06）：37-38.

[5] 杜艷美，黃曉芳.面向企業(yè)級web應(yīng)用的前后端分離開發(fā)模式及實踐[J].西南科技大學(xué)學(xué)報，2018，33（02）：83-87.

[6] 戈家龍，吳紅亞，楊保華.基于SSM的前后端分離電商網(wǎng)站的設(shè)計與實踐[J].電腦知識與技術(shù)，2018，14（13）：276-277.

[7] 何璇，馬佳琳.基于Hadoop的Web日志分析系統(tǒng)的設(shè)計[J].軟件工程，2019，22（02）：11-12;4.

[8] 孫一笑，張玉軍，孫宇成，等.基于WebAPI前后端完全分離的軟件開發(fā)模式[J].信息與電腦（理論版），2019（06）：96-97.

[9] 張鵬飛，王乾，胡曉冬，等.基于Node.js和JS的前后端分離實現(xiàn)[J].軟件，2019，40（04）：11-17.

[10] 霍福華.Web前端MVC框架的發(fā)展方向以及意義[J].軟件工程，2019，22（04）：44-46.

作者簡介：

王? ?建（1999-），男，本科生.研究領(lǐng)域：GIS應(yīng)用.

羅? ?政（1998-），男，本科生.研究領(lǐng)域：GIS應(yīng)用.

張? ?希（2000-），男，本科生.研究領(lǐng)域：GIS應(yīng)用.

張夢琪（2000-），男，本科生.研究領(lǐng)域：GIS應(yīng)用.

張? ?科（1999-），男，本科生.研究領(lǐng)域：GIS應(yīng)用.

馬文成（2001-），男，本科生.研究領(lǐng)域：web前端.