后台管理系统-登录页面

对于element-ui的修改：完成登录业务

1. 静态组件完成

  <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>

点击事件为handleLogin，在methods中实现函数调用

 //登录业务
    handleLogin() {
      //验证表单的两个元素的规则是否符合规则
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          //派发一个action，带着用户名和密码
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            //登录成功，进行路由跳转
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

在store中派发’user/login’，携带this.loginForm表单数据，到store/modules/users.js中进行处理登录业务

import { login, logout, getInfo } from '@/api/user'

//处理登录业务
  async login({ commit }, userInfo) {
    //从userInfo获取用户密码 
    const { username, password } = userInfo
    let result = await login({ username: username.trim(), password: password })//登录请求，调用@/api/user中的接口
    if(result.code==20000){//若返回为20000(使用mock接口)
      commit('SET_TOKEN', result.data.token)//提交token
      setToken(result.data.token)//本地存储cookie
      return 'ok'
    }
    else{
      return Promise.reject(new Error('faile'))
    }
  },

2. 书写API（换成真实的接口）

在@/api/user中，展示url

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/admin/acl/index/login',
    method: 'post',
    data
  })
}

3. axios二次封装

在@/utils/request中，修改axios封装

4. 换成真实接口之后需要解决代理跨域问题(解决代理跨域问题)

在vue.config.js中修改配置文件，进行proxy代理

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    //配置代理跨域
    proxy:{
      '/dev-api':{
        target:'http://39.98.123.211:8170',
        pathRewrite:{'^/dev-api':''},
      }
    }
  },