基于前后端交互的就醫無憂系統的設計與實現

黃晟祺 許林瑞 汪玉笳 曾嬡 李功權

摘 ?要：傳統的Web開發模式中前后端代碼高度耦合，導致系統分工不明確，開發效率低，因此前后端分離的開發模式在當前Web應用中顯得尤為重要。本文面向智慧就醫問題，引入前后端分離的漸近式框架Vue.js（一套輕量級的構建用戶的漸進式框架）、ElementUI組件庫（餓了么團隊開發的一款的Vue框架）、webpack構建技術（一個模塊打包器），后端基于Dubbo分布式架構進行開發，前后端利用Ajax（創建交互式的網頁開發技術）進行數據交互。設計實現了基于GIS技術（一種空間信息分析技術）的就醫無憂服務系統，系統具備空間查詢、屬性查詢、緩沖區分析、周邊設施查詢等基礎功能。實驗表明，前后端分離的開發模式使開發人員分工明確，提高了系統性能和開發效率。

關鍵詞：前后端分離;Vue.js;ElementUI;Dubbo

中圖分類號：TP311 ? ? 文獻標識碼：A

Abstract： High coupling of front-end and back-end codes in traditional Web development model leads to unclear system division of labor and low development efficiency. Therefore， development model of front-end and back-end separation is of particular importance in current Web applications. This paper aims to solve the problem of smart medical service by using the progressive framework Vue.js （a lightweight progressive framework for building users）， Elementui component library （a Vue framework developed by the Ele.me team）， and webpack construction technology （a module packer）. Back-end is developed based on the Dubbo distributed architecture， and Ajax （creating interactive Web development technology） is used for data interaction between front-end and back-end. The worry-free medical service system based on GIS technology （a kind of spatial information analysis technology） is implemented， which has basic functions such as spatial query， attribute query， buffer analysis， and surrounding facility query. Experiments show that the development model of front-end and back-end separation defines a clear division of labor and improves system performance and development efficiency.

Keywords： front-end and back-end separation; Vue.js; Elementui; Dubbo

1 ? 引言（Introduction）

傳統的開發方式將前端代碼和后端代碼混合在一起，如ASP、JSP技術等，這種開發模式存在代碼可讀性差、開發效率低等問題[1]。針對以上問題，產生并發展了前后端分離的開發架構。前端組件化、工程化，后端數據化;前端實現人機交互邏輯，提供業務數據展示，后端為前端提供業務數據支撐;前后端通過RESTful接口進行數據交互[2]。前后端分離的開發模式分工明確，提升了系統的性能，讓效率最大化，同時使系統的開發也更加專業，降低了開發成本。

本文設計了一款基于前后端分離的就醫無憂服務系統，系統采用前后端分離的開發模式，采用了Dubbo、Spring MVC、Spring Security分布式架構、權限技術棧、Echarts的報表技術棧、MySQL的持久化技術棧，以及HTML5、CSS3、jQuery、Node.js、Vue.js（一套輕量級的構建用戶的漸進式框架）、Elementui等技術棧、第三方服務七牛云（存儲服務）和百度地圖API。

2 ? 相關研究基礎（Related research foundation）

2.1 ? 前后端分離技術

2.1.1 ? 定義

前后端分離的核心思想是前端HTML頁面通過Ajax調用后端的RESTful API接口，并通過JSON數據進行交互[3]。它的開發模式是前端技術人員只專注于前端的工作，負責頁面設計、框架搭建以及把后端返回來的數據渲染到頁面上，不用考慮和理解后端開發的復雜代碼，而后端技術人員負責提供接口給前端技術人員。前后端人員分工明確，大大提高了工作效率。前后端分離的最終目標是前端和服務端是完全獨立的項目，前端項目分為瀏覽器和控制層，服務端項目分為服務層、DAO層等。項目開發時前后端完全分開，展示和交互是前端的作用，業務服務是后端的作用，最后生產發布時分開部署，即可完成前后端最大程度解耦[4]。

2.1.2 ? 前后端分離的優勢

（1）前后端分開部署服務器，系統性能提升

