happy-life-star/debug-chat-history.md

聊天记录调试指南

问题总结

1. Controller层优化完成：

   • 移除了业务逻辑，业务代码移到Service层
   • 使用专门的Request和Response DTO
   • 统一使用Result返回格式

2. 前端调用问题修复：

   • 添加了缺失的useUserStore导入
   • 修正了API调用方法（搜索和最近消息改为POST）

调试步骤

1. 检查前端基础环境

在浏览器控制台运行：

// 检查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调用

在浏览器控制台运行：

// 测试获取用户消息分页
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. 检查聊天记录按钮事件

在聊天页面控制台运行：

// 查找聊天记录按钮
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组件状态

在聊天页面控制台运行：

// 检查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 - 获取用户最近消息

前端调用

// 获取分页消息
messageApi.getUserMessages(1, 20)

// 搜索消息
messageApi.searchUserMessages('关键词', 50)

// 获取最近消息
messageApi.getRecentMessages(10)

预期结果

• 点击聊天记录按钮后，抽屉正常打开
• 控制台显示API调用日志
• 聊天记录正确加载和显示
• 搜索功能正常工作