zkcoi/Meshray-Manager

Fork 0

Files

T

zkcoi 15dab96872 Initial commit

2026-06-30 15:14:37 +08:00

6.0 KiB

Raw Blame History

MeshRay 数据获取问题修复说明

✅ 已完成的修复

1. 添加调试日志

在 web/src/views/Networks/Detail.vue 的 loadDevices 函数中添加了详细的调试日志：

console.log('🔍 开始加载设备列表，networkId:', route.params.id)
console.log('📋 设备列表响应:', res)
console.log('✅ 设备数量:', allDevices.value.length)

2. 重新编译前端

cd web
npm run build
# ✅ built in 13.55s

🔍 问题诊断步骤

第一步：访问应用并查看调试信息

打开浏览器 (推荐使用 Chrome/Edge)
访问: http://localhost:9531
按 F12 打开开发者工具
切换到 Console（控制台）标签页
导航到网络详情页 (/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

原因: 路由参数未正确传递

解决:

检查 URL 是否为 /networks/1 格式
确认从列表页点击跳转时携带了正确的 ID
刷新页面或重新进入

❌ 情况 C：API 请求失败

🔍 开始加载设备列表，networkId: 1
❌ Network Error: Request failed with status code 404

原因: 后端服务未启动或 API 路径错误

解决:

确认后端服务已启动：.\meshray.exe
检查 API 路径是否正确
查看 Network 面板中的详细请求信息

❌ 情况 D：返回数据为空数组

🔍 开始加载设备列表，networkId: 1
📋 设备列表响应：{data: []}
✅ 设备数量：0

原因: 该网络下还没有设备

解决:

这是正常现象
在该网络下创建设备即可
或检查是否选择了正确的网络 ID

🛠️ 常用排查命令

检查后端服务状态

# 查看服务是否在运行
Get-Process meshray -ErrorAction SilentlyContinue

# 测试健康检查接口
curl http://localhost:9531/api/v1/health

检查数据库数据

-- 使用 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:

按 Ctrl+Shift+Delete
选择"缓存的图像和文件"
点击"清除数据"
刷新页面 (F5)

📊 Network 面板调试技巧

1. 找到设备列表请求

在 Network 面板中搜索：devices

应该能看到：

GET /api/v1/devices?network_id=1
Status: 200 OK

2. 检查请求详情

Headers（请求头）:

Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Response（响应）:

{
  "data": [
    {
      "id": 1,
      "name": "Device-1",
      "status": "online",
      ...
    }
  ]
}

3. 常见错误码

状态码	含义	解决方法
200	成功	✅ 正常
401	未授权	重新登录
404	资源不存在	检查网络 ID
500	服务器错误	查看后端日志
(failed)	网络错误	检查服务是否启动

🎯 快速验证脚本

在浏览器控制台执行以下代码，自动诊断问题：

// === 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)
  }
})()

📞 仍然无法解决？

请收集以下信息以便进一步诊断：

必需信息

浏览器控制台完整日志
- 包括所有 console.log 输出
- 任何错误信息
Network 面板截图
- 失败的请求详情
- 请求头和响应头

后端服务日志

# 如果在命令行运行，复制完整的输出
.\meshray.exe

# 或者查看日志文件（如果有）
Get-Content .\logs\*.log -Tail 50

当前访问的 URL
- 例如：http://localhost:9531/networks/1

可选信息

数据库中是否有网络和设备的截图
是否是首次安装使用
最近是否修改过配置文件

✅ 修复验证清单

完成修复后，按顺序检查以下项目：

后端服务正常启动（访问 http://localhost:9531）
能够成功登录系统
数据库中至少有一个网络
访问 /networks/:id 时控制台显示 🔍 开始加载设备列表
控制台显示具体的 networkId 值（不是 undefined）
控制台显示设备列表响应数据
页面正常显示设备列表
Network 面板中请求状态为 200

MeshRay | 数据获取问题修复 | v1.1

6.0 KiB Raw Blame History Unescape Escape