当初接这个“基于SpringBootVue的web网上摄影工作室管理系统”项目很多同学也叫它摄影预约管理系统、PF管理系统纯粹是朋友介绍的一个毕业设计题目。做完整套系统、跑通前后端联调之后我反倒觉得这类“业务不复杂但五脏俱全”的项目非常适合用来理解SpringBoot Vue MyBatis MySQL这套技术栈的完整配合。无论你是拿它当毕设还是想找一个能练手的前后端分离项目这篇文章都值得你花几分钟看完。文章会从业务设计、数据库设计、核心功能实现到部署避坑按我自己动手开发的顺序来拆最后还会把我在这个项目里踩过的几个典型问题一并整理出来。1. 业务场景与系统设计思路先聊业务。很多人拿到这类题目就开始写代码但真正动手前应该先想明白一件事摄影工作室到底需要一个什么样的系统。我梳理下来核心用户只有三类人——管理员、摄影师、客户。管理员管门店和套餐摄影师管自己的档期和接单客户是来约拍、看作品、下单的。一个网上摄影工作室本质上解决的是三个痛点预约排期靠人工微信沟通、订单和客户资料零散混乱、作品展示没有一个集中的地方。所以系统模块划分其实很清楚。前台展示端放首页、作品集、套餐列表和预约入口后台管理端分管理员和摄影师两套权限管理员能管摄影师信息、套餐上下架、订单审核、客户管理摄影师能维护自己的档期、接单确认、上传作品。客户在最前面通过预约和下单流程把“线上看作品-选套餐-预约时间-支付或定金-等待拍摄-查看成片”这条链路串起来。1.1 模块拆解一个摄影工作室需要哪些页面客户前台首页轮播、作品展示图片视频、套餐列表、在线预约、个人中心订单、预约记录、收藏管理员后台Dashboard统计、摄影师管理、套餐管理、订单管理、预约排期管理、客户管理、公告管理摄影师端档期设置、订单接单/拒绝、成片上传、个人作品维护这种按角色去拆功能的方式前后端联调的时候特别容易对应起来。前端一个路由对应一个页面后端一个Controller对应一组接口边界非常清楚。1.2 为什么选前后端分离而不是传统单体模板项目这个问题我回答过很多人。如果只是应付毕设确实用Thymeleaf模板一把梭更快但收获完全不一样。SpringBootVue前后端分离的价值在于前端通过Axios调后端的JSON接口后端完全不关心页面渲染接口设计就得有意识——返回什么字段、什么状态码、如何统一异常这些才是企业中真正在用的开发模式。部署上也灵活前端打包成静态文件丢Nginx后端直接Java -jar跑互不干扰。另外这套组合的就业方向非常明确。后端的SpringBootMyBatisMySQL前端的Vue是目前中小公司最主流的Java技术栈之一。做完这个项目SpringBoot自动装配、MyBatis映射、Vue组件化通信、Router权限控制这些面试高频问题你都能有真实项目经验可讲不是背出来的。2. 技术选型与项目环境搭建2.1 SpringBoot版本、JDK版本怎么选一个很现实的坑SpringBoot版本太高对应的JDK版本如果跟不上启动直接报错。我开发这个项目用的是SpringBoot 2.7.x搭配JDK 1.8这是目前最稳妥的组合很多视频教程和网上的资料也都基于这个版本。如果你非要用SpringBoot 3.x那就要连带JDK 17和Jakarta命名空间一起适应不推荐第一次做项目就挑战不然你会在环境上消耗掉大量时间。实际开发时建议用IDEA直接创建Spring Initializr项目勾选Web、MyBatis、MySQL Driver、Lombok这几个依赖。这里提一个小技巧IDEA里创建项目时如果选的是SpringBoot 2.7.x依赖会走Maven中央仓库下载国内网络经常卡住。可以配置阿里云Maven镜像在settings.xml里添加mirror这样依赖下载速度会快非常多不然一个下午都耗在下载上心态容易崩。2.2 Vue环境配置与项目初始化前端我用的是Vue 2 Element UI。记住一点Vue 2配Element UIVue 3配Element Plus别混了。环境上主要是Node.js的版本问题Vue 2项目建议用Node 14或16Node 18以上跑Vue 2的老项目经常报OpenSSL错误。如果你已经装了高版本Node可以在启动前用nvm切换版本或者把package.json里的脚本改成set NODE_OPTIONS--openssl-legacy-provider但最好的方案还是nvm直接切Node版本。创建项目的命令很简单npm install -g vue/cli vue create photography-front选Manually select features勾选Router和Vuex其他按默认。项目创建好后先跑一次npm run serve确认基础环境没问题再继续装Element UI和Axiosnpm install element-ui axios这里提醒一句Element UI的按需引入可以搞但新手一开始直接全局引入更省事毕竟这个项目页面不算多全局引入对性能影响不大重点是先把功能跑起来。2.3 MyBatis与SpringBoot的整合方式现在的项目基本都是用mybatis-spring-boot-starter这个依赖来做整合少了很多繁琐的XML配置。整合之后主要涉及三块配置mapper扫描路径、数据源信息、SQL映射文件位置。我在application.yml里推荐这么配spring: datasource: url: jdbc:mysql://localhost:3306/photo_studio?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.photography.entity configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl其中map-underscore-to-camel-case这个配置要养成习惯打开数据库字段user_name自动映射成userName省掉大量列的ResultMap手写工作。log-impl配置成StdOutImpl开发阶段控制台能直接打印SQL和参数排查问题好用上线前记得关掉。启动类上还要加MapperScan注解指定Mapper接口所在的包路径这是新手最容易忘的一步。3. 数据库设计与核心表结构整个项目的根在数据库设计上。后期写SQL、写Java代码、甚至前端页面能不能跑得顺全看第一步表设计结不结实。我这个项目的表结构如下user用户表、photographer摄影师表、package套餐表、orders订单表、appointment预约排期表、works作品表、announcement公告表七张核心表。3.1 七张核心表的设计清单user表放客户和管理员核心字段是username、password我建议MD5加密存或者用BCrypt、phone、role区分客户和管理员。photographer表除了基本的name、phone、avatar还要有specialty擅长领域、city所在城市和introduction个人介绍作品集页要展示这些信息。package表是套餐表name、cover、description、price、original_price、status。price字段一定要用decimal类型别用double金额精度会出问题。orders表有order_no、user_id、package_id、photographer_id、appointment_date、status待支付/已支付/已完成/已取消、total_amount、remark。appointment表是预约排期表有photographer_id、work_date、time_slot、is_booked字段同一时间点被约走就把is_booked置为1防止重复预约。works表放作品集title、cover、images可以用JSON格式存多张图、video_url存视频地址不存文件本身、photographer_id、upload_time。3.2 字段类型和索引设计的小细节ID统一用bigint自增主键状态字段用tinyint或者int0/1/2这类取值含义要写清楚注释创建时间update_time用datetime并设置默认值为CURRENT_TIMESTAMPorder_no建议用时间戳加随机数生成别用自增ID当订单号用户会看到你的单量。索引方面orders表的user_id、photographer_id、status这仨字段是查询最频繁的条件每个单独立一个普通索引。appointment表的photographer_id work_date联合索引是必须的排期查询每天都查这个组合。还有一个不太起眼但重要的点MySQL 8.0默认字符集是utf8mb4建库时要指定否则存储一些特殊字符比如用户昵称里的emoji会报错或者存成乱码。建库语句建议加上CREATE DATABASE photo_studio DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;3.3 表关系说明用户和订单是一对多一个用户可以有多个订单摄影师和套餐是一对多一个摄影师可以挂多个套餐套餐和订单是一对多摄影师和作品是一对多。业务上最核心的一条链是用户选择套餐下单下单时带一个预约日期和时段管理员或摄影师确认后生成排期记录。表关系上不需要物理外键逻辑上通过字段关联就行删除数据时更灵活面试时问起为什么不用外键你可以回答是为了便于分表和系统扩展。4. 核心功能实现与代码逻辑解析4.1 登录鉴权用JWT还是SpringSecurity这个项目我用的是JWT 拦截器的方式没有引入SpringSecurity。为什么因为摄影工作室系统的权限模型比较简单只有管理员、摄影师、客户三种角色JWT拦截器足以覆盖。SpringSecurity功能强大但学习曲线陡峭配置起来对新手不友好。很多毕设答辩会问“你在项目中怎么做权限控制”你把JWT的结构头部、载荷、签名以及拦截器校验流程讲清楚比笼统地说我用了SpringSecurity加分得多。JWT实现思路是登录成功后把userId和role放进tokentoken返回给前端前端存在localStorage里。每次请求在Axios拦截器中带Authorization请求头后端写一个拦截器HandlerInterceptor拦截需要登录的请求解析token却发现无效就返回401状态码前端拦到401就跳转登录页。这里有一个关键点拦截器要排除登录、注册、首页、作品列表这类公开接口否则用户还没登录就访问不了公开内容了。4.2 预约排期与订单流程的实现预约是摄影工作室最核心的业务逻辑。我的实现方式是前端在订单页面先选摄影师然后选日期发送请求查该摄影师指定日期的时段列表后端根据photographer_id和work_date查appointment表返回is_booked等于0的时段。用户选定时段后提交订单订单状态为待支付。这里要处理并发问题——两个用户同时选同一个摄影师同一个时段怎么保证只有一个能成功最稳妥的做法是在预约表增删改时加一个乐观锁或者直接在SQL里带条件更新UPDATE appointment SET is_booked 1 WHERE id #{appointmentId} AND is_booked 0如果影响行数是0说明已经被别人约走了返回“该时段已被预约”。这种带条件更新的方式比查询后再更新更安全查询后更新在高并发下有竞态窗口期。项目里实际用的是后一种思路并结合事务控制在Service层加Transactional先查询再更新用条件更新兜底。小规模业务足够面试时能说清楚这种方案的取舍就行。4.3 图片上传与作品集展示摄影师上传作品图片后端不能把图片直接存到数据库里数据库存的应该是文件的访问路径。我在项目里做了统一的上传接口接收MultipartFile保存到服务器的upload目录然后把相对路径返回给前端works表存这个路径页面用img标签直接展示。这里有个坑要提前说Spring Boot项目里upload目录如果你直接存在项目运行目录下本地开发没问题部署上线时jar包是临时的重启文件可能丢失。稳妥的办法是在application.yml里配置一个外部存储路径比如/home/photo/upload然后在代码里写一个WebMvcConfigurer把该路径映射成/resources/upload/**的虚拟访问路径这样图片既能正常访问又不依赖项目内部目录。作品集页面除了图片有时候还要支持视频预览。摄影工作室的作品视频往往是一段长视频如果直接用HTML5的video标签播加载慢而且进度条拖动要等缓冲。项目里我处理过一个m3u8视频流播放的需求做法是用ffmpeg把MP4切片转成m3u8格式前端页面引入hls.js播放m3u8。Vue里的核心代码逻辑大概是这样import Hls from hls.js if (Hls.isSupported()) { const hls new Hls() hls.loadSource(this.videoUrl) // xxx.m3u8 hls.attachMedia(this.$refs.video) hls.on(Hls.Events.MANIFEST_PARSED, () this.$refs.video.play()) }m3u8切片的好处是加载流畅支持自适应码率手机端播放体验也远好于直接塞一个MP4。这个功能在答辩或演示时是个加分项因为大多数人做的摄影系统只有图片你能放视频显得细节更完整。4.4 前端路由权限控制前端路由最基本的三块公开路由首页、作品列表、套餐列表、登录注册、客户路由个人中心、预约下单、管理路由后台管理的所有页面。我采用的方式是路由表里给每个路由配置meta字段加一个roles数组比如meta: { roles: [admin, customer] }登录后动态判断当前用户的角色是否在允许的列表里不在就跳转403页面。路由守卫写在router.beforeEach里。实现逻辑是每次跳转前检查localStorage里有没有token有就继续没有则跳转登录页。登录后再根据用户的role做一次动态路由注册把管理员和摄影师页面通过router.addRoutes动态加进去。这样即使有人强行改前端的路由地址看不到页面请求也会被后端的拦截器拦住双重保障。5. 项目实战中的高频报错与排查思路做的时候确实踩过不少坑我挑几个最有代表性的问题整理一下这些问题在跑SpringBoot Vue项目时大概率也会遇到。5.1 MyBatis XML中“小于号”导致解析报错这是一个精神内耗挺大的坑。写Mapper XML时如果SQL里出现小于号比如“查询创建时间小于某个时间”写成status 1MyBatis会直接报错因为XML解析时把“”当成标签开头了。解决办法有两种一是转义把“”写成“”“”写成“”二是用 包起来。实际开发中更推荐CDATA方式SQL复杂时可读性更好。比如select idselectByTime resultTypeOrders SELECT * FROM orders WHERE create_time lt; #{endTime} /select还有一个类似的坑是“单个数字字符比较”。如果你在XML里写SQL时用了条件判断MyBatis内部判断单字符时要注意写法。比如用 来过滤这里MyBatis会把2当成char类型如果传入的是String类型就永远为true导致条件失效。解决办法是改成 或者status ! 2我之前在这个问题上排查了将近一个小时最后确认是单引号当作字符处理导致的。5.2 MyBatis缓存导致的数据不一致MyBatis默认开启一级缓存SqlSession级别在一次数据库会话里相同条件的查询第二次会直接命中缓存不访问数据库。这在某些场景下没问题但如果你的项目里查询后紧跟着更新同一条记录再查询就会拿到旧数据。项目里我遇到过一个问题管理员在后台禁用了一个摄影师但前端作品列表里还能看到这个摄影师的作品就是因为查询作品时SQLsession是同一个二级缓存把之前的结果直接返回了。排查思路是先在配置文件里把日志级别打开查看哪条SQL没有执行。解决方案也简单粗暴在涉及更新的Mapper方法执行成功后直接调用SqlSession的clearCache()清空当前缓存或者干脆在需要实时数据的地方给查询Mapper加flushCache属性。开发阶段如果追求省心可以把二级缓存直接关掉mybatis: configuration: cache-enabled: false对于这种小系统关了缓存性能影响几乎可以忽略换取的是逻辑上不容易出错。5.3 SpringBoot版本与JDK版本不匹配这是环境类问题里最常见的。用SpringBoot 3.0以上但本地JDK还是8启动会直接报UnsupportedClassVersionError或IllegalStateException。我习惯在pom.xml里固定版本号不用SNAPSHOT版本避免Maven拉到一些预发布版本之后行为异常。另外SpringBoot 2.7.x和2.5.x的配置命名有些差异网上教程里的配置搬到高版本上有时候不生效。桌面实践的一个经验是参考别人项目时先看清楚对方的SpringBoot版本和JDK版本再决定是照抄还是适配。5.4 Vue打包后白屏或布局异常这个问题在毕设里出现频率太高了。本地npm run serve一切正常npm run build后丢到服务器上就白屏或者CSS样式全乱了。白屏的原因绝大多数是publicPath路径问题。Vue CLI默认publicPath是根路径“/”当部署到服务器的子目录下时JS和CSS的请求路径都指向了根目录自然找不到文件。解决办法是在vue.config.js里配置module.exports { publicPath: ./, productionSourceMap: false }改成相对路径后打包后的资源文件就能正确加载。另一个布局异常的常见原因是路由模式。如果你用的是history模式部署到tomcat或Nginx后直接访问子路由会出现404需要后端配合做try_files重写到index.html。如果你不想花时间配Nginx打包前就把路由改成hash模式地址栏会带个#号丑一点但省事对毕设来说完全够用。5.5 MySQL 8.0安装与连接常见问题很多同学在项目开始前就卡在MySQL安装这一步了。MySQL 8.0安装时如果选了强密码插件后面用旧的密码验证方式去连接会报“caching_sha2_password”相关的错。我的建议是安装时直接选第二个方式Legacy Authentication或者装完改配置文件default_authentication_plugin为mysql_native_password。SpringBoot连接MySQL 8.0时驱动类要写com.mysql.cj.jdbc.Driverurl里要加serverTimezoneAsia/Shanghai不然报时区错误是必然的。这些问题排查起来不难但第一次遇到会让人怀疑人生。另外MySQL Workbench也值得提前熟悉一下。写SQL、建表、看数据都用它比命令行直观太多。我不建议一上来就用Navicat破解版Workbench官方免费功能完全够用。5.6 常见问题速查表问题现象可能原因解决方案SpringBoot启动报错JDK版本与SpringBoot版本不匹配使用SpringBoot 2.7.x JDK 8Vue启动报OpenSSL错误Node版本过高18以上切换到Node 14/16前端访问后端接口跨域前后端分离未配置跨域后端写CorsFilter配置或前端用代理MyBatis XML里写“”报错XML解析错误用CDATA或转义字符图片上传后访问404存储路径未映射WebMvcConfigurer映射虚拟路径使用history路由刷新404后端未重写到index.html改用hash模式或配置Nginx中文乱码项目编码或数据库字符集不统一统一为UTF-8 / utf8mb4白屏publicPath配置错误publicPath设为相对路径6. 系统部署流程与扩展方向建议本地开发跑通了不算完一套完整的项目还要能打包部署。前端在项目根目录执行npm run build生成的dist目录就是所有静态文件后端在IDEA里先执行mvn clean package生成jar包。部署时前端dist目录交给Nginx托管后端java -jar photography.jar运行。为了省心把端口固定下来后端8080前端80数据库3306服务器防火墙放行这三个端口就行。如果你想在这个系统上继续扩展有几个方向值得考虑。第一是接入微信支付下单后生成支付二维码支付成功回调更新订单状态这才是真正的完整交易闭环。第二是增加短信或邮件通知预约成功时通知客户摄影师档期变更也要能推送到客户端可以用阿里云短信或MailKit这类服务。第三是数据分析后台做一个简单的Dashboard展示订单趋势图和摄影师业绩排行用一份SQL统计每月的营业额报表这个功能做出来在答辩时非常亮眼。我个人的体会是做这类项目最怕广撒网什么都想做最后每个模块都只做了个样子。摄影工作室项目规模不大但如果你把预约排期、订单状态流转、上传文件和权限控制这几个点做扎实了面试和答辩的核心链路完全够讲。最后再分享一个小技巧开发过程中把每天的异常截图和水色代码保存一下写论文或者写项目文档的时候翻出来一个配图加一段分析整个项目的技术深度立刻就不一样了。