Vue--登錄頁面邏輯

添加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> -->