# 检查二维码URL的方法 ## 方法一:在二维码管理页面查看(推荐) ### 步骤: 1. 登录管理系统 2. 进入"二维码管理"页面 3. 找到要检查的二维码记录 4. 点击"查看二维码"按钮 5. 在二维码预览对话框中,可以看到二维码图片 6. **查看浏览器控制台**: - 按 `F12` 打开开发者工具 - 切换到 `Console`(控制台)标签 - 在控制台中输入以下代码查看二维码URL: ```javascript // 查看当前页面的二维码数据 console.log('二维码列表数据:', document.querySelectorAll('.el-table__body tr')); ``` ### 或者直接查看网络请求: 1. 打开浏览器开发者工具(F12) 2. 切换到 `Network`(网络)标签 3. 刷新二维码管理页面 4. 找到获取二维码列表的请求(通常是 `/psychology/qrcode/list`) 5. 查看响应数据,找到 `qrcodeUrl` 字段 6. 或者找到获取二维码图片的请求(通常是 `/psychology/qrcode/image/{qrcodeId}`) 7. 查看响应数据中的URL ## 方法二:解码二维码查看内容 ### 使用在线工具: 1. 访问在线二维码解码工具,例如: - https://www.qrcode-monkey.com/qr-code-decoder/ - https://zxing.org/w/decode.jspx 2. 上传二维码图片或输入二维码图片URL 3. 查看解码后的文本内容,这就是二维码的URL ### 使用手机扫码: 1. 使用手机扫描二维码 2. 查看手机浏览器地址栏中的URL 3. 检查URL是否正确: - ✅ 正确格式:`http://192.168.1.183/psychology/qrcode/scan/xxx` - ❌ 错误格式:`http://192.168.1.183:30081//psychology/qrcode/scan/xxx` ## 方法三:检查后端日志 ### 步骤: 1. 查看后端控制台日志 2. 找到二维码生成相关的日志 3. 查找包含 `buildServerAddress` 或 `buildQrcodeContent` 的日志 4. 查看实际生成的URL ### 添加调试日志(可选): 如果需要更详细的日志,可以在代码中添加: ```java // 在 PsyQrcodeController.java 的 enrichQrcodeWithBase64() 方法中 String serverAddress = buildServerAddress(); log.info("构建的服务器地址: {}", serverAddress); // 在 PsyQrcodeServiceImpl.java 的 buildQrcodeContent() 方法中 String content = buildQrcodeContent(qrcode, serverAddress); log.info("生成的二维码URL: {}", content); ``` ## 方法四:直接测试URL访问 ### 步骤: 1. 从二维码管理页面获取二维码编码(`qrcodeCode`) 2. 手动构建URL:`http://192.168.1.183/psychology/qrcode/scan/{qrcodeCode}` 3. 在浏览器中直接访问该URL 4. 检查是否能正常访问: - ✅ 能访问:URL正确 - ❌ 不能访问:检查URL格式和网络连接 ## 方法五:使用浏览器开发者工具检查 ### 步骤: 1. 打开二维码管理页面 2. 按 `F12` 打开开发者工具 3. 切换到 `Network`(网络)标签 4. 点击"查看二维码"按钮 5. 在Network标签中找到获取二维码图片的请求 6. 查看请求URL和响应数据 7. 检查响应中的 `qrcodeUrl` 字段 ### 或者使用控制台: 在浏览器控制台中输入: ```javascript // 获取二维码图片的Base64数据 const qrcodeImage = document.querySelector('img[src^="data:image"]'); if (qrcodeImage) { console.log('二维码图片URL:', qrcodeImage.src); // Base64数据很长,可以截取前100个字符查看 console.log('二维码URL前缀:', qrcodeImage.src.substring(0, 100)); } ``` ## 检查URL正确性的标准 ### ✅ 正确的URL格式: - `http://192.168.1.183/psychology/qrcode/scan/xxx` - `http://localhost/psychology/qrcode/scan/xxx` - 不包含 `:30081` 端口号 - 不包含双斜杠 `//` - 路径格式正确:`/psychology/qrcode/scan/{qrcodeCode}` ### ❌ 错误的URL格式: - `http://192.168.1.183:30081/psychology/qrcode/scan/xxx`(包含30081端口) - `http://192.168.1.183//psychology/qrcode/scan/xxx`(包含双斜杠) - `http://192.168.1.183:30081//psychology/qrcode/scan/xxx`(包含端口和双斜杠) ## 快速检查脚本 在浏览器控制台中运行以下脚本,可以快速检查所有二维码的URL: ```javascript // 检查二维码列表中的URL fetch('/dev-api/psychology/qrcode/list', { headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') } }) .then(res => res.json()) .then(data => { if (data.code === 200 && data.rows) { console.log('二维码列表:'); data.rows.forEach((qrcode, index) => { console.log(`${index + 1}. 编码: ${qrcode.qrcodeCode}`); console.log(` 类型: ${qrcode.qrcodeType}`); // 如果有qrcodeUrl,检查URL格式 if (qrcode.qrcodeUrl) { const urlMatch = qrcode.qrcodeUrl.match(/http[s]?:\/\/[^"']+/); if (urlMatch) { const url = urlMatch[0]; console.log(` URL: ${url}`); // 检查是否有问题 if (url.includes(':30081')) { console.warn(' ⚠️ 警告:URL包含30081端口!'); } if (url.includes('//')) { console.warn(' ⚠️ 警告:URL包含双斜杠!'); } } } }); } }); ``` ## 常见问题排查 ### 问题1:URL包含30081端口 **原因**:`buildServerAddress()` 方法没有正确识别后端端口 **解决**:检查后端日志,确认 `serverPort` 是否为30081 ### 问题2:URL包含双斜杠 **原因**:路径拼接时产生了双斜杠 **解决**:检查 `contextPath` 是否为 `/`,如果是则应该被忽略 ### 问题3:URL无法访问 **原因**: - URL格式错误 - 网络连接问题 - 前端服务未运行 **解决**: - 检查URL格式 - 确认前端服务运行在80端口 - 确认手机和电脑在同一局域网内 ## 推荐检查流程 1. **生成二维码后立即检查**: - 在二维码管理页面查看二维码 - 使用浏览器开发者工具查看网络请求 - 检查URL格式是否正确 2. **测试扫码功能**: - 使用手机扫描二维码 - 检查是否能正常访问 - 查看手机浏览器地址栏中的URL 3. **如果发现问题**: - 检查后端日志 - 重新生成二维码 - 确认修复后再次测试