xinli/检查二维码URL的方法.md

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