148 lines
3.9 KiB
Markdown
148 lines
3.9 KiB
Markdown
# 聊天记录调试指南
|
||
|
||
## 问题总结
|
||
|
||
1. **Controller层优化完成**：
|
||
- 移除了业务逻辑，业务代码移到Service层
|
||
- 使用专门的Request和Response DTO
|
||
- 统一使用Result返回格式
|
||
|
||
2. **前端调用问题修复**：
|
||
- 添加了缺失的`useUserStore`导入
|
||
- 修正了API调用方法（搜索和最近消息改为POST）
|
||
|
||
## 调试步骤
|
||
|
||
### 1. 检查前端基础环境
|
||
在浏览器控制台运行：
|
||
```javascript
|
||
// 检查token
|
||
console.log('Token:', localStorage.getItem('token'))
|
||
|
||
// 检查用户信息
|
||
console.log('User store:', window.Vue?.config?.globalProperties?.$stores?.user)
|
||
|
||
// 检查API基础配置
|
||
console.log('API Base URL:', 'http://localhost:8080') // 根据实际情况修改
|
||
```
|
||
|
||
### 2. 手动测试API调用
|
||
在浏览器控制台运行：
|
||
```javascript
|
||
// 测试获取用户消息分页
|
||
fetch('/message/user/page?current=1&size=5', {
|
||
headers: {
|
||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||
'Content-Type': 'application/json'
|
||
}
|
||
})
|
||
.then(res => res.json())
|
||
.then(data => console.log('分页API结果:', data))
|
||
.catch(err => console.error('分页API错误:', err))
|
||
|
||
// 测试搜索消息
|
||
fetch('/message/user/search', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({ keyword: '测试', limit: 5 })
|
||
})
|
||
.then(res => res.json())
|
||
.then(data => console.log('搜索API结果:', data))
|
||
.catch(err => console.error('搜索API错误:', err))
|
||
|
||
// 测试获取最近消息
|
||
fetch('/message/user/recent', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({ limit: 5 })
|
||
})
|
||
.then(res => res.json())
|
||
.then(data => console.log('最近消息API结果:', data))
|
||
.catch(err => console.error('最近消息API错误:', err))
|
||
```
|
||
|
||
### 3. 检查聊天记录按钮事件
|
||
在聊天页面控制台运行：
|
||
```javascript
|
||
// 查找聊天记录按钮
|
||
const historyButton = document.querySelector('.header-right .action-btn')
|
||
console.log('聊天记录按钮:', historyButton)
|
||
|
||
// 检查点击事件
|
||
if (historyButton) {
|
||
historyButton.addEventListener('click', () => {
|
||
console.log('聊天记录按钮被点击')
|
||
})
|
||
}
|
||
|
||
// 检查抽屉状态
|
||
const drawer = document.querySelector('.history-drawer')
|
||
console.log('聊天记录抽屉:', drawer)
|
||
```
|
||
|
||
### 4. 检查Vue组件状态
|
||
在聊天页面控制台运行：
|
||
```javascript
|
||
// 检查Vue实例
|
||
const app = document.querySelector('#app').__vue__
|
||
console.log('Vue app:', app)
|
||
|
||
// 检查聊天记录相关的响应式数据
|
||
console.log('showHistory:', app?.setupState?.showHistory?.value)
|
||
console.log('historyMessages:', app?.setupState?.historyMessages?.value)
|
||
console.log('historyLoading:', app?.setupState?.historyLoading?.value)
|
||
```
|
||
|
||
## 常见问题排查
|
||
|
||
### 1. Token问题
|
||
- 检查localStorage中是否有token
|
||
- 检查token是否过期
|
||
- 检查token格式是否正确
|
||
|
||
### 2. 网络请求问题
|
||
- 检查浏览器Network面板
|
||
- 检查是否有CORS错误
|
||
- 检查API路径是否正确
|
||
|
||
### 3. 后端认证问题
|
||
- 检查后端日志中的认证信息
|
||
- 检查UserContextHolder是否正确设置
|
||
- 检查CurrentUserUtil.requireCurrentUserId()是否抛出异常
|
||
|
||
### 4. 前端组件问题
|
||
- 检查Vue组件是否正确挂载
|
||
- 检查响应式数据是否正确初始化
|
||
- 检查事件绑定是否正确
|
||
|
||
## 修复后的API接口
|
||
|
||
### 后端接口
|
||
- `GET /message/user/page` - 获取用户消息分页
|
||
- `POST /message/user/search` - 搜索用户消息
|
||
- `POST /message/user/recent` - 获取用户最近消息
|
||
|
||
### 前端调用
|
||
```javascript
|
||
// 获取分页消息
|
||
messageApi.getUserMessages(1, 20)
|
||
|
||
// 搜索消息
|
||
messageApi.searchUserMessages('关键词', 50)
|
||
|
||
// 获取最近消息
|
||
messageApi.getRecentMessages(10)
|
||
```
|
||
|
||
## 预期结果
|
||
- 点击聊天记录按钮后，抽屉正常打开
|
||
- 控制台显示API调用日志
|
||
- 聊天记录正确加载和显示
|
||
- 搜索功能正常工作
|