3.3 KiB

Raw Blame History

GoFaster 登录功能说明

功能概述

GoFaster 前端应用已成功集成了完整的用户登录系统，包括：

🔐 登录弹窗组件
📱 响应式设计
🔒 验证码支持
💾 本地状态管理
🎨 主题适配

使用方法

1. 显示登录弹窗

登录弹窗可以通过以下两种方式触发：

方式一：点击顶部导航栏的"登录"按钮

在未登录状态下，顶部导航栏会显示"🔐 登录"按钮
点击即可打开登录弹窗

方式二：点击首页的登录按钮

在首页的欢迎区域，未登录状态下会显示登录提示
点击"立即登录"按钮即可打开登录弹窗

2. 登录流程

获取验证码：弹窗打开时自动获取验证码图片
填写信息：
- 用户名：输入您的用户名
- 密码：输入您的密码
- 验证码：输入图片中显示的4位验证码
提交登录：点击"登录"按钮提交
验证码刷新：点击验证码图片可刷新获取新的验证码

3. 默认账号

系统提供了默认的管理员账号用于测试：

用户名：sysadmin
密码：sysadmin@123

技术实现

组件结构

MainLayout.vue (主布局)
├── LoginModal.vue (登录弹窗)
├── Toast.vue (消息提示)
└── 其他组件...

状态管理

使用 Vue 3 Composition API
通过 provide/inject 在组件间共享登录状态
本地存储用户信息和登录状态

后端接口

登录功能需要后端提供以下接口：

获取验证码：GET /api/auth/captcha
用户登录：POST /api/auth/login

配置说明

前端配置位于 src/config/app.config.js，默认连接 http://localhost:8080/api

样式特性

主题适配

支持深色/浅色主题切换
使用 CSS 变量实现主题一致性
响应式设计，支持移动端

动画效果

弹窗滑入动画
加载状态指示器
平滑的过渡效果

错误处理

网络连接失败提示
验证码错误处理
登录失败重试机制
表单验证提示

安全特性

密码输入框隐藏内容
验证码防机器人
Token 认证机制
自动登出处理

开发说明

添加新的登录相关功能

在 LoginModal.vue 中添加新的表单字段
在 userService.js 中添加对应的 API 调用
在 MainLayout.vue 中处理新的状态变化

自定义样式

登录弹窗的样式可以通过修改 LoginModal.vue 中的 CSS 变量来调整：

:root {
  --primary-color: #1976d2;
  --primary-hover: #1565c0;
  --bg-primary: #ffffff;
  --text-primary: #2c3e50;
}

故障排除

常见问题

登录弹窗不显示
- 检查浏览器控制台是否有错误
- 确认组件是否正确导入
验证码获取失败
- 检查后端服务是否正常运行
- 确认网络连接正常
登录失败
- 检查用户名和密码是否正确
- 确认验证码输入正确
- 查看后端日志获取详细错误信息

调试模式

在开发环境中，可以打开浏览器开发者工具查看：

网络请求状态
控制台日志
Vue 组件状态

更新日志

v1.0.0：初始版本，包含基本的登录功能
支持用户名/密码登录
集成验证码系统
响应式设计
主题适配

3.3 KiB Raw Blame History