一、本周工作本周是项目后端主导联调阶段核心目标是完成前后端接口全链路打通、数据一致性校验与功能闭环验证。结合分工我聚焦亮点分析、错误高亮、个性化学习页面与后端接口的深度联调解决跨端数据适配、状态同步、异常兜底三大核心问题确保所有功能 100% 可用、数据精准一致为后续前端优化筑牢基础。本周不再是单纯写页面而是深度参与前后端协同理解接口规范、数据流转逻辑完成从 “页面实现” 到 “功能闭环” 的过渡。二、核心工作进展1. 亮点分析模块全量接口联调修复数据适配问题本周核心是将亮点模块与后端 /api/essay/evaluate 评估接口完成全链路对接解决静态数据转真实接口后的字段不匹配、格式不一致、空值兜底问题。1接口字段适配与数据映射后端返回亮点数据包含highlightType、startOffset、endOffset、content、explanation五个关键字段我在前端统一数据映射逻辑确保字段精准对应避免渲染报错。核心映射逻辑如下function normalizeHighlight(raw: any): Highlight { return { id: raw.id || Date.now().toString(), // 生成唯一ID type: raw.highlightType || vocab, // 默认词汇类亮点 startOffset: Number(raw.startOffset) || 0, // 转数字兜底 endOffset: Number(raw.endOffset) || 0, content: raw.content || , // 空文本兜底 explanation: raw.explanation || 暂无赏析说明 }; }这段代码解决了后端字段大小写不一致、数值类型异常、空值缺失问题保证前端渲染稳定性避免因接口偶发异常导致页面崩溃。2高亮渲染逻辑优化联调中发现后端返回的字符偏移量存在换行符、特殊字符计算偏差导致亮点错位。我优化EssayViewer.vue渲染逻辑新增偏移量校正确保精准匹配 DOM 文本function correctOffset(textNodes: Text[], rawOffset: number): number { let corrected rawOffset; textNodes.forEach(node { const text node.textContent || ; // 校正换行、制表符等特殊字符偏移 corrected - (text.match(/[\n\t]/g) || []).length; }); return corrected; }通过校正亮点标注精准匹配原文位置与后端评估结果完全一致实现 “后端判定、前端精准呈现” 的闭环。2. 错误高亮系统联调校验保障数据一致性重点完成错误高亮模块与后端错误数据接口联调校验错误类型、位置、解释全链路一致性同时修复多错误叠加时的渲染冲突问题。1错误数据一致性校验逐篇测试不同作文的错误返回结果重点校验语法、用词、句法、逻辑四类错误分类精准度错误位置偏移量无偏差错误解释、修改建议完整无缺失 联调中发现 2 处字段遗漏问题同步反馈后端修复确保前后端错误数据一致。2多错误叠加渲染优化同一位置存在多个错误时原逻辑会出现高亮重叠、样式错乱。我优化渲染优先级语法错误 用词错误 句法错误 逻辑错误避免样式冲突.highlight--grammar { background: #ffebee; border-bottom: 2px solid #f44336; } .highlight--vocab { background: #fff3e0; border-bottom: 2px solid #ff9800; } .highlight--syntax { background: #e3f2fd; border-bottom: 2px solid #2196f3; } .highlight--logic { background: #e8f5e9; border-bottom: 2px solid #4caf50; }通过差异化样式 优先级控制多错误叠加时清晰区分、互不遮挡提升用户阅读体验。3. 个性化学习页面接口全通完成闭环验证完成 ProfilePage个人画像、NotebookPage错题本与后端/api/profile、/api/notebook接口全链路联调实现数据实时同步、异常兜底、状态联动。1个人画像数据联动ProfilePage 对接后端用户画像接口实时获取平均分、错误分布、学习路径数据修复历史分数数组空值、错误占比计算偏差问题。核心数据请求逻辑async function fetchProfile() { profileLoading.value true; errorMessage.value ; try { const { data } await http.getProfileResponse(/api/profile); profile.value data; } catch (error) { profile.value null; errorMessage.value normalizeHttpError(error, 获取画像失败); } finally { profileLoaded.value true; profileLoading.value false; } }新增异常兜底网络中断、接口报错时友好提示避免页面空白保障联调稳定性。2错题本全链路闭环NotebookPage 完成错题列表查询、筛选、详情查看、标记已复习全接口联调核心是状态实时同步标记复习后前端本地更新 后端同步无需重新请求全量数据提升响应速度。async markReviewed(id: string) { this.reviewActionState submitting; this.errorMessage ; try { await http.post(/api/notebook/items/${id}/review); // 本地更新状态无需重请求 this.items updateReviewedItem(this.items, id); this.summary buildSummary(this.items, this.summary); this.reviewActionState success; } catch (error) { this.reviewActionState error; this.errorMessage normalizeHttpError(error, 标记复习失败); } }联调验证新增作文→生成错误→加入错题本→标记复习→数据同步全流程无卡顿、无数据不一致功能闭环完成。三、核心问题与解决方案1. 接口超时 / 网络异常问题后端大模型评估耗时较长前端请求超时页面报错。解决复用http.ts全局请求配置延长超时时间至 120 秒新增网络状态监听离线时提示恢复网络避免用户困惑export const http axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL ?? http://localhost:8000, timeout: 120000, // 适配大模型长耗时 withCredentials: true });2. 数据格式不统一问题不同接口返回字段大小写、数据类型不一致前端渲染报错。解决统一assessmentStore、notebookStore数据归一化函数强制字段映射、类型转换、空值兜底适配后端多格式返回提升鲁棒性。3. 状态同步延迟问题标记错题复习、更新画像后页面数据不实时更新。解决使用 Pinia 状态管理修改数据后同步更新 store 状态依赖计算属性自动渲染无需手动刷新保证状态实时联动。四、本周工作成果亮点分析模块接口全通、数据精准、渲染无错位赏析完整错误高亮系统四类错误分类精准、位置无偏差、多错误叠加样式清晰个性化学习页面画像、错题本全接口联调数据实时同步、功能闭环异常兜底超时、断网、接口报错均友好提示无页面崩溃数据一致性所有模块前后端数据匹配符合联调要求五、本周感悟本周参与前后端联调真正理解接口规范、数据流转、异常兜底对系统稳定性的重要性。一个字段大小写、一个空值、一次超时都可能导致整个功能瘫痪严谨性是联调阶段的核心。同时状态管理的价值在本周体现得十分重要。Pinia统一管理全局数据避免组件间数据传递混乱联调时快速定位数据问题大幅提升协同效率。联调不仅是对接接口更是理解整个系统的业务逻辑为后续优化打下坚实基础。
山东大学软件学院项目实训进展记录7
一、本周工作本周是项目后端主导联调阶段核心目标是完成前后端接口全链路打通、数据一致性校验与功能闭环验证。结合分工我聚焦亮点分析、错误高亮、个性化学习页面与后端接口的深度联调解决跨端数据适配、状态同步、异常兜底三大核心问题确保所有功能 100% 可用、数据精准一致为后续前端优化筑牢基础。本周不再是单纯写页面而是深度参与前后端协同理解接口规范、数据流转逻辑完成从 “页面实现” 到 “功能闭环” 的过渡。二、核心工作进展1. 亮点分析模块全量接口联调修复数据适配问题本周核心是将亮点模块与后端 /api/essay/evaluate 评估接口完成全链路对接解决静态数据转真实接口后的字段不匹配、格式不一致、空值兜底问题。1接口字段适配与数据映射后端返回亮点数据包含highlightType、startOffset、endOffset、content、explanation五个关键字段我在前端统一数据映射逻辑确保字段精准对应避免渲染报错。核心映射逻辑如下function normalizeHighlight(raw: any): Highlight { return { id: raw.id || Date.now().toString(), // 生成唯一ID type: raw.highlightType || vocab, // 默认词汇类亮点 startOffset: Number(raw.startOffset) || 0, // 转数字兜底 endOffset: Number(raw.endOffset) || 0, content: raw.content || , // 空文本兜底 explanation: raw.explanation || 暂无赏析说明 }; }这段代码解决了后端字段大小写不一致、数值类型异常、空值缺失问题保证前端渲染稳定性避免因接口偶发异常导致页面崩溃。2高亮渲染逻辑优化联调中发现后端返回的字符偏移量存在换行符、特殊字符计算偏差导致亮点错位。我优化EssayViewer.vue渲染逻辑新增偏移量校正确保精准匹配 DOM 文本function correctOffset(textNodes: Text[], rawOffset: number): number { let corrected rawOffset; textNodes.forEach(node { const text node.textContent || ; // 校正换行、制表符等特殊字符偏移 corrected - (text.match(/[\n\t]/g) || []).length; }); return corrected; }通过校正亮点标注精准匹配原文位置与后端评估结果完全一致实现 “后端判定、前端精准呈现” 的闭环。2. 错误高亮系统联调校验保障数据一致性重点完成错误高亮模块与后端错误数据接口联调校验错误类型、位置、解释全链路一致性同时修复多错误叠加时的渲染冲突问题。1错误数据一致性校验逐篇测试不同作文的错误返回结果重点校验语法、用词、句法、逻辑四类错误分类精准度错误位置偏移量无偏差错误解释、修改建议完整无缺失 联调中发现 2 处字段遗漏问题同步反馈后端修复确保前后端错误数据一致。2多错误叠加渲染优化同一位置存在多个错误时原逻辑会出现高亮重叠、样式错乱。我优化渲染优先级语法错误 用词错误 句法错误 逻辑错误避免样式冲突.highlight--grammar { background: #ffebee; border-bottom: 2px solid #f44336; } .highlight--vocab { background: #fff3e0; border-bottom: 2px solid #ff9800; } .highlight--syntax { background: #e3f2fd; border-bottom: 2px solid #2196f3; } .highlight--logic { background: #e8f5e9; border-bottom: 2px solid #4caf50; }通过差异化样式 优先级控制多错误叠加时清晰区分、互不遮挡提升用户阅读体验。3. 个性化学习页面接口全通完成闭环验证完成 ProfilePage个人画像、NotebookPage错题本与后端/api/profile、/api/notebook接口全链路联调实现数据实时同步、异常兜底、状态联动。1个人画像数据联动ProfilePage 对接后端用户画像接口实时获取平均分、错误分布、学习路径数据修复历史分数数组空值、错误占比计算偏差问题。核心数据请求逻辑async function fetchProfile() { profileLoading.value true; errorMessage.value ; try { const { data } await http.getProfileResponse(/api/profile); profile.value data; } catch (error) { profile.value null; errorMessage.value normalizeHttpError(error, 获取画像失败); } finally { profileLoaded.value true; profileLoading.value false; } }新增异常兜底网络中断、接口报错时友好提示避免页面空白保障联调稳定性。2错题本全链路闭环NotebookPage 完成错题列表查询、筛选、详情查看、标记已复习全接口联调核心是状态实时同步标记复习后前端本地更新 后端同步无需重新请求全量数据提升响应速度。async markReviewed(id: string) { this.reviewActionState submitting; this.errorMessage ; try { await http.post(/api/notebook/items/${id}/review); // 本地更新状态无需重请求 this.items updateReviewedItem(this.items, id); this.summary buildSummary(this.items, this.summary); this.reviewActionState success; } catch (error) { this.reviewActionState error; this.errorMessage normalizeHttpError(error, 标记复习失败); } }联调验证新增作文→生成错误→加入错题本→标记复习→数据同步全流程无卡顿、无数据不一致功能闭环完成。三、核心问题与解决方案1. 接口超时 / 网络异常问题后端大模型评估耗时较长前端请求超时页面报错。解决复用http.ts全局请求配置延长超时时间至 120 秒新增网络状态监听离线时提示恢复网络避免用户困惑export const http axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL ?? http://localhost:8000, timeout: 120000, // 适配大模型长耗时 withCredentials: true });2. 数据格式不统一问题不同接口返回字段大小写、数据类型不一致前端渲染报错。解决统一assessmentStore、notebookStore数据归一化函数强制字段映射、类型转换、空值兜底适配后端多格式返回提升鲁棒性。3. 状态同步延迟问题标记错题复习、更新画像后页面数据不实时更新。解决使用 Pinia 状态管理修改数据后同步更新 store 状态依赖计算属性自动渲染无需手动刷新保证状态实时联动。四、本周工作成果亮点分析模块接口全通、数据精准、渲染无错位赏析完整错误高亮系统四类错误分类精准、位置无偏差、多错误叠加样式清晰个性化学习页面画像、错题本全接口联调数据实时同步、功能闭环异常兜底超时、断网、接口报错均友好提示无页面崩溃数据一致性所有模块前后端数据匹配符合联调要求五、本周感悟本周参与前后端联调真正理解接口规范、数据流转、异常兜底对系统稳定性的重要性。一个字段大小写、一个空值、一次超时都可能导致整个功能瘫痪严谨性是联调阶段的核心。同时状态管理的价值在本周体现得十分重要。Pinia统一管理全局数据避免组件间数据传递混乱联调时快速定位数据问题大幅提升协同效率。联调不仅是对接接口更是理解整个系统的业务逻辑为后续优化打下坚实基础。
