黃晟祺 許林瑞 汪玉笳 曾嬡 李功權(quán)

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

關(guān)鍵詞：前后端分離;Vue.js;ElementUI;Dubbo

中圖分類(lèi)號(hào)：TP311 ? ? 文獻(xiàn)標(biāo)識(shí)碼：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)的開(kāi)發(fā)方式將前端代碼和后端代碼混合在一起，如ASP、JSP技術(shù)等，這種開(kāi)發(fā)模式存在代碼可讀性差、開(kāi)發(fā)效率低等問(wèn)題[1]。針對(duì)以上問(wèn)題，產(chǎn)生并發(fā)展了前后端分離的開(kāi)發(fā)架構(gòu)。前端組件化、工程化，后端數(shù)據(jù)化;前端實(shí)現(xiàn)人機(jī)交互邏輯，提供業(yè)務(wù)數(shù)據(jù)展示，后端為前端提供業(yè)務(wù)數(shù)據(jù)支撐;前后端通過(guò)RESTful接口進(jìn)行數(shù)據(jù)交互[2]。前后端分離的開(kāi)發(fā)模式分工明確，提升了系統(tǒng)的性能，讓效率最大化，同時(shí)使系統(tǒng)的開(kāi)發(fā)也更加專(zhuān)業(yè)，降低了開(kāi)發(fā)成本。

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

2 ? 相關(guān)研究基礎(chǔ)（Related research foundation）

2.1 ? 前后端分離技術(shù)

2.1.1 ? 定義

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

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

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

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

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

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

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

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

（4）增強(qiáng)用戶(hù)的體驗(yàn)感

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

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

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

2.2 ? GIS技術(shù)

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

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

2.3.1 ? Vue.js

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

2.3.2 ? Elemen1tui

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

3 ?基于前后端和GIS技術(shù)的就醫(yī)無(wú)憂(yōu)服務(wù)系統(tǒng)設(shè)計(jì)與實(shí)現(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)設(shè)計(jì)

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

3.2 ? 前端實(shí)現(xiàn)

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

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

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

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

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

（2）高峰期人流分析

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

3.2.2 ? 查詢(xún)分析模塊

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

（1）空間查詢(xún)

輸入起點(diǎn)位置和終點(diǎn)醫(yī)院可進(jìn)行路線(xiàn)查詢(xún)，如圖2所示。

（2）屬性查詢(xún)

輸入科室和醫(yī)院等級(jí)，查詢(xún)滿(mǎn)足條件的所有醫(yī)院。

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

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

（4）周邊設(shè)施查詢(xún)

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

（5）綜合查詢(xún)

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

3.2.3 ? 用戶(hù)管理模塊

用戶(hù)管理模塊包括用戶(hù)登錄注冊(cè)，修改賬號(hào)信息，如密碼、手機(jī)號(hào)、昵稱(chēng)等。

3.3 ? 后端實(shí)現(xiàn)

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

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

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

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

4 ? 結(jié)論（Conclusion）

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

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

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

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

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

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

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

[7] 宋關(guān)福，陳勇，羅強(qiáng)，等.GIS基礎(chǔ)軟件技術(shù)體系發(fā)展及展望[J].地球信息科學(xué)學(xué)報(bào)，2021，23（01）：2-15.

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

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

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

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

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

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

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

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

作者簡(jiǎn)介：

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

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

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

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

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