开 发一个“网上摄影工作室”这件事，最让我觉得有意思的地方在于：它不是一个单纯的电商系统，也不是纯内容展示站，而是把作品中台、套餐管理、在线预约、订单流转、后台维护这些典型业务全部串起来的完整闭环。如果你最近正在找 SpringBoot + Vue 前后端分离的实战项目，想搞明白一套东西从 0 到 1 怎么落地，这篇就适合你慢慢看。本文会按这个网上摄影工作室系统的真实开发路径，依次拆解系统设计、后端实现、前端交互、数据库设计、部署排查，把每个关键环节“为什么要这么做”都讲透。
1. 系统整体设计与需求拆解
1.1 摄影工作室要解决的业务问题
做项目之前，先别急着写代码。我看过太多人拿到一个题目，第一反应是“用什么技术、建什么表”，结果业务逻辑一团浆糊。网上摄影工作室的核心用户画像其实很清晰：一边是想展示作品、靠套餐接单的摄影师或工作室，另一边是想找风格、约时间、看档期的客户。
围绕这个场景，功能需求可以拆成几条主线：
- 作品集展示：这是摄影工作室的脸面，需要支持图片、视频等多种展示形式，最好能按风格分类，比如婚纱、写真、商业、儿童。
- 套餐服务：摄影师不能只标一个价格，套餐要区分档次、包含服务内容、适用人数、底片数量、精修张数，这是线上转化的基础。
- 在线预约与订单：客户看中套餐后，要挑选档期、提交预约需求，工作室后台能实时看到订单状态。
- 订单状态流转：新预约、已确认、拍摄中、已完成、已取消，状态一多，逻辑就容易乱。
- 会员与评价：老客户复购、拍摄完后的评价反馈，能给工作室带来口碑。
这些需求拆清楚之后，再映射到前后端分离的架构里，就非常顺了：Vue 负责页面展示和用户交互，SpringBoot 提供 RESTful API，MyBatis 负责数据库操作，MySQL 存数据。整个项目不是为技术而技术，而是业务在驱动技术选型。
1.2 为什么选 SpringBoot + Vue + MyBatis + MySQL
先说说技术选型。这套组合在今天依然是国内中小型系统里最主流的搭配之一，理由很实在。
SpringBoot 从诞生起就在解决 Spring 配置繁琐的问题。传统 SSM 项目里，光一个 Spring 的 XML 配置就能写几百行，SpringBoot 用自动配置把它们全部接管。尤其是 2.x 之后的版本，内嵌 Tomcat、starter 机制、Actuator 健康检查，对于做“网上摄影工作室”这种业务逻辑偏 CRUD 的系统来说，开发效率提升非常明显。
Vue 在前端这一侧，胜在渐进式上手和生态成熟。用 Vue Router 做页面路由、Vuex/Pinia 管登录态和全局状态、Axios 请求后端接口，和 SpringBoot 的 JSON 接口配合得非常默契。前后端分离开发时，前端代码和后端代码可以完全独立部署，也可以打包后由 Nginx 统一托管。
MyBatis 和 MySQL 的组合就更不用多说了。MyBatis 是半自动 ORM，SQL 由你自己控制，查询性能和可优化空间都在自己手里，不像 JPA 那样自动生成的 SQL 一复杂就容易失控。MySQL 免费、稳定、资料多，对于网上摄影工作室这种数据量级完全够用。
有同学问为什么不直接搭个若依框架来改——若依确实功能强大，但正因为功能太多，初学者拿到手容易被各种“现成的东西”带跑，反而搞不清楚每个功能是怎么工作的。自己从 0 拼一遍，踩过的坑才是真正长在自己身上的经验。
1.3 前后端分离架构下项目结构规划
前后端分离不是简单把前端页面和后端代码放在两个文件夹里，而是要做到“前端只管界面交互，后端只管业务与数据”，两者之间通过 HTTP + JSON 通信。
我习惯把后端工程按这样分层：
src/main/java/com/photostudio ├── controller // 接收参数、返回JSON ├── service // 业务逻辑层 │ └── impl ├── mapper // MyBatis持久层接口 ├── entity // 数据库实体类 ├── dto // 前端传输对象 ├── vo // 视图返回对象 ├── config // 配置类，如CORS、拦截器 ├── common // 通用工具、统一返回结果、异常处理 └── PhotostudioApplication.java前端的 Vue 工程结构也按职责划分，比如views放页面组件、router放路由定义、api放接口请求封装、store放全局状态。
这里有个很关键的点：接口返回格式必须统一。我不管前端要什么，后端一律返回固定的 JSON 结构，比如这样：
{ "code": 200, "message": "操作成功", "data": {} }前后端联调的时候，前端只需要判断 code 是否为 200，不需要为每种接口都写一套异常解析逻辑，省下大量沟通成本。
2. 数据库设计与后端核心模块实现
2.1 摄影工作室系统的数据表设计
网上摄影工作室虽然看起来业务不复杂，但表结构一乱，后面写 Mapper 的时候会非常痛苦。我以核心的五张表举例：用户表、摄影师表、套餐表、订单表、作品表。
用户表主要记录客户的登录信息：
CREATE TABLE `user` ( `id` INT UNSIGNED AUTO_INCREMENT PRIMARY KEY, `username` VARCHAR(64) NOT NULL UNIQUE, `password` VARCHAR(128) NOT NULL, `real_name` VARCHAR(64) DEFAULT NULL, `phone` VARCHAR(20) DEFAULT NULL, `avatar` VARCHAR(255) DEFAULT NULL, `role` TINYINT DEFAULT 0 COMMENT '0-客户 1-管理员 2-摄影师', `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;套餐表要注意“服务内容”这类字段，如果直接存纯文本，后期要搞套餐对比功能时很难处理。我的做法是：主体字段正常设计，服务清单单独用 JSON 字符串存储，让前端自己解析展示。这种灵活性和可扩展性，在小项目里反而比强设计更好用。
订单表是核心中的核心。网上摄影工作室的订单需要记录客户、摄影师、套餐、拍摄时间、拍摄城市、状态、备注，还有一个很关键的“档期锁定”概念。同一个摄影师在同一个时间段只能有一个已确认的订单，实现时既要靠数据库查询去保证，也要在 Service 层做好事务判断。
作品表则可以和“风格分类”字段放在一起，这样作品集页面就能按风格做筛选。
2.2 SpringBoot 工程初始化与 IDEA 实操
现在创建一个 SpringBoot 项目已经很快了，用 IDEA 的 Spring Initializr 一步到位。但有几个细节需要额外注意：
一是 SpringBoot 版本选择。热词里有“springboot版本太高”这个问题，我确实遇到过。新版本对 JDK 版本、Maven 版本、依赖兼容性都有要求，如果你电脑还是 JDK 8，直接选 SpringBoot 3.x 会报错，因为 3.x 要求 JDK 17 以上。我的建议是：做这个项目用 JDK 8 + SpringBoot 2.7.x，资料最多、踩坑最少，等整个流程跑通了再考虑升级。
二是引入依赖时要注意 scope。比如mysql-connector-java这个依赖，SpringBoot 2.7.x 里 groupId 是mysql，而新版本里改成了com.mysql，这个细节在复制别人代码时最容易踩雷。我给你一套能跑通的依赖配置，照着用就行。
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.3.1</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency>三是配置文件。网上摄影工作室系统的application.yml里，最基本的要配置数据源、MyBatis 映射文件位置和日志级别：
spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/photostudio?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf8 username: root password: root servlet: multipart: max-file-size: 10MB max-request-size: 50MB mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.photostudio.entity configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl server: port: 8080这里特别解释一下map-underscore-to-camel-case，这个配置打开后，数据库里的create_time能自动映射到实体类的createTime，不用写一堆 resultMap，实用指数五颗星。
2.3 MyBatis 缓存机制与动态 SQL 实战
MyBatis 作为持久层框架，缓存机制是面试常客，也是实际开发必须理解的。网上摄影工作室系统里，套餐信息和工作集基本属于“读多写少”的数据，缓存的价值非常大。
MyBatis 的一级缓存是 SqlSession 级别的，也就是说同一个 SqlSession 中执行相同的查询，第二次会直接走缓存。但注意，SpringBoot 集成的 MyBatis 默认每个 Mapper 方法都会新建和关闭 SqlSession，所以一级缓存的实际作用范围非常有限，不要指望它扛压。
二级缓存是 Mapper 级别的。开启二级缓存后，查询结果会缓存在 Mapper 的 namespace 中，即使 SqlSession 关闭了，下次查询依然可以命中。配置方式也简单，在 Mapper XML 中加一行：
<cache eviction="LRU" flushInterval="60000" size="512" readOnly="true"/>但有一类坑在摄影系统里特别常见：涉及图片和视频的列表查询结果集很大，如果直接缓存，内存直接告急。所以二级缓存不是所有表都适合开，我的经验是只有套餐表、摄影师表这种数据量小、更新频率低的才值得开。订单和用户数据都是强一致性的，绝对不能开缓存。
再说 MyBatis 动态 SQL。这玩意儿是 MyBatis 最实用的功能，没有之一。网上摄影工作室的前端在筛选作品时，可能需要按风格、城市、价格区间组合查询，如果每种组合都写一条 SQL，那得写死。用动态 SQL 就灵活多了：
<select id="searchPackages" resultType="Package"> SELECT * FROM package <where> <if test="style != null and style != ''"> AND style = #{style} </if> <if test="city != null and city != ''"> AND city = #{city} </if> <if test="maxPrice != null"> AND price <= #{maxPrice} </if> </where> ORDER BY create_time DESC </select>这里有个很阴间的细节，就是“单个数字字符比较”的问题。如果你在 if 标签里写test="status == 0"，而且 status 是 String 类型，MyBatis 在解析 OGNL 表达式时，会把'0'当成字符而不是字符串，很可能导致比较结果和你预期相反。解决方式有两种：改成status == '0'.toString()，或者直接让 controller 层把参数转成 Integer 再传入。这个坑不长记性的人很容易吃亏。
2.4 JWT 登录认证与前后端 Token 处理
网上摄影工作室里有用户登录、后台管理，所以权限认证是绕不开的环节。目前最主流的方案就是 JWT + 拦截器。
JWT（JSON Web Token）的本质是把用户信息加密后放在 Token 里，服务端不保存会话状态。客户端在登录成功后拿到 Token，之后每次请求在请求头里带上：
Authorization: Bearer <token>后端的处理链路一般是：写一个登录接口，校验用户名密码后生成 Token 返回；再写一个拦截器，拦截需要认证的接口，解析 Token 并校验，失败则返回 401。
生成 Token 可以用jjwt依赖，核心代码大概长这样：
String token = Jwts.builder() .setSubject(String.valueOf(userId)) .claim("role", user.getRole()) .setExpiration(new Date(System.currentTimeMillis() + 7 * 24 * 3600 * 1000)) .signWith(SignatureAlgorithm.HS256, secretKey) .compact();我特别想强调一个实战细节：不要把用户密码、手机号这些敏感信息塞进 Token，因为 JWT 默认是 Base64 编码，不是加密，谁拿到都能解码看内容。Token 只放 userId 和 role 就够了。
前端的 Token 处理同样有讲究。热词里“vue前后端分离请求token处理”问的人特别多。我的做法是在 axios 封装里统一处理：请求拦截器从 localStorage 读 token 并加到请求头，响应拦截器统一判断 HTTP 状态码，遇到 401 就跳转到登录页。这样每个页面调用接口时完全不用关心 Token 是在哪里带的，代理了一次，处处生效。
3. 前端 Vue 工程开发与交互实现
3.1 Vue 环境搭建与项目初始化避坑指南
前端这块，从零搭建 Vue 环境有一个固定套路。先确认 Node.js 已安装，版本建议 16 或 18，太新的 Node 版本偶尔会遇到 node-sass 兼容性问题，太旧则 Vite 不支持。接下来安装 Vue 脚手架并创建项目：
npm install -g @vue/cli vue create photo-front npm install element-plus axios npm run serve如果你是跟着教程走，遇到npm run serve报错，大部分原因是依赖没装全或者 node_modules 缓存出了问题。我通常的做法是删掉整个 node_modules 和 package-lock.json，然后重新npm install，八成能解决。
需要注意的一个前置环境问题是 MySQL 本身的安装。很多初学者根本还没跑起来项目，卡在 MySQL 的环境配置上。MySQL 下载安装的时候，建议选择 MySQL Community Server 8.0 版本，安装过程中有几个容易踩的坑：一是 root 密码要记清楚，二是端口默认 3306 别改，三是安装完成后要去“服务”里确认 MySQL 服务已经启动。连不上的时候先用命令行mysql -u root -p测一下，先确认数据库本身没问题，再怀疑后端的配置。
3.2 Vue Router 与路由守卫的动态权限控制
网上摄影工作室系统的页面可以分成两大类：客户前台和后台管理。客户前台要开放，后台管理则需要登录后按角色访问。
Vue Router 配置时，我会把路由先拆成常量路由和动态路由。常量路由包括首页、作品列表、套餐详情、登录注册这些；后台管理的路由则要“登录且为管理员才能看到”。
对应地，前端需要在路由守卫里做判断：
router.beforeEach((to, from, next) => { const token = localStorage.getItem('token'); if (to.meta.requiresAuth && !token) { next('/login'); } else if (to.meta.role && token) { const role = JSON.parse(localStorage.getItem('userInfo')).role; if (role !== to.meta.role) { next('/'); } else { next(); } } else { next(); } });这种“前端控制路由显隐”的方式，最好的作用是提升用户体验，后台菜单能根据角色动态显示。但要清楚它的安全边界：真正防越权必须靠后端接口权限控制。前端就算不显示某个按钮，恶意用户也能直接请求接口地址，所以每次后端接口都要自己校验身份和角色，这个意识必须立起来。
3.3 摄影作品展示：图片懒加载与 m3u8 视频播放
作品展示是摄影工作室的门面，能不能把照片高质量地展示出去，直接影响用户对工作室的印象。前端做作品集时，我第一个优化的就是图片加载。摄影原图分辨率高、体积大，如果一次性全部加载，页面会卡成 PPT。合理的做法是加懒加载，Vue 里可以使用组件库自带的懒加载指令，也可以自己基于 IntersectionObserver 实现。当图片滚动到视口范围内才开始加载，配合 CDN 压缩图，相册页速度能提升好几倍。
再说视频展示。现在的摄影工作室越来越流行拍短视频宣传片，视频编码格式五花八门，前端处理播放最稳的方案之一是用 m3u8 的 HLS 流。Vue 播放 m3u8 视频，技术上推荐两个组合：
video.js+videojs-contrib-hlshls.js，兼容性和可定制性都更强
以hls.js为例，最简单的播放逻辑是这样：
import Hls from 'hls.js'; const video = document.getElementById('videoPlayer'); if (Hls.isSupported()) { const hls = new Hls(); hls.loadSource(m3u8Url); hls.attachMedia(video); }当然，开发时本地放 m3u8 文件会有跨域问题，通常需要把视频文件放在和后端同域名的位置，或者后端接口直接返回视频流地址。另外还要注意，如果视频是放在阿里云 OSS 之类的对象存储上的，务必给视频设置允许跨域的 CORS 规则，否则前端会拿不到视频分片。
3.4 Axios 封装与接口联调经验
Vue 项目里接口请求满天飞，如果没有统一的封装，代码会非常散乱。我会单独建一个request.js文件，统一创建 axios 实例，配置 baseURL、超时时间、请求和响应拦截器：
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) { localStorage.removeItem('token'); router.push('/login'); } ElMessage.error(error.message || '网络异常'); return Promise.reject(error); } ); export default request;这里有个开发环境联调的核心秘诀：使用 Vite 的代理解决跨域。前后端分离开发时，前端跑在 5173，后端跑在 8080，不同端口之间请求属于跨域。你当然可以在 SpringBoot 里配置 CORS，但我更建议开发时直接用 Vite 的 proxy，让前端把所有/api开头的请求转发到后端：
server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } } }这样前端代码里可以保持相对路径请求，部署时再交给 Nginx 做同样的事情。开发和生产的路径逻辑完全一致，少很多麻烦。
4. 系统部署上线与常见问题排查实录
4.1 SpringBoot 后端打包与部署细节
后端部署说起来就是打包 jar、放上服务器、跑起来，但实际操作中每一步都有讲究。
首先，打包前你需要在pom.xml里确认有 spring-boot-maven-plugin 插件，否则打出来的 jar 不能直接运行。然后用 Maven 的 package 命令打包：
mvn clean package -DskipTests打包完成后，target目录下会多出一个.jar文件。注意，SpringBoot 默认打的包是可执行的 fat jar，但我遇到过明明执行成功却无法运行的情况，这时候大概率你的 pom 没有加 finalName，或者依赖冲突导致 jar 包损坏。我习惯在构建命令里加上--finalName=photostudio来指定文件名，管理起来更清爽。
启动方式推荐用 nohup 放在后台运行：
nohup java -jar photostudio.jar --spring.profiles.active=prod > app.log 2>&1 &生产环境一般要准备一份生产配置application-prod.yml，数据库连接地址改为线上数据库，日志路径独立配置，还要开启优雅停机：
spring: datasource: url: jdbc:mysql://your-mysql-host:3306/photostudio?serverTimezone=Asia/Shanghai server: shutdown: graceful如果你是本地演示，就直接java -jar photostudio.jar跑起来，浏览器访问 8080 端口就能测了。
4.2 Nginx 部署 Vue 前端与反向代理配置
前端打包同样简单，运行：
npm run build打包完成后会把静态资源输出到dist目录。这里的“前端部署”核心工作是把 dist 目录托给 Nginx，并把/api请求反向代理到后端的 8080 端口。
一份能直接用的 Nginx 配置参考如下：
server { listen 80; server_name photostudio.example.com; root /var/www/photostudio/dist; index index.html; location / { try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }try_files $uri $uri/ /index.html这一行是 Vue Router 使用 history 模式的必备配置。如果不加，刷新页面的时候 Nginx 会直接 404，因为前端路由是前端在控制的，后端没有/packages或/order这个真实路径，你打开首页没问题，一刷新带路径的页面就断了。
部署之后如果发现页面代码更新了但浏览器没变化，多半是缓存问题。Nginx 里可以给静态资源加过期时间，最新的 hash 文件名会自动请求新资源，但 index.html 必须设置禁用缓存，否则用户永远看到老页面。
4.3 常见问题排查思路与解决实录
问题一：前端请求后端接口 404，后端控制台没有任何日志
这是典型的代理或者跨域配置问题。排查思路：先用 curl 直接试后端接口通不通，比如：
curl http://localhost:8080/api/package/list后端没问题，则检查前端代理是否生效。看 Vite 配置里的 target 是否写对，看 Nginx 配置文件是否 reload 过。后端没日志，说明请求根本没到后端——这基本能把范围锁定在代理层。
问题二：接口返回数据正常，但前端页面布局全乱了
离谱的是，Vue 打包后布局异常是很常见的问题，最常见的原因是静态资源路径写死了绝对路径。vue.config.js里需要配置publicPath，如果你的项目部署在域名根目录，用/；如果是子路径部署，必须配置成相对的./。构建前先搞清楚自己要部署在什么路径下，可以省掉一次重新打包的时间。
问题三：MyBatis 查询结果出现多条重复数据或者缓存脏读
这是 MyBatis 二级缓存开启后最典型的副作用。网上摄影工作室系统的摄影师档期查询，如果开了缓存，客户改了订单状态后，再次查询还是老数据。我当时就被这个坑了一上午。排查方案：确认哪些 Mapper 开启了<cache/>，对订单、用户这类写多读少的表关闭缓存，只保留套餐、风格分类这种低频变化的缓存。另一个办法是在修改操作后手动调用 SqlSession 的清理缓存方法，但最干净的还是不开或者精准开。
问题四：Windows 开发环境 MySQL 版本过高导致 SpringBoot 启动报时区错误
报错信息类似The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized。这个问题有好几种解法，最省事的是在数据库连接 URL 后面加上serverTimezone=Asia/Shanghai；也可以执行 SQL 设置全局时区：
SET GLOBAL time_zone = '+8:00';两种都行，我建议两个都做，双保险。还有 MySQL 8.0 和 5.7 的驱动类名不一样，5.7 用com.mysql.jdbc.Driver，8.0 用com.mysql.cj.jdbc.Driver，千万别写错。
4.4 从开发到上线的时间规划建议
我给想从 0 复现这个网上摄影工作室项目的同学一个比较现实的排期：
- 第 1 天：搭好环境，创建前后端工程，把数据库表全部建好。
- 第 2 天：完成后端用户注册登录、JWT 认证、作品和套餐的 CRUD 接口。
- 第 3 天：完成后端订单流程、状态流转、后台相关接口。
- 第 4 天：搭前端框架，把登录、首页、作品集页面做出来，联调通过。
- 第 5 天：完成套餐详情、预约下单、后台管理页面，处理各种边界情况和 Bug。
- 第 6 天：整体测试，部署上线，写部署文档。
这个排期按每天 4 到 6 小时来算，基本上是一个有 Java 基础的人能接受的节奏。如果是从零学 Vue 或者从零学 SpringBoot，时间再翻倍也正常，不用焦虑。
做完这个系统之后，你的收获绝对不只是“会了 SpringBoot 和 Vue”这么简单，而是理解了一个业务系统从需求分析到部署落地的完整链路。前端怎么组织代码、后端怎么设计接口、数据表怎么建模、部署踩了哪些坑，这些能力才是项目真正留给你的沉淀。以后不管你是要拓展功能、换成微服务架构，还是把这个项目写进简历，都有了一个扎实的底子。
我最后想提醒一句：项目复现过程中遇到问题，先自己看日志、查代码、断点调试，实在不行再搜索。整个过程下来你会发现，独立解决十个问题比看二十篇教程都管用。