前后端的服務器分開部署，減輕了服務器的壓力，提升了頁面的流暢度以及用戶的體驗度，最大程度地解決了隨著系統應用范圍的增大、用戶訪問量的增加，服務器訪問過慢或服務器崩潰的問題。前后端分離極大地完成了前后端解耦，提升了系統性能。

（2）打造高質量人才

全棧開發者的精力有限，大部分的全棧開發者學習廣而不專，要掌握數據庫、服務器開發、前端開發等多種技術。相比而言，前后端分離是前后端開發人員在不同的研究領域里各自學習，對于前端開發人員，把精力放在HTML5、CSS3、jQuery、bootstrap、Vue.js、webpack、Node.js、Elementui，以及設計模式上;對于后端開發人員，重點學習Java、Spring+Spring MVC原理及源碼等，使得在有效地時間內，讓開發人員不斷學習，積累經驗，更加精通自己的專業知識，作出更好的產品，提高開發效率。因此，前后端分離的模式更有利于打造高質量的前后端人才，使開發更加專業。

（3）分工明確，讓效率最大化

前后端分離可以避免在業務邏輯復雜的系統里前后端代碼混合在一起，當出現bug的時候可以快速定位是前端開發人員還是后端開發人員的問題，再由對應的人負責解決，比如客戶端的問題則不需要后臺的工作人員參與調試，由前端開發人員定位解決即可。當前端需要修改一個模塊時，后端只需在原基礎上再提供一個接口即可讓項目的擴展變得更加方便。前后端并行開發，雙方互不干擾，分工明確，讓效率達到最大化，也有助于搶占市場。

（4）增強用戶的體驗感

前后端分離模式的出現，實現了高內聚低耦合，節約了開發時間，讓前端能夠采用更多的時間追求頁面的美觀程度，后端也能利用更多的時間開發出可用性高、性能好的系統。同時，在后端服務器暫停時，前端服務器可正常訪問，只是沒有后端提供數據，增強了用戶的體驗感。應用JavaScript代碼對于保證應用程序快速響應請求，而不必消耗大量CPU時間和精力至關重要。同樣，客戶端代碼表現不佳可能導致用戶將應用程序視為無響應[5]。所以，前后端分離既能讓前端人員利用更多的時間提高性能，也能更好地增強用戶的體驗感。

（5）降低開發成本

后端開發人員開發出一套后端接口后，可以支持PC端、APP端、微信端、WebApp端等多種前端應用程序，并且可以共用一個數據庫，極大地降低了開發成本。

2.2 ? GIS技術

前端組件化設計思想對于WebGIS有較好的借鑒意義。由于WebGIS的主要表現顯示為在線地圖，為了增強加載速度和用戶體驗感，應避免多次刷新地圖頁面，因此包含地圖的單頁面WebGIS成為發展趨勢[6]。GIS技術還包括空間大數據技術。空間大數據可視化是將計算機可視化技術、二維GIS可視化技術、三維GIS可視化技術等相結合，實現對多源、異構、海量、動態數據的可視化表達[7]。其分析結果以熱力圖、格網圖、散點圖、密度圖、OD圖等方式表達大數據空間分析對象的聚合程度、變化趨勢和關聯關系等，直觀清晰地展現數據內含的價值[8]。

2.3 ? 系統技術的介紹

2.3.1 ? Vue.js

Vue.js是一套輕量級的構建用戶的漸進式框架。Vue聚焦于圖層，是讓開發人員利用簡單方便的API實現對頁面數據的綁定和組合的視圖組件，它的核心是一個響應的數據綁定系統。Vue是在View層（即DOM層）與Model層（即js邏輯層）之間通過ViewModel綁定DOM Listeners與Data Bindings，以實現雙向數據綁定的功能。Vue.js的優點是漸進式，開發者可以以script腳本或單獨創造等不同方式的創造方法逐步引用該組件庫，靈活性極強，而其他大型框架則需自上而下全面引用[9]。

2.3.2 ? Elemen1tui

