一、框架介紹

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

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

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

三、文件夾分析

1、views：視圖文件夾 ，新建一個vue頁面，會有三個組成部分：template=>相當與html頁面，里面寫div,ui組件等；script=>jquery;  style=>頁面的css樣式

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

可以指定請求的路徑、類型、請求參數(shù)、請求體參數(shù)

3、utils/request.js:

主要作用

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

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

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

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

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

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

4、/store：

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

token的獲?。?/p>

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

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

5、main.js:入口文件

掛載路由、store、axios等

6、router:

路由

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

兩類：

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

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

路由的屬性：

path : 訪問的路徑

component ： 此路由對于的組件

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

meta ： 設(shè)置路由的屬性， 圖標之類的

name : 路由名字

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

7、permission.js：

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

1、首先判斷是否有token

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

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

4、不是 /login 就去 store 里面找 當前用戶的信息， 然后在放行

登錄的流程：

登錄頁面的請求

/store/modules/user.js:

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

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

最新評論