第 5 周——诗词创作模块后端接口对接

前言本周承接上周前端基础建设主要开展诗词创作模块后端接口对接与基础功能联调工作。基于给定的接口规范完成了智能评分、AI 改写、多轮对话等核心功能的前后端数据打通实现了三栏联动的基础数据同步。目前核心流程可正常运行但界面样式较为基础部分交互细节有待打磨为下周创作模块界面专项优化做好了准备。一、本周核心任务对接创作模块 5 个核心后端接口替换全部前端模拟数据实现诗词提交评析、AI 改写、专属对话基础功能完成历史记录加载、查看与前端删除功能实现三栏联动数据同步与全局导航跳转修复联调过程中出现的数据解析、状态同步问题二、核心功能实现2.1 统一请求工具与 API 封装基于 Axios 封装统一请求工具集成 token 自动携带与基础错误处理按照后端接口规范封装创作模块所需的全部 API 函数。// src/utils/request.js import axios from axios import { ElMessage } from element-plus import router from /router const service axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL /api/poem/learn, timeout: 30000 // AI接口延长超时至30秒 }) // 请求拦截自动携带token service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) config.headers.Authorization Bearer ${token} return config }) // 响应拦截统一处理错误 service.interceptors.response.use( response response.data, error { if (error.response?.status 401) { ElMessage.error(登录已过期) localStorage.clear() router.push(/login) } else { ElMessage.error(error.response?.data?.message || 请求失败) } return Promise.reject(error) } ) export default service// src/api/index.js import request from /utils/request // 提交诗词进行智能评价 export const submitPoemForEvaluation (data) request({ url: /create, method: post, data }) // AI改写诗词 export const rewritePoem (data) request({ url: /rewrite, method: post, data }) // 获取用户会话列表 export const getConversations (userId) request({ url: /conversations, method: get, params: { userId } }) // 获取单个会话详情 export const getConversationDetail (conId) request({ url: /conversation/${conId}, method: get }) // 发送对话消息 export const conversation (data) request({ url: /conversation, method: post, data })2.2 三栏联动核心逻辑通过计算属性绑定当前选中的历史记录实现左中右三栏数据的自动同步这是整个创作页面的核心机制。script setup import { ref, computed, nextTick, onMounted } from vue import { useRouter } from vue-router import { ElMessage } from element-plus import { submitPoemForEvaluation, rewritePoem, getConversations, getConversationDetail, conversation } from /api/index const router useRouter() const userInfo JSON.parse(localStorage.getItem(userInfo) || {}) // 核心状态 const loading ref(false) const rewriting ref(false) const currentPoemTitle ref() const currentPoem ref() const currentActiveId ref(null) const inputMessage ref() const chatScrollRef ref(null) const historyList ref([]) // 【核心】三栏联动计算属性 const currentHistory computed(() { return historyList.value.find(item item.id currentActiveId.value) || null }) // 选择历史记录同步更新中栏和右栏 const selectHistory (item) { currentActiveId.value item.id currentPoemTitle.value item.title currentPoem.value item.poemText nextTick(() { chatScrollRef.value?.setScrollTop(99999) }) } // 页面加载时获取历史记录 onMounted(() { loadHistory() }) /script2.3 核心功能实现完成了诗词提交评析、AI 改写、多轮对话三大核心功能的前后端联调。// 提交诗词进行智能评析 const handleAnalyze async () { if (!currentPoemTitle.value.trim()) return ElMessage.warning(请输入诗词标题) if (!currentPoem.value.trim()) return ElMessage.warning(请先输入诗词内容) loading.value true try { const response await submitPoemForEvaluation({ userId: userInfo.userId || 1, title: currentPoemTitle.value, content: currentPoem.value }) if (response.code 200) { const newPoem response.data // 添加到历史记录 historyList.value.unshift({ id: newPoem.poemId, title: newPoem.title, createTime: new Date().toLocaleDateString(), poemText: newPoem.content, evaluation: newPoem.evaluation, score: newPoem.score, aiContent: newPoem.aiContent, aiExplain: newPoem.aiExplain, chatList: [{ role: ai, content: 已完成《${newPoem.title}》的智能评析评分${newPoem.score}分有任何问题都可以问我~ }], conId: newPoem.conId }) currentActiveId.value newPoem.poemId ElMessage.success(智能评析完成) // 清空输入框 currentPoemTitle.value currentPoem.value } } finally { loading.value false } } // AI改写当前诗词 const handleRewrite async () { if (!currentHistory.value) return rewriting.value true try { const response await rewritePoem({ poemId: currentHistory.value.id, userId: userInfo.userId || 1 }) if (response.code 200) { currentHistory.value.aiContent response.data.aiContent currentHistory.value.aiExplain response.data.aiExplain ElMessage.success(AI改写完成) } } finally { rewriting.value false } } // 发送对话消息 const sendChat async () { if (!inputMessage.value.trim() || !currentHistory.value) return const userContent inputMessage.value.trim() inputMessage.value // 先添加用户消息 currentHistory.value.chatList.push({ role: user, content: userContent }) nextTick(() chatScrollRef.value?.setScrollTop(99999)) try { const response await conversation({ userId: userInfo.userId || 1, poemId: currentHistory.value.id, conId: currentHistory.value.conId, message: { content: userContent, role: user } }) if (response.code 200) { currentHistory.value.chatList.push({ role: ai, content: response.data.latestMessage.content }) } } catch { currentHistory.value.chatList.push({ role: ai, content: 网络连接出现问题请检查网络后重试。 }) } finally { nextTick(() chatScrollRef.value?.setScrollTop(99999)) } }三、主要问题与解决会话与诗词数据分离存储后端将会话和诗词数据分开存储需要先获取会话列表再逐个查询详情。通过循环异步请求并转换为前端统一的数据结构解决了历史记录加载问题。AI 接口响应时间过长大模型接口平均响应时间 5-8 秒通过添加按钮加载状态、延长接口超时时间至 30 秒缓解了用户等待体验。数据格式不统一部分返回字段与前端预期不一致在数据处理阶段做了统一转换保证页面正常渲染。四、本周完成情况基本完成创作模块 5 个核心后端接口对接主要功能可正常使用三栏联动布局与数据同步基本实现点击历史记录可正确加载对应内容左上角 首页 切换 导航功能正常支持模块间快速跳转修复了 8 个主要的功能性 BUG存在问题界面样式较为基础部分交互反馈不够明显五、反思与不足前期与后端沟通不够充分导致数据转换工作量较大历史记录逐个加载的方式效率不高记录较多时可能影响加载速度对界面细节关注不足整体视觉效果比较粗糙缺乏设计感六、下周计划针对古诗词创作模块进行界面优化美化 AI 改写区域优化改写说明的排版与视觉层次调整对话界面的气泡样式、间距与字体大小提升阅读体验统一按钮、卡片、输入框等基础组件的样式与 hover / 点击反馈修复测试中发现的小问题提升页面整体质感