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

鄧雯婷

摘 要：隨著單頁Web應用開發技術的不斷完善，越來越多的Web應用都采用了單頁應用模式。文章詳細介紹了基于Vue構建單頁面應用的系統架構、關鍵技術，并以閔行區基于航拍影片的建設用地核對項目為例，搭建了閔行區地塊認定工作成果展示系統，為開發人員搭建單頁面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應用迅速崛起，涌現了多種適合開發單頁Web應用的框架，如Backbone.js、Angular.js、Vue.js等，越來越多的Web應用也都采用了單頁應用模式。

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

2 核心概念

2.1 單頁Web應用

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

2.2 Vue生態系統

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

2.2.1 Vue.js的主要特點

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

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

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

2.2.2 Vue Router路由管理

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

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

2.2.3 Vuex狀態管理

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

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

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

圖4 Vuex內部數據流動示意圖[4]

3 場景實現

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

3.1 開發環境

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

3.1.1 安裝vue-cli

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

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

3.1.2 創建項目

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

3.1.3 安裝必要模塊

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

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

3.2 項目組件設計

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

依據功能模塊的劃分將設計創建對應組件：（1）根組件App.vue；（2）地圖組件Map.vue；（3）操作欄組件Toolbar.vue；（4）圖層控制組件Layer.vue；（5）空間量測組件Measure.vue；（6）空間定位組件Locate.vue；（7）數據查詢組件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標簽組成，用于規定組件的頁面結構；（2）script：存儲組件要引入的其他js模塊和需要執行的函數；（3）style：組件相關的css樣式，通過scope標簽限定css的域為當前組件。

3.3 狀態控制

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

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

3.4 實現效果

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

4 結束語

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

參考文獻：

[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.