SpringBoot+Vue构建古诗词全栈平台的技术实践

1. 项目背景与核心价值

古诗词作为中华文化瑰宝，其数字化学习平台的建设一直存在两个痛点：一是传统系统多采用单体架构，难以应对高并发访问；二是前端交互体验呆板，缺乏沉浸式学习环境。我们这个基于SpringBoot+Vue的3krsp-vue系统，正是针对这些问题提出的全栈解决方案。

从技术选型来看，后端采用SpringBoot 2.7.x版本（避免最新版的兼容性问题），前端使用Vue 3组合式API，形成了前后端分离的现代化架构。实测表明，这种组合在诗词图片加载、注解交互等场景下，比传统JSP方案响应速度提升40%以上。

提示：选择SpringBoot 2.7.x而非3.x版本，主要考虑社区生态成熟度。目前主流中间件如MyBatis-Plus、Redis客户端对SpringBoot 3的适配仍存在部分兼容性问题。

2. 系统架构设计解析

2.1 后端技术栈实现

采用经典的三层架构设计，但针对诗词业务做了特殊优化：

• DAO层：MyBatis-Plus + PageHelper分页插件
• Service层：诗词检索使用HanLP分词（需特别配置词典路径）

java复制// HanLP自定义词典配置示例
public class HanLPConfig {
    @PostConstruct
    public void init(){
        String dictPath = ResourceUtils.getFile("classpath:dict").getPath();
        CustomDictionary.addDictionary(dictPath + "/poetry.txt"); 
    }
}

• Controller层：统一异常处理（包含诗词格式校验）

2.2 前端交互方案

Vue3的组合式API大幅简化了复杂交互的实现：

• 诗词播放器：使用vue-aplayer插件支持m3u8格式音频
• 注解系统：Intersection Observer API实现滚动触发注解
• 移动端适配：vw+rem动态布局方案

3. 核心功能实现细节

3.1 诗词检索系统

采用Elasticsearch 7.x构建倒排索引，配合IK分词器实现：

• 多字段联合搜索（标题/作者/正文）
• 相似诗词推荐（基于TF-IDF向量）
• 检索响应时间控制在200ms内

json复制// ES索引映射示例
{
  "properties": {
    "content": {
      "type": "text",
      "analyzer": "ik_max_word",
      "search_analyzer": "ik_smart"
    }
  }
}

3.2 学习进度同步

WebSocket实现多端同步的难点在于：

1. 移动端网络不稳定时的重连策略
2. 冲突解决（最后修改者优先）
3. 数据压缩（protobuf编码）

4. 安全防护方案

4.1 内容安全防护

• 富文本过滤：Jsoup白名单机制
• 文件上传：PDF/XSS双重检测

java复制// PDF校验示例
public boolean isSafePdf(MultipartFile file) {
    try (PDDocument doc = PDDocument.load(file.getInputStream())){
        return doc.getDocumentCatalog()
                 .getAcroForm() == null; // 禁止表单
    }
}

4.2 接口安全设计

• 签名机制：诗词API使用HMAC-SHA256
• 频控策略：Redis令牌桶算法
• 敏感操作：二次验证（诗词删除等）

5. 部署优化实践

5.1 性能调优

• JVM参数：G1垃圾回收器配置
• 静态资源：Nginx动静分离+Broti压缩
• 缓存策略：Redis多级缓存（诗词热点数据）

5.2 容器化方案

Docker Compose编排要点：

yaml复制services:
  app:
    image: openjdk:11-jre
    environment:
      - SPRING_PROFILES_ACTIVE=prod
    deploy:
      resources:
        limits:
          cpus: '2'
          memory: 2G

6. 典型问题排查实录

6.1 Vue路由缓存问题

诗词详情页使用keep-alive后，发现el-table滚动位置异常。解决方案：

vue复制<router-view v-slot="{ Component }">
  <keep-alive :exclude="['PoetryDetail']">
    <component :is="Component" :key="$route.fullPath" />
  </keep-alive>
</router-view>

6.2 MyBatis批量插入性能

初期使用foreach标签批量插入500首诗词耗时8秒，优化方案：

1. 开启rewriteBatchedStatements=true
2. 采用ExecutorType.BATCH模式
3. 分批次提交（每100条commit一次）

实测优化后耗时降至0.5秒。

7. 扩展功能开发建议

7.1 诗词AI辅助创作

集成GPT-3.5 API时需注意：

• 温度参数控制在0.7-0.9之间
• 添加风格约束（如"模仿李白风格"）
• 结果人工审核机制

7.2 社交化学习

• 弹幕系统：WebSocket+Redis发布订阅
• 共读功能：协同光标定位技术
• 成就系统：基于AOP的注解式埋点

在实现横向胶片轮播时，发现swiper.js在移动端存在触摸冲突。最终采用touch-action: pan-y CSS属性配合passive事件监听器解决。这个案例告诉我们，前端特效实现不能只考虑视觉效果，更要重视底层事件机制的协调性。