一、问题现象
在定时任务管理页面中，点击「Logs」按钮查看任务执行日志时，弹窗中没有任何数据显示，但后端接口返回正常。
二、排查过程
第一步：确认后端接口是否正常
打开浏览器开发者工具（F12），切换到 Network 选项卡，点击「Logs」按钮，查看请求：
请求 URL：
/scheduler/job/logs?jobId=46响应状态：
200 OK响应内容：
json
{ "status": 200, "message": "Successful", "data": { "logs": [ { "id": 47, "jobId": 46, "jobName": "bbb", "status": "0", "startTime": "2026-04-15T05:40:04.390+00:00", "endTime": "2026-04-15T05:40:37.430+00:00" } ] } }结论：后端接口正常，数据已返回。
第二步：在loadLogs方法中添加日志
在loadLogs方法中添加console.log打印响应数据：
javascript
async loadLogs() { console.log('=== 开始加载日志 ===') const res = await this.axios.get('/scheduler/job/logs', { params: { jobId: this.currentJob.id } }) console.log('完整响应:', res) console.log('res.data:', res.data) console.log('res.data.data:', res.data.data) // ... }控制台输出：
text
完整响应: {data: {…}, status: 200, ...} res.data: {status: 200, message: "Successful", data: {…}} res.data.data: {logs: Array(1)}结论：前端收到了数据，res.data.data是{logs: [...]}，不是数组。
第三步：检查前端解析逻辑
原有解析代码：
javascript
if (Array.isArray(data)) { this.logList = data } else if (data && data.list) { this.logList = data.list } else { this.logList = [] }问题发现：
后端返回的是
{ logs: [...] }前端只处理了
list字段，没有处理logs字段所以走了
else分支，logList被设为空数组
第四步：对比任务列表接口
任务列表接口/list返回的是{ list: [...] }，前端能正常显示。
对比：
| 接口 | 返回格式 | 前端处理 | 结果 |
|---|---|---|---|
/list | { list: [...] } | data.list | ✅ 正常 |
/logs | { logs: [...] } | 没有处理logs | ❌ 空白 |
三、解决方案
修改loadLogs方法，增加对logs字段的处理：
javascript
async loadLogs() { if (!this.currentJob) return this.logLoading = true try { const res = await this.axios.get('/scheduler/job/logs', { params: { jobId: this.currentJob.id, pageNum: this.logPageNum, pageSize: this.logPageSize } }) if (res.data && res.data.status === 200) { const data = res.data.data // 兼容多种返回格式 if (Array.isArray(data)) { this.logList = data this.logTotal = data.length } else if (data && data.list && Array.isArray(data.list)) { this.logList = data.list this.logTotal = data.total || data.list.length } else if (data && data.logs && Array.isArray(data.logs)) { // ✅ 新增：处理 logs 字段 this.logList = data.logs this.logTotal = data.total || data.logs.length } else { console.warn('未知的日志数据格式:', data) this.logList = [] this.logTotal = 0 } } } catch (err) { console.error(err) } finally { this.logLoading = false } }四、验证结果
修改后再次点击「Logs」按钮：
text
控制台输出: 日志加载成功，共 1 条 页面显示: 日志列表正常展示
五、问题根因总结
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 日志不显示 | 后端返回{ logs: [...] }，前端只处理了list | 增加对logs字段的处理 |
| 任务列表正常 | 后端返回{ list: [...] }，前端有处理 | - |
六、经验教训
前后端字段命名要统一：建议统一使用
list或data前端解析要兼容多种格式：不要假设只有一种返回格式
调试时善用 console.log：打印关键变量，快速定位问题
对比正常接口和异常接口：找出差异点
