一、项目概述1.1 项目背景戏曲是中华优秀传统文化核心载体包含京剧、越剧、黄梅戏、川剧等众多流派当下存在戏曲资料分散、传播渠道单一、年轻受众接触门槛高、戏曲艺术家信息无统一展示平台等问题。为数字化传承、推广戏曲文化搭建中国戏曲文化传播系统实现戏曲作品在线浏览、戏曲资料检索、戏曲艺术家展示、音频播放、用户评论收藏、后台全维度管理一体化功能助力传统戏曲线上传播。1.2 项目目标用户端普通游客可浏览戏曲首页推荐、检索戏曲资料、查看戏曲详情、播放戏曲音频、查看艺术家介绍、注册登录收藏戏曲、发布评论互动。管理端管理员实现系统用户、轮播图、戏曲分类、戏曲信息、戏曲资料、艺术家全生命周期管理提供戏曲类型数据统计可视化图表。技术目标基于 SpringBootVue 前后端分离架构保证系统高可用、易维护支持图片 / 音频文件上传、分页查询、条件检索、富文本编辑、ECharts 数据可视化。1.3 技术栈选型后端技术SpringBoot核心框架SpringBoot 2.7.x持久层MyBatis-Plus简化 CRUD、分页插件数据库MySQL 8.0工具组件Hutool工具类封装日期、文件、加密EasyExcel后期可扩展戏曲资料批量导入导出FFmpeg音频播放兼容处理JWT登录身份认证、权限校验Lombok简化实体类 get/setRedis可选缓存热门戏曲、收藏数据文件存储本地文件存储 / 阿里云 OSS图片、音频接口规范RESTful API统一返回结果封装前端技术Vue核心框架Vue2 Element UI管理后台深色主题前台页面原生 Vue Element UI 简约浅色页面图表组件ECharts戏曲分类饼图统计富文本编辑器wangeditor艺术家简介、戏曲介绍音频组件HTML5 Audio 播放器路由Vue Router页面导航、面包屑网络请求Axios请求拦截、响应拦截、token 携带分页组件Element Pagination 分页控件上传组件el-upload图片、音频文件上传开发 部署工具开发工具IDEA、VS Code版本控制Git部署Tomcat / SpringBoot 内置 Tomcat、Nginx 反向代理数据库可视化Navicat1.4 系统角色划分普通游客未登录仅浏览首页、戏曲资料、戏曲详情、艺术家页面无收藏、评论权限。注册用户前台用户注册 / 登录、浏览全部内容、收藏戏曲、发布评论、查看个人收藏。管理员后台用户 admin拥有全部后台管理权限管理用户、轮播图、戏曲分类、戏曲信息、戏曲资料、艺术家、查看数据统计。二、系统功能模块设计2.1 前台用户模块面向普通访客 / 注册用户2.1.1 登录 / 注册模块登录功能账号密码登录支持记住密码本地存储登录校验账号密码非空、数据库匹配登录成功生成 JWT Token存储 localStorage全局请求自动携带登录失败提示账号不存在、密码错误。注册功能字段用户账号、用户密码、确认密码、用户姓名、头像上传、性别下拉选择、手机号码校验规则两次密码一致、手机号格式校验、账号唯一、头像非必传注册成功自动跳转登录页面。页面跳转登录页底部【注册用户】跳转注册注册页底部【已有账号直接登录】跳转登录。2.1.2 首页模块顶部导航栏首页、戏曲资料、戏曲信息、艺术家右上角用户头像入口登录 / 个人中心。顶部轮播图后台配置戏曲主题轮播海报自动轮播。戏曲卡片推荐区网格布局展示戏曲封面、戏曲名称、所属艺术家、收藏星级卡片点击跳转戏曲详情页。更多详情按钮跳转戏曲信息列表页。2.1.3 戏曲资料模块顶部搜索框按标题关键词模糊检索戏曲资料戏曲资料卡片列表展示封面图、资料标题、简介文本文字资料列表展示标题、发布日期、正文简介分页展示。2.1.4 戏曲信息详情模块面包屑导航首页 戏曲信息右上角返回按钮左侧戏曲封面大图展示右侧戏曲基础信息戏曲名称、戏曲分类、艺术家、发展历史、戏曲流派、收藏数量、点击次数收藏按钮登录用户可点击收藏 / 取消收藏收藏数量实时更新音频播放器内置 HTML5 音频控件支持播放、暂停、进度拖拽评论区域展示所有用户评论登录用户可新增评论。2.1.5 艺术家页面前台艺术家列表展示全部戏曲艺术家头像、姓名、代表作点击进入艺术家详情。2.2 后台管理模块管理员登录深色管理系统2.2.1 后台首页仪表盘左侧侧边栏菜单首页、系统用户管理、轮播图管理、戏曲资料、戏曲信息管理、艺术家管理顶部标签页多页面标签缓存右上角显示登录管理员账号数据看板戏曲信息总数统计卡片戏曲分类饼图 ECharts 可视化展示各戏曲分类作品占比悬浮显示分类名称、数量、百分比2.2.2 系统用户管理子菜单管理员管理、前台用户管理功能分页列表、条件搜索、新增、详情、修改、删除系统账号字段账号、姓名、头像、性别、手机号、角色管理员 / 普通用户。2.2.3 轮播图管理轮播图分页列表新增轮播图上传图片、填写跳转链接、排序权重修改、删除、上下线轮播图。2.2.4 戏曲资料管理戏曲资料分页列表标题检索新增 / 编辑上传封面、标题、简介、正文详情查看、单条 / 批量删除。2.2.5 戏曲信息管理[2.2.5.1] 戏曲分类管理戏曲分类列表序号、分类名称操作按钮新增、详情、修改、删除、批量删除顶部检索框按分类名称模糊搜索分页控件。[2.2.5.2] 戏曲信息主列表列表字段序号、戏曲名称、封面图片、戏曲分类、艺术家、发展历史、戏曲流派、视频、音频顶部功能按钮新增、详情、修改、删除、【戏剧类型统计】跳转仪表盘饼图检索条件戏曲名称、戏曲流派双条件搜索行操作详情、查看评论分页展示全部戏曲作品。[2.2.5.3]新增 / 编辑戏曲信息表单字段戏曲名称、下拉选择戏曲分类、下拉关联艺术家、发展历史、戏曲流派、上传封面图、上传音频文件、上传视频文件、富文本戏曲介绍。2.2.6 艺术家管理艺术家列表页面列表字段序号、姓名、头像图片、性别、年龄、出生地、毕业院校、戏曲成就、戏曲作品检索姓名、戏曲作品双条件搜索操作新增、详情、修改、删除、批量删除单行详情按钮。新增艺术家弹窗弹窗式表单左侧基础输入框姓名必填、性别下拉、出生地、年龄、毕业院校、戏曲成就、戏曲作品右侧图片上传组件底部富文本编辑器 wangeditor填写个人简介支持文字加粗、图片、排版提交 / 取消按钮表单校验必填项。三、数据库设计3.1 数据库整体说明数据库名opera_culture采用 InnoDB 引擎utf8mb4 字符集支持 emoji、中文全兼容。核心数据表sys_user系统用户表管理员 前台注册用户banner轮播图表opera_category戏曲分类表opera_artist戏曲艺术家表opera_info戏曲信息主表核心表opera_material戏曲资料表opera_comment戏曲评论表opera_collect用户戏曲收藏中间表3.2 核心数据表结构1sys_user 系统用户表字段名类型约束说明idbigintPK 自增用户主键 IDusernamevarchar(50)NOT NULL UNIQUE登录账号passwordvarchar(100)NOT NULL加密密码real_namevarchar(30)NOT NULL用户姓名avatarvarchar(255)NULL头像图片路径gendertinyintNULL0 女 1 男 2 未知phonevarchar(11)NULL手机号roletinyintNOT NULL1 管理员 2 普通用户create_timedatetimeDEFAULT NOW()创建时间update_timedatetimeON UPDATE NOW()更新时间is_deletetinyintDEFAULT 0逻辑删除 0 未删 1 已删2opera_category 戏曲分类表字段名类型约束说明idbigintPK 自增分类 IDcategory_namevarchar(50)NOT NULL UNIQUE戏曲分类名称京剧 / 越剧等create_timedatetimeDEFAULT NOW()创建时间is_deletetinyintDEFAULT 0逻辑删除3opera_artist 戏曲艺术家表字段名类型约束说明idbigintPK 自增艺术家 IDnamevarchar(30)NOT NULL艺术家姓名avatarvarchar(255)NULL艺术家照片gendertinyintNULL性别ageintNULL年龄birth_placevarchar(50)NULL出生地graduate_schoolvarchar(50)NULL毕业院校achievementvarchar(500)NULL戏曲成就worksvarchar(500)NULL代表戏曲作品introtextNULL富文本个人简介create_timedatetimeDEFAULT NOW()创建时间is_deletetinyintDEFAULT 0逻辑删除4opera_info 戏曲信息核心表字段名类型约束说明idbigintPK 自增戏曲 IDopera_namevarchar(100)NOT NULL戏曲名称category_idbigintNOT NULL关联戏曲分类 IDartist_idbigintNOT NULL关联艺术家 IDhistorytextNULL发展历史genrevarchar(100)NULL戏曲流派cover_imgvarchar(255)NULL封面图片路径audio_urlvarchar(255)NULL音频文件地址video_urlvarchar(255)NULL视频文件地址collect_countintDEFAULT 0收藏数量click_countintDEFAULT 0点击浏览次数contenttextNULL戏曲详情富文本介绍create_timedatetimeDEFAULT NOW()创建时间is_deletetinyintDEFAULT 0逻辑删除5opera_material 戏曲资料表字段名类型约束说明idbigintPK 自增资料 IDtitlevarchar(100)NOT NULL资料标题cover_imgvarchar(255)NULL资料封面summarytextNULL简介contenttextNULL资料正文create_timedatetimeDEFAULT NOW()发布时间is_deletetinyintDEFAULT 0逻辑删除6opera_comment 评论表字段名类型约束说明idbigintPK 自增评论 IDopera_idbigintNOT NULL关联戏曲 IDuser_idbigintNOT NULL评论用户 IDcomment_texttextNOT NULL评论内容create_timedatetimeDEFAULT NOW()评论时间is_deletetinyintDEFAULT 0逻辑删除7opera_collect 收藏中间表字段名类型约束说明idbigintPK 自增收藏 IDuser_idbigintNOT NULL用户 IDopera_idbigintNOT NULL戏曲 IDcreate_timedatetimeDEFAULT NOW()收藏时间UNIQUE KEY uk_user_opera(user_id,opera_id)-联合唯一一个用户同一戏曲仅收藏一次8banner 轮播图表字段名类型约束说明idbigintPK 自增轮播 IDimg_urlvarchar(255)NOT NULL轮播图片link_urlvarchar(255)NULL跳转链接sortintDEFAULT 1排序权重statustinyintDEFAULT 11 启用 0 停用create_timedatetimeDEFAULT NOW()创建时间is_deletetinyintDEFAULT 0逻辑删除四、后端 SpringBoot 模块分层设计4.1 项目包结构com.opera ├── OperaApplication.java 启动类 ├── config // 配置类 │ ├── CorsConfig // 跨域配置 │ ├── JwtConfig // JWT认证配置 │ ├── MyBatisPlusConfig // MyBatis-Plus分页、逻辑删除 │ ├── UploadConfig // 文件上传配置 │ └── WebConfig // 拦截器、静态资源映射 ├── controller // 控制层接收前端请求 │ ├── AdminController // 管理员相关接口 │ ├── ArtistController // 艺术家接口 │ ├── BannerController // 轮播图接口 │ ├── CategoryController // 戏曲分类接口 │ ├── CollectController // 收藏接口 │ ├── CommentController // 评论接口 │ ├── MaterialController // 戏曲资料接口 │ ├── OperaInfoController// 戏曲信息接口 │ └── UserController // 用户登录注册接口 ├── entity // 数据库实体类对应数据表 │ ├── SysUser │ ├── OperaArtist │ ├── OperaCategory │ ├── OperaInfo │ ├── OperaMaterial │ ├── OperaComment │ ├── OperaCollect │ └── Banner ├── mapper // Mapper层MyBatis-Plus │ ├── SysUserMapper │ ├── OperaArtistMapper │ └── ...其他Mapper ├── service // 业务层接口 │ ├── impl // 业务层实现类 │ │ ├── SysUserServiceImpl │ │ └── ...其他实现类 │ ├── SysUserService │ ├── OperaArtistService │ └── ...其他Service接口 ├── util // 工具类 │ ├── JwtUtil // Token生成解析 │ ├── ResultUtil // 统一返回工具 │ ├── UploadUtil // 文件上传工具 │ └── ValidUtil // 表单校验工具 ├── vo // 前后端交互VO返回视图对象 │ ├── LoginVO // 登录返回token、用户信息 │ ├── PageVO // 通用分页返回 │ ├── OperaChartVO // 戏曲分类统计饼图数据 │ └── ...其他VO ├── dto // 请求入参DTO │ ├── UserRegisterDTO // 注册接收参数 │ ├── OperaQueryDTO // 戏曲分页检索参数 │ └── ...其他DTO ├── interceptor // JWT登录拦截器 └── exception // 全局异常处理 ├── GlobalExceptionHandler └── BusinessException // 自定义业务异常4.2 核心分层职责Controller接收前端 axios 请求参数接收、简单校验调用 Service返回统一 JSON 结果Service核心业务逻辑关联多表查询、事务处理收藏、评论新增等Mapper基于 MyBatis-Plus 实现单表 CRUD自定义多表联查 SQLEntity数据库实体映射数据表字段DTO接收前端复杂表单、检索条件VO封装返回前端的数据避免直接返回实体类泄露敏感字段Interceptor拦截所有需要登录的接口校验 JWT Token 有效性GlobalException捕获所有异常统一返回错误信息不抛出原生报错页面。4.3 统一返回结果封装ResultUtil所有接口返回固定格式 JSON{code:200,// 200成功 500业务异常 401未登录/Token失效msg:操作成功,data:{}// 业务数据分页列表、详情、token等}五、前端 Vue 项目结构设计5.1 前台用户端浅色展示页面src/front ├── main.js // 前台入口 ├── App.vue ├── router/index.js // 前台路由 │ ├── /login 登录页 │ ├── /register 注册页 │ ├── /index 首页 │ ├── /material 戏曲资料列表 │ ├── /operaDetail/:id 戏曲详情 │ └── /artist 艺术家页面 ├── views // 页面组件 │ ├── Login.vue │ ├── Register.vue │ ├── Index.vue │ ├── Material.vue │ ├── OperaDetail.vue │ └── Artist.vue ├── components // 公共组件 │ ├── Header.vue 顶部导航 │ ├── Banner.vue 轮播图 │ ├── OperaCard.vue 戏曲卡片 │ └── AudioPlayer.vue 音频播放器 ├── api // 前台接口请求 │ ├── user.js 登录注册接口 │ ├── opera.js 戏曲相关接口 │ ├── material.js 资料接口 │ └── collect.js 收藏评论接口 ├── utils │ ├── request.js axios封装请求拦截携带token │ └── storage.js localStorage工具 └── assets 静态资源、样式5.2 后台管理端深色管理系统src/admin ├── main.js // 后台入口 ├── App.vue ├── router/index.js // 后台路由侧边栏菜单对应路由 ├── views │ ├── Dashboard.vue 仪表盘ECharts饼图 │ ├── user/ 系统用户管理页面 │ ├── banner/ 轮播图管理 │ ├── material/ 戏曲资料管理 │ ├── category/ 戏曲分类管理 │ ├── opera/ 戏曲信息列表、新增弹窗 │ └── artist/ 艺术家列表、新增弹窗 ├── components │ ├── Sidebar.vue 左侧菜单栏 │ ├── Tabs.vue 顶部标签页 │ ├── PageTable.vue 通用分页表格 │ ├── UploadImg.vue 图片上传组件 │ └── RichText.vue 富文本编辑器封装 ├── api // 后台管理接口 │ ├── admin.js 管理员接口 │ ├── category.js 戏曲分类 │ ├── artist.js 艺术家CRUD │ └── opera.js 戏曲信息管理 └── utils ├── request.js 后台axios请求 └── echarts.js ECharts初始化封装5.3 核心前端功能说明Axios 请求拦截每次请求自动从 localStorage 读取 token 放入请求头 Authorization响应拦截捕获 401 未登录自动跳转登录页文件上传el-upload 组件上传图片 / 音频后端接收文件返回访问路径回填表单ECharts 图表仪表盘请求后端统计接口拿到各分类戏曲数量渲染饼图富文本编辑器艺术家新增页面 wangeditor支持图文排版提交时传递 HTML 文本至后端音频播放HTML5 Audio 标签传入后端返回音频 URL实现播放控制分页封装统一封装分页组件传递 pageNum、pageSize 参数后端 MyBatis-Plus 分页返回总条数、当前页数据弹窗表单新增 / 修改艺术家、戏曲信息使用 el-dialog 弹窗表单校验必填项关闭弹窗清空表单。六、核心业务流程6.1 用户登录流程用户输入账号密码点击登录前端 axios 携带账号密码请求后端/user/login后端校验账号密码匹配成功生成 JWT Token返回 token 用户角色管理员 / 普通用户前端存储 token 至 localStorage根据角色跳转页面管理员跳后台仪表盘普通用户跳前台首页后续所有需要权限的接口自动携带 token。6.2 戏曲收藏流程登录用户进入戏曲详情页点击收藏按钮前端传递userId、operaId请求收藏接口后端先查询opera_collect表是否存在该用户 戏曲记录存在删除记录收藏数量 - 1不存在新增收藏记录收藏数量 1更新opera_info表 collect_count返回最新收藏数前端刷新展示。6.3 后台新增艺术家流程管理员进入艺术家列表点击【新增】弹出弹窗填写表单、上传头像、富文本编辑个人简介点击提交前端校验姓名字段非空上传图片至后端后端返回图片访问路径连同表单字段一起提交后端接收参数插入opera_artist表返回成功提示弹窗关闭刷新艺术家列表。6.4 戏曲分类统计饼图流程管理员登录后台首页仪表盘页面加载请求/opera/countChart统计接口后端关联opera_category与opera_info分组统计每个分类戏曲数量返回包含分类名称、数量、占比的 VO 集合前端 ECharts 接收数据渲染饼图悬浮显示分类信息。七、系统部署方案数据库部署安装 MySQL8.0执行项目 sql 脚本创建库表配置账号密码后端部署Maven 打包 SpringBoot 项目为 jar 包java -jar opera.jar启动配置文件修改数据库连接、文件上传路径、JWT 密钥前端部署前台、后台分别执行npm run build打包 dist 静态资源Nginx 反向代理配置 /api 转发至后端 SpringBoot 端口前台静态资源绑定域名根路径后台管理页面分配 /admin 路由配置静态图片、音频文件访问路径设置跨域、缓存策略文件存储本地服务器文件夹存储上传图片音频Nginx 映射资源访问地址生产环境可替换阿里云 OSS 对象存储。八、系统扩展优化方向视频点播扩展戏曲视频流媒体播放接入七牛云 / 阿里云视频点播戏曲检索优化整合 Elasticsearch 实现全文检索支持戏曲剧情、艺术家、流派模糊搜索权限细分后台增加多角色权限超级管理员、运营人员菜单按钮级权限控制移动端适配前台页面做响应式适配手机、平板开发小程序端数据导出后台支持戏曲、艺术家数据 Excel 批量导出评论审核新增评论审核功能管理员屏蔽违规评论消息通知用户收藏戏曲更新、新评论推送站内消息推荐算法基于用户收藏、浏览记录做个性化戏曲推荐。九、项目总结本系统基于 SpringBootVue 前后端分离架构完整覆盖戏曲文化线上展示与后台数字化管理两大核心场景兼顾普通用户的浏览、互动需求与管理员的全数据维护需求。系统模块化清晰分层解耦功能贴合戏曲文化传播业务具备良好的可维护性与扩展性能够有效实现戏曲资源数字化存档、线上传播推广助力中华传统戏曲文化传承。系统完整实现登录注册、首页推荐、戏曲检索、音频播放、收藏评论、艺术家展示、后台数据管理、可视化统计等全部需求适配毕业设计、中小型文化场馆戏曲数字化平台落地使用。八、项目资料 精彩专栏推荐订阅 在下方专栏不然下次找不到哟《Java精品推荐项目》《springbootvue项目100套》《ssm项目100套》《微信小程序合集》