164 lines
3.5 KiB
Markdown
164 lines
3.5 KiB
Markdown
# 🚀 管理后台启动和修复指南
|
||
|
||
## 问题诊断结果
|
||
|
||
✅ **数据库**: 正常，有 7 个用户
|
||
✅ **后端 API**: 完全正常
|
||
❌ **管理后台**: 需要检查
|
||
|
||
## 立即执行的步骤
|
||
|
||
### 步骤 1: 启动管理后台
|
||
|
||
打开新的命令行窗口，执行：
|
||
|
||
```bash
|
||
cd admin
|
||
npm run dev
|
||
```
|
||
|
||
等待看到类似这样的输出：
|
||
```
|
||
VITE v4.x.x ready in xxx ms
|
||
|
||
➜ Local: http://localhost:3001/
|
||
➜ Network: use --host to expose
|
||
```
|
||
|
||
### 步骤 2: 打开浏览器测试
|
||
|
||
1. 打开浏览器访问: http://localhost:3001
|
||
|
||
2. 按 F12 打开开发者工具
|
||
|
||
3. 在 Console 标签中执行以下命令清除缓存：
|
||
```javascript
|
||
localStorage.clear();
|
||
console.log('✅ 缓存已清除');
|
||
location.reload();
|
||
```
|
||
|
||
### 步骤 3: 登录管理后台
|
||
|
||
使用以下凭据登录：
|
||
- **用户名**: admin
|
||
- **密码**: admin123
|
||
|
||
### 步骤 4: 查看调试信息
|
||
|
||
登录后，在浏览器 Console 中你应该能看到：
|
||
- 🚀 API Request 日志（显示请求详情）
|
||
- ✅ API Response 日志（显示响应数据）
|
||
- 如果有错误，会显示 ❌ API Error
|
||
|
||
### 步骤 5: 检查数据
|
||
|
||
如果登录成功：
|
||
1. 点击左侧菜单的"用户管理"
|
||
2. 应该能看到 7 个用户
|
||
3. 点击"数据统计"
|
||
4. 应该能看到：总用户数 7
|
||
|
||
## 如果还是看不到数据
|
||
|
||
### 检查 1: 查看 Console 日志
|
||
|
||
在浏览器 Console 中查找：
|
||
- ❌ 红色错误信息
|
||
- ⚠️ 黄色警告信息
|
||
- 🚀 API 请求是否发送
|
||
- ✅ API 响应是否成功
|
||
|
||
### 检查 2: 查看 Network 标签
|
||
|
||
1. 切换到 Network 标签
|
||
2. 刷新页面
|
||
3. 查找 `/api/v1/admin/users` 请求
|
||
4. 点击查看：
|
||
- Status: 应该是 200
|
||
- Response: 应该有用户数据
|
||
|
||
### 检查 3: 手动测试 API
|
||
|
||
在 Console 中执行：
|
||
|
||
```javascript
|
||
// 测试用户列表 API
|
||
fetch('/api/v1/admin/users?page=1&limit=20', {
|
||
headers: {
|
||
'Authorization': 'Bearer ' + localStorage.getItem('admin_token')
|
||
}
|
||
})
|
||
.then(r => r.json())
|
||
.then(d => {
|
||
console.log('📊 用户数据:', d);
|
||
if (d.data && d.data.users) {
|
||
console.log('✅ 找到', d.data.users.length, '个用户');
|
||
console.table(d.data.users);
|
||
}
|
||
})
|
||
.catch(e => console.error('❌ 错误:', e));
|
||
```
|
||
|
||
## 常见问题解决
|
||
|
||
### 问题: 端口被占用
|
||
|
||
如果看到 `Port 3001 is already in use`：
|
||
|
||
```bash
|
||
# Windows
|
||
netstat -ano | findstr :3001
|
||
taskkill /PID <进程ID> /F
|
||
|
||
# 或者修改端口
|
||
# 编辑 admin/vite.config.js，将 port: 3001 改为 port: 3002
|
||
```
|
||
|
||
### 问题: 依赖安装失败
|
||
|
||
```bash
|
||
cd admin
|
||
rm -rf node_modules package-lock.json
|
||
npm install
|
||
```
|
||
|
||
### 问题: Token 无效
|
||
|
||
在 Console 执行：
|
||
```javascript
|
||
localStorage.clear();
|
||
location.reload();
|
||
// 然后重新登录
|
||
```
|
||
|
||
### 问题: CORS 错误
|
||
|
||
确保：
|
||
1. 后端运行在 3000 端口
|
||
2. 管理后台运行在 3001 端口
|
||
3. vite.config.js 中的代理配置正确
|
||
|
||
## 使用测试工具
|
||
|
||
如果管理后台还是有问题，可以使用测试工具验证 API：
|
||
|
||
1. 用浏览器打开: `file:///你的项目路径/admin/test-api.html`
|
||
2. 点击"测试登录"
|
||
3. 点击"测试用户列表"
|
||
4. 查看是否能获取到数据
|
||
|
||
如果测试工具能获取数据，说明后端完全正常，问题在管理后台前端代码。
|
||
|
||
## 需要帮助？
|
||
|
||
如果以上步骤都无法解决，请提供：
|
||
|
||
1. 浏览器 Console 的完整日志（截图）
|
||
2. Network 标签中的 API 请求详情（截图）
|
||
3. 管理后台启动时的命令行输出
|
||
|
||
---
|
||
|
||
**提示**: 我已经在 `admin/src/utils/api.js` 中添加了详细的调试日志，现在每个 API 请求和响应都会在 Console 中显示。
|