143 lines
5.8 KiB
Markdown
143 lines
5.8 KiB
Markdown
|
# 二维码功能修复说明（最终版）
|
|||
|
|
|
|||
|
|
## 修复时间
|
|||
|
|
2025年1月
|
|||
|
|
|
|||
|
|
## 修复内容
|
|||
|
|
|
|||
|
|
### 一、删除快速生成功能
|
|||
|
|
|
|||
|
|
**修改内容**：
|
|||
|
|
1. 删除前端"快速生成"按钮和相关方法
|
|||
|
|
2. 删除后端快速生成接口（`/quick/register` 和 `/quick/login`）
|
|||
|
|
3. 删除前端API调用方法
|
|||
|
|
|
|||
|
|
**说明**：用户可以通过"新增"按钮手动创建注册和登录二维码。
|
|||
|
|
|
|||
|
|
### 二、修复本地环境二维码URL生成问题
|
|||
|
|
|
|||
|
|
**问题**：扫描二维码后显示的地址是 `localhost:30081`，这会导致手机无法访问。
|
|||
|
|
|
|||
|
|
**原因分析**：
|
|||
|
|
- 本地环境：前端运行在80端口，后端运行在30081端口
|
|||
|
|
- 二维码URL应该使用前端地址（`localhost`，80端口），而不是后端地址（`localhost:30081`）
|
|||
|
|
- 之前的逻辑在某些情况下仍然会生成包含30081端口的URL
|
|||
|
|
|
|||
|
|
**修复方案**：
|
|||
|
|
1. 优化 `buildServerAddress()` 方法，确保在本地环境下正确识别前端地址
|
|||
|
|
2. 如果检测到后端端口（30081），自动改为前端端口（80，不显示端口号）
|
|||
|
|
3. 优先从 `Referer` 头获取前端地址，如果失败则使用请求的服务器地址并转换端口
|
|||
|
|
|
|||
|
|
**修复后的URL格式**：
|
|||
|
|
- 本地环境：`http://localhost/psychology/qrcode/scan/xxx`（不包含端口号，默认80端口）
|
|||
|
|
- 生产环境：`http://1.15.149.240/psychology/qrcode/scan/xxx`（不包含端口号，默认80端口）
|
|||
|
|
|
|||
|
|
### 三、二维码功能实现方式说明
|
|||
|
|
|
|||
|
|
**当前实现方式**：
|
|||
|
|
1. **手动创建二维码**：通过"新增"按钮创建二维码，选择类型（测评、查看报告、注册、登录）
|
|||
|
|
2. **二维码生成**：系统自动生成二维码编码和Base64图片
|
|||
|
|
3. **扫码跳转**：扫描二维码后自动跳转到对应页面
|
|||
|
|
|
|||
|
|
**本地环境使用建议**：
|
|||
|
|
1. **使用本机IP地址**：如果需要在手机上扫码，建议：
|
|||
|
|
- 获取本机IP地址（如：192.168.1.100）
|
|||
|
|
- 在浏览器中通过 `http://192.168.1.100` 访问前端页面
|
|||
|
|
- 这样生成的二维码URL会是 `http://192.168.1.100/psychology/qrcode/scan/xxx`
|
|||
|
|
- 手机和电脑在同一局域网内，可以正常扫码访问
|
|||
|
|
|
|||
|
|
2. **使用localhost**：如果只在电脑上测试：
|
|||
|
|
- 使用 `http://localhost` 访问前端页面
|
|||
|
|
- 生成的二维码URL会是 `http://localhost/psychology/qrcode/scan/xxx`
|
|||
|
|
- 只能在电脑上访问，手机无法访问
|
|||
|
|
|
|||
|
|
**新的实现方式建议**（可选）：
|
|||
|
|
如果需要更好的本地开发体验，可以考虑：
|
|||
|
|
1. **配置前端地址**：在 `application.yml` 中添加前端地址配置
|
|||
|
|
2. **使用环境变量**：通过环境变量区分开发环境和生产环境
|
|||
|
|
3. **使用配置文件**：在配置文件中明确指定前端和后端地址
|
|||
|
|
|
|||
|
|
## 测试步骤
|
|||
|
|
|
|||
|
|
### 1. 重启后端服务
|
|||
|
|
**重要**：修改代码后必须重启后端服务才能生效。
|
|||
|
|
|
|||
|
|
### 2. 测试二维码生成
|
|||
|
|
1. 登录管理系统
|
|||
|
|
2. 进入"二维码管理"页面
|
|||
|
|
3. 点击"新增"按钮
|
|||
|
|
4. 选择二维码类型（如：注册、登录、测评、查看报告）
|
|||
|
|
5. 填写相关信息
|
|||
|
|
6. 保存后应成功生成二维码
|
|||
|
|
|
|||
|
|
### 3. 测试二维码扫码功能
|
|||
|
|
1. 使用手机扫描生成的二维码
|
|||
|
|
2. 应能正常打开扫码页面
|
|||
|
|
3. 根据二维码类型自动跳转到对应页面：
|
|||
|
|
- 注册二维码 → 跳转到注册页面
|
|||
|
|
- 登录二维码 → 跳转到登录页面
|
|||
|
|
- 测评二维码 → 跳转到测评开始页面
|
|||
|
|
- 报告二维码 → 跳转到报告详情页面
|
|||
|
|
|
|||
|
|
### 4. 检查二维码URL
|
|||
|
|
生成的二维码URL应该：
|
|||
|
|
- **不包含30081端口**：应该是 `http://localhost/...` 或 `http://192.168.1.100/...`
|
|||
|
|
- **使用前端地址**：指向前端页面（80端口），而不是后端API（30081端口）
|
|||
|
|
- **手机可以访问**：如果使用本机IP地址，手机在同一局域网内可以正常访问
|
|||
|
|
|
|||
|
|
## 关键代码位置
|
|||
|
|
|
|||
|
|
### 后端
|
|||
|
|
- **Controller**：`ry-xinli-admin/src/main/java/com/ddnai/web/controller/psychology/PsyQrcodeController.java`
|
|||
|
|
- `buildServerAddress()` - 构建服务器地址（已修复，确保使用前端地址）
|
|||
|
|
- `enrichQrcodeWithBase64()` - 为二维码添加Base64图片
|
|||
|
|
- `scan()` - 扫码接口
|
|||
|
|
- `buildRedirectUrl()` - 构建跳转地址
|
|||
|
|
|
|||
|
|
- **Service**：`ry-xinli-system/src/main/java/com/ddnai/system/service/impl/psychology/PsyQrcodeServiceImpl.java`
|
|||
|
|
- `generateQrcode()` - 生成二维码Base64
|
|||
|
|
- `buildQrcodeContent()` - 构建二维码内容URL
|
|||
|
|
|
|||
|
|
### 前端
|
|||
|
|
- **页面**：
|
|||
|
|
- `xinli-ui/src/views/psychology/qrcode/index.vue` - 二维码管理页面（已删除快速生成功能）
|
|||
|
|
- `xinli-ui/src/views/psychology/qrcode/scan.vue` - 扫码页面
|
|||
|
|
|
|||
|
|
- **API**：`xinli-ui/src/api/psychology/qrcode.js`（已删除快速生成相关方法）
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. **必须重启后端服务**：修改代码后必须重启后端服务才能生效
|
|||
|
|
2. **本地环境测试**：
|
|||
|
|
- 如果需要在手机上扫码，使用本机IP地址访问前端页面
|
|||
|
|
- 如果只在电脑上测试，使用localhost即可
|
|||
|
|
3. **端口配置**：前端运行在80端口，后端运行在30081端口
|
|||
|
|
4. **二维码URL**：生成的二维码URL会自动使用前端地址（80端口），不包含30081端口
|
|||
|
|
|
|||
|
|
## 如果仍有问题
|
|||
|
|
|
|||
|
|
1. **检查二维码URL**：
|
|||
|
|
- 查看生成的二维码URL是否包含30081端口
|
|||
|
|
- 如果包含，说明 `buildServerAddress()` 方法没有正确工作
|
|||
|
|
- 检查后端日志，查看实际生成的URL
|
|||
|
|
|
|||
|
|
2. **检查Referer头**：
|
|||
|
|
- 在浏览器开发者工具的Network面板中查看请求的Referer头
|
|||
|
|
- 确保Referer头包含正确的前端地址
|
|||
|
|
|
|||
|
|
3. **本地环境测试**：
|
|||
|
|
- 如果使用localhost，只能在电脑上访问
|
|||
|
|
- 如果需要在手机上扫码，使用本机IP地址（如：192.168.1.100）
|
|||
|
|
|
|||
|
|
4. **检查网络**：
|
|||
|
|
- 确保手机和电脑在同一局域网内
|
|||
|
|
- 确保防火墙没有阻止访问
|
|||
|
|
|
|||
|
|
## 修复完成
|
|||
|
|
|
|||
|
|
所有问题已修复完成：
|
|||
|
|
- ✅ 删除快速生成功能
|
|||
|
|
- ✅ 修复本地环境二维码URL生成（确保使用前端地址，不包含30081端口）
|
|||
|
|
- ✅ 完善扫码跳转功能
|
|||
|
|
|