添加Mock數據
前面我們使用elementUI實現了登錄頁面和簡單的校驗,現在使用接口的方式來實現登錄的邏輯
使用EasyMock添加兩個接口
因為要訪問EasyMock 模擬接口, 所以要把 接口地址改一下,在 .env.development 文件中修改如下:
注意:改成你自已的EasyMock上的接口服務地址
# 使用 VUE_APP_ 開頭的變量會被 webpack 自動加載,process.env.VUE_APP_xxx # 開發環境的前綴 VUE_APP_BASE_API = '/dev-api' # 目標服務接口地址,是按照自己的環境來的,添加或更改服務后,需要重啟服務 VUE_APP_SERVICE_URL = ' http://mengxuegu.com:7300/mock/5db437d92aa750460d4fce18'
改完后,重啟下 npm run serve , 看下是否正常
當登錄成功后,響應狀態碼 2000 和 token 值。token用來 認證
后面請求只要是成功的,狀態碼均為 2000, 這個是與后台接口的約定
- 請求URL: /user/login
- 請求方式: post
- 描述:登陸認證
mock.js 配置如下
{ "code":2000, "flag":true, "message":"驗證成功", "data":{ "token":"admin" } }
添加響應用戶信息模擬接口
- 請求URL: /user/info/{token}
- 請求方式: get
- 描述:響應用戶信息
mock.js 配置:
{ "code": 2000, "flag": true, "message": "成功獲取用戶信息", "data": { "id|1-10000": 1, "name": "@cname", "roles": ["manager"] } }
登錄邏輯實現
src/api 下創建 login.js , 添加內容如下:
import request from '@/utils/request' // 導出的是普通成員函數 // 登錄 export function login(username,password){ return request({ url: '/user/login', method: 'post', data: { username, password } }) } // 獲取用戶信息 export function getUserInfo(token){ return request({ url: `/user/info/${token}`, // 反單引號,動態獲取token值 method: 'get' }) }
在 src\views\login\index.vue 的 submitForm 中進行邏輯處理.
1. 導入 import {login, getUserInfo} from '@/api/login'
2. 在 submitForm 函數進行登錄判斷和獲取用戶信息
<template> <div class="login-container"> <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="login-form"> <h2 class="login-title">管理系統</h2> <el-form-item label="用戶名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密碼" prop="password"> <el-input v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">登錄</el-button> </el-form-item> </el-form> </div> </template> <script> import { login, getUserInfo } from "@/api/login"; // 導入登錄和獲取用戶信息的方法 export default { data() { return { form: { username: "", password: "" }, rules: { username: [ { required: true, message: "用戶名不能為空", trigger: "blur" }, { min: 3, max: 10, message: "用戶名3-5位", trigger: "blur" } ], password: [ { required: true, message: "密碼不能為空", trigger: "blur" }, { min: 3, max: 10, message: "密碼3-5位", trigger: "blur" } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { // console.log(valid) 驗證通過為true,有一個不通過就是false if (valid) { // 提交表單給后台驗證是否正確 login(this.form.username, this.form.password).then(response => { const res = response.data; console.log(res, res.flag, res.data.token, res.message); if (res.flag) { // 驗證成功,通過token獲取用戶信息 getUserInfo(res.data.token).then(response => { const resUser = response.data; if (resUser.flag) { // 獲取到了用戶信息 console.log("userInfo", resUser.data); // 保存token和用戶信息 localStorage.setItem( "zz-mms-user", JSON.stringify(resUser.data) ); localStorage.setItem("zz-mms-token", res.data.token); // 前往首頁 this.$router.push("/"); } else { // 使用elementui的消息提示 this.$message({ message: resUser.message, type: "warning" }); } }); }else { // 未通過,彈出警告 // 使用elementui的消息提示 this.$message({ message: res.message, type: "warning" }); } }); } else { // 驗證未通過,彈出警告 // 使用elementui的消息提示 this.$message.error('驗證未通過'); } }); } } }; </script> <style acoped> .login-form { width: 350px; margin: 160px auto; /* 上下間距160px,左右自動居中*/ background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */ padding: 30px; border-radius: 20px; /* 圓角 */ } /* 背景 */ .login-container { position: absolute; width: 100%; height: 100%; background: url("../../assets/login.png"); } /* 標題 */ .login-title { color: #303133; text-align: center; } </style> -->