当前位置：首页 > news >正文

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

news 2026/6/1 5:25:14

前言

本周承接上周前端基础建设，主要开展诗词创作模块后端接口对接与基础功能联调工作。基于给定的接口规范，完成了智能评分、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() }) </script>

2.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 秒，缓解了用户等待体验。
数据格式不统一：部分返回字段与前端预期不一致，在数据处理阶段做了统一转换，保证页面正常渲染。