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