1. 项目背景与意义非物质文化遗产是中华民族悠久历史和灿烂文化的重要组成部分承载着丰富的民族记忆与文化基因。然而随着现代化进程的加快许多非遗项目面临传承人老龄化、传播渠道单一、年轻受众关注度不足等现实困境。传统的口传心授与线下展示方式难以满足当代大众尤其是青年群体对文化内容便捷获取、沉浸体验和互动参与的需求。在此背景下借助互联网与信息技术构建非遗文化学习系统具有重要的现实意义。一方面系统能够将分散的非遗资源进行数字化整合与系统化呈现降低公众接触非遗的文化门槛另一方面通过在线学习、互动交流与成果展示等功能能够有效激发年轻一代对非遗的兴趣与认同助力非遗文化的活态传承与创新传播。2. 系统需求分析2.1 功能需求本系统面向普通用户和管理员两类角色核心功能需求如下用户端注册登录、非遗项目浏览与检索、非遗课程在线学习、学习进度记录、个人收藏、评论互动、个人中心等。管理端非遗项目管理、课程内容管理、用户管理、评论审核、数据统计等。2.2 非功能需求性能系统应支持多用户并发访问页面响应时间控制在合理范围内。安全用户密码需加密存储接口需进行权限校验防止未授权访问。可维护性前后端分离架构模块化设计便于后续功能扩展与维护。3. 系统技术栈本系统采用前后端分离的开发模式具体技术选型如下层次技术选型说明前端框架Vue.js 3渐进式前端框架配合组件化开发提升页面复用性前端构建Vite新一代前端构建工具开发热更新快打包效率高UI 组件库Element Plus基于 Vue 3 的桌面端组件库提供丰富的业务组件状态管理PiniaVue 3 官方推荐的状态管理方案轻量且易于使用路由管理Vue Router 4前端路由管理支持动态路由与路由守卫HTTP 请求Axios基于 Promise 的 HTTP 客户端统一封装请求与响应拦截后端框架Spring Boot 2.7简化 Spring 应用搭建与配置内嵌 Tomcat 服务器持久层框架MyBatis-Plus增强 MyBatis 功能提供通用 CRUD、分页与条件构造器数据库MySQL 8.0开源关系型数据库存储业务数据权限认证Spring Security JWT实现用户认证与接口授权无状态令牌机制接口文档Knife4j基于 Swagger 的增强接口文档工具便于前后端联调4. 系统架构设计系统整体采用前后端分离的 B/S 架构前端通过 Axios 发送 HTTP 请求访问后端 RESTful API后端基于 Spring Boot 提供业务接口并通过 MyBatis-Plus 与 MySQL 数据库进行数据交互。系统架构图如下flowchart TD A[浏览器 Vue 前端] --|HTTP JSON| B[Nginx 反向代理] B -- C[Spring Boot 后端] C -- D[Service 业务层] D -- E[MyBatis-Plus Mapper] E -- F[(MySQL 数据库)] C -- G[JWT 认证与权限拦截]4.1 后端分层结构后端采用经典的三层架构各层职责明确Controller 层接收前端请求进行参数校验调用 Service 层处理业务返回统一响应结果。Service 层封装核心业务逻辑如用户认证、课程学习进度管理、评论审核等。Mapper 层基于 MyBatis-Plus 提供数据库访问能力支持自定义 SQL 与分页查询。5. 数据库设计系统核心数据表包括用户表、非遗项目表、课程表、学习记录表、收藏表、评论表等。以下为主要表结构设计5.1 用户表 user字段名类型说明idbigint主键自增usernamevarchar(50)用户名唯一passwordvarchar(255)密码BCrypt 加密存储nicknamevarchar(50)昵称avatarvarchar(255)头像地址roletinyint角色0 普通用户1 管理员create_timedatetime创建时间5.2 非遗项目表 heritage字段名类型说明idbigint主键自增namevarchar(100)非遗项目名称categoryvarchar(50)所属类别如传统技艺、民间文学等regionvarchar(100)所属地区introductiontext项目简介cover_imagevarchar(255)封面图片地址statustinyint状态0 下架1 上架5.3 课程表 course字段名类型说明idbigint主键自增heritage_idbigint关联非遗项目 idtitlevarchar(100)课程标题contenttext课程图文内容video_urlvarchar(255)课程视频地址sort_orderint排序号6. 核心功能实现6.1 后端统一响应结果封装为保证前后端接口数据格式统一后端定义通用响应类 Result包含状态码、提示信息和数据三部分Data public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(操作成功); result.setData(data); return result; } public static T ResultT error(String message) { ResultT result new Result(); result.setCode(500); result.setMessage(message); return result; } }6.2 用户登录认证实现系统采用 JWT 实现无状态登录认证。用户登录成功后后端生成令牌返回前端前端在后续请求中携带令牌由拦截器统一校验。核心代码如下Service public class UserServiceImpl implements UserService { Autowired private UserMapper userMapper; Autowired private PasswordEncoder passwordEncoder; Override public String login(String username, String password) { // 根据用户名查询用户 User user userMapper.selectOne( new LambdaQueryWrapperUser() .eq(User::getUsername, username) ); if (user null) { throw new RuntimeException(用户不存在); } // 校验密码 if (!passwordEncoder.matches(password, user.getPassword())) { throw new RuntimeException(用户名或密码错误); } // 生成 JWT 令牌 return JwtUtil.generateToken(user.getId(), user.getUsername(), user.getRole()); } }6.3 非遗项目分页查询非遗项目列表采用 MyBatis-Plus 分页插件实现支持按名称和类别进行条件检索Service public class HeritageServiceImpl implements HeritageService { Autowired private HeritageMapper heritageMapper; Override public PageHeritage pageQuery(int pageNum, int pageSize, String name, String category) { PageHeritage page new Page(pageNum, pageSize); LambdaQueryWrapperHeritage wrapper new LambdaQueryWrapper(); // 按名称模糊查询 if (StringUtils.hasText(name)) { wrapper.like(Heritage::getName, name); } // 按类别精确查询 if (StringUtils.hasText(category)) { wrapper.eq(Heritage::getCategory, category); } wrapper.eq(Heritage::getStatus, 1); wrapper.orderByDesc(Heritage::getCreateTime); return heritageMapper.selectPage(page, wrapper); } }6.4 前端 Axios 请求封装前端对 Axios 进行统一封装在请求拦截器中自动携带 JWT 令牌在响应拦截器中统一处理错误状态import axios from axios import { ElMessage } from element-plus import router from /router const request axios.create({ baseURL: /api, timeout: 10000 }) // 请求拦截器携带令牌 request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) // 响应拦截器统一处理错误 request.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.message || 请求失败) return Promise.reject(new Error(res.message)) } return res }, error { if (error.response error.response.status 401) { ElMessage.error(登录已过期请重新登录) localStorage.removeItem(token) router.push(/login) } else { ElMessage.error(网络异常请稍后重试) } return Promise.reject(error) } ) export default request6.5 前端非遗项目列表页面非遗项目列表页通过 Vue 组合式 API 实现数据加载与展示支持分页和条件检索template div classheritage-list el-input v-modelqueryParams.name placeholder请输入非遗名称 clearable keyup.enterhandleSearch / el-button typeprimary clickhandleSearch搜索/el-button el-row :gutter20 el-col v-foritem in list :keyitem.id :span8 el-card classheritage-card img :srcitem.coverImage classcover / h3{{ item.name }}/h3 p{{ item.category }} · {{ item.region }}/p el-button typetext clickgoDetail(item.id) 查看详情/el-button /el-card /el-col /el-row el-pagination v-model:current-pagequeryParams.pageNum v-model:page-sizequeryParams.pageSize :totaltotal layouttotal, prev, pager, next current-changeloadList / /div /template script setup import { ref, reactive, onMounted } from vue import { useRouter } from vue-router import request from /utils/request const router useRouter() const list ref([]) const total ref(0) const queryParams reactive({ pageNum: 1, pageSize: 9, name: }) const loadList async () { const res await request.get(/heritage/page, { params: queryParams }) list.value res.data.records total.value res.data.total } const handleSearch () { queryParams.pageNum 1 loadList() } const goDetail (id) { router.push(/heritage/${id}) } onMounted(loadList) /script7. 系统测试与总结系统开发完成后对用户登录、非遗项目检索、课程学习、评论互动等核心功能进行了功能测试与接口联调测试。测试结果表明各模块功能运行正常接口响应稳定能够满足非遗文化在线学习的基本业务需求。本系统通过 SpringBoot 与 Vue 的前后端分离架构实现了非遗文化资源的数字化展示与在线学习功能为非遗文化的传播与传承提供了便捷的信息化平台。后续可在智能推荐、在线直播教学、VR 沉浸式体验等方向进一步拓展持续提升用户的学习体验与文化认同感。