基于Vue.js的后臺(tái)單頁應(yīng)用管理系統(tǒng)的研究與實(shí)現(xiàn)

曠志光，紀(jì)婷婷，吳小麗

（上海計(jì)算機(jī)軟件技術(shù)開發(fā)中心，上海201112）

基于Vue.js的后臺(tái)單頁應(yīng)用管理系統(tǒng)的研究與實(shí)現(xiàn)

曠志光，紀(jì)婷婷，吳小麗

（上海計(jì)算機(jī)軟件技術(shù)開發(fā)中心，上海201112）

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

Vue.js；MVVM；單頁應(yīng)用；權(quán)限管理

0 引言

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

1 系統(tǒng)關(guān)鍵組件選型

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

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

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

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

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

整個(gè)前端工程總結(jié)下來，主要采用vue作為基礎(chǔ)視圖層框架，利用vue-router完成前端頁面路由的跳轉(zhuǎn)及各類訪問攔截功能，采用axios作為HTTP請(qǐng)求庫，同時(shí)利用vuex負(fù)責(zé)前端的全局狀態(tài)管理，采用iView作為界面基礎(chǔ)組件庫。

2 架構(gòu)設(shè)計(jì)

2.1 前端結(jié)構(gòu)

整個(gè)后臺(tái)單頁應(yīng)用管理系統(tǒng)分為兩個(gè)工程：前端工程、后端工程，以API接口形式聯(lián)合前后端。其中前端工程的結(jié)構(gòu)目錄如圖1所示：

圖1 前端工程結(jié)構(gòu)

2.2 詳細(xì)設(shè)計(jì)

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

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

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

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

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

//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，根據(jù)請(qǐng)求method決定

......

//do request

return axios（config）

.then（function（response）{

return response.data

},function（{response}）{

//以下省略網(wǎng)絡(luò)異常處理

......

}）

.then（function（data）{

//根據(jù)noMutation決定是否要進(jìn)行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）

}）

}

}

最終，我們?cè)趕tore/actions.js中引入上述3個(gè)文件，并通過遍歷config，動(dòng)態(tài)生成帶后臺(tái)api請(qǐng)求的action。相關(guān)代碼參考如下：

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請(qǐng)求的action，通過跟不帶API請(qǐng)求的action進(jìn)行合并，得到這個(gè)store管理需要使用的action。

2.3 權(quán)限設(shè)計(jì)

另外，在進(jìn)行前端系統(tǒng)設(shè)計(jì)的時(shí)候，還需考慮整個(gè)系統(tǒng)的權(quán)限問題。在后臺(tái)應(yīng)用中，主要是在中間件中根據(jù)RBAC來鑒別用戶權(quán)限[3]。在前端頁面中，主要分以下三個(gè)層面進(jìn)行用戶權(quán)限的控制：

第一層，主要是對(duì)用戶入口的控制，表現(xiàn)為：根據(jù)用戶角色來獲取用戶所能訪問的菜單列表。

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

第三層，當(dāng)用戶只有訪問頁面權(quán)限，但沒有進(jìn)行操作權(quán)限時(shí)，通過封裝的hasPermission方法動(dòng)態(tài)展示或隱藏相關(guān)操作入口，也可以根據(jù)實(shí)際請(qǐng)求展示或隱藏相關(guān)數(shù)據(jù)列。

3 部署實(shí)現(xiàn)

通過前后端分離，來保證前后端發(fā)布的獨(dú)立性。整個(gè)應(yīng)用的請(qǐng)求反饋邏輯如圖2所示：

圖2 部署結(jié)構(gòu)

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

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;

}

###將所有對(duì)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 結(jié)語

本文主要從組件的選型、系統(tǒng)結(jié)構(gòu)設(shè)計(jì)以及部署實(shí)現(xiàn)三個(gè)方面，詳細(xì)描述基于Vue.JS進(jìn)行后臺(tái)單頁應(yīng)用系統(tǒng)的設(shè)計(jì)工作。對(duì)相關(guān)組件的封裝，并以配置的形式主導(dǎo)功能的開發(fā)，在一定程度上減少后臺(tái)系統(tǒng)的前端開發(fā)工作量。利用Vue.JS的雙向綁定特性，高效地將數(shù)據(jù)反映到頁面模型上，同時(shí)Vue.JS更高效地處理頁面DOM操作，提升后臺(tái)應(yīng)用的性能。

[1]岳曉瑞,陳繼華.HTML5環(huán)境下PJAX快速瀏覽技術(shù)實(shí)踐[J].廣東通信技術(shù),2013.

[2]鄧森泉,楊海波.Promise方式實(shí)現(xiàn)Node.js應(yīng)用的實(shí)踐[J].計(jì)算機(jī)系統(tǒng)應(yīng)用,2017.

[3]喬穎,須德.一種基于角色訪問控制（RBAC）的新模型及其實(shí)現(xiàn)機(jī)制[J].計(jì)算機(jī)研究與發(fā)展,2000.

曠志光（1991-），男，江西吉安人，初級(jí)工程師，本科，研究方向?yàn)檐浖こ?、云?jì)算、數(shù)據(jù)挖掘

紀(jì)婷婷（1989-），女，江蘇徐州人，中級(jí)工程師，碩士研究生，研究方向?yàn)榇髷?shù)據(jù)、數(shù)據(jù)挖掘、可視化

吳小麗（1988-），女，江蘇南通人，初級(jí)工程師，本科，研究方向?yàn)閿?shù)據(jù)庫、軟件工程

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

上海市軟件技術(shù)創(chuàng)新服務(wù)平臺(tái)（No.17DZ2292100）

1007-1423（2017）30-0051-05

10.3969/j.issn.1007-1423.2017.30.011

2017-08-22

2017-10-15