写Python的小哥哥1. 项目背景与核心价值
古诗词作为中华文化瑰宝，其学习方式正经历从纸质书籍到数字化平台的转型。这个毕业设计项目采用SpringAI+SpringBoot+Vue3技术栈，构建了一个智能化的古诗词学习平台。我在实际开发中发现，传统诗词学习网站往往存在三个痛点：内容呈现单一、缺乏个性化推荐、互动体验薄弱。而通过引入SpringAI的NLP能力，我们实现了诗句自动补全、风格仿写等特色功能。
从技术选型角度看，SpringBoot提供了稳定的后端服务基础，Vue3的Composition API让前端组件开发更高效，而SpringAI则是项目的智能化核心。这种技术组合既保证了系统稳定性，又具备足够的技术前瞻性，非常适合作毕业设计的技术展示。
提示：选择SpringAI而非直接调用大模型API，既能降低开发复杂度，又可以通过Spring生态的统一接口灵活切换底层AI服务
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 系统架构设计解析
2.1 技术栈选型依据
后端采用SpringBoot 3.2.x版本，主要基于以下考虑：
- 内嵌Tomcat服务器简化部署
- Starter依赖机制快速集成MyBatis-Plus、Redis等组件
- Actuator端点便于监控管理
前端选择Vue3的组合式API开发模式，相比Vue2具有：
- 更好的TypeScript支持
- 更灵活的逻辑复用能力
- 更小的打包体积
SpringAI作为AI能力中间层，其核心优势在于：
- 统一接口支持多种AI模型（OpenAI/Azure/本地模型）
- 自动处理prompt工程和结果解析
- 与SpringSecurity天然集成
2.2 系统模块划分
系统采用经典的三层架构：
code复制├── 前端模块（Vue3）
│ ├── 用户门户
│ ├── 管理后台
│ └── 移动适配层
├── 后端模块（SpringBoot）
│ ├── 业务逻辑层
│ ├── 数据访问层
│ └── API接口层
└── AI服务模块（SpringAI）
├── 自然语言处理
├── 推荐算法
└── 知识图谱
数据库设计特别注意诗词关系的表达：
sql复制CREATE TABLE poem (
id BIGINT PRIMARY KEY,
title VARCHAR(100) NOT NULL,
author_id BIGINT,
dynasty VARCHAR(20),
content TEXT,
full_text_vector VECTOR(1536) -- 用于相似度检索
);
3. 核心功能实现细节
3.1 智能问答模块
通过SpringAI的ChatClient实现：
java复制@RestController
@RequestMapping("/api/ai")
public class AIController {
private final ChatClient chatClient;
public String askAboutPoem(@RequestParam String question) {
PromptTemplate template = new PromptTemplate("""
你是一位古诗词专家，请用中文回答以下问题。
问题：{question}
回答时要引经据典，给出具体诗句例子。""");
Prompt prompt = template.create(Map.of("question", question));
return chatClient.call(prompt).getResult().getOutput().getContent();
}
}
3.2 诗词推荐算法
结合协同过滤和内容相似度：
- 使用SpringAI EmbeddingClient生成诗词向量
- 基于FAISS实现近似最近邻搜索
- 混合用户历史行为数据优化结果
java复制public List<Poem> recommendPoems(Long userId) {
// 获取用户最近浏览的诗词向量
float[] userVector = getUserRecentVector(userId);
// 混合推荐
return searchService.hybridSearch(userVector,
SearchType.CONTENT_BASED,
SearchType.COLLABORATIVE);
}
3.3 前端交互优化
利用Vue3的Transition组件实现诗词卡片动画：
vue复制<template>
<Transition name="fade" mode="out-in">
<PoemCard
v-if="showCard"
:poem="currentPoem"
@next="fetchNextPoem"
/>
</Transition>
</template>
<style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
</style>
4. 开发中的典型问题与解决方案
4.1 SpringAI模型响应慢
问题现象：AI接口平均响应时间超过5秒
排查过程：
- 使用Arthas追踪调用链路
- 发现90%时间消耗在HTTP请求上
- 确认是默认超时设置不合理
解决方案：
yaml复制spring:
ai:
openai:
chat:
options:
temperature: 0.7
timeout: 10s
4.2 Vue3组件重复渲染
问题现象：诗词列表切换时出现闪烁
根本原因：v-for的key使用数组索引而非稳定ID
正确做法：
vue复制<PoemItem
v-for="poem in poems"
:key="poem.id" <!-- 使用数据库ID -->
:poem="poem"
/>
4.3 跨域问题处理
后端需配置：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:5173")
.allowedMethods("*")
.allowCredentials(true);
}
}
5. 项目部署与优化实践
5.1 生产环境配置
使用Docker Compose部署：
yaml复制version: '3.8'
services:
backend:
image: openjdk:17-jdk
ports:
- "8080:8080"
environment:
- SPRING_PROFILES_ACTIVE=prod
frontend:
image: nginx:alpine
ports:
- "80:80"
volumes:
- ./dist:/usr/share/nginx/html
5.2 性能优化措施
- 前端：
- 使用Vite代替Webpack
- 按需引入Element Plus组件
- 配置路由懒加载
- 后端：
- 添加Spring Cache注解
- 启用GZIP压缩
- 配置连接池参数
properties复制# application-prod.properties
spring.datasource.hikari.maximum-pool-size=20
server.compression.enabled=true
6. 扩展功能与未来方向
在实际开发中，我尝试扩展了几个增值功能：
- 诗词OCR识别：整合Tesseract实现拍照识诗
java复制public String recognizePoem(MultipartFile image) {
// 图像预处理
BufferedImage processed = ImageHelper.preprocess(image);
// OCR识别
return tesseract.doOCR(processed);
}
- 语音朗读：使用Web Speech API
javascript复制function speak(text) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
speechSynthesis.speak(utterance);
}
- 学习进度可视化：
- 使用ECharts生成学习曲线
- 基于LocalStorage保存用户进度
对于想要进一步开发的同学，建议考虑：
- 增加社交功能（诗友圈）
- 开发微信小程序版本
- 引入更精细的用户画像系统