政府机构的网站怎么做的那么差今日油价最新
系列文档目录
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，菜单根据不同用户动态变化。