鄧雯婷

摘 要：隨著單頁Web應(yīng)用開發(fā)技術(shù)的不斷完善，越來越多的Web應(yīng)用都采用了單頁應(yīng)用模式。文章詳細(xì)介紹了基于Vue構(gòu)建單頁面應(yīng)用的系統(tǒng)架構(gòu)、關(guān)鍵技術(shù)，并以閔行區(qū)基于航拍影片的建設(shè)用地核對(duì)項(xiàng)目為例，搭建了閔行區(qū)地塊認(rèn)定工作成果展示系統(tǒng)，為開發(fā)人員搭建單頁面GIS應(yīng)用提供了一種新的解決方案。

關(guān)鍵詞：單頁Web應(yīng)用；Vue；前端路由；Vuex

中圖分類號(hào)：P217 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：2095-2945（2018）14-0005-04

Abstract： With the continuous improvement of technology in single-page Web application development， more and more Web applications have adopted a single-page application model. This paper introduces the system architecture and key technology of constructing single-page Web application， and taking the check project of drone film-based construction land in Minhang District as an example， builds a data display system， thus providing a new solution to constructing single-page web GIS application for developers.

Keywords： single-page Web application； Vue； front-end routing； Vuex

1 概述

近幾年來單頁Web應(yīng)用迅速崛起，涌現(xiàn)了多種適合開發(fā)單頁Web應(yīng)用的框架，如Backbone.js、Angular.js、Vue.js等，越來越多的Web應(yīng)用也都采用了單頁應(yīng)用模式。

當(dāng)前對(duì)GIS系統(tǒng)的設(shè)計(jì)開發(fā)，無論是桌面端系統(tǒng)，還是平板電腦上的擴(kuò)展應(yīng)用，大多數(shù)GIS應(yīng)用主要是圍繞核心地圖控件實(shí)現(xiàn)相關(guān)操作，可以說GIS應(yīng)用系統(tǒng)天生就是單頁Web應(yīng)用。那么是不是可以嘗試構(gòu)建單頁面GIS應(yīng)用呢？本文選擇了2016年在GitHub最受歡迎的前端框架Vue.js，對(duì)基于Vue構(gòu)建單頁面GIS應(yīng)用進(jìn)行了嘗試，并結(jié)合上海市閔行區(qū)基于航拍影像的建設(shè)用地核對(duì)項(xiàng)目構(gòu)建了一個(gè)簡單的單頁面GIS應(yīng)用，主要實(shí)現(xiàn)圖層控制、查詢、量測等基本GIS功能。

2 核心概念

2.1 單頁Web應(yīng)用

單頁Web應(yīng)用（single page web application），縮寫為SPA。它是指在瀏覽器中運(yùn)行的應(yīng)用，它們?cè)谑褂闷陂g不會(huì)重新加載頁面。像所有的應(yīng)用一樣，它旨在幫助用戶完成任務(wù)，比如“編寫文檔”或者“管理Web服務(wù)器”?？梢哉J(rèn)為單頁應(yīng)用是一種從Web服務(wù)器加載的富客戶端。[1]它將所有的活動(dòng)局限在一個(gè)Web頁面中，所有業(yè)務(wù)功能都是其子模塊，這些子模塊通過特定的方式掛接到頁面中，當(dāng)頁面初始化時(shí)一次性加載相應(yīng)的HTML、JavaScript和CSS，加載完成后SPA不會(huì)因?yàn)橛脩舻牟僮鞫匦录虞d頁面或是跳轉(zhuǎn)，后續(xù)通過Ajax異步請(qǐng)求數(shù)據(jù)，利用JavaScript動(dòng)態(tài)的變換HTML的內(nèi)容（主要采用的是div的切換顯示與隱藏），從而實(shí)現(xiàn)較為流暢的用戶交互與用戶體驗(yàn)。

2.2 Vue生態(tài)系統(tǒng)

Vue并不是一個(gè)獨(dú)立的Vue.js文件，它是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，擁有相對(duì)完備的生態(tài)系統(tǒng)，包含核心vue.js庫，快速搭建應(yīng)用程序的腳手架vue-cli，負(fù)責(zé)路由管理的Vue Router，以及進(jìn)行狀態(tài)管理的Vuex，下面將主要介紹Vue.js、Vue Router和Vuex。

