最近写了一个基于 花裤衩 大佬的模板 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 的登录就大功告成了

可能其中有些不足欢迎小伙伴及时补充