Elementui是餓了么團隊開發的一款非常流行的Vue框架，該框架封裝了各種各樣的基于Vue 2.0的組件，用于網頁的快速布局，方便快速開發功能強大、風格統一的頁面。選擇基于Vue.js的組件庫，可以提高系統的兼容性。目前開源組件庫支持Vue 3.0版本，但Vue 3.0版本并不普遍適用，且部分組件不兼容，因此Vue 2.0版本仍是當下最流行、種類最多的組件庫。掌握Vue的基礎知識，以及對Vue腳手架有一定的了解是學習Elementui的基礎。Elementui提供布局容器、按鈕、多選框、輸入框、表單、圖標等組件的詳細代碼，僅需要復制文本即可使用。它簡單易學，省去了很多煩瑣的Vue代碼，讓頁面設計變得美觀、快捷和簡單。

3 ?基于前后端和GIS技術的就醫無憂服務系統設計與實現（Design and implementation of a worry-free medical service system based on front-end and back-end and GIS technology）

3.1 ? 系統的架構設計

開發者在設計系統的時候，需綜合系統功能性和非功能性兩方面的要求確定開發規范，這樣不僅有利于開發者進行模塊化開發，方便多人協同開發，保證開發進度，還方便開發人員編寫利于閱讀、可維護的代碼，避免過多人員參與，造成代碼的沖突，可以整體提升開發的效率[10]。對Web應用來說，客戶端和服務器端獨立的架構能最大程度地完成前后端解耦。根據功能分類，服務器包括前端服務器和后端服務器，前端服務器包括HTML、CSS、JavaScript、圖片等靜態資源;后端服務器主要作用于業務邏輯，結合Spring應用一些成熟的框架，可以擴展功能和均衡負載[11]。系統架構圖如圖1所示。

3.2 ? 前端實現

雖然學習Vue框架和其他相關js組件需要一定的時間和精力，但對開發功能復雜的Web前端系統來說，整體使用Vue框架更節約時間和精力，因此可以應用Vue框架以提高開發效率和效果[12]。

3.2.1 ? 統計分析模塊

統計分析模塊主要分為人流熱度分析、高峰期人流分析，可對醫院人流信息進行收集分析并進行圖形化反饋。

（1）人流動態分析

對于人流動態分析，地圖以點的大小、顏色表示該區域內人流量的多少，輸入查詢區域、查詢日期和查詢時間段可顯示人口流動熱力圖，動態展示人流量的變化。通過這種方式可以直觀地看出人流變化規律，頁面下方采取柱狀圖、雷達圖等進行可視化分析，展示某一區域內人流量最多的十大醫院，幫助用戶選擇合適醫院。數據可視化的作用是直觀清晰地向用戶傳達數據所表達的信息，它是數據分析或數據科學中的一個步驟[13]。

（2）高峰期人流分析

對于高峰期人流分析，可根據某一醫院，輸入查詢時間段，展示在一天之內該時間段內醫院各門診科室的人流量熱力分析圖（地圖以顏色的深淺代表該時間段內人流量的多少，顏色由綠到紅表示客流量由少到多），動態展示人流熱度情況。用戶可直觀清晰地看出人流變化規律，避免高峰期出行，選擇人流量較少的時間段排隊檢查。

3.2.2 ? 查詢分析模塊

查詢分析模塊主要包括空間查詢、屬性查詢、緩沖區分析、周邊設施查詢和綜合查詢。

（1）空間查詢

輸入起點位置和終點醫院可進行路線查詢，如圖2所示。

（2）屬性查詢

輸入科室和醫院等級，查詢滿足條件的所有醫院。

（3）緩沖區分析

輸入緩沖區半徑，選擇查詢中心，查詢半徑內的所有醫院。當鼠標懸浮在其中任意一個紅色標記點時可以看到當前醫院名稱、地址、電話等，點擊右邊詳情可跳轉到該醫院更加詳細的頁面展示，如圖3所示。

（4）周邊設施查詢

以當前醫院為中心，查詢一定范圍內的所有飯店、學校、商場、酒店，如圖4所示。

（5）綜合查詢

輸入起始位置和終點醫院查詢路徑，設置緩沖區，查詢以醫院為中心的周邊設施如飯店、學校、商場、酒店等，如圖5所示。

3.2.3 ? 用戶管理模塊

用戶管理模塊包括用戶登錄注冊，修改賬號信息，如密碼、手機號、昵稱等。

3.3 ? 后端實現

