Web項目前后端分離的設計與實現

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

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

關鍵詞：SSM架構;前后端分離;Ajax;Spring;MVC框架

中圖分類號：TP311? ? ?文獻標識碼：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）

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

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

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

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

2? 前后端分離的優勢（Advantages of front and back end separation）

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

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

2.2? ?前后端分離的優點

（1）有利于打造高質量團隊

開發人員只需要對前端或者后端之中選其一進行深入學習，從而節省學習的時間，并且隨著不斷地學習和項目經驗的積累，開發人員對自己所負責的部分會越來越精通，編寫的代碼質量越來越高[5]。這有利于開發高質量產品的同時，也會不斷地提升開發人員和團隊的業務水平。

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

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

（3）分別部署，系統性能提升

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

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

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

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

3.1? ?前端設計

（1）用戶模塊

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

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

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

（3）查詢模塊

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

（4）分析模塊

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

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

（5）展示模塊

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

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

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

3.2? ?后端設計

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

3.3? ?數據庫設計

數據是系統的基礎，數據庫設計就是為了將信息化的海量數據統一、高效地組織和管理起來，本系統中，有用戶表，污染源表等10張關系型數據庫表，還有一張圖層空間數據庫表。系統的總體架構圖如圖2所示。

4? ?前后端分離的實現（Implementation of front and back end separation）

4.1? ?前端項目實現

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

4.2? ?后端項目實現

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

5? ?結論（Conclusion）

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

參考文獻（References）

[1] 林志瑋，楊素慧，黃聯發.Web與VR結合的植物實驗教學系統建設[J].實驗技術與管理，2020（02）：144-147.

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

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

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

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

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

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

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

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

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

作者簡介：

王? ?建（1999-），男，本科生.研究領域：GIS應用.

羅? ?政（1998-），男，本科生.研究領域：GIS應用.

張? ?希（2000-），男，本科生.研究領域：GIS應用.

張夢琪（2000-），男，本科生.研究領域：GIS應用.

張? ?科（1999-），男，本科生.研究領域：GIS應用.

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