2.2.1 Vue.js的主要特點(diǎn)

Vue.js是一個(gè)JavaScript MVVM庫（Model/View/ViewModel），是一套構(gòu)建用戶界面的漸進(jìn)式框架[2]，其主要特點(diǎn)包括：（1）響應(yīng)式數(shù)據(jù)綁定；（2）組件式應(yīng)用構(gòu)建。Vue.js提供了更加簡潔、更易于理解的API。使用Vue.js可以去除繁瑣的DOM操作，只需要關(guān)注數(shù)據(jù)的源頭，而不用擔(dān)心DOM元素變化之后的綁定變化。[3]

數(shù)據(jù)綁定：Vue能將數(shù)據(jù)和DOM綁定在一起，建立數(shù)據(jù)與DOM間的關(guān)聯(lián)，頁面中所有的元素都是響應(yīng)式的。下面以Vue提供的v-model指令，簡要解釋一下Vue的雙向數(shù)據(jù)綁定效果。不難發(fā)現(xiàn)，當(dāng)使用v-model指令進(jìn)行數(shù)據(jù)綁定時(shí)，修改message的值會(huì)使得綁定了message特性的HTML發(fā)生變化，反之亦然。

組件系統(tǒng)：是Vue的另一個(gè)重要概念，它允許開發(fā)人員使用小型、自包含和通常可復(fù)用的組件構(gòu)建大型應(yīng)用。在Vue里，一個(gè)組件本質(zhì)上是一個(gè)擁有預(yù)定義選項(xiàng)的一個(gè)Vue實(shí)例，并采用注冊(cè)的方式使用Vue組件。本文在利用Vue構(gòu)建單頁面GIS應(yīng)用時(shí)也將采用組件開發(fā)方式，通過組件的可復(fù)用性來提高GIS系統(tǒng)的開發(fā)效率。

2.2.2 Vue Router路由管理

傳統(tǒng)的多頁面Web應(yīng)用是以頁面為單位的，路由管理一般由服務(wù)端統(tǒng)一管理，當(dāng)用戶提出服務(wù)請(qǐng)求后，服務(wù)器將依據(jù)路由規(guī)則返回用戶請(qǐng)求的頁面。但是在單頁面應(yīng)用中，這就成了問題，因?yàn)槌绦蛑挥幸粋€(gè)頁面，這時(shí)需要采用前端路由。

vue-router是Vue官方提供的路由，它與Vue.js是深度整合的，適合于構(gòu)建單頁Web應(yīng)用。當(dāng)引入vue-router后，開發(fā)人員需要做的是將組件映射到路由，然后告訴vue-router渲染規(guī)則。當(dāng)應(yīng)用程序是由多層嵌套的組件組合而成時(shí)，vue-router也支持嵌套路由配置，以實(shí)現(xiàn)嵌套組件間正確的路由傳遞。

2.2.3 Vuex狀態(tài)管理

Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理用于的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。[4]

在采用Vue.js進(jìn)行組件式開發(fā)時(shí)，組件之間的作用域是相互獨(dú)立的，而且組件之間經(jīng)常需要傳遞數(shù)據(jù)，而且涉及的組件越多，管理起來就越復(fù)雜，Vuex就是為了幫助開發(fā)者更好地管理狀態(tài)。

Vuex使用單一狀態(tài)樹，用一個(gè)store（倉庫）對(duì)象包含全部的應(yīng)用層級(jí)狀態(tài)，并作為該應(yīng)用的唯一數(shù)據(jù)源而存在，也就是說每個(gè)應(yīng)用將包含且僅包含一個(gè)store實(shí)例。Vuex采用Getters函數(shù)在組件內(nèi)部獲取store中的狀態(tài)（或理解為Vue組件數(shù)據(jù)），通過提交mutations驅(qū)動(dòng)狀態(tài)的變化，修改store中的狀態(tài)，使用Actions在組件內(nèi)部分發(fā)mutations事件函數(shù)。Vuex應(yīng)用內(nèi)部的數(shù)據(jù)流動(dòng)如圖4所示，從組件出發(fā)，Vue組件調(diào)用Actions，用于和后臺(tái)API交互，獲取數(shù)據(jù)源，采用Actions派發(fā)Mutation用于觸發(fā)組件狀態(tài)的改變，由于store是響應(yīng)式的，所以任何狀態(tài)的改變都將引發(fā)組件的同步更新，展現(xiàn)給用戶的就是視圖的更新。

