280 lines
6.0 KiB
Markdown
280 lines
6.0 KiB
Markdown
# MeshRay 数据获取问题修复说明
|
||
|
||
## ✅ 已完成的修复
|
||
|
||
### 1. 添加调试日志
|
||
|
||
在 `web/src/views/Networks/Detail.vue` 的 `loadDevices` 函数中添加了详细的调试日志：
|
||
|
||
```javascript
|
||
console.log('🔍 开始加载设备列表，networkId:', route.params.id)
|
||
console.log('📋 设备列表响应:', res)
|
||
console.log('✅ 设备数量:', allDevices.value.length)
|
||
```
|
||
|
||
### 2. 重新编译前端
|
||
|
||
```bash
|
||
cd web
|
||
npm run build
|
||
# ✅ built in 13.55s
|
||
```
|
||
|
||
---
|
||
|
||
## 🔍 问题诊断步骤
|
||
|
||
### 第一步：访问应用并查看调试信息
|
||
|
||
1. **打开浏览器** (推荐使用 Chrome/Edge)
|
||
2. **访问**: `http://localhost:9531`
|
||
3. **按 F12** 打开开发者工具
|
||
4. **切换到 Console（控制台）标签页**
|
||
5. **导航到网络详情页** (`/networks/:id`)
|
||
|
||
### 第二步：查看控制台输出
|
||
|
||
正常情况下应该看到类似这样的日志：
|
||
|
||
```
|
||
🔍 开始加载设备列表，networkId: 1
|
||
📋 设备列表响应：{data: Array(2), message: "..."}
|
||
✅ 设备数量：2
|
||
```
|
||
|
||
### 第三步：根据输出判断问题
|
||
|
||
#### ✅ 情况 A：显示正常数据
|
||
|
||
```
|
||
🔍 开始加载设备列表，networkId: 1
|
||
📋 设备列表响应：{data: Array(2)}
|
||
✅ 设备数量：2
|
||
```
|
||
|
||
**结论**: 数据获取正常，如果页面仍无显示，检查 Vue 组件渲染逻辑
|
||
|
||
---
|
||
|
||
#### ❌ 情况 B：networkId 为 undefined
|
||
|
||
```
|
||
🔍 开始加载设备列表，networkId: undefined
|
||
❌ 错误：Invalid network ID
|
||
```
|
||
|
||
**原因**: 路由参数未正确传递
|
||
|
||
**解决**:
|
||
1. 检查 URL 是否为 `/networks/1` 格式
|
||
2. 确认从列表页点击跳转时携带了正确的 ID
|
||
3. 刷新页面或重新进入
|
||
|
||
---
|
||
|
||
#### ❌ 情况 C：API 请求失败
|
||
|
||
```
|
||
🔍 开始加载设备列表，networkId: 1
|
||
❌ Network Error: Request failed with status code 404
|
||
```
|
||
|
||
**原因**: 后端服务未启动或 API 路径错误
|
||
|
||
**解决**:
|
||
1. 确认后端服务已启动：`.\meshray.exe`
|
||
2. 检查 API 路径是否正确
|
||
3. 查看 Network 面板中的详细请求信息
|
||
|
||
---
|
||
|
||
#### ❌ 情况 D：返回数据为空数组
|
||
|
||
```
|
||
🔍 开始加载设备列表，networkId: 1
|
||
📋 设备列表响应：{data: []}
|
||
✅ 设备数量：0
|
||
```
|
||
|
||
**原因**: 该网络下还没有设备
|
||
|
||
**解决**:
|
||
1. 这是正常现象
|
||
2. 在该网络下创建设备即可
|
||
3. 或检查是否选择了正确的网络 ID
|
||
|
||
---
|
||
|
||
## 🛠️ 常用排查命令
|
||
|
||
### 检查后端服务状态
|
||
|
||
```bash
|
||
# 查看服务是否在运行
|
||
Get-Process meshray -ErrorAction SilentlyContinue
|
||
|
||
# 测试健康检查接口
|
||
curl http://localhost:9531/api/v1/health
|
||
```
|
||
|
||
### 检查数据库数据
|
||
|
||
```sql
|
||
-- 使用 SQLite 工具连接 ./data/meshray.db
|
||
|
||
-- 查看所有网络
|
||
SELECT id, name, created_at FROM networks;
|
||
|
||
-- 查看指定网络的设备
|
||
SELECT id, name, public_key, status
|
||
FROM devices
|
||
WHERE network_id = 1;
|
||
```
|
||
|
||
### 清除浏览器缓存
|
||
|
||
**Chrome/Edge**:
|
||
1. 按 `Ctrl+Shift+Delete`
|
||
2. 选择"缓存的图像和文件"
|
||
3. 点击"清除数据"
|
||
4. 刷新页面 (`F5`)
|
||
|
||
---
|
||
|
||
## 📊 Network 面板调试技巧
|
||
|
||
### 1. 找到设备列表请求
|
||
|
||
在 Network 面板中搜索：`devices`
|
||
|
||
应该能看到：
|
||
```
|
||
GET /api/v1/devices?network_id=1
|
||
Status: 200 OK
|
||
```
|
||
|
||
### 2. 检查请求详情
|
||
|
||
**Headers（请求头）**:
|
||
```
|
||
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
|
||
```
|
||
|
||
**Response（响应）**:
|
||
```json
|
||
{
|
||
"data": [
|
||
{
|
||
"id": 1,
|
||
"name": "Device-1",
|
||
"status": "online",
|
||
...
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 3. 常见错误码
|
||
|
||
| 状态码 | 含义 | 解决方法 |
|
||
|--------|------|----------|
|
||
| 200 | 成功 | ✅ 正常 |
|
||
| 401 | 未授权 | 重新登录 |
|
||
| 404 | 资源不存在 | 检查网络 ID |
|
||
| 500 | 服务器错误 | 查看后端日志 |
|
||
| (failed) | 网络错误 | 检查服务是否启动 |
|
||
|
||
---
|
||
|
||
## 🎯 快速验证脚本
|
||
|
||
在浏览器控制台执行以下代码，自动诊断问题：
|
||
|
||
```javascript
|
||
// === MeshRay 数据获取诊断 ===
|
||
(async () => {
|
||
const token = localStorage.getItem('token')
|
||
if (!token) {
|
||
console.error('❌ 未登录，请先登录系统')
|
||
return
|
||
}
|
||
|
||
try {
|
||
// 测试设备列表 API
|
||
const response = await fetch('/api/v1/devices?network_id=1', {
|
||
headers: { 'Authorization': `Bearer ${token}` }
|
||
})
|
||
|
||
if (response.status === 404) {
|
||
console.error('❌ API 返回 404，检查网络 ID 是否正确')
|
||
} else if (response.status === 401) {
|
||
console.error('❌ Token 无效，请重新登录')
|
||
} else if (response.status === 200) {
|
||
const result = await response.json()
|
||
console.log('✅ API 调用成功')
|
||
console.log('📋 设备数量:', result.data?.length || 0)
|
||
if (result.data?.length > 0) {
|
||
console.log('📋 第一个设备:', result.data[0])
|
||
} else {
|
||
console.warn('⚠️ 该网络下没有设备')
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('❌ 请求失败:', error.message)
|
||
}
|
||
})()
|
||
```
|
||
|
||
---
|
||
|
||
## 📞 仍然无法解决？
|
||
|
||
请收集以下信息以便进一步诊断：
|
||
|
||
### 必需信息
|
||
|
||
1. **浏览器控制台完整日志**
|
||
- 包括所有 console.log 输出
|
||
- 任何错误信息
|
||
|
||
2. **Network 面板截图**
|
||
- 失败的请求详情
|
||
- 请求头和响应头
|
||
|
||
3. **后端服务日志**
|
||
```bash
|
||
# 如果在命令行运行，复制完整的输出
|
||
.\meshray.exe
|
||
|
||
# 或者查看日志文件（如果有）
|
||
Get-Content .\logs\*.log -Tail 50
|
||
```
|
||
|
||
4. **当前访问的 URL**
|
||
- 例如：`http://localhost:9531/networks/1`
|
||
|
||
### 可选信息
|
||
|
||
- 数据库中是否有网络和设备的截图
|
||
- 是否是首次安装使用
|
||
- 最近是否修改过配置文件
|
||
|
||
---
|
||
|
||
## ✅ 修复验证清单
|
||
|
||
完成修复后，按顺序检查以下项目：
|
||
|
||
- [ ] 后端服务正常启动（访问 `http://localhost:9531`）
|
||
- [ ] 能够成功登录系统
|
||
- [ ] 数据库中至少有一个网络
|
||
- [ ] 访问 `/networks/:id` 时控制台显示 `🔍 开始加载设备列表`
|
||
- [ ] 控制台显示具体的 networkId 值（不是 undefined）
|
||
- [ ] 控制台显示设备列表响应数据
|
||
- [ ] 页面正常显示设备列表
|
||
- [ ] Network 面板中请求状态为 200
|
||
|
||
---
|
||
|
||
*MeshRay | 数据获取问题修复 | v1.1*
|