78 lines
2.3 KiB
Markdown
78 lines
2.3 KiB
Markdown
# 实现手机号登录功能
|
||
|
||
## 需求分析
|
||
- 在现有登录系统中添加手机号登录功能
|
||
- 支持两种登录方式：
|
||
1. 手机号+验证码直接登录
|
||
2. 手机号+验证码+密码注册密码登录
|
||
|
||
## 实现方案
|
||
|
||
### 1. 创建手机号登录页面组件
|
||
- 创建 `PhoneLogin.vue` 页面组件，位于 `apps/frontend/src/views/Login/`
|
||
- 实现手机号登录表单，包括：
|
||
- 手机号输入框
|
||
- 验证码输入框和获取验证码按钮
|
||
- 密码输入框（可选，用于注册密码登录）
|
||
- 登录/注册按钮
|
||
|
||
### 2. 配置路由
|
||
- 在 `apps/frontend/src/router/index.js` 中添加手机号登录路由
|
||
- 路径：`/login/phone`
|
||
- 名称：`phone-login`
|
||
|
||
### 3. 修改主登录页面
|
||
- 在 `Login.vue` 中添加跳转到手机号登录的链接
|
||
- 位置：在忘记密码和注册链接附近
|
||
|
||
### 4. 实现手机号登录表单组件
|
||
- 创建 `PhoneLoginForm.vue` 组件，位于 `apps/frontend/src/components/auth/`
|
||
- 实现表单验证逻辑：
|
||
- 手机号格式验证
|
||
- 验证码格式验证
|
||
- 密码格式验证（当选择注册密码登录时）
|
||
- 实现获取验证码功能：
|
||
- 倒计时功能
|
||
- 防重复发送机制
|
||
|
||
### 5. 实现登录逻辑
|
||
- 在 `login.js` 中添加手机号登录相关方法
|
||
- 实现验证码发送API调用
|
||
- 实现手机号+验证码登录API调用
|
||
- 实现手机号+验证码+密码注册密码登录API调用
|
||
|
||
### 6. 国际化支持
|
||
- 在国际化文件中添加手机号登录相关的文本
|
||
- 支持中英文切换
|
||
|
||
### 7. 样式适配
|
||
- 确保手机号登录页面与现有登录页面样式保持一致
|
||
- 支持响应式设计
|
||
- 支持暗色主题
|
||
|
||
## 实现步骤
|
||
|
||
1. 创建 `PhoneLogin.vue` 页面组件
|
||
2. 创建 `PhoneLoginForm.vue` 表单组件
|
||
3. 配置手机号登录路由
|
||
4. 修改主登录页面添加跳转链接
|
||
5. 实现表单验证和获取验证码功能
|
||
6. 实现登录逻辑
|
||
7. 添加国际化支持
|
||
8. 测试功能完整性
|
||
|
||
## 预期效果
|
||
- 用户可以在登录页面选择手机号登录方式
|
||
- 手机号登录页面支持两种登录模式
|
||
- 表单验证逻辑完整
|
||
- 界面样式与现有系统保持一致
|
||
- 支持国际化和暗色主题
|
||
|
||
## 技术要点
|
||
- Vue 3 Composition API
|
||
- Vue Router 4
|
||
- Element Plus UI组件库
|
||
- Vue I18n国际化
|
||
- 表单验证（使用Vuelidate）
|
||
- 响应式设计
|
||
- 暗色主题支持 |