王建 羅政 張希 張夢(mèng)琪 張科 馬文成

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

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

中圖分類號(hào)：TP311? ? ?文獻(xiàn)標(biāo)識(shí)碼：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ā)的項(xiàng)目更新速度快和無須用戶安裝的優(yōu)點(diǎn)，逐漸成為應(yīng)用開發(fā)時(shí)的主流開發(fā)模式。但是它的缺點(diǎn)也十分明顯，例如難以處理復(fù)雜的業(yè)務(wù)，網(wǎng)站比較龐大或者流量較大時(shí)網(wǎng)站響應(yīng)速度較慢，并且服務(wù)端壓力較大[1]。

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

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

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

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

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

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

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

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

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

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

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

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

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

（4）增強(qiáng)代碼的可維護(hù)性

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

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

3.1? ?前端設(shè)計(jì)

（1）用戶模塊

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

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

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

（3）查詢模塊

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

（4）分析模塊

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

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

（5）展示模塊

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

（6）重金屬污染物的擴(kuò)散模擬模塊

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

3.2? ?后端設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)（References）

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

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

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

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

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

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

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

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

[9] 張鵬飛，王乾，胡曉冬，等.基于Node.js和JS的前后端分離實(shí)現(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)用.

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

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

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