基于Vue.js構建單頁面GIS應用的方法研究

鄧雯婷

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

關鍵詞：單頁Web應用；Vue；前端路由；Vuex

中圖分類號：P217 文獻標志碼：A 文章編號：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應用迅速崛起，涌現(xiàn)了多種適合開發(fā)單頁Web應用的框架，如Backbone.js、Angular.js、Vue.js等，越來越多的Web應用也都采用了單頁應用模式。

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

2 核心概念

2.1 單頁Web應用

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

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

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

2.2.1 Vue.js的主要特點

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

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

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

2.2.2 Vue Router路由管理

傳統(tǒng)的多頁面Web應用是以頁面為單位的，路由管理一般由服務端統(tǒng)一管理，當用戶提出服務請求后，服務器將依據(jù)路由規(guī)則返回用戶請求的頁面。但是在單頁面應用中，這就成了問題，因為程序只有一個頁面，這時需要采用前端路由。

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

2.2.3 Vuex狀態(tài)管理

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

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

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

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

3 場景實現(xiàn)

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

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

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

3.1.1 安裝vue-cli

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

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

3.1.2 創(chuàng)建項目

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

3.1.3 安裝必要模塊

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

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

3.2 項目組件設計

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

依據(jù)功能模塊的劃分將設計創(chuà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為根組件存放在項目源代碼src目錄下，其他組件為子組件存放在項目源代碼src目錄下的components子目錄中。導入組件的語法為：

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標簽組成，用于規(guī)定組件的頁面結構；（2）script：存儲組件要引入的其他js模塊和需要執(zhí)行的函數(shù)；（3）style：組件相關的css樣式，通過scope標簽限定css的域為當前組件。

3.3 狀態(tài)控制

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

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

3.4 實現(xiàn)效果

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

4 結束語

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

參考文獻：

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

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

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

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