最近寫了一個基于 花褲衩 大佬的模板 Vue-element-admin
關(guān)于這個Vue-element-admin中的流程可能對于新的同學不是很友好，所以我準備寫一下詳細的流程圖
首先在https://panjiachen.github.io/vue-element-admin-site/zh/guide/里面下載自己所需要的模板
我們主要說一下我們怎么改成自己的接口數(shù)據(jù)
我們找到login頁面纹冤，如果對于路由這一方面不太了解的小伙伴建議看一下手冊哦~
路由文件在src/router/index 文件夾下面
然后我們在找到路由里面login的路徑雄可，在views/login/index.vue
我們打開之后看到一個方法是 handleLogin（）
handleLogin() {
//這個地方我的請求參數(shù)比較多但是主要用到的還是用戶名和密碼，其余的是后端要求的
var data = {
grant_type: 'password',
username:this.loginForm.username,
password:this.loginForm.password,
ClientId:1,
}
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('user/login', data).then(() => {
this.$router.push({ path: this.redirect || '/' })
this.loading = false
console.log('請求返回值',data)
}).catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
}
然后是關(guān)于驗證方法的地方蕴侣，很多人疑問焰轻，哎我明明輸入了賬號為什么還是提示空那
這就到了驗證階段了還是在login頁面里面，你們找一下在data里面就有哦~我根據(jù)自己的需求改了一下
const validateUsername = (rule, value, callback) => {
if (value=='') {
callback(new Error('請輸入用戶名'))
} else {
callback()
}
}
const validatePassword = (rule, value, callback) => {
if(value ==''){
callback(new Error('請輸入密碼'))
} else if (value.length < 6) {
callback(new Error('密碼長度最低位6位'))
} else {
callback()
}
}
//然后咱們來詳細看一下login的請求方法
this.$store.dispatch('user/login', data).then(() => {
//這一步是告訴你我調(diào)用了store下面的user里面的login方法昆雀，然后我們找到store/modules/user
const actions = {
// user login
login({ commit }, userInfo) {
var datas= qs.stringify(userInfo)
return new Promise((resolve, reject) => {
//發(fā)送了網(wǎng)絡(luò)請求辱志，進行了登錄操作
login(datas).then(response => {
// debugger;
console.log('這個是請求參數(shù)',response)
var data = response
commit('SET_TOKEN', data.access_token)
setToken(data.access_token)
resolve(data.access_token)
}).catch(error => {
console.log(error)
reject(error)
})
})
},
你以為到這里請求就結(jié)束了嗎？不可能狞膘，來讓我們繼續(xù)往下找
//我們看到這個頁面有一個login方法揩懒，那么就說明我們登錄請求放在了這里
import { login, logout, getInfo } from '@/api/user'
可以看到，所有的接口都來自api ,根據(jù)花褲衩大佬的模式挽封，直接api目錄下面找user就行
import request from '@/utils/request'
export function login(data) {
return request({
url: 'token',
method: 'post',
data
})
}
你以為又結(jié)束了已球？？辅愿？怎么可能你看那么import是干啥的對吧智亮，咱們接著往下找在 /utils/request
request是干嘛的？
request是封裝好的axios渠缕，主要用于發(fā)送網(wǎng)絡(luò)請求鸽素。
里面的東西好復(fù)雜，看不懂怎么辦亦鳞？
沒關(guān)系馍忽，你只需要知道怎么拿數(shù)據(jù)就行了
注意看一下判斷的那個地方，花褲衩大佬判斷的是code燕差，我根據(jù)自己的需求進行了更改
說了那么多遭笋，那么到底是怎么請求接口和請求數(shù)據(jù)的那？
把這個地方換成咱們自己的地址 徒探，之前或褲衩大佬可不是這樣寫的瓦呼，他還有拼接的一步那在mock里面
找到這里之后果然是有配置那
然后咱們開始修改配置
因為我個人需求，需要先獲取token然后根據(jù)token進行登錄测暗，所以有需要的小伙伴可以參考一下
我相比改的比較簡單央串，像請求接口這一塊我沒有使用花褲衩大佬封裝的拼接，直接給過濾調(diào)了
打碼的地方是我的數(shù)據(jù)接口你們換成自己的就可以咯
咳咳重點來了碗啄，要考的尤其是新人质和，headers這個是代表了http請求頭
我把url換成了我對應(yīng)的請求接口
老規(guī)矩打碼的地方換上自己的url地址
這個地方需要換成自己對應(yīng)的數(shù)據(jù)接口地址
這樣的話基本上第一個接口獲取token就通了
如果小伙伴們沒有獲取用戶信息的需求那么，要(敲黑板了~超兇)
首先讓我們在/store/utils/modules/user
// get user info
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
//如果不需要的話直接把getinfo這個方法注釋掉
//然后進行模擬數(shù)據(jù)
//具體數(shù)據(jù)
var data= {
roles: ['admin'],
introduction: 'I am a super administrator',
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
name: 'Super Admin'
},
var data=response.Data.UserInfo
if (!data) {
reject('Verification failed, please Login again.')
}
const { LUB_Name } = data
commit('SET_NAME', LUB_Name)
// commit('SET_AVATAR', avatar)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
這個請求方法和上面的那個一樣稚字，咱們在改一下api/user里面的方法接口就好了
export function getInfo(token) {
var data=('bearer '+token)
return request({
url: '/api/Users/UserInfo',
method: 'get',
headers: {'Authorization': data }, //這個地方是因為我需要給http請求協(xié)議加上一個請求頭
})
}
到這里基本上vue-elemnt-admin 的登錄就大功告成了
可能其中有些不足歡迎小伙伴及時補充