圖4 Vuex內(nèi)部數(shù)據(jù)流動(dòng)示意圖[4]

3 場景實(shí)現(xiàn)

本文將以閔行區(qū)基于航拍影片的建設(shè)用地核對(duì)項(xiàng)目為例，基于Vue搭建單頁面GIS應(yīng)用程序閔行區(qū)地塊認(rèn)定工作成果展示系統(tǒng)。本文主要關(guān)注前端數(shù)據(jù)展示及功能實(shí)現(xiàn)，因此假定已實(shí)現(xiàn)了后臺(tái)API的編寫，可直接從服務(wù)器端獲取所需的數(shù)據(jù)。

3.1 開發(fā)環(huán)境

本項(xiàng)目使用VS Code作為代碼編輯器，使用vue-cli 快速生成模板的Vue工程，其中vue.js為核心JavaScript庫，vue-router.js為路由管理庫，vuex.js為狀態(tài)管理。

3.1.1 安裝vue-cli

vue-cli是vue官方發(fā)布的項(xiàng)目腳手架，可以幫助我們快速創(chuàng)建vue項(xiàng)目。在安裝vue-cli之前，需要首先安裝node環(huán)境。安裝完成后，可以在命令行工具中輸入node -v查看是否能顯示版本號(hào)，若可以就說明node安裝成功。

安裝完node之后，通過在命令行工具中輸入npm install-g vue-cli安裝vue-cli。

3.1.2 創(chuàng)建項(xiàng)目

在命令行工具中輸入vue init webpack MhProject，使用vue-cli依據(jù)現(xiàn)有模板創(chuàng)建vue項(xiàng)目。使用的模板名為webpack，新建的項(xiàng)目名稱為MhProject。這里我選擇了同時(shí)安裝vue-router，也可以采用3.1.3中所述方式。

3.1.3 安裝必要模塊

在命令行工具中輸入npm install vue-router安裝vue-router。

在命令行工具中輸入npm install vuex安裝vuex。

3.2 項(xiàng)目組件設(shè)計(jì)

閔行區(qū)地塊認(rèn)定工作成果展示系統(tǒng)的主要功能模塊包括：地圖瀏覽、圖層控制、空間量測、空間定位、數(shù)據(jù)檢索，也是GIS系統(tǒng)的基本功能。

依據(jù)功能模塊的劃分將設(shè)計(jì)創(chuàng)建對(duì)應(yīng)組件：（1）根組件App.vue；（2）地圖組件Map.vue；（3）操作欄組件Toolbar.vue；（4）圖層控制組件Layer.vue；（5）空間量測組件Measure.vue；（6）空間定位組件Locate.vue；（7）數(shù)據(jù)查詢組件Query.vue。其中，App.vue為根組件存放在項(xiàng)目源代碼src目錄下，其他組件為子組件存放在項(xiàng)目源代碼src目錄下的components子目錄中。導(dǎo)入組件的語法為：

import Map from './components/Map'

import Toolbar from './components/Toolbar'

import Layer from './components/Layer'

import Measure from './components/Measure'

import Locate from './components/Locate'

import Query from './components/Query'

vue中組件均由三部分組成，分別是（1）template：由html標(biāo)簽組成，用于規(guī)定組件的頁面結(jié)構(gòu)；（2）script：存儲(chǔ)組件要引入的其他js模塊和需要執(zhí)行的函數(shù)；（3）style：組件相關(guān)的css樣式，通過scope標(biāo)簽限定css的域?yàn)楫?dāng)前組件。

3.3 狀態(tài)控制

