快捷導(dǎo)航

vue-admin-template框架搭建及應(yīng)用小結(jié)

更新時(shí)間：2023年05月30日 08:52:18 作者：xxs!

?vue-admin-template是基于vue-element-admin的一套后臺(tái)管理系統(tǒng)基礎(chǔ)模板（最少精簡(jiǎn)版），可作為模板進(jìn)行二次開發(fā)，這篇文章主要介紹了vue-admin-template框架搭建及應(yīng)用,需要的朋友可以參考下

一、框架介紹

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

可以把 vue-element-admin當(dāng)做工具箱或者集成方案?jìng)}庫(kù)，在 vue-admin-template 的基礎(chǔ)上進(jìn)行二次開發(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è)面，里面寫div,ui組件等；script=>jquery; style=>頁(yè)面的css樣式

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

可以指定請(qǐng)求的路徑、類型、請(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 , 有的話就可以請(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中不能編寫異步的代碼，會(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)寫，組用就是設(shè)置 token 的值，我們知道修改 store中的數(shù)據(jù)需要使用 Mutation 就是會(huì)調(diào)用上面的 SET_TOKEN 把后端返回的token 保存到vuex中，并且使用 setToken(data.token) 方法把 token寫入到 cookie中以便我們每次請(qǐng)求都可以帶上這個(gè) cookie , 并且能夠解析出當(dāng)前登錄的用戶