系列文檔目錄

Vue3+Vite+TypeScript安裝

Element Plus安裝與配置

主頁設計與router配置

靜態菜單設計

Pinia引入

Header響應式菜單縮展

Mockjs引用與Axios封裝

登錄設計

登錄成功跳轉主頁

多用戶動態加載菜單

?

---

文章目錄

目錄

系列文檔目錄

文章目錄

前言

一、登錄mock資料模擬

二、界面設計

三、路由定義

四、運行效果

五、登錄驗證與多用戶資料模擬

后續

---

前言

本章節的核心內容包括：界面設計的優化、Mock.js 模擬用戶登錄 API 數據的生成，以及登錄驗證和多用戶登錄功能的實現。

---

一、登錄mock資料模擬

1.在mockData下新建loginData.ts

// src/mock/mockData/loginData.ts
import Mock from 'mockjs';
import { Document, Setting } from '@element-plus/icons-vue'; // 假設你使用的是 Element Plus 的圖標// 模擬登錄數據
const loginData = Mock.mock({data: {"status_code": 200,"status": "success","message": "Operation successful.","data": {"api_key": "Test","username": "admin","token_key": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicTEyMzQ1NjdBYSIsInVzZXJuYW1lIjoiYWRtaW4iLCJyb2xlIjoiYWRtaW4iLCJlbWFpbCI6InVzZXJAZXhhbXBsZS5jb20iLCJleHAiOjE3NDQ2MTQ3MjR9.ZN1CwvBgSa7hSTjvAdduEiJjxlQpxqQp15tM7TEl4xc","role": "admin","email": "user@example.com"}
},
});export default loginData;

2.修改mock文件

新增login的api模擬應用

// src/mock/index.ts
import Mock from 'mockjs';
import menuData from '@/mock/mockData/menuData';
import loginData from '@/mock/mockData/loginData' ;Mock.mock(/menu/, 'get', (req: any) => {return menuData.data;
});Mock.mock(/login/, 'post', (req: any) => {return loginData.data;
});

二、界面設計

在src/views下新建文件login.vue

<template><div class="login-container"><el-card class="box-card"><template #header><span>登錄</span></template><el-form :model="loginForm" :rules="rules" ref="loginFormRef" label-width="100px" class="demo-loginForm"><el-form-item label="用戶名" prop="username"><el-input v-model="loginForm.username"></el-input></el-form-item><el-form-item label="密碼" prop="password"><el-input type="password" v-model="loginForm.password" show-password></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">登錄</el-button><el-button @click="resetForm">重置</el-button></el-form-item></el-form></el-card></div></template><script lang="ts" setup>import { reactive, ref } from 'vue';import { ElForm, ElFormItem, ElInput, ElButton, ElCard, ElMessage } from 'element-plus';import type { FormInstance, FormRules } from 'element-plus';import { login } from '@/api/user';const loginForm = reactive({username: '',password: ''});const rules: FormRules = {username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' }],password: [{ required: true, message: '請輸入密碼', trigger: 'blur' }]};const loginFormRef = ref<FormInstance | null>(null);// 封裝登錄請求處理邏輯// 定義 API 返回的數據結構interface LoginResponse {status_code: number;status: string;message?: string;data?: {api_key: string;username: string;token_key: string;role: string;email: string;};}const fetchLoginData = async () => {try {const responseData: LoginResponse = await login(loginForm); // 假設 login 返回的是 LoginResponseif (responseData.status_code === 200 && responseData.status === 'success') {ElMessage.success('登錄成功!');} else {ElMessage.error(`登錄失敗: ${responseData.message || '未知錯誤'}`);console.error('登錄失敗:', responseData);}} catch (error) {ElMessage.error('登錄請求失敗，請稍后再試');}
};const submitForm = () => {if (!loginFormRef.value) return;loginFormRef.value.validate((valid) => {if (valid) {fetchLoginData();} else {console.log('驗證失敗!');ElMessage.error('驗證失敗!');}});};const resetForm = () => {if (!loginFormRef.value) return;loginFormRef.value.resetFields();};</script><style scoped>.login-container {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f2f5;}.box-card {width: 480px;}</style>

三、路由定義

1.修改路由文件（views\router\index.ts）

2.重點增加 RouteRecordRaw與增加login路由