在vue項(xiàng)目中通過引入vuex，進(jìn)行數(shù)據(jù)狀態(tài)管理。在GIS程序開發(fā)過程中，需要經(jīng)常維護(hù)不同組件的狀態(tài)，例如執(zhí)行查詢操作時(shí)需要將設(shè)定鼠標(biāo)指針演示，同時(shí)需要禁用繪圖、量測等組件的鼠標(biāo)點(diǎn)擊響應(yīng)事件，這是一項(xiàng)及其復(fù)雜而易出錯(cuò)的操作。在vue中，使用vuex保證不同組件間的數(shù)據(jù)同步，通過數(shù)據(jù)的自動(dòng)雙向綁定，進(jìn)而控制組件狀態(tài)的自動(dòng)切換，在此過程中，開發(fā)人員僅需要關(guān)注數(shù)據(jù)狀態(tài)的維護(hù)。

具體實(shí)現(xiàn)方式是：通過命令Vue.use（Vuex）在程序啟動(dòng)時(shí)引入vuex，同時(shí)在項(xiàng)目源代碼src目錄下的store子目錄中，設(shè)定vuex的主程序入口index.js，并將vuex核心的action、mutation引入程序中。

3.4 實(shí)現(xiàn)效果

閔行區(qū)地塊認(rèn)定工作成果展示系統(tǒng)只是一次初步嘗試，主要實(shí)現(xiàn)了地圖瀏覽、圖層控制、數(shù)據(jù)檢索、空間量測、空間定位等基本功能，尚有許多可補(bǔ)充和完善的地方：例如可進(jìn)一步擴(kuò)展組件功能，通過歸納和總結(jié)，開發(fā)一些具有通用性的GIS組件以供開發(fā)人員重復(fù)利用，如通用的地圖打印輸出組件、優(yōu)化的空間量測組件等；在UI設(shè)計(jì)方面選用一些成熟的UI組件庫如Bootstrap、NEJ、iView等，讓W(xué)eb應(yīng)用擁有更美觀的界面，讓用戶獲得更良好的交互體驗(yàn)。

4 結(jié)束語

由于GIS應(yīng)用多以地圖為核心，主要是圍繞地圖實(shí)現(xiàn)相關(guān)的應(yīng)用操作，因此使用單頁面技術(shù)進(jìn)行GIS應(yīng)用開發(fā)在技術(shù)上可行的，在向移動(dòng)端應(yīng)用拓展方面也具有良好的可擴(kuò)展性。在單頁面Web應(yīng)用構(gòu)建過程中，數(shù)據(jù)的綁定是一項(xiàng)復(fù)雜的工作，不僅需要數(shù)據(jù)的初始化，而且需要對(duì)數(shù)據(jù)變化后的狀態(tài)進(jìn)行跟蹤和調(diào)整，采取常規(guī)的JavaScript技術(shù)對(duì)頁面的DOM進(jìn)行操作（如jQuery、dojo等），不僅工作量大而且容易出錯(cuò)，因此采用基于的vue的MVVM前端框架進(jìn)行數(shù)據(jù)模型綁定，同時(shí)使用Vue生態(tài)系統(tǒng)中的各類豐富擴(kuò)展組件，進(jìn)行數(shù)據(jù)狀態(tài)維護(hù)、自定義模塊化開發(fā)、前端樣式庫引入等，不僅可以提高程序的可維護(hù)性，而且可以簡化代碼編寫強(qiáng)度，大幅提高系統(tǒng)開發(fā)效率。

參考文獻(xiàn)：

[1]Michael S. Mikowski， Josh C. Powell.單頁Web應(yīng)用 JavaScript從前端到后端[M].包勇明，譯.北京：人民郵電出版社，2014.

[2]Vue.js漸進(jìn)式JavaScript框架[EB/OL].http：//cn.vuejs.org.

[3]麥冬，陳濤，梁宗灣.輕量級(jí)響應(yīng)式框架Vue.js應(yīng)用分析[J].計(jì)算機(jī)工程應(yīng)用技術(shù)，2017（7）：58-59.

[4]Vuex[EB/OL].https：//vuex.vuejs.org/zh-cn/index.html.