114 lines
3.2 KiB
Markdown
114 lines
3.2 KiB
Markdown
# 消息中心前端加载问题调试步骤
|
||
|
||
## 问题描述
|
||
- 用户端消息中心页面空白（白屏）
|
||
- 消息详情页可以正常渲染
|
||
- 管理端消息管理页可以正常渲染
|
||
|
||
## 已完成的修改
|
||
|
||
### 1. 路由生成器添加调试日志
|
||
文件：`schoolNewsWeb/src/utils/route-generator.ts`
|
||
- 在 `generateRoutes()` 函数中添加了路由生成日志
|
||
- 在 `getComponent()` 函数中添加了组件加载日志
|
||
|
||
### 2. 添加分页容器样式
|
||
文件：`schoolNewsWeb/src/views/user/message/MyMessageListView.vue`
|
||
- 添加了 `.pagination-container` 样式
|
||
|
||
## 调试步骤
|
||
|
||
### 步骤1：重启前端开发服务器
|
||
```bash
|
||
cd f:\Project\schoolNews\schoolNewsWeb
|
||
npm run dev
|
||
```
|
||
|
||
### 步骤2：打开浏览器控制台
|
||
1. 打开浏览器（Chrome/Edge）
|
||
2. 按 F12 打开开发者工具
|
||
3. 切换到 Console（控制台）标签页
|
||
|
||
### 步骤3：访问消息中心页面
|
||
访问： `http://localhost:8080/schoolNewsWeb/user/message`
|
||
|
||
### 步骤4：查看控制台输出
|
||
查找以下日志：
|
||
- `[路由生成] 生成路由:` - 确认消息中心路由是否被生成
|
||
- `[路由生成] 尝试加载组件:` - 查看组件路径是否正确
|
||
- `[路由生成] 组件加载成功:` - 确认组件是否加载成功
|
||
- `[路由生成] 组件加载失败:` - 如果失败，查看详细错误信息
|
||
|
||
### 步骤5：检查网络请求
|
||
1. 切换到 Network（网络）标签页
|
||
2. 刷新页面
|
||
3. 查看是否有失败的请求
|
||
4. 特别关注 `/api/message/my/page` 接口的响应
|
||
|
||
## 可能的问题和解决方案
|
||
|
||
### 问题1：组件路径错误
|
||
**症状**：控制台显示 `[路由生成] 组件加载失败`
|
||
|
||
**解决方案**：
|
||
检查数据库中 `tb_sys_menu` 表的 `component` 字段：
|
||
```sql
|
||
SELECT menu_id, name, url, component
|
||
FROM tb_sys_menu
|
||
WHERE menu_id = 'menu_user_message_center';
|
||
```
|
||
|
||
应该是：`user/message/MyMessageListView`
|
||
|
||
### 问题2：API接口返回错误
|
||
**症状**：网络请求返回 4xx 或 5xx 错误
|
||
|
||
**解决方案**：
|
||
1. 检查后端服务是否正常运行
|
||
2. 检查用户是否已登录
|
||
3. 检查权限配置
|
||
|
||
### 问题3：组件导入错误
|
||
**症状**：控制台显示 `Cannot find module` 或类似错误
|
||
|
||
**解决方案**：
|
||
检查 `MessagePriorityBadge` 组件是否正确导出：
|
||
```typescript
|
||
// src/components/message/index.ts
|
||
export { default as MessagePriorityBadge } from './MessagePriorityBadge.vue';
|
||
```
|
||
|
||
### 问题4：数据为空但没有错误
|
||
**症状**：页面显示"暂无消息"，但实际数据库中有数据
|
||
|
||
**解决方案**：
|
||
1. 检查API返回的数据结构
|
||
2. 在 `MyMessageListView.vue` 的 `loadMessages()` 函数中添加 console.log
|
||
|
||
## 常见错误代码对照
|
||
|
||
### 路径转换示例
|
||
数据库配置：`user/message/MyMessageListView`
|
||
↓
|
||
添加前缀：`@/views/user/message/MyMessageListView`
|
||
↓
|
||
转换别名：`../views/user/message/MyMessageListView.vue`
|
||
↓
|
||
最终解析：`src/views/user/message/MyMessageListView.vue`
|
||
|
||
### 路由配置示例
|
||
```javascript
|
||
{
|
||
path: '/user/message',
|
||
name: 'menu_user_message_center',
|
||
component: () => import('../views/user/message/MyMessageListView.vue'),
|
||
meta: {
|
||
title: '消息中心',
|
||
requiresAuth: true
|
||
}
|
||
}
|
||
```
|
||
|
||
## 下一步操作
|
||
根据控制台输出的错误信息，确定具体问题后再进行针对性修复。
|