3.完整代碼

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Main from '@/views/Main.vue'; //
import Home from '@/views/Home.vue';
import UserInfo from '@/views/SysSettings/UserInfo.vue';
import AccountSetting from '@/views/SysSettings/AccountSetting.vue';
import Login from '@/views/login.vue';// 定義路由配置
const routes: RouteRecordRaw[] = [{path: '/',name: 'main',component: Main,children: [{path: 'home',name: 'home',component: Home,},{path: 'UserInfo',name: 'UserInfo',component: UserInfo,},{path: 'AccountSetting',name: 'AccountSetting',component: AccountSetting,},],},{path: '/login',name: 'login',component: Login,},
];// 創建路由器
const router = createRouter({history: createWebHistory(),routes, // 使用已定義的路由配置
});export default router;

四、運行效果

輸入網址：http://localhost:5173/login，切記要加上/login

此時隨便輸入用戶名與密碼都可以正確登錄，接下來模擬多用戶與密碼錯誤登錄。

五、登錄驗證與多用戶資料模擬

1、修改mockData登錄模擬數據【src/mock/mockData/loginData.ts】

增加用戶名與密碼驗證與多用戶返回不同信息

// src/mock/mockData/loginData.ts
import Mock from 'mockjs';
import { Document, Setting } from '@element-plus/icons-vue'; // 假設你使用的是 Element Plus 的圖標// 模擬登錄數據
/*
const loginData = Mock.mock({data: {"status_code": 200,"status": "success","message": "Operation successful.","data": {"api_key": "Test","username": "admin","token_key": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicTEyMzQ1NjdBYSIsInVzZXJuYW1lIjoiYWRtaW4iLCJyb2xlIjoiYWRtaW4iLCJlbWFpbCI6InVzZXJAZXhhbXBsZS5jb20iLCJleHAiOjE3NDQ2MTQ3MjR9.ZN1CwvBgSa7hSTjvAdduEiJjxlQpxqQp15tM7TEl4xc","role": "admin","email": "user@example.com"}
},
});export default loginData;
*/// 動態生成登錄數據
export default (data: any) => {// 解析傳入的 data 參數const { username, password } = data;// 根據用戶名和密碼生成不同的響應if (username === 'admin' && password === 'admin') {return Mock.mock({status_code: 200,status: 'success',message: 'Operation successful.',data: {api_key: 'Test',username: 'admin',token_key: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicTEyMzQ1NjdBYSIsInVzZXJuYW1lIjoiYWRtaW4iLCJyb2xlIjoiYWRtaW4iLCJlbWFpbCI6InVzZXJAZXhhbXBsZS5jb20iLCJleHAiOjE3NDQ2MTQ3MjR9.ZN1CwvBgSa7hSTjvAdduEiJjxlQpxqQp15tM7TEl4xc',role: 'admin',email: 'admin@example.com',},});} else if (username === 'user' && password === 'password') {return Mock.mock({status_code: 200,status: 'success',message: 'Operation successful.',data: {api_key: 'TestUser',username: 'user',token_key: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicTEyMzQ1NjdBYSIsInVzZXJuYW1lIjoidXNlciIsInJvbGUiOiJ1c2VyIiwiZW1haWwiOiJ1c2VyQGV4YW1wbGUuY29tIiwiZXhwIjoxNzQ0NjE0NzI0fQ.ZN1CwvBgSa7hSTjvAdduEiJjxlQpxqQp15tM7TEl4xc',role: 'user',email: 'user@example.com',},});} else {return Mock.mock({status_code: 401,status: 'fail',message: 'Invalid username or password.',data: null,});}
};

2.修改mock api文件

增加了獲取登錄賬號與密碼信息傳輸

// src/mock/index.ts
import Mock from 'mockjs';
import menuData from '@/mock/mockData/menuData';
import loginData from '@/mock/mockData/loginData' ;Mock.mock(/menu/, 'get', (req: any) => {return menuData.data;
});/*
Mock.mock(/login/, 'post', (req: any) => {return loginData.data;
});
*/
Mock.mock(/\/login/, (options) => {const { body } = options;const data = JSON.parse(body); // 解析請求體中的數據return loginData(data); // 調用動態生成的登錄數據函數
});

六、登錄驗證運行效果

輸入網址：http://localhost:5173/login

輸入錯誤密碼

輸入正確的密碼：

---

后續

下一章節講登錄成功后跳轉/main，菜單根據不同用戶動態變化。