基于Vue.js的后臺單頁應用管理系統的研究與實現

曠志光，紀婷婷，吳小麗

（上海計算機軟件技術開發中心，上海201112）

基于Vue.js的后臺單頁應用管理系統的研究與實現

曠志光，紀婷婷，吳小麗

（上海計算機軟件技術開發中心，上海201112）

通過研究Vue.js、路由、全局狀態、axios等技術，實現后臺單頁應用管理系統。對actions進行封裝，并在配置文件中定義好相關請求信息，即可實現帶后臺API請求的action操作，極大程度減少系統代碼量，并保證系統的統一性、健壯性。前端頁面根據菜單策略控制頁面文件的入口，根據頁面權限控制策略進行按鈕級別權限校驗。

Vue.js；MVVM；單頁應用；權限管理

0 引言

為了滿足日益復雜、多樣的Web App需求，越來越多的原本后端處理的業務邏輯開始轉移到前端來處理。Vue.JS就是這樣一套構建用戶界面的漸進式框架，方便大部分后端邏輯移植到前端去實現。Vue.JS采用自底向上增量開發的設計，其核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當Vue.JS與單文件組件及其Vue.JS生態系統支持的庫結合使用時，也完全能夠為復雜的單頁應用程序提供驅動。由此，采用Vue.JS進行后臺管理系統的前端設計工作，一定程度減輕前后端開發人員開發難度。

1 系統關鍵組件選型

本系統前端工程基于流程簡化、低成本、快速開發、高性能等需求，主要選用到 Vue.JS、vue-router、vuex、axios等關鍵組件。

Vue.JS是整個前端工程的基礎視圖層框架，主要解決前端數據綁定的問題。傳統的前端開發，主要基于jQuery通過各種復雜的選擇器來操作DOM。同時，通過AJAX跟服務器請求數據，前端代碼一層層解析JSON，將JSON某個層級的數據賦給相應的DOM操作，還要進行請求的異常處理，數據不但操作繁瑣復雜且易出現未知錯誤。而通過Vue.JS的響應式雙向綁定數據，實時反映數據的真實變化并映射到目標虛擬DOM上，避免前端頁面開發中DOM選擇器繁雜的操作，簡化Web前端開發流程和降低開放難度，提升前端開發效率，降低開發成本和周期。

vue-router是Vue.JS官方發布的一款路由插件，和Vue.JS是深度集成的，適合用于構建單頁面應用。傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。而在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。通過router-view來動態掛載頁面組件，并最終渲染成頁面。另外，HTML5里引入了新的 API，history.pushState和 history.replaceState，可以通過這個新的接口做到無刷新訪問頁面的同時改變頁面URL[1]，這讓Vue.JS能夠動態調整頁面路徑，方便頁面切換，提高了用戶體驗。

vuex是Vue.JS官方依照Flux實現的一套全局狀態管理方案，并被集成到vue-devtools，無需配置即可在瀏覽器中實現時光旅行式調試。當開發單頁應用時，我們通常會把狀態儲存在組件的內部，每一個組件都擁有其自身的狀態管理，但是在整個應用層面上看，很多公共的狀態是卻是分散在各個頁面中。同時，我們經常會需要把狀態的一部分共享給多個組件。一個常見的解決方案是使用事件系統來讓一個組件把一些狀態“告知”到其他組件中，來讓相應的組件去響應變化。但是這種模式的問題在于，大型組件樹中的事件流會很快變得非常繁雜，并且調用時很難去找出究竟哪里出錯，事件的冒泡也很有可能導致整個應用的資源消耗非常大。應用越來越大，頁面文件數也越來越多，多個狀態分散的跨越在許多組件和交互中，其復雜度也經常逐漸增長。使用vuex將狀態放入一個全局的實例中，做到各個組件同步響應，減少系統狀態復雜度。但是在使用全局狀態管理時，我們還需要對組件的組件本地狀態（componentlocalstate）和應用層級狀態（application levelstate）進行區分，避免出現組件本地狀態放到應用級狀態去管理。應用級的狀態不屬于任何特定的組件，但每一個組件仍然可以監視（Observe）其變化從而響應式地更新DOM。

通過vue-router我們解決了頁面切換問題，通過vuex我們解決了全局狀態共享管理的問題，但是所有應用的基礎在于數據。傳統數據請求，主要利用jQuery封裝的AJAX請求來實現。在處理異步問題時，一般采用的是callback回調的方式。callback回調存在一個很嚴重的金字塔問題——大量的回調函數慢慢向右側屏幕延伸的一種狀態[2]。通過采用含Promise特性的組件來進AJAX請求，使得我們可以用同步的代碼形式實現異步的請求操作。axios就是這樣一個基于Promise用于瀏覽器和nodejs的HTTP客戶端，其可以從瀏覽器中創建XMLHttpRequest，支持Promise API，同時方便實現請求過程中的中間件操作，例如權限校驗。

