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

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

關鍵詞：前后端分離;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）

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

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

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

2.1 ? 前后端分離技術

2.1.1 ? 定義

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

2.1.2 ? 前后端分離的優(yōu)勢

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

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

（2）打造高質(zhì)量人才

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

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

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

（4）增強用戶的體驗感

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

（5）降低開發(fā)成本

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

2.2 ? GIS技術

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

2.3 ? 系統(tǒng)技術的介紹

2.3.1 ? Vue.js

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

2.3.2 ? Elemen1tui

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

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

3.1 ? 系統(tǒng)的架構(gòu)設計

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

3.2 ? 前端實現(xiàn)

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

3.2.1 ? 統(tǒng)計分析模塊

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

（1）人流動態(tài)分析

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

（2）高峰期人流分析

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

3.2.2 ? 查詢分析模塊

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

（1）空間查詢

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

（2）屬性查詢

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

（3）緩沖區(qū)分析

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

（4）周邊設施查詢

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

（5）綜合查詢

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

3.2.3 ? 用戶管理模塊

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

3.3 ? 后端實現(xiàn)

后端的設計主要有用戶管理模塊，包括對用戶信息進行刪除和修改操作、輸入驗證碼進行驗證、用戶登錄、用戶注冊;查詢分析模塊包括實現(xiàn)對地圖的瀏覽、放大縮小、添加數(shù)據(jù)、在數(shù)據(jù)庫里進行查詢等;統(tǒng)計分析模塊包括人流模擬器的設計，模擬醫(yī)院一天內(nèi)不同時間段的人流數(shù)據(jù)，傳輸?shù)角岸艘灾鶢顖D、餅圖、折線圖、雷達圖等方式進行展現(xiàn);數(shù)據(jù)庫的設計包括醫(yī)院信息表、用戶表、周邊信息表等共七張表。

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

3.4 ? 前后端分離的實現(xiàn)

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

4 ? 結(jié)論（Conclusion）

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

參考文獻（References）

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

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

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

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

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

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

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

[9] 牛仁騰.基于Vue.js的表單可視化構(gòu)建系統(tǒng)的設計與實現(xiàn)[D].武漢：華中科技大學，2019.

[10] 蔡星.網(wǎng)約車平臺信用體系管理系統(tǒng)的設計與實現(xiàn)[D].武漢：華中科技大學，2019.

[11] 萬青.Web系統(tǒng)前后端分離架構(gòu)中的控制器優(yōu)化[J].科技經(jīng)濟導刊，2019，27（16）：28-29.

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

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

[14] 王志任.基于Vue.js的開發(fā)平臺的設計與實現(xiàn)[D].廣州：廣東工業(yè)大學，2018.

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

作者簡介：

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

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

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

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

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