最近写了一个基于 花裤衩 大佬的模板 Vue-element-admin
关于这个Vue-element-admin中的流程可能对于新的同学不是很友好，所以我准备写一下详细的流程图
首先在https://panjiachen.github.io/vue-element-admin-site/zh/guide/里面下载自己所需要的模板
我们主要说一下我们怎么改成自己的接口数据
我们找到login页面，如果对于路由这一方面不太了解的小伙伴建议看一下手册哦~
路由文件在src/router/index 文件夹下面
然后我们在找到路由里面login的路径，在views/login/index.vue
我们打开之后看到一个方法是 handleLogin（）
handleLogin() {
//这个地方我的请求参数比较多但是主要用到的还是用户名和密码，其余的是后端要求的
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
}
})
}
然后是关于验证方法的地方，很多人疑问，哎我明明输入了账号为什么还是提示空那
这就到了验证阶段了还是在login页面里面，你们找一下在data里面就有哦~我根据自己的需求改了一下
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(() => {
//这一步是告诉你我调用了store下面的user里面的login方法，然后我们找到store/modules/user
const actions = {
// user login
login({ commit }, userInfo) {
var datas= qs.stringify(userInfo)
return new Promise((resolve, reject) => {
//发送了网络请求，进行了登录操作
login(datas).then(response => {
// debugger;
console.log('这个是请求参数',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)
})
})
},
你以为到这里请求就结束了吗？不可能，来让我们继续往下找
//我们看到这个页面有一个login方法，那么就说明我们登录请求放在了这里
import { login, logout, getInfo } from '@/api/user'
可以看到，所有的接口都来自api ,根据花裤衩大佬的模式，直接api目录下面找user就行
import request from '@/utils/request'
export function login(data) {
return request({
url: 'token',
method: 'post',
data
})
}
你以为又结束了？？？怎么可能你看那么import是干啥的对吧，咱们接着往下找在 /utils/request
image.png
request是干嘛的？
request是封装好的axios，主要用于发送网络请求。
里面的东西好复杂，看不懂怎么办？
没关系，你只需要知道怎么拿数据就行了
image.png
注意看一下判断的那个地方，花裤衩大佬判断的是code，我根据自己的需求进行了更改
说了那么多，那么到底是怎么请求接口和请求数据的那？
image.png
把这个地方换成咱们自己的地址 ，之前或裤衩大佬可不是这样写的，他还有拼接的一步那在mock里面
image.png
找到这里之后果然是有配置那
然后咱们开始修改配置
因为我个人需求，需要先获取token然后根据token进行登录，所以有需要的小伙伴可以参考一下
我相比改的比较简单，像请求接口这一块我没有使用花裤衩大佬封装的拼接，直接给过滤调了
image.png
打码的地方是我的数据接口你们换成自己的就可以咯
image.png
咳咳重点来了，要考的尤其是新人，headers这个是代表了http请求头
我把url换成了我对应的请求接口
image.png
老规矩打码的地方换上自己的url地址
这个地方需要换成自己对应的数据接口地址
image.png
这样的话基本上第一个接口获取token就通了
如果小伙伴们没有获取用户信息的需求那么，要(敲黑板了~超凶)
首先让我们在/store/utils/modules/user
// get user info
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
//如果不需要的话直接把getinfo这个方法注释掉
//然后进行模拟数据
//具体数据
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请求协议加上一个请求头
})
}
到这里基本上vue-elemnt-admin 的登录就大功告成了
可能其中有些不足欢迎小伙伴及时补充
网友评论