一、框架介紹

 vue-admin-template是基于vue-element-admin的一套后臺(tái)管理系統(tǒng)基礎(chǔ)模板（最少精簡(jiǎn)版），可作為模板進(jìn)行二次開(kāi)發(fā)；

可以把 vue-element-admin當(dāng)做工具箱或者集成方案?jìng)}庫(kù)，在 vue-admin-template 的基礎(chǔ)上進(jìn)行二次開(kāi)發(fā)，想要什么功能或者組件就去 vue-element-admin 那里復(fù)制過(guò)來(lái)地址：vue-element-admin

二、框架目錄結(jié)構(gòu)介紹

三、文件夾分析

1、views：視圖文件夾 ，新建一個(gè)vue頁(yè)面，會(huì)有三個(gè)組成部分：template=>相當(dāng)與html頁(yè)面，里面寫(xiě)div,ui組件等；script=>jquery;  style=>頁(yè)面的css樣式

2、api:  向后端發(fā)送http請(qǐng)求，使用的是 /utils/request 里面的內(nèi)容

可以指定請(qǐng)求的路徑、類(lèi)型、請(qǐng)求參數(shù)、請(qǐng)求體參數(shù)

3、utils/request.js:

主要作用

1、引入要調(diào)用的模塊以及創(chuàng)建一個(gè)axios實(shí)例，其中有url已經(jīng)請(qǐng)求超時(shí)的設(shè)置

2、創(chuàng)建一個(gè)請(qǐng)求攔截器：

作用：在請(qǐng)求發(fā)送前進(jìn)行一些操作，例如在每個(gè)請(qǐng)求體里加上token，統(tǒng)一做了處理如果以后要改也非常容易

store.getters.token 首先從全局狀態(tài)管理那里判斷 token , 有的話(huà)就可以請(qǐng)求， 否則就拋出異常

3、創(chuàng)建一個(gè)響應(yīng)攔截器：

作用：在接收到響應(yīng)后再進(jìn)行一些操作，例如在服務(wù)器返回登錄狀態(tài)失效的時(shí)候，需要重登錄，跳轉(zhuǎn)到登錄頁(yè)面

4、/store：

State提供唯一的公共數(shù)據(jù)源，所有共享的數(shù)據(jù)都要統(tǒng)一放到Store中的State中存儲(chǔ)；
? Mutation用于修改變更$store中的數(shù)據(jù)；
在mutations中不能編寫(xiě)異步的代碼，會(huì)導(dǎo)致vue調(diào)試器的顯示出錯(cuò)。在vuex中我們可以使用Action來(lái)執(zhí)行異步操作；
Getter用于對(duì)Store中的數(shù)據(jù)進(jìn)行加工處理形成新的數(shù)據(jù)；
它只會(huì)包裝Store中保存的數(shù)據(jù)，并不會(huì)修改Store中保存的數(shù)據(jù)，當(dāng)Store中的數(shù)據(jù)發(fā)生變化時(shí)，Getter生成的內(nèi)容也會(huì)隨之變化；

token的獲取：

文件地址：store/modules/user.js

login 方法， 首先 傳入 {commit} 以及在方法中 commit(‘SET_TOKEN’, data.token) 這兩個(gè)的作用是執(zhí)行 action 中異步方法的簡(jiǎn)寫(xiě)， 組用就是設(shè)置 token 的值， 我們知道修改 store中的數(shù)據(jù)需要使用 Mutation 就是會(huì)調(diào)用上面的 SET_TOKEN 把 后端返回的token 保存到vuex中， 并且使用 setToken(data.token) 方法把 token寫(xiě)入到 cookie中 以便我們每次請(qǐng)求都可以帶上這個(gè) cookie , 并且能夠解析出當(dāng)前登錄的用戶(hù)

5、main.js:入口文件

掛載路由、store、axios等

6、router:

路由

使用vue router的第一步是需要一個(gè)路由表、以及把路由表加載到路由實(shí)例中， 最后把路由實(shí)例導(dǎo)出

兩類(lèi)：

constantRoutes：如首頁(yè)和登錄頁(yè)和一些不用權(quán)限的公用頁(yè)面

asyncRoutes ：異步掛載的路由 #動(dòng)態(tài)需要根據(jù)權(quán)限加載的路由表

路由的屬性：

path : 訪(fǎng)問(wèn)的路徑

component ： 此路由對(duì)于的組件

hidden ： 是否在界面顯示此路由

meta ： 設(shè)置路由的屬性， 圖標(biāo)之類(lèi)的

name : 路由名字

children ： 該路由下的子路由， 效果就是二級(jí)菜單

7、permission.js：

配合路由使用的， 對(duì)于vue router 而言它還附帶了一些其他的信息， 比如路由守衛(wèi)， 在路由守衛(wèi)中我們可以在路由跳轉(zhuǎn)之前來(lái)做一些事情的

1、首先判斷是否有token

2、沒(méi)有token ， 如果在白名單里面， 就直接放行， 否則就直接強(qiáng)制跳轉(zhuǎn)登錄。

3、有token , 如果是 /login 就就直接到 根目錄下

4、不是 /login 就去 store 里面找 當(dāng)前用戶(hù)的信息， 然后在放行

登錄的流程：

登錄頁(yè)面的請(qǐng)求

/store/modules/user.js:

這里會(huì)得到輸入的用戶(hù)名以及密碼。 并且執(zhí)行 login 方法， 把返回的token , 保存到 vuex、cookie 中（在路由守衛(wèi)中 / login 是白名單會(huì)直接放行、axios 的請(qǐng)求攔截中 添加的是一個(gè)空值)

到此這篇關(guān)于vue-admin-template框架搭建及應(yīng)用的文章就介紹到這了,更多相關(guān)vue-admin-template框架內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論