“Java Web 古典舞在线交流平台”这个名字刚扔过来的时候我第一反应是这又是个课设模板SpringBoot2 Vue3 MyBatis-Plus MySQL8.0标准得不能再标准的中后台四件套。但真正把源码拉下来跑通、把文档翻完我得说这个项目其实比大多数“为了交差”的demo要扎实不少。它没有刻意追逐微服务、分布式那一套而是把精力集中在古典舞这个垂直场景里课程内容、社区讨论、用户互动、后台管理一张业务闭环很清楚。对正在做毕设、找工作前练手、或者刚接触前后端分离想找个完整范例的人来说这套代码可以直接作为骨架加上自己的业务改动就能变成一份很有说服力的项目经历。整篇文章我不会给你罗列“目录结构、启动教程”这种口水话而是会把我实际跑项目时踩过的坑、翻过的源码、改过的配置全部摊开讲。从技术选型到底层逻辑从每个模块怎么拆分到MySQL8.0那些容易让人抓狂的细节尽量做到你拿着这篇文章即使不看文档也能把这套项目从环境搭建到二次开发完整走通。1. 项目定位与技术选型逻辑1.1 古典舞垂直领域需要什么样的系统支撑古典舞在线交流平台本质上是个“内容 社区 学习”三合一的垂直应用。用户角色大致分三类普通学员想看课、想发帖讨论专业舞者或老师想上传课程、回答问题平台管理员要管内容、管用户、管审核。这和通用论坛、通用视频站最大的区别在于它必须同时兼顾资源展示的规范性课程分类、舞种归纳、难度分级和社区内容的活跃度帖子、评论、点赞、关注。这套系统把首页拆成课程大厅和社区广场两大块正好对应了“学”和“交流”两个核心诉求。技术上没有选择复杂的微服务而是坚持单体应用 模块化分层这非常合理——访问量没到需要横向拆分的规模单体架构开发效率最高、部署成本最低也最适合作为教学和练手项目。再往上叠加顶多就是把文件存储抽出来走对象存储把搜索换成Elasticsearch但现在这个阶段没必要。1.2 为什么是SpringBoot2 Vue3 MyBatis-Plus MySQL8.0的组合选这套组合不是赶时髦是每一项都有它明确的理由。SpringBoot2到今天依然是Java后端的主力版本生态资料最多遇到问题一搜就有答案。相比SpringBoot3那套Jakarta命名空间迁移、Java17门槛SpringBoot2对大部分开发者的机器环境和知识储备都更友好。我这里指的“好用”不是功能弱而是它把Spring那套复杂的XML配置全部收敛成自动装配你写个Controller就能跑接口对追求快速迭代的课程设计项目来说效率是第一位的。Vue3这边组合式API配合script setup语法写业务代码时的体验比Vue2的Options API清爽太多。响应式机制改成Proxy之后对象新增属性、数组索引更新都不再是响应式盲区处理帖子列表、课程详情这种频繁增删改的场景不会再出现“数据改了页面不刷新”的玄学问题。MyBatis-Plus最核心的价值是消灭了单表CRUD的样板代码。对照一下Spring Data JPA两者都能省掉大量重复劳动但MyBatis-Plus保留了SQL手写能力团队里不管谁接手排查问题时打开XML或注解一眼就能看懂。JPA的抽象层级高自动生成的SQL在复杂多表关联、统计报表场景下可能需要花精力调优新手很容易被“为什么多了几条奇怪SQL”搞懵。MyBatis-Plus的策略更简单粗暴简单的我帮你自动生成复杂的我自己写SQL可控性高得多。MySQL8.0选得也聪明。它比5.7强在几个地方默认字符集变成了utf8mb4emoji和生僻字都能正常存储社区帖子里的舞种名称、课程备注不会再变成问号、支持窗口函数和CTE写排行榜、统计TOP课程时SQL能短一半、JSON类型更成熟动态表单字段和扩展属性可以直接塞进JSON列不用建一堆外链表。后面我会专门讲MySQL8.0安装和配置里那些必须注意的坑这块网上教程很多但讲细节的少最容易翻车。2. 核心功能模块拆解从“能跑”到“跑得像样”2.1 用户体系不只是登录注册那么简单用户模块看着基础但古典舞平台的需求其实比普通论坛复杂。学员要记录自己的学习阶段入门、初级、中级、高级舞者要展示擅长舞种汉唐舞、敦煌舞、水袖舞等老师要标记自己的教学方向。这套系统在用户表上预留了这些扩展字段前后端的表单和详情页也都做了对应展示不是那种只有用户名密码的敷衍设计。登录鉴权上我做个小总结如果走JWT方案请求头里放Authorization: Bearer token后端用拦截器统一解析Vue3前端在Axios请求拦截器里注入token响应拦截器统一处理401过期跳转登录页。如果走Session方案需要重点处理前后端分离下的Cookie跨域问题withCredentials要开后端也要配Allow-Credentials否则前端请求带上不Session。源码里采用的是更稳妥的常规方案上手成本低适合教学演示。我个人建议如果后续想写进简历可以把“登录拦截”和“用户权限分级”这两块逻辑画成时序图放在项目文档里面试时讲起来会很加分。2.2 课程与视频资源管理数据表和资源映射是重点古典舞课程数据的核心表我建议至少设计四张课程分类表、课程主表、课程章节/视频表、舞种标签表。分类表支撑首页侧边栏的舞种筛选课程主表存标题、封面图、难度等级、讲师ID、简介内容视频表则对应一个课程下的多条视频链接。这套系统的亮点是封面图上传和展示链路做得比较完善。我翻源码时看到它用的是本地磁盘存储文件上传接口接收MultipartFile保存到服务器指定目录然后通过配置的虚拟路径映射对外暴露访问地址。这种方式在低并发场景下完全扛得住避开了OSS付费配置的繁琐非常适合教学演示。但如果以后真上线运营我强烈建议把存储层抽象成接口换MinIO或者阿里云OSS不然服务器重启丢文件、磁盘被灌满都是隐患。视频播放这块项目里直接用HTML5的video标签加载MP4格式。单文件控制在500MB以内、编码为H.264的MP4浏览器兼容性最好。如果课程视频源是其他格式需要先转码这里不细说但在项目文档里把视频格式规范写明能让平台运营少很多事故。2.3 社区交流与互动机制内容黏性的核心社区模块是整个平台“交流”二字的具象表达。核心功能是发帖、回帖、点赞、关注。我重点说几个隐藏在内的设计细节帖子列表是分页查询排序规则是“置顶优先 点赞量降序 发布时间降序”这个组合能兼顾官方公告的曝光和热门内容的流动。评论表用父子结构支撑一到二级回复虽然数据库查询是两层循环数据量小的时候性能没问题但一旦评论过万就需要改成路径枚举或者单独评论分区这是后续优化的一个切入点。点赞表是用户ID 帖子ID唯一约束保证了同一个用户不能重复点赞前台交互上也会先判断点赞状态再切换按钮样式。从我带项目经验来看社区模块最容易被忽略的是“内容安全管理”。如果这个平台要上线帖子和评论必须接入关键词过滤、图片审核至少要有一层人工举报机制。这不是技术复杂度的问题而是运营底线。当然课设项目里保留基础功能即可但文档里如果能提一嘴后续的规划方向会显得整体思考更完整。3. 实操过程从零搭建到跑通前后端3.1 数据库环境准备与初始化MySQL8.0避坑指南网上搜“mysql8.0安装教程”能跳出来几十页但真正值得注意的坑十个教程里九个不讲。我这里直接把关键点列出来安装包推荐用MySQL InstallerWindows或者通过包管理器装Linux/macOS不建议去下那种“便携免安装版”8.0之后的目录结构和初始化逻辑变了很多Green版本容易在环境变量上翻车。安装过程中字符集一定要选utf8mb4而不是utf8。8.0默认已经是utf8mb4但如果是升级的老库要检查库表字符集不然中文没问题但emoji会直接存不进去。8.0默认的加密认证插件是caching_sha2_password如果你用老版本的Navicat或者旧驱动连接百分百报“Authentication plugin caching_sha2_password cannot be loaded”这类错误。解决办法有两个要么换成Navicat 16以上的版本要么把用户加密规则改回mysql_native_passwordALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 你的密码; FLUSH PRIVILEGES;SpringBoot2连接MySQL8.0时application.yml里的数据库配置要注意两点驱动类完整名称是com.mysql.cj.jdbc.Driver注意中间多了个cj老驱动是com.mysql.jdbc.Driverurl后一定要带时区参数否则连数据库会报时区错误spring: datasource: url: jdbc:mysql://localhost:3306/wuda_platform?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver注意allowPublicKeyRetrievaltrue这个参数很关键。MySQL8.0使用SHA256密码插件时如果客户端第一次连接没缓存公钥会报连接失败手动加这个参数可以绕过这个坑。开发环境可以开启生产环境建议关掉。数据库初始化脚本在项目的sql目录下里面建了库和表还塞了一些演示数据。建议直接用命令行或者Navicat执行整个SQL文件但执行前检查一下脚本头部的CREATE DATABASE语句是否使用了utf8mb4避免默认落到latin1。导入完成后随便查两张表确认下数据是不是完整的。3.2 SpringBoot2后端搭建与核心配置后端工程是标准的Maven多模块或单模块结构我这里说下关键配置点。先看pom.xml核心依赖就是spring-boot-starter-web、mybatis-plus-boot-starter、mysql-connector-java、lombok、spring-boot-starter-validation这几样。有两个细节需要注意MyBatis-Plus的版本建议选3.5.x3.4以下的老版本和SpringBoot2.7集成时会有兼容性警告。Lombok和编译版本有对应关系JDK8和JDK11用1.18.24以上的版本再老的版本会因为模块访问限制编译失败。然后说MyBatis-Plus的分页很多新手配完还是查不出分页效果问题基本出在没注册分页插件。配置方式如下Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }分页查询的Service层写法标准参考public PageCourse getCoursePage(int page, int size) { PageCourse coursePage new Page(page, size); LambdaQueryWrapperCourse wrapper new LambdaQueryWrapper(); wrapper.orderByDesc(Course::getCreateTime); return courseMapper.selectPage(coursePage, wrapper); }如果原文档里某张表按列表查询时没有分页你可以参照上面的代码统一调整前后端的分页参数建议都用page和sizeVue3前端用el-pagination组件对接起来最顺。文件上传的路径配置推荐写到application.yml里file: upload-dir: /data/wuda/upload/ access-path: /upload/**然后配置一个WebMvc配置类做虚拟路径映射Configuration public class WebConfig implements WebMvcConfigurer { Value(${file.upload-dir}) private String uploadDir; Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/upload/**) .addResourceLocations(file: uploadDir); } }注意Windows下路径末尾要带分隔符且addResourceLocations里的file:前缀不能漏否则资源映射不生效图片会一直404。如果是Windows本地建议路径写成D:/project/upload/这种绝对路径避免反斜杠转义问题。3.3 Vue3前端工程化Vite配置与项目结构前端工程用Vite构建环境要求Node.js 18以上Vite5起步就是这个版本我之前在一台Node16的服务器上跑npm run dev直接报错要求升级Node卡了半小时。装依赖的时候如果是在国内网络务必先换成镜像源否则npm install拉element-plus、pinia这些大包会被网络卡到怀疑人生。vite.config.js是核心配置文件一个独立的难点是前端开发环境的跨域代理。前端页面跑在5173端口后端接口在8080端口浏览器直接请求必然跨域。标准解法是后端配CORS或前端配代理。这套项目用的是Vite代理export default defineConfig({ plugins: [vue()], server: { host: 0.0.0.0, port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: path path.replace(/^\/api/, ) } } } })如果你的后端接口前缀不是/api记得把proxy的匹配路径改成实际前缀不然请求全部404排查半天发现是路径没对上。前端工程结构基本是标准划分views存放页面组件router放路由配置api封装请求方法store放Pinia状态components放公共组件。我发现这套项目里的路由懒加载做得不错页面组件全用动态import的方式引入首屏构建时只加载必要模块整个平台打开速度会快很多。你后续加页面时也保持这个习惯别一股脑全写成静态导入不然打包出来的vendor包体积会越来越大。4. 开发过程中的关键技术细节翻源码时挖出的设计思路4.1 MyBatis-Plus的便捷与隐藏的坑MyBatis-Plus提供的BaseMapper接口单表CRUD基本一行不用写。但越是这样越要搞清楚哪些场景它不适合多表联查时不要指望QueryWrapper自动完成join复杂SQL还是老老实实写在XML文件或注解里。这套项目里课程详情页涉及课程表、讲师表、分类表、标签表手写JOIN SQL并不复杂但换成人家的“零SQL”思维反而会绕。条件构造器的LambdaQueryWrapper在编译期就能检查字段名比字符串形式的QueryWrapper靠谱得多。字段一重构就不会出现“SQL语法正确但列名早已改名”的运行时错误。自动填充功能可以处理createTime、updateTime这两个通用字段用TableField(fill FieldFill.INSERT)配合MetaObjectHandler实现比你手动在每个Service里set时间省事得多。项目源码里如果你还在用注释方式给createTime赋值可以顺便改成自动填充。这不算大改动但能让代码质量上一个台阶。有一个容易踩的坑是逻辑删除。设计上如果你要加deleted字段做逻辑删除TableLogic注解必须配在实体类字段上并且所有查询都会自动追加deleted0条件。但如果你的SQL里有自定义的多表JOIN逻辑删除条件不会自动拼接需要手动判断这算MyBatis-Plus的一个经典盲区。4.2 Vue3组合式API让社区交互更有质感Vue3的Composition API和Pinia在我眼里是绝配。这套平台的社区模块里帖子的编辑预览、点赞状态、评论折叠这类交互状态都适合用ref和reactive管理。比如点赞功能前端需要根据“当前用户是否已点赞”渲染不同的图标和文案。这个状态在页面加载时从后端获取存在ref里点击后通过调用后端接口翻转状态失败时回滚到原状态避免用户误以为点赞成功。const isLiked ref(false) const likeCount ref(0) async function toggleLike(postId) { const previous { isLiked: isLiked.value, likeCount: likeCount.value } const newState isLiked.value ? { isLiked: false, likeCount: likeCount.value - 1 } : { isLiked: true, likeCount: likeCount.value 1 } isLiked.value newState.isLiked likeCount.value newState.likeCount try { await request.post(/api/posts/${postId}/like-toggle) } catch (e) { isLiked.value previous.isLiked likeCount.value previous.likeCount } }组件通信方面如果你的“关注”按钮和“粉丝数”显示在不同层级组件里用Pinia的store保存用户信息会特别方便。尽量避免跨层组件用props逐层传递或$emit逐层上抛组件树一深就全是隐患。4.3 接口设计与统一返回体我看到很多项目的前后端接口是“各自为政”有的Controller直接返回Map有的返回String前端处理时还要分情况解析。这套项目做得比较好的是统一返回体。设计如下Data public class ResultT { private Integer code; private String message; private T data; }成功接口返回code200业务失败的返回code500或者自定义业务码前端统一通过拦截器判断code值等于200才走业务逻辑否则提示后端返回的message。这样做最大的好处是前端Axios响应的HTTP状态码和业务状态码彻底解耦——比如后端有权限校验HTTP是401但业务code可以是403前端根据实际业务含义去处理不会把两者混为一谈。5. 常见问题与排查技巧实录5.1 数据库连接报错速查这是搭建阶段概率最高的问题。我把常见的报错和原因整理成一张速查表报错关键字原因解决办法Access denied for user rootlocalhost密码错误或账号权限确认MySQL8.0安装时的root密码或ALTER USER重置Unknown database xxx数据库没有创建执行SQL脚本时确认建库语句是否执行成功Public Key Retrieval is not allowed连接参数缺少allowPublicKeyRetrievalurl加上allowPublicKeyRetrievaltrueThe server time zone value Öйú±ê׼ʱ¼ä is unrecognized缺少时区参数url加上serverTimezoneAsia/ShanghaiCannot load driver class: com.mysql.cj.jdbc.Driver驱动类名带cj但依赖里是旧驱动确认mysql-connector-java版本是8.x5.2 后端启动失败高频原因后端启动失败除了端口占用和依赖版本冲突最常见的还有两类。一类是Mapper接口没有被扫描到——SpringBoot启动类的MapperScan注解如果漏配所有Autowired注入Mapper的地方都会报“No qualifying bean of type”。源码里如果用的是单个Mapper注解那是另一种写法但统一用MapperScan扫包路径更省事SpringBootApplication MapperScan(com.example.wuda.mapper) public class WudaApplication { public static void main(String[] args) { SpringApplication.run(WudaApplication.class, args); } }另一类是Lombok注解失效导致实体类没有getter/setterJackson序列化时直接报方法找不到。这种情况优先检查IDE的Annotation Processing是否开启、Lombok版本和JDK是否匹配多数是本地环境问题跟源码无关。5.3 前端联调跨域和请求问题Vite代理配好后请求基本不会再跨域。但注意一个细节代理只对开发环境生效npm run build产物部署到Nginx时需要Nginx配置反向代理。很多同学前期开发一切正常部署后接口全404就是这个原因。Nginx配置可以参考location /api/ { proxy_pass http://127.0.0.1:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }Axios封装时建议在请求拦截器统一注入token响应拦截器统一处理401。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) { router.push(/login) } return Promise.reject(error) } )5.4 图片上传成功但页面不显示上传接口返回的URL如果是/upload/xxx.jpg页面能加载但浏览器404八成是虚拟路径映射没生效。重新检查WebMvcConfigurer里的addResourceLocations确认路径是file:开头而且是绝对路径。另一个隐蔽问题后端接口返回给前端的URL如果漏了域名前缀比如返回的是/upload/a.jpg而前端运行在5173端口那图片会请求到前端服务器的5173端口上同样404。开发环境需要通过代理把图片路径也转发到后端或者后端返回完整的http://localhost:8080/upload/a.jpg。我翻这套项目源码时发现它给文件上传做了时间戳重命名防冲突避免了传统项目里图片覆盖的尴尬这个细节值得保留。5.5 中文乱码与编码问题后端接口返回中文乱码一般集中在响应编码没有设置成UTF-8。SpringBoot2后spring.http.encoding默认已经开启但如果你定义了自定义HttpMessageConverter要注意编码参数。Tomcat输出日志乱码则更多是控制台编码问题Windows下可以调整IDEA的File Encoding为UTF-8重启解决。数据库中文乱码就检查连接url里的characterEncodingutf8和表字符集。6. 运行流程、前期准备与二次开发扩展建议平台跑起来之后我建议按下面的顺序做一次全流程验收能帮你快速判断环境是否健康注册一个账号登录上传一张头像发布一个课程上传一个视频再发一个帖子回复几条评论。如果这个流程能顺利走完说明用户、文件、内容、社区四个核心链路都是通的。实际带项目时我遇到一个高频问题很多人对着源码无从下手第一反应是打开集成开发环境跑一遍结果环境配置卡住开始怀疑源码有问题。我的建议是先把依赖环境准备好把文档里列的环境要求一项项过掉再启动。很多所谓“源码跑不起来”实际是Node版本太低、MySQL密码不匹配、端口占用这类环境问题跟代码本身没多大关系。后续如果想把这份经历写进简历我推荐几个扩展方向都是投入产出比比较高的课程搜索升级为Elasticsearch或全文索引检索解决课程名称、舞种标签、讲师姓名混合搜索的问题。社区热帖排行榜用Redis的ZSet维护点赞、浏览数据走缓存少打数据库。文件上传改为MinIO从本地存储平滑迁移到对象存储并且加上图片压缩、视频转码流程。管理后台增加内容审核抽屉把非法帖子下线、用户封禁做成可视化操作。以上扩展方向如果真落地项目的技术深度立刻就不一样了。但踩过几次坑之后我的体会是扩展功能前先把现有代码的耦合关系看清楚——比如某张表在Service层被直接操作了三遍那扩展前最好先抽一层防腐不然后面改起来会非常痛苦。这套项目整体给我最大的感受是“干净”分层清晰、命名规范、核心链路完整照着跑一遍能学到的东西非常系统。你甚至可以把它当成一个样板间把古典舞相关的业务字段替换成自己感兴趣的垂直领域比如书法、茶艺、汉服穿搭一套完整的前后端分离应用就出来了。做成什么样主要看你自己往里面装多少想法了。