137 lines
5.5 KiB
Markdown
137 lines
5.5 KiB
Markdown
# 二维码功能修复说明
|
||
|
||
## 修复时间
|
||
2025年1月
|
||
|
||
## 修复内容
|
||
|
||
### 一、修复快速生成接口404问题
|
||
|
||
**问题**：快速生成注册和登录二维码时，前端返回404错误。
|
||
|
||
**原因分析**：
|
||
1. Spring Boot路径映射可能存在冲突
|
||
2. 路径变量 `/{qrcodeId}` 可能优先匹配 `/generate/register` 和 `/generate/login`
|
||
|
||
**修复方案**：
|
||
1. 将 `/generate/register` 和 `/generate/login` 方法移到其他 `/generate/*` 方法附近，保持一致性
|
||
2. 在 `@PostMapping` 注解中添加 `produces = "application/json;charset=UTF-8"`，明确指定响应类型
|
||
3. 确保 `/{qrcodeId}` 路径变量方法放在所有具体路径之后
|
||
|
||
**修复后的接口路径**：
|
||
- `POST /psychology/qrcode/generate/register` - 快速生成注册二维码
|
||
- `POST /psychology/qrcode/generate/login` - 快速生成登录二维码
|
||
|
||
### 二、修复二维码URL生成问题
|
||
|
||
**问题**：生成的二维码URL使用后端地址和端口（如 `http://1.15.149.240:30081`），但前端页面运行在80端口，导致手机扫码无法访问。
|
||
|
||
**修复方案**：
|
||
1. 优化 `buildServerAddress()` 方法，优先从 `Referer` 头提取前端地址
|
||
2. 如果检测到后端端口（30081），自动改为前端端口（80，不显示端口号）
|
||
3. 生成的二维码URL现在指向前端页面，而不是后端API
|
||
|
||
**修复后的URL格式**：
|
||
- 本地开发：`http://localhost/psychology/qrcode/scan/xxx`
|
||
- 生产环境：`http://1.15.149.240/psychology/qrcode/scan/xxx`
|
||
|
||
### 三、完善扫码跳转逻辑
|
||
|
||
**功能说明**：
|
||
1. **扫码接口**：`GET /psychology/qrcode/scan/{qrcodeCode}`（公开接口，使用 `@Anonymous` 注解）
|
||
2. **跳转地址映射**：
|
||
- `test`（测评）→ `/psychology/assessment/start?scaleId={id}` 或 `/psychology/questionnaire/start?questionnaireId={id}`
|
||
- `view_report`（查看报告）→ `/psychology/report/detail?reportId={id}` 或 `/psychology/report/detail?assessmentId={id}`
|
||
- `register`（注册）→ `/register`
|
||
- `login`（登录）→ `/login`
|
||
|
||
3. **前端扫码页面**（`scan.vue`）：
|
||
- 自动解析URL和查询参数
|
||
- 使用Vue Router进行内部跳转
|
||
- 支持完整URL的外部跳转
|
||
- 提供错误提示和重试机制
|
||
|
||
## 测试步骤
|
||
|
||
### 1. 重启后端服务
|
||
**重要**：修改代码后必须重启后端服务才能生效。
|
||
|
||
### 2. 测试快速生成功能
|
||
1. 登录管理系统
|
||
2. 进入"二维码管理"页面
|
||
3. 点击"快速生成" → "注册二维码"
|
||
4. 应成功生成二维码并显示预览
|
||
5. 点击"快速生成" → "登录二维码"
|
||
6. 应成功生成二维码并显示预览
|
||
|
||
### 3. 测试二维码扫码功能
|
||
1. 使用手机扫描生成的二维码
|
||
2. 应能正常打开扫码页面（`/psychology/qrcode/scan/{qrcodeCode}`）
|
||
3. 根据二维码类型自动跳转到对应页面：
|
||
- 注册二维码 → 跳转到注册页面
|
||
- 登录二维码 → 跳转到登录页面
|
||
- 测评二维码 → 跳转到测评开始页面
|
||
- 报告二维码 → 跳转到报告详情页面
|
||
|
||
### 4. 检查二维码URL
|
||
生成的二维码URL应该：
|
||
- 使用前端地址（80端口），而不是后端地址（30081端口）
|
||
- 格式为：`http://{host}/psychology/qrcode/scan/{qrcodeCode}`
|
||
- 手机可以正常访问
|
||
|
||
## 关键代码位置
|
||
|
||
### 后端
|
||
- **Controller**：`ry-xinli-admin/src/main/java/com/ddnai/web/controller/psychology/PsyQrcodeController.java`
|
||
- `generateRegisterQrcode()` - 快速生成注册二维码
|
||
- `generateLoginQrcode()` - 快速生成登录二维码
|
||
- `scan()` - 扫码接口
|
||
- `buildServerAddress()` - 构建服务器地址
|
||
- `buildRedirectUrl()` - 构建跳转地址
|
||
|
||
- **Service**：`ry-xinli-system/src/main/java/com/ddnai/system/service/impl/psychology/PsyQrcodeServiceImpl.java`
|
||
- `generateQrcode()` - 生成二维码Base64
|
||
- `buildQrcodeContent()` - 构建二维码内容URL
|
||
|
||
### 前端
|
||
- **API**：`xinli-ui/src/api/psychology/qrcode.js`
|
||
- `generateRegisterQrcode()` - 调用快速生成注册二维码接口
|
||
- `generateLoginQrcode()` - 调用快速生成登录二维码接口
|
||
- `scanQrcode()` - 调用扫码接口
|
||
|
||
- **页面**：
|
||
- `xinli-ui/src/views/psychology/qrcode/index.vue` - 二维码管理页面
|
||
- `xinli-ui/src/views/psychology/qrcode/scan.vue` - 扫码页面
|
||
|
||
- **路由**：`xinli-ui/src/router/index.js`
|
||
- `/psychology/qrcode/scan/:qrcodeCode` - 扫码页面路由
|
||
- `/register` - 注册页面路由
|
||
- `/login` - 登录页面路由
|
||
|
||
## 注意事项
|
||
|
||
1. **必须重启后端服务**：修改代码后必须重启后端服务才能生效
|
||
2. **权限检查**：快速生成接口需要 `psychology:qrcode:add` 权限
|
||
3. **扫码接口**：扫码接口使用 `@Anonymous` 注解，不需要登录即可访问
|
||
4. **URL生成**：二维码URL会根据请求的 `Referer` 头自动识别前端地址
|
||
5. **端口配置**：前端运行在80端口，后端运行在30081端口
|
||
|
||
## 如果仍有问题
|
||
|
||
1. **检查后端日志**：查看是否有路径映射错误或权限错误
|
||
2. **检查浏览器控制台**：查看实际请求的URL和错误信息
|
||
3. **检查网络请求**：在浏览器开发者工具的Network面板中查看请求详情
|
||
4. **确认服务状态**：确保后端服务已正确启动并运行在30081端口
|
||
5. **确认权限**：确保当前用户有 `psychology:qrcode:add` 权限
|
||
|
||
## 修复完成
|
||
|
||
所有二维码相关功能已修复完成，包括：
|
||
- ✅ 快速生成注册二维码
|
||
- ✅ 快速生成登录二维码
|
||
- ✅ 二维码URL生成（指向前端页面）
|
||
- ✅ 扫码跳转功能
|
||
- ✅ 测评二维码扫码
|
||
- ✅ 报告二维码扫码
|
||
|