SpringBoot+Vue的古诗词学习微信小程序设计实现

温馨提示本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片1. 项目背景与意义古诗词是中华优秀传统文化的重要组成部分承载着丰富的历史底蕴与人文精神。随着移动互联网的普及越来越多的人希望通过便捷的方式学习和欣赏古诗词。微信小程序凭借其即用即走、无需下载安装、社交分享便捷等优势成为传统文化传播与学习的理想载体。本项目基于 SpringBoot 与 Vue 技术栈设计并实现一款古诗词学习微信小程序。后端采用 SpringBoot 提供稳定高效的接口服务前端使用 Vue 构建用户界面并通过微信小程序容器承载实现诗词浏览、搜索、收藏、背诵打卡、每日推荐等核心功能帮助用户在日常碎片化时间中轻松学习古诗词。2. 系统需求分析2.1 功能需求本系统面向普通用户和管理员两类角色主要功能需求如下用户端功能微信授权登录、诗词分类浏览、关键词搜索、诗词详情查看、收藏管理、背诵打卡、每日推荐、学习记录统计。管理端功能诗词内容管理、分类管理、用户管理、打卡数据统计、推荐位配置。2.2 非功能需求性能需求首页加载时间控制在 2 秒以内接口平均响应时间不超过 500 毫秒。安全需求用户敏感信息加密存储接口鉴权采用 Token 机制防止越权访问。易用性需求界面简洁友好操作路径清晰适配不同尺寸的移动设备。可维护性需求代码结构分层清晰接口文档规范便于后续功能扩展与维护。3. 系统总体设计3.1 系统架构设计系统采用前后端分离架构整体分为表现层、业务逻辑层和数据访问层三层结构。前端由 Vue 构建微信小程序页面通过 HTTP 请求与后端 SpringBoot 服务交互后端负责业务逻辑处理与数据持久化数据库采用 MySQL 存储业务数据Redis 用于缓存热点数据以提升访问性能。flowchart TD A[微信小程序前端 Vue] --|HTTPS 请求| B[SpringBoot 后端服务] B -- C[业务逻辑层 Service] C -- D[数据访问层 Mapper] D -- E[(MySQL 数据库)] C -- F[(Redis 缓存)] B -- G[微信接口服务]3.2 功能模块设计系统功能模块划分为用户模块、诗词模块、分类模块、收藏模块、打卡模块和推荐模块。用户模块负责微信登录与个人信息管理诗词模块提供诗词的增删改查与详情展示分类模块管理诗词的朝代、作者、题材等分类信息收藏模块支持用户收藏与取消收藏打卡模块记录用户的每日背诵情况推荐模块根据用户行为推送个性化诗词内容。3.3 数据库设计数据库主要包含用户表、诗词表、分类表、收藏表、打卡记录表和推荐配置表。诗词表存储标题、作者、朝代、正文、译文、赏析等核心字段用户表记录微信 OpenID、昵称、头像等信息收藏表与打卡记录表通过外键关联用户和诗词形成完整的数据关系模型。表名说明主要字段user用户表id、openid、nickname、avatar、create_timepoem诗词表id、title、author、dynasty、content、translation、appreciationcategory分类表id、name、type、sortfavorite收藏表id、user_id、poem_id、create_timecheckin打卡记录表id、user_id、poem_id、checkin_date4. 后端核心实现4.1 项目结构SpringBoot 后端采用标准分层结构包含 controller、service、mapper、entity、config 等包。controller 层负责接收前端请求并返回统一响应结果service 层封装业务逻辑mapper 层通过 MyBatis-Plus 操作数据库config 层配置跨域、拦截器、Redis 等组件。RestController RequestMapping(/api/poem) public class PoemController { Resource private PoemService poemService; GetMapping(/detail/{id}) public ResultPoemVO getPoemDetail(PathVariable Long id) { return Result.success(poemService.getPoemDetail(id)); } GetMapping(/list) public ResultPageResultPoemVO getPoemList(RequestParam Integer page, RequestParam Integer size, RequestParam(required false) Long categoryId) { return Result.success(poemService.getPoemList(page, size, categoryId)); } }4.2 微信登录实现用户首次进入小程序时前端调用 wx.login 获取临时凭证 code后端通过该 code 调用微信接口换取 OpenID 和 SessionKey并生成自定义登录态 Token 返回给前端。后续请求携带 Token由拦截器统一校验用户身份。Service public class WxAuthService { Value(${wx.appid}) private String appid; Value(${wx.secret}) private String secret; public LoginVO wxLogin(String code) { String url String.format( https://api.weixin.qq.com/sns/jscode2session?appid%ssecret%sjs_code%sgrant_typeauthorization_code, appid, secret, code); String result restTemplate.getForObject(url, String.class); JSONObject json JSON.parseObject(result); String openid json.getString(openid); // 查询或创建用户生成 Token 并返回 return buildLoginVO(openid); } }4.3 每日推荐算法每日推荐模块结合用户收藏记录与打卡历史采用基于标签的简单推荐策略。系统为每首诗词打上朝代、作者、题材等标签根据用户历史行为计算偏好权重从候选诗词中选取得分最高的若干首进行推荐并缓存到 Redis 中减少重复计算。5. 前端核心实现5.1 项目结构前端基于 Vue 3 与 uni-app 框架开发一套代码可编译运行到微信小程序平台。项目包含 pages、components、api、utils、store 等目录。pages 存放页面组件api 封装后端接口请求store 管理全局状态utils 提供通用工具函数。5.2 首页诗词列表首页展示推荐诗词列表支持下拉刷新与触底加载更多。页面通过封装好的 request 方法调用后端接口获取分页数据后渲染为卡片列表。诗词卡片展示标题、作者、朝代和正文摘要点击可进入详情页。export function getPoemList(params) { return request({ url: /api/poem/list, method: GET, data: params }) } // 页面中调用 const loadPoemList async () { const res await getPoemList({ page: pageNum, size: pageSize }) poemList.value [...poemList.value, ...res.data.records] }5.3 诗词详情与收藏详情页展示诗词正文、译文、赏析和作者信息并提供收藏与打卡按钮。用户点击收藏后调用后端接口写入收藏表再次点击可取消收藏。打卡功能记录用户当日背诵情况连续打卡天数在个人中心展示激励用户坚持学习。5.4 搜索与分类筛选搜索页面支持按诗词标题、作者和正文内容进行模糊搜索。分类页面按朝代、题材等维度展示分类列表用户选择分类后可查看对应诗词集合。搜索与筛选均通过后端接口完成前端负责参数传递与结果渲染。6. 系统测试6.1 测试环境系统测试在本地开发环境与微信开发者工具中完成。后端服务运行于本机 8080 端口数据库使用 MySQL 8.0缓存使用 Redis 6.0前端通过微信开发者工具模拟真机环境进行功能验证。6.2 功能测试针对用户登录、诗词浏览、搜索、收藏、打卡、每日推荐等核心功能编写测试用例验证各功能的正常流程与异常分支。测试结果表明系统各模块功能符合需求设计接口返回数据正确页面交互流畅。6.3 性能测试使用 JMeter 对核心接口进行并发压力测试模拟 100 个并发用户同时访问首页列表和诗词详情接口。测试结果显示接口平均响应时间约为 300 毫秒错误率为 0满足系统性能需求。7. 总结与展望本项目设计并实现了一款基于 SpringBoot 与 Vue 的古诗词学习微信小程序覆盖诗词浏览、搜索、收藏、背诵打卡和每日推荐等核心功能为用户提供了便捷的诗词学习体验。系统采用前后端分离架构代码结构清晰接口规范具备良好的可扩展性与可维护性。后续可在以下方向继续优化引入更智能的个性化推荐算法提升推荐精准度增加诗词朗读音频与配乐功能丰富学习形式开发社区互动模块支持用户分享学习心得与诗词创作完善管理后台的数据可视化统计辅助运营决策。