Login事件的调取过程(四)
1、解读Login
login(){
// 对当前loginForm进行验证,验证属性
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
//调用store下的login方法
this.$store.dispatch('Login', this.loginForm).then(() => {
this.loading = false
this.$router.push({ path: '/' })
}).catch(() => {
this.loading = false
})
} else {
// console.log('error submit!!')
return false
}
})
},
2、查找store中的login 在store>modules>user.js 找到
actions: {
Login({ commit }, userInfo) {
// 1的方法跳转到了这里
3、store>modules>user.js 引入了外部方法
import { login, logout, getInfo } from '@/api/user'
const actions = {
// user login
login({ commit }, userInfo) {
const { username, password } = userInfo
// 异步调用
return new Promise((resolve, reject) => {
// 这里调用的是 api/users/login方法
login({
username,
password
})
在store>modeules>user.js中的Login又调用了api/user
4、api>user.js 这里是实际的接口调用方法,
export function login(username, password)
{
return request({
// 页面登陆方法
// data是传入参数,返回什么数据
url: '/login', //实际调用的webapi接口方法
method: 'get',
params
})
}
5、从页面端,到处理端,再到实际调用端,走了三层
目的应该是为了对页面复杂度进行简化,复用,包裹、归类
1的页面级,不放置接口相关的方法;
2的逻辑级加了异步调用,对返回数据的处理和逻辑判断;
3的接口调用 api>下放整个项目的接口部分
6、在底层接口调用的过程中,参数左右出现了7B%这类码
应该是在编译的时候产生的问题,原因未查明,解决方法是引入qs.js
并添加转换过程
var params = qs.parse(username, password)