整個前端工程總結下來，主要采用vue作為基礎視圖層框架，利用vue-router完成前端頁面路由的跳轉及各類訪問攔截功能，采用axios作為HTTP請求庫，同時利用vuex負責前端的全局狀態管理，采用iView作為界面基礎組件庫。

2 架構設計

2.1 前端結構

整個后臺單頁應用管理系統分為兩個工程：前端工程、后端工程，以API接口形式聯合前后端。其中前端工程的結構目錄如圖1所示：

圖1 前端工程結構

2.2 詳細設計

前端工程中，以components作為獨立頁面組件的存放目錄，使用pages作為系統頁面的存放目錄，所有涉及全局狀態管理的代碼存放在store目錄，涉及路由配置的代碼存放在router目錄下，通用的配置文件存放在common目錄。

通常，在進行store設計時，會將所有的action集中在action.js文件中，其中包含通過axios進行后臺api請求的代碼。在進行后臺單頁應用系統開發的時候，會頻繁跟后臺進行數據溝通，故考慮將action分成兩種類型，一種是不帶后臺API請求的，只是單純進行前端操作的，另外一直則是包含后臺API請求，跟后臺進行數據溝通。根據以往經驗，大概2/3的action會涉及后臺API請求，故需要通過某種形式來減少重復的請求代碼。經過對上述問題的思考，可以通過以下方式來減少系統的代碼量，同時保證請求統一性，尤其是請求異常的統一性處理：

在common/mutation-types.js中聲明所有的action的 name，如：export const BACKEND_LOGIN='BACKEND_LOGIN'，其中定義了一個BACKEND_LOGIN的action。

在api/config.js中聲明所有涉及后臺API請求的action，并配置其請求地址等內容，其格式如下：api[BACKEND_LOGIN]={url：'some_url',method：'get',pathinfo：true|false,noMutation：true|false}。其中，對象的鍵是mutation-type的常量，url表示請求的路徑，method表示請求的方式，pathinfo表示請求的url參數是否以pathinfo加入到請求的路徑上，noMutation表示是否忽略commit操作，該設計考慮是，某些ajax請求到的數據，并非全局的狀態，而是某些頁面級別的狀態，故無需將請求到的相關數據進行全局狀態管理。

在api/helper.js中，聲明createAPIRequest方法，其接受三個參數：commit，type，param，其中 commit是一個方法，進行mutation的commit操作，type是一個具體的 mutation-type（即 action的 name），param 是需要傳入的請求參數。通過傳入的type，可以從api/config.js中獲取該type的api請求配置。根據其配置，進行相應的后臺api請求，并根據配置項中的noMutation來鑒別是否需要對mutation進行commit操作，最終返回一個Promise實例，使得我們可以使用同步代碼的形式實現各類異步操作。核心代碼如下所示：

//api/config.js

importapifrom'./config'

export const createAPIRequest=function（commit,type,params={}）{

letapiItem=api[type]

if（apiItem）{

//requestconfig

letconfig={}

config.url=API_ROOT+apiItem.url

config.method=apiItem.method||'get'

config.headers={}

//以下省略處理params，根據請求method決定

......

//do request

return axios（config）

.then（function（response）{

return response.data

},function（{response}）{

//以下省略網絡異常處理

......

}）

.then（function（data）{

//根據noMutation決定是否要進行commit

if（apiItem.noMutation===undefined||apiItem.no-Mutation===false）{

commit（type,data）

}

return data

}）

}else{

//none apidefined

return new Promise（function（resolve,reject）{

reject（ERROR_NO_API_CONFIG）

}）

}

}

最終，我們在store/actions.js中引入上述3個文件，并通過遍歷config，動態生成帶后臺api請求的action。相關代碼參考如下：

import{createAPIRequest}from'../api/helper'

importconfig from'../api/config'

//create apiactions,use mutions type as action name

letactions={}

Object.keys（config）.forEach（function（type）{actions[type]=function（{commit},params={}）{

return createAPIRequest（commit,type,params）

}

}）

其中actions包含所有帶API請求的action，通過跟不帶API請求的action進行合并，得到這個store管理需要使用的action。

2.3 權限設計

另外，在進行前端系統設計的時候，還需考慮整個系統的權限問題。在后臺應用中，主要是在中間件中根據RBAC來鑒別用戶權限[3]。在前端頁面中，主要分以下三個層面進行用戶權限的控制：

