xiaozhang/xinli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ee5a28836c
xinli/二维码功能修复说明-最终版.md

5.8 KiB
Raw Blame History

二维码功能修复说明（最终版）

修复时间

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端口）
  • ✅ 完善扫码跳转功能