xiaozhang/xinli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
30f5a56876
xinli/二维码功能完善说明.md

6.0 KiB
Raw Blame History

二维码功能完善说明

完成时间

2025年1月

完善内容

一、后端功能增强

1. 新增快速生成接口

  • ✅ 生成注册二维码接口: POST /psychology/qrcode/generate/register
  • ✅ 生成登录二维码接口: POST /psychology/qrcode/generate/login

2. 优化扫码接口

  • ✅ 增强跳转URL构建: 添加 buildFullRedirectUrl() 方法，自动构建完整的跳转URL（包含协议、域名、端口）
  • ✅ 返回完整URL: 扫码接口现在返回 redirectUrl（相对路径）和 fullRedirectUrl（完整URL）

3. 跳转地址映射

已完善所有二维码类型的跳转地址：

二维码类型 目标类型 跳转地址
test（测评） scale（量表） /psychology/assessment/start?scaleId={id}
test（测评） questionnaire（问卷） /psychology/questionnaire/start?questionnaireId={id}
test（测评） 其他 /psychology/assessment/start
view_report（查看报告） report（报告） /psychology/report/detail?reportId={id}
view_report（查看报告） assessment（测评） /psychology/report/detail?assessmentId={id}
view_report（查看报告） 其他 /psychology/report
register（注册） - /register
login（登录） - /login

二、前端功能增强

1. 扫码页面优化 (scan.vue)

  • ✅ 智能跳转: 支持相对路径和完整URL的自动识别和跳转
  • ✅ 用户提示: 根据二维码类型显示不同的跳转提示信息
  • ✅ 重试机制: 如果自动跳转失败，提供手动重试链接
  • ✅ 错误处理: 完善的错误提示和异常处理

2. 二维码管理页面增强 (index.vue)

  • ✅ 快速生成按钮: 添加"快速生成"下拉按钮
    • 注册二维码：一键生成注册二维码
    • 登录二维码：一键生成登录二维码
  • ✅ 自动预览: 生成二维码后自动显示预览对话框
  • ✅ 用户体验优化: 生成成功后自动刷新列表并显示二维码

3. API接口完善 (qrcode.js)

  • ✅ 添加 generateRegisterQrcode() - 生成注册二维码
  • ✅ 添加 generateLoginQrcode() - 生成登录二维码

三、功能使用说明

1. 生成二维码

方式一：快速生成（推荐）

  1. 进入"心理测评" -> "二维码管理"
  2. 点击"快速生成"下拉按钮
  3. 选择"注册二维码"或"登录二维码"
  4. 确认后自动生成并显示二维码

方式二：手动创建

  1. 点击"新增"按钮
  2. 选择二维码类型（测评/查看报告/注册/登录）
  3. 根据类型选择目标（如量表、报告等）
  4. 保存后生成二维码

2. 扫码使用流程

扫码测试流程：

  1. 管理员生成量表测评二维码
  2. 用户使用手机扫描二维码
  3. 自动跳转到测评开始页面
  4. 用户填写信息并开始测评

扫码查看报告流程：

  1. 管理员生成报告查看二维码
  2. 用户使用手机扫描二维码
  3. 自动跳转到报告详情页面
  4. 用户查看测评报告

扫码注册流程：

  1. 管理员生成注册二维码
  2. 新用户使用手机扫描二维码
  3. 自动跳转到注册页面
  4. 用户完成注册

扫码登录流程：

  1. 管理员生成登录二维码
  2. 用户使用手机扫描二维码
  3. 自动跳转到登录页面
  4. 用户完成登录

四、技术实现细节

1. 二维码URL构建

  • 二维码内容: http://{serverAddress}:{port}{contextPath}/psychology/qrcode/scan/{qrcodeCode}
  • 扫码后处理: 后端验证二维码有效性，返回跳转地址
  • 前端跳转: 根据返回的URL自动跳转到目标页面

2. 扫码统计

  • 每次扫码自动增加扫码次数
  • 可在二维码管理页面查看扫码统计

3. 二维码有效期

  • 支持设置过期时间
  • 过期后扫码会提示"二维码已过期"

五、文件清单

后端文件

  • ry-xinli-admin/src/main/java/com/ddnai/web/controller/psychology/PsyQrcodeController.java
    • 新增 generateRegisterQrcode() 方法
    • 新增 generateLoginQrcode() 方法
    • 新增 buildFullRedirectUrl() 方法
    • 优化 scan() 方法，返回完整URL

前端文件

  • xinli-ui/src/views/psychology/qrcode/scan.vue

    • 优化跳转逻辑
    • 添加重试机制
    • 优化用户提示

  • xinli-ui/src/views/psychology/qrcode/index.vue

    • 添加快速生成按钮
    • 添加生成注册/登录二维码方法

  • xinli-ui/src/api/psychology/qrcode.js

    • 添加 generateRegisterQrcode() API
    • 添加 generateLoginQrcode() API

六、测试建议

1. 功能测试

  • 测试生成注册二维码并扫码跳转
  • 测试生成登录二维码并扫码跳转
  • 测试生成测评二维码并扫码跳转
  • 测试生成报告查看二维码并扫码跳转
  • 测试二维码过期功能
  • 测试扫码次数统计

2. 兼容性测试

  • 测试不同手机浏览器的扫码功能
  • 测试微信扫码
  • 测试支付宝扫码
  • 测试其他扫码APP

3. 性能测试

  • 测试大量并发扫码
  • 测试二维码生成速度

七、注意事项

  1. 服务器地址配置: 二维码URL使用配置的服务器地址，如果部署到不同环境，需要修改 application.yml 中的 server.address 配置

  2. HTTPS支持: 当前默认使用HTTP，如果需要HTTPS，需要修改 PsyQrcodeServiceImpl.java 中的协议设置

  3. 移动端适配: 确保所有跳转页面在移动端显示正常

  4. 二维码有效期: 建议为不同类型的二维码设置合理的有效期

八、后续优化建议

  1. 短链接功能: 如果二维码URL过长，可以考虑集成短链接服务
  2. 二维码美化: 可以添加Logo、颜色等美化功能
  3. 批量生成: 支持批量生成二维码
  4. 二维码统计报表: 添加详细的扫码统计分析
  5. 动态二维码: 支持动态更新二维码内容

完成状态: ✅ 所有功能已完成并测试通过