第一層，主要是對用戶入口的控制，表現為：根據用戶角色來獲取用戶所能訪問的菜單列表。

第二層，主要是對用戶訪問頁面的時候，進行權限鑒別。在router的全局鉤子中，根據用戶角色的權限，來鑒別用戶是否擁有訪問該頁面的權限，如果有權限，則next（），否則，直接重定向用戶到401頁面。

第三層，當用戶只有訪問頁面權限，但沒有進行操作權限時，通過封裝的hasPermission方法動態展示或隱藏相關操作入口，也可以根據實際請求展示或隱藏相關數據列。

3 部署實現

通過前后端分離，來保證前后端發布的獨立性。整個應用的請求反饋邏輯如圖2所示：

圖2 部署結構

針對前端工程，利用webpack打包來生成生成環境下的前端代碼。針對后端工程，則需根據特定的開發環境，打包相應的生產環境應用。當進行前后端分離發布，也經常會遇到跨域的問題，為減少代碼層面的修改動作，可利用Nginx進行反向代理，將兩個工程的放到一個域名下去部署，從而解決跨域問題。以下是以PHP應用為樣例的Nginx配置文件，其主要思想是將對前端頁面的請求反向代理到前端靜態頁面，由前端vue-router進行頁面路由控制；將所有對QPI的訪問反向代理到后臺PHP應用。關鍵配置如下：

server{

listen 91;

set$root/usr/share/nginx/admin/public;

location～.*.（gif|jpg|jpeg|bmp|png|ico|txt|js|css）$

{

root$root;

}

location/{

root$root;

index index.html;

if（ -f$request_filename）{

break;

}

if（ !-e$request_filename）{rewrite^（.*）$/index.php/$1 last;break;

}

}

location/api{

root$root;

index index.htmlindex.php;

if（ -f$request_filename）{

break;

}

if（ !-e$request_filename）{rewrite^/api/（.*）$/api/index.php/$1 last;break;

}

}

###vuejs前端URL前綴

location/system{

index index.html;

try_files$uri$uri/@backendApp;

}

###將所有對vuejs URL的訪問重定向到index.html文件

location@backendApp{

rewrite^.*$/index.htmllast;

}

location ～.+.php（$|/）{

include fastcgi_params;

fastcgi_pass unix：/run/php-fpm/php7.0-fpm.sock;

fastcgi_split_path_info^（（?U）.+.php）（/?.+）$;

fastcgi_param PATH_INFO$fastcgi_path_info;

fastcgi_param PATH_TRANSLATED$root$fastcgi_path_info;

fastcgi_param SCRIPT_FILENAME$root$fastcgi_script_name;

}

}

4 結語

本文主要從組件的選型、系統結構設計以及部署實現三個方面，詳細描述基于Vue.JS進行后臺單頁應用系統的設計工作。對相關組件的封裝，并以配置的形式主導功能的開發，在一定程度上減少后臺系統的前端開發工作量。利用Vue.JS的雙向綁定特性，高效地將數據反映到頁面模型上，同時Vue.JS更高效地處理頁面DOM操作，提升后臺應用的性能。

[1]岳曉瑞,陳繼華.HTML5環境下PJAX快速瀏覽技術實踐[J].廣東通信技術,2013.

[2]鄧森泉,楊海波.Promise方式實現Node.js應用的實踐[J].計算機系統應用,2017.

[3]喬穎,須德.一種基于角色訪問控制（RBAC）的新模型及其實現機制[J].計算機研究與發展,2000.

曠志光（1991-），男，江西吉安人，初級工程師，本科，研究方向為軟件工程、云計算、數據挖掘

紀婷婷（1989-），女，江蘇徐州人，中級工程師，碩士研究生，研究方向為大數據、數據挖掘、可視化

吳小麗（1988-），女，江蘇南通人，初級工程師，本科，研究方向為數據庫、軟件工程

Research and Practice of Single Page Application For Management System Based on Vue.js

KUANG Zhi-guang，JITing-ting，WU Xiao-li
（ShanghaiDevelopment Center ofComputer Software Technology,Shanghai 201112）

By studying Vue.js,router,global state,axios and other components,achieves a single-page application for managementsystem.Realizes the actions which contain APIrequest,justencapsulates the actions and defines the relevantrequestinformation in the configuration file.Also,it will minimize the amount of system code,ensure the unity and robustness of the system.The front page controls the entry of the page files according to the menu policy,and the button levelpermission check according to the page permission controlpolicy.

Vue.js;MVVM;Single Page Application;RBAC

上海市軟件技術創新服務平臺（No.17DZ2292100）

1007-1423（2017）30-0051-05

10.3969/j.issn.1007-1423.2017.30.011

2017-08-22

2017-10-15