188 lines
6.0 KiB
Markdown
188 lines
6.0 KiB
Markdown
# 检查二维码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. **如果发现问题**：
|
||
- 检查后端日志
|
||
- 重新生成二维码
|
||
- 确认修复后再次测试
|
||
|