267 lines
5.4 KiB
Markdown
267 lines
5.4 KiB
Markdown
# MeshRay 前端数据获取问题排查指南
|
||
|
||
## 🎯 问题现象
|
||
|
||
前端页面无法获取数据，可能的原因和解决方法如下：
|
||
|
||
---
|
||
|
||
## 🔍 排查步骤
|
||
|
||
### 1️⃣ 检查服务是否正常启动
|
||
|
||
```bash
|
||
# 查看服务启动日志
|
||
.\meshray.exe
|
||
```
|
||
|
||
**正常输出**:
|
||
```
|
||
MeshRay v2.0.0 - Starting...
|
||
✅ 正在启动 MeshRay 服务进程...
|
||
🏠 MeshRay 启动成功，🌐 访问地址：http://localhost:9531
|
||
💡 提示：请在浏览器中打开上述地址访问管理面板
|
||
```
|
||
|
||
---
|
||
|
||
### 2️⃣ 检查数据库是否有数据
|
||
|
||
**方法 A: 通过 API 检查**
|
||
|
||
在浏览器访问：`http://localhost:9531/api/v1/networks`
|
||
|
||
- ✅ **如果有数据**: 返回 JSON 数组
|
||
- ❌ **如果无数据**: 需要先创建网络
|
||
|
||
**方法 B: 直接查看数据库文件**
|
||
|
||
数据库位置：`./data/meshray.db`
|
||
|
||
可以使用 SQLite 工具查看：
|
||
```sql
|
||
-- 查看网络列表
|
||
SELECT * FROM networks;
|
||
|
||
-- 查看设备列表
|
||
SELECT * FROM devices;
|
||
```
|
||
|
||
---
|
||
|
||
### 3️⃣ 检查浏览器控制台
|
||
|
||
按 `F12` 打开浏览器开发者工具，查看：
|
||
|
||
#### Console（控制台）
|
||
查找 JavaScript 错误：
|
||
```javascript
|
||
// 可能的错误示例
|
||
❌ TypeError: Cannot read property 'id' of undefined
|
||
❌ ReferenceError: route is not defined
|
||
```
|
||
|
||
#### Network（网络）
|
||
查看 API 请求状态：
|
||
|
||
**正常请求**:
|
||
```
|
||
Request URL: http://localhost:9531/api/v1/devices?network_id=1
|
||
Status: 200 OK
|
||
Response: {"data": [...]}
|
||
```
|
||
|
||
**错误情况**:
|
||
```
|
||
❌ Status: 404 Not Found
|
||
→ 路由配置问题
|
||
|
||
❌ Status: 401 Unauthorized
|
||
→ Token 过期或未登录
|
||
|
||
❌ Status: 500 Internal Server Error
|
||
→ 后端服务错误
|
||
|
||
❌ (failed) / pending
|
||
→ 后端服务未启动
|
||
```
|
||
|
||
---
|
||
|
||
### 4️⃣ 检查路由参数传递
|
||
|
||
在 Detail.vue 中添加调试代码：
|
||
|
||
```javascript
|
||
// 在 loadNetworkDetails 函数开头添加
|
||
console.log('🔍 当前路由参数:', route.params.id)
|
||
console.log('🔍 完整路由对象:', route)
|
||
```
|
||
|
||
**正常情况**:
|
||
```
|
||
🔍 当前路由参数：1
|
||
🔍 完整路由对象：{ params: { id: '1' }, ... }
|
||
```
|
||
|
||
**异常情况**:
|
||
```
|
||
🔍 当前路由参数：undefined
|
||
❌ 路由参数未正确传递
|
||
```
|
||
|
||
---
|
||
|
||
### 5️⃣ 测试 API 连通性
|
||
|
||
在浏览器控制台执行：
|
||
|
||
```javascript
|
||
// 测试健康检查
|
||
fetch('/api/v1/health')
|
||
.then(r => r.json())
|
||
.then(d => console.log('✅ 服务正常:', d))
|
||
.catch(e => console.error('❌ 服务异常:', e))
|
||
|
||
// 测试获取网络列表
|
||
fetch('/api/v1/networks', {
|
||
headers: {
|
||
'Authorization': 'Bearer ' + localStorage.getItem('token')
|
||
}
|
||
})
|
||
.then(r => r.json())
|
||
.then(d => console.log('📋 网络列表:', d))
|
||
.catch(e => console.error('❌ 获取失败:', e))
|
||
```
|
||
|
||
---
|
||
|
||
## 🛠️ 常见问题与解决
|
||
|
||
### 问题 1: 数据库为空
|
||
|
||
**症状**: 所有列表都显示为空
|
||
|
||
**解决**:
|
||
1. 访问 `/networks/create` 创建第一个网络
|
||
2. 或使用默认配置初始化
|
||
|
||
---
|
||
|
||
### 问题 2: Token 过期
|
||
|
||
**症状**:
|
||
- 页面跳转回登录页
|
||
- API 返回 401 错误
|
||
|
||
**解决**:
|
||
1. 清除浏览器缓存
|
||
2. 重新登录获取新 Token
|
||
|
||
---
|
||
|
||
### 问题 3: 路由参数丢失
|
||
|
||
**症状**:
|
||
- Detail 页面无法加载数据
|
||
- `route.params.id` 为 undefined
|
||
|
||
**解决**:
|
||
1. 检查是否正确访问 `/networks/:id` 路径
|
||
2. 确保从列表页点击跳转时携带了正确的 ID
|
||
|
||
---
|
||
|
||
### 问题 4: 前后端端口不一致
|
||
|
||
**症状**:
|
||
- 前端运行在 3000 端口（开发模式）
|
||
- 后端运行在 9531 端口
|
||
|
||
**解决**:
|
||
```bash
|
||
# 前端开发模式
|
||
cd web
|
||
npm run dev # 启动 Vite 开发服务器
|
||
|
||
# 后端生产模式
|
||
.\meshray.exe # 启动后端服务
|
||
```
|
||
|
||
**注意**: 开发模式下前端会代理到后端，确保代理配置正确
|
||
|
||
---
|
||
|
||
## 📊 验证清单
|
||
|
||
- [ ] 后端服务已启动（访问 http://localhost:9531）
|
||
- [ ] 数据库中至少有一个网络
|
||
- [ ] 已成功登录并获取 Token
|
||
- [ ] 浏览器控制台无 JavaScript 错误
|
||
- [ ] Network 面板显示 API 请求返回 200
|
||
- [ ] 路由参数 `route.params.id` 有正确的值
|
||
- [ ] API 响应中包含 `data` 字段
|
||
|
||
---
|
||
|
||
## 🎯 快速测试脚本
|
||
|
||
在浏览器控制台执行以下代码快速诊断：
|
||
|
||
```javascript
|
||
(async () => {
|
||
console.log('🔍 === MeshRay 健康检查 ===')
|
||
|
||
// 1. 检查服务
|
||
try {
|
||
const health = await fetch('/api/v1/health').then(r => r.json())
|
||
console.log('✅ 服务状态:', health)
|
||
} catch (e) {
|
||
console.error('❌ 服务未响应:', e)
|
||
return
|
||
}
|
||
|
||
// 2. 检查登录状态
|
||
const token = localStorage.getItem('token')
|
||
if (!token) {
|
||
console.warn('⚠️ 未登录，请先登录系统')
|
||
return
|
||
}
|
||
console.log('✅ 已登录，Token:', token.substring(0, 20) + '...')
|
||
|
||
// 3. 检查网络列表
|
||
try {
|
||
const networks = await fetch('/api/v1/networks', {
|
||
headers: { 'Authorization': `Bearer ${token}` }
|
||
}).then(r => r.json())
|
||
console.log('📋 网络数量:', networks.data?.length || 0)
|
||
if (networks.data?.length > 0) {
|
||
console.log('📋 第一个网络:', networks.data[0])
|
||
} else {
|
||
console.warn('⚠️ 数据库中无网络，请先创建')
|
||
}
|
||
} catch (e) {
|
||
console.error('❌ 获取网络列表失败:', e)
|
||
}
|
||
|
||
console.log('=== 检查完成 ===')
|
||
})()
|
||
```
|
||
|
||
---
|
||
|
||
## 📞 需要更多帮助？
|
||
|
||
如果以上方法都无法解决问题，请提供：
|
||
|
||
1. 浏览器控制台的完整错误信息
|
||
2. Network 面板中失败请求的详细信息
|
||
3. 后端服务的日志输出
|
||
4. 当前访问的 URL 路径
|
||
|
||
这样可以更快速地定位问题！
|
||
|
||
---
|
||
|
||
*MeshRay | 故障排查指南 | v1.0*
|