You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
3.3 KiB
150 lines
3.3 KiB
2 weeks ago
|
# GoFaster 登录功能说明
|
||
|
|
|
||
|
|
## 功能概述
|
||
|
|
|
||
|
|
GoFaster 前端应用已成功集成了完整的用户登录系统，包括：
|
||
|
|
|
||
|
|
- 🔐 登录弹窗组件
|
||
|
|
- 📱 响应式设计
|
||
|
|
- 🔒 验证码支持
|
||
|
|
- 💾 本地状态管理
|
||
|
|
- 🎨 主题适配
|
||
|
|
|
||
|
|
## 使用方法
|
||
|
|
|
||
|
|
### 1. 显示登录弹窗
|
||
|
|
|
||
|
|
登录弹窗可以通过以下两种方式触发：
|
||
|
|
|
||
|
|
#### 方式一：点击顶部导航栏的"登录"按钮
|
||
|
|
- 在未登录状态下，顶部导航栏会显示"🔐 登录"按钮
|
||
|
|
- 点击即可打开登录弹窗
|
||
|
|
|
||
|
|
#### 方式二：点击首页的登录按钮
|
||
|
|
- 在首页的欢迎区域，未登录状态下会显示登录提示
|
||
|
|
- 点击"立即登录"按钮即可打开登录弹窗
|
||
|
|
|
||
|
|
### 2. 登录流程
|
||
|
|
|
||
|
|
1. **获取验证码**：弹窗打开时自动获取验证码图片
|
||
|
|
2. **填写信息**：
|
||
|
|
- 用户名：输入您的用户名
|
||
|
|
- 密码：输入您的密码
|
||
|
|
- 验证码：输入图片中显示的4位验证码
|
||
|
|
3. **提交登录**：点击"登录"按钮提交
|
||
|
|
4. **验证码刷新**：点击验证码图片可刷新获取新的验证码
|
||
|
|
|
||
|
|
### 3. 默认账号
|
||
|
|
|
||
|
|
系统提供了默认的管理员账号用于测试：
|
||
|
|
|
||
|
|
- **用户名**：`sysadmin`
|
||
|
|
- **密码**：`sysadmin@123`
|
||
|
|
|
||
|
|
## 技术实现
|
||
|
|
|
||
|
|
### 组件结构
|
||
|
|
|
||
|
|
```
|
||
|
|
MainLayout.vue (主布局)
|
||
|
|
├── LoginModal.vue (登录弹窗)
|
||
|
|
├── Toast.vue (消息提示)
|
||
|
|
└── 其他组件...
|
||
|
|
```
|
||
|
|
|
||
|
|
### 状态管理
|
||
|
|
|
||
|
|
- 使用 Vue 3 Composition API
|
||
|
|
- 通过 `provide/inject` 在组件间共享登录状态
|
||
|
|
- 本地存储用户信息和登录状态
|
||
|
|
|
||
|
|
### 后端接口
|
||
|
|
|
||
|
|
登录功能需要后端提供以下接口：
|
||
|
|
|
||
|
|
1. **获取验证码**：`GET /api/auth/captcha`
|
||
|
|
2. **用户登录**：`POST /api/auth/login`
|
||
|
|
|
||
|
|
### 配置说明
|
||
|
|
|
||
|
|
前端配置位于 `src/config/app.config.js`，默认连接 `http://localhost:8080/api`
|
||
|
|
|
||
|
|
## 样式特性
|
||
|
|
|
||
|
|
### 主题适配
|
||
|
|
- 支持深色/浅色主题切换
|
||
|
|
- 使用 CSS 变量实现主题一致性
|
||
|
|
- 响应式设计，支持移动端
|
||
|
|
|
||
|
|
### 动画效果
|
||
|
|
- 弹窗滑入动画
|
||
|
|
- 加载状态指示器
|
||
|
|
- 平滑的过渡效果
|
||
|
|
|
||
|
|
## 错误处理
|
||
|
|
|
||
|
|
- 网络连接失败提示
|
||
|
|
- 验证码错误处理
|
||
|
|
- 登录失败重试机制
|
||
|
|
- 表单验证提示
|
||
|
|
|
||
|
|
## 安全特性
|
||
|
|
|
||
|
|
- 密码输入框隐藏内容
|
||
|
|
- 验证码防机器人
|
||
|
|
- Token 认证机制
|
||
|
|
- 自动登出处理
|
||
|
|
|
||
|
|
## 开发说明
|
||
|
|
|
||
|
|
### 添加新的登录相关功能
|
||
|
|
|
||
|
|
1. 在 `LoginModal.vue` 中添加新的表单字段
|
||
|
|
2. 在 `userService.js` 中添加对应的 API 调用
|
||
|
|
3. 在 `MainLayout.vue` 中处理新的状态变化
|
||
|
|
|
||
|
|
### 自定义样式
|
||
|
|
|
||
|
|
登录弹窗的样式可以通过修改 `LoginModal.vue` 中的 CSS 变量来调整：
|
||
|
|
|
||
|
|
```css
|
||
|
|
:root {
|
||
|
|
--primary-color: #1976d2;
|
||
|
|
--primary-hover: #1565c0;
|
||
|
|
--bg-primary: #ffffff;
|
||
|
|
--text-primary: #2c3e50;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## 故障排除
|
||
|
|
|
||
|
|
### 常见问题
|
||
|
|
|
||
|
|
1. **登录弹窗不显示**
|
||
|
|
- 检查浏览器控制台是否有错误
|
||
|
|
- 确认组件是否正确导入
|
||
|
|
|
||
|
|
2. **验证码获取失败**
|
||
|
|
- 检查后端服务是否正常运行
|
||
|
|
- 确认网络连接正常
|
||
|
|
|
||
|
|
3. **登录失败**
|
||
|
|
- 检查用户名和密码是否正确
|
||
|
|
- 确认验证码输入正确
|
||
|
|
- 查看后端日志获取详细错误信息
|
||
|
|
|
||
|
|
### 调试模式
|
||
|
|
|
||
|
|
在开发环境中，可以打开浏览器开发者工具查看：
|
||
|
|
- 网络请求状态
|
||
|
|
- 控制台日志
|
||
|
|
- Vue 组件状态
|
||
|
|
|
||
|
|
## 更新日志
|
||
|
|
|
||
|
|
- **v1.0.0**：初始版本，包含基本的登录功能
|
||
|
|
- 支持用户名/密码登录
|
||
|
|
- 集成验证码系统
|
||
|
|
- 响应式设计
|
||
|
|
- 主题适配
|