Vuejs实战项目：登陆页面

1、在view文件夹下创建login文件夹，创建index.vue：代表登录的组件

配置router.js,导入登录组件

import Vue from "vue";
import Router from "vue-router";
// 导入登录组件’
import Login from './views/login/index.vue'

Vue.use(Router);

export default new Router({
  // mode: "history",
  //base: process.env.BASE_URL,
  routes: [
    {
      path: '/login',
      name: 'login',  //路由名称
      component: Login  //组件对象
    }

  ]
});

2、结合Element-UI编写index.vue,index.vue的目录为：views/login/index.vue

---

3、表单验证

　　1、在el-form中导入 :rules="rules"，el-form-item导入pro=“属性名称”

在export的data中配置rules：

 rules: {
        username: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      },

配置methods：

methods: {
    submitForm(formName) {
        //定位到表单，再进行校验
        this.$refs[formName].validate(valid => {
            // console.log(valid)      //成功为true，失败为false
            if(valid){
                // 提交表单给后台进行验证是否正确
            }else{
                console.log('验证失败')
                return false
            }
        })
    },
//     onSubmit() {
//       console.log("submit!");
//     }
//   }
  }

---

4、easyMock添加系统登录后台服务接口

　　1、修改.env.develoment文件中的目标服务接口地址---------VUE_APP_SERVICE_URL

　　2、配置 Mock.js，创建新的接口

　　　　①当登录成功后，响应状态码2000和token值，token用来认证（后面请求只要是成功的，状态码均为2000，这个是与后台接口的约定）

　　*　　请求URL：/user/login

　　*　　请求方式：post

　　*　　描述： 登录认证

　　*　　mock.js 接口配置：

{
  "code": 2000, //状态码
  "flag": true,
  "message": '验证成功',
  "data": {
    "token": "admin"
  }
}

　　　　②通过token获取用户信息：

　　　　　　添加响应用户信息模拟接口：

　　　　　　*　　请求URL：/user/info/{token}

　　　　　　*　　请求方式：get

　　　　　　*　　描述：响应用户信息

　　　　　　*　　mock.js 配置

{
  "code": 2000,
  "flag": true,
  "message": '成功获取用户信息',
  "data": {
    "id|1-10000": 1,
    "name": "@cname",
    "roles": ["manager"]
  }
}

---

5、登录逻辑实现

在src/api 下创建login.js，导出两个方法

import request from '@/utils/request'

// 导出函数
export function login(username, password) {
    return request({
        url: '/user/login',
        method: 'post',
        data: {
            username,   //username: username
            password
        }
    })
}

// 获取返回的用户信息
export function getUserInfo(token) {
    return request({
        url:  `/user/info/${token}`,
        method: 'get'
    })
}

表单校验：

methods: {
    submitForm(formName) {
        //定位到表单，再进行校验
        this.$refs[formName].validate(valid => {
            // console.log(valid)      //成功为true，失败为false
            if(valid){
                // 提交表单给后台进行验证是否正确,then后面传入回调函数
                login(this.form.username,this.form.password).then(response => {
                    const resp = response.data
                    console.log(resp,resp.flag,resp.data.token)
                    if (resp.flag) {
                        // 当resp.flag为true时，表示验证成功
                        // 通过token获取用户信息
                        getUserInfo(resp.data.token).then(response => {
                            const respUser = response.data
                            console.log(respUser)
                            if (respUser.flag){
                                // 获取到用户的数据
                                //成功
                                console.log('userInfo',respUser.data)
                                //  1.保存token，用户信息
                                localStorage.setItem('msm-user', JSON.stringify(respUser.data))
                                localStorage.setItem('msm-token', resp.data.token)
                                //  前往首页
                                this.$router.push('/')
                            }else{
                                this.$message.error(respUser.message);
                            }
                            
                        })
                    }else {
                        // 未通过，弹出警告
                        this.$message.error(resp.message);
                    }
                })

            }else{
                console.log('验证失败')
                return false
            }
        })
    },
//     onSubmit() {
//       console.log("submit!");
//     }
//   }
  }