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)