后端的設計主要有用戶管理模塊，包括對用戶信息進行刪除和修改操作、輸入驗證碼進行驗證、用戶登錄、用戶注冊;查詢分析模塊包括實現對地圖的瀏覽、放大縮小、添加數據、在數據庫里進行查詢等;統計分析模塊包括人流模擬器的設計，模擬醫院一天內不同時間段的人流數據，傳輸到前端以柱狀圖、餅圖、折線圖、雷達圖等方式進行展現;數據庫的設計包括醫院信息表、用戶表、周邊信息表等共七張表。

系統實現采用Dubbo分布式架構框架，并具體使用Spring+Spring MVC+Mybatis這三個框架進行開發。在數據的存儲上，采用MySQL、Redis兩種不同的方式來解決不同的應用場景。系統中所有的工程都是基于Maven來搭建的，對項目進行統一規范的管理。為了提高系統的性能，系統應用七牛云云存儲服務、定時組件Quartz、靜態化頁面FreeMarker協助開發。

3.4 ? 前后端分離的實現

前后端利用Ajax進行交互，后端提供多個RESTful API接口，利用JSON格式進行數據交互。經典的Ajax技術實現了網頁的局部數據刷新，而Axios二次封裝了Ajax，它支持創建XMLHttpRequest、PromiseApi，發出HTTP請求、攔截請求和響應、轉換請求和相應數據、轉換JSON數據等，Axios插件極好地封裝了Ajax，寫法簡單清晰，方便查詢錯誤，也不容易出錯[14]。

4 ? 結論（Conclusion）

本文以就醫無憂服務系統為例介紹了前后端分離的基本結構，前端負責頁面設計、框架搭建等，后端負責提供接口，利用Ajax使用JSON數據的格式進行交互，通過實踐證明前后端分離在開發過程中的高效性。同時，模塊化的開發方式也讓分工更明確，也使項目有了更高的復用性和可擴展性，提高了編程質量，減少了不必要的開發時間[15]。本文介紹的一些技術和工具可幫助開發人員更好地學習前后端交互技術，并解決與實踐相關的問題。傳統的開發模式都不再適用，當前的前后端分離模式也在不斷地更新，以期減少開發成本，提高開發效率，這種模式將會有更加蓬勃的明天。

參考文獻（References）

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

[2] 王鋒，劉俊波.前后端分離模式下的WEB系統集成方案[J].通信技術，2020，53（09）：2347-2350.

[3] 孟祥雙.前后端分離式WEB應用開發研究[J].電子元器件與信息技術，2019，3（06）：40-43.

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

[6] 李成仁.基于Vue.js的單頁面WebGIS可視化框架研究與實? ? ? 現[J].地理空間信息，2020，18（05）：7，83-86，98.

[7] 宋關福，陳勇，羅強，等.GIS基礎軟件技術體系發展及展望[J].地球信息科學學報，2021，23（01）：2-15.

[8] 宋關福，鐘耳順，吳志峰，等.新一代GIS基礎軟件的四大關鍵技術[J].測繪地理信息，2019，44（01）：1-8.

[9] 牛仁騰.基于Vue.js的表單可視化構建系統的設計與實現[D].武漢：華中科技大學，2019.

[10] 蔡星.網約車平臺信用體系管理系統的設計與實現[D].武漢：華中科技大學，2019.

[11] 萬青.Web系統前后端分離架構中的控制器優化[J].科技經濟導刊，2019，27（16）：28-29.

[12] 朱二華.基于Vue.js的Web前端應用研究[J].科技與創新，? ? ? ? 2017（20）：119-121.

[13] 劉銘宇.基于Web的數據可視化系統設計及應用[D].北京：北京郵電大學，2018.

[14] 王志任.基于Vue.js的開發平臺的設計與實現[D].廣州：廣東工業大學，2018.

[15] 鄒瑞，段華瓊.基于前后端分離技術的在線商城的設計與實現[J].電腦知識與技術，2020，16（26）：231-232，239.

作者簡介：

黃晟祺（2001-），女，本科生.研究領域：GIS工程.

許林瑞（1998-），男，本科生.研究領域：GIS工程.

汪玉笳（2000-），女，本科生.研究領域：GIS工程.

曾 ? 嬡（2000-），女，本科生.研究領域：GIS工程.

李功權（1971-），男，博士，副教授.研究領域：時空大數據分析.