开 发一个“网上摄影工作室”这件事最让我觉得有意思的地方在于它不是一个单纯的电商系统也不是纯内容展示站而是把作品中台、套餐管理、在线预约、订单流转、后台维护这些典型业务全部串起来的完整闭环。如果你最近正在找 SpringBoot Vue 前后端分离的实战项目想搞明白一套东西从 0 到 1 怎么落地这篇就适合你慢慢看。本文会按这个网上摄影工作室系统的真实开发路径依次拆解系统设计、后端实现、前端交互、数据库设计、部署排查把每个关键环节“为什么要这么做”都讲透。1. 系统整体设计与需求拆解1.1 摄影工作室要解决的业务问题做项目之前先别急着写代码。我看过太多人拿到一个题目第一反应是“用什么技术、建什么表”结果业务逻辑一团浆糊。网上摄影工作室的核心用户画像其实很清晰一边是想展示作品、靠套餐接单的摄影师或工作室另一边是想找风格、约时间、看档期的客户。围绕这个场景功能需求可以拆成几条主线作品集展示这是摄影工作室的脸面需要支持图片、视频等多种展示形式最好能按风格分类比如婚纱、写真、商业、儿童。套餐服务摄影师不能只标一个价格套餐要区分档次、包含服务内容、适用人数、底片数量、精修张数这是线上转化的基础。在线预约与订单客户看中套餐后要挑选档期、提交预约需求工作室后台能实时看到订单状态。订单状态流转新预约、已确认、拍摄中、已完成、已取消状态一多逻辑就容易乱。会员与评价老客户复购、拍摄完后的评价反馈能给工作室带来口碑。这些需求拆清楚之后再映射到前后端分离的架构里就非常顺了Vue 负责页面展示和用户交互SpringBoot 提供 RESTful APIMyBatis 负责数据库操作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 是半自动 ORMSQL 由你自己控制查询性能和可优化空间都在自己手里不像 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 ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;套餐表要注意“服务内容”这类字段如果直接存纯文本后期要搞套餐对比功能时很难处理。我的做法是主体字段正常设计服务清单单独用 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 groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version2.3.1/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency三是配置文件。网上摄影工作室系统的application.yml里最基本的要配置数据源、MyBatis 映射文件位置和日志级别spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/photostudio?serverTimezoneAsia/ShanghaiuseUnicodetruecharacterEncodingutf8 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 evictionLRU flushInterval60000 size512 readOnlytrue/但有一类坑在摄影系统里特别常见涉及图片和视频的列表查询结果集很大如果直接缓存内存直接告急。所以二级缓存不是所有表都适合开我的经验是只有套餐表、摄影师表这种数据量小、更新频率低的才值得开。订单和用户数据都是强一致性的绝对不能开缓存。再说 MyBatis 动态 SQL。这玩意儿是 MyBatis 最实用的功能没有之一。网上摄影工作室的前端在筛选作品时可能需要按风格、城市、价格区间组合查询如果每种组合都写一条 SQL那得写死。用动态 SQL 就灵活多了select idsearchPackages resultTypePackage SELECT * FROM package where if teststyle ! null and style ! AND style #{style} /if if testcity ! null and city ! AND city #{city} /if if testmaxPrice ! null AND price lt; #{maxPrice} /if /where ORDER BY create_time DESC /select这里有个很阴间的细节就是“单个数字字符比较”的问题。如果你在 if 标签里写teststatus 0而且 status 是 String 类型MyBatis 在解析 OGNL 表达式时会把0当成字符而不是字符串很可能导致比较结果和你预期相反。解决方式有两种改成status 0.toString()或者直接让 controller 层把参数转成 Integer 再传入。这个坑不长记性的人很容易吃亏。2.4 JWT 登录认证与前后端 Token 处理网上摄影工作室里有用户登录、后台管理所以权限认证是绕不开的环节。目前最主流的方案就是 JWT 拦截器。JWTJSON 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.jsvideojs-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 包损坏。我习惯在构建命令里加上--finalNamephotostudio来指定文件名管理起来更清爽。启动方式推荐用 nohup 放在后台运行nohup java -jar photostudio.jar --spring.profiles.activeprod app.log 21 生产环境一般要准备一份生产配置application-prod.yml数据库连接地址改为线上数据库日志路径独立配置还要开启优雅停机spring: datasource: url: jdbc:mysql://your-mysql-host:3306/photostudio?serverTimezoneAsia/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 后面加上serverTimezoneAsia/Shanghai也可以执行 SQL 设置全局时区SET GLOBAL time_zone 8:00;两种都行我建议两个都做双保险。还有 MySQL 8.0 和 5.7 的驱动类名不一样5.7 用com.mysql.jdbc.Driver8.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”这么简单而是理解了一个业务系统从需求分析到部署落地的完整链路。前端怎么组织代码、后端怎么设计接口、数据表怎么建模、部署踩了哪些坑这些能力才是项目真正留给你的沉淀。以后不管你是要拓展功能、换成微服务架构还是把这个项目写进简历都有了一个扎实的底子。我最后想提醒一句项目复现过程中遇到问题先自己看日志、查代码、断点调试实在不行再搜索。整个过程下来你会发现独立解决十个问题比看二十篇教程都管用。
开 发一个“网上摄影工作室”这件事最让我觉得有意思的地方在于它不是一个单纯的电商系统也不是纯内容展示站而是把作品中台、套餐管理、在线预约、订单流转、后台维护这些典型业务全部串起来的完整闭环。如果你最近正在找 SpringBoot Vue 前后端分离的实战项目想搞明白一套东西从 0 到 1 怎么落地这篇就适合你慢慢看。本文会按这个网上摄影工作室系统的真实开发路径依次拆解系统设计、后端实现、前端交互、数据库设计、部署排查把每个关键环节“为什么要这么做”都讲透。1. 系统整体设计与需求拆解1.1 摄影工作室要解决的业务问题做项目之前先别急着写代码。我看过太多人拿到一个题目第一反应是“用什么技术、建什么表”结果业务逻辑一团浆糊。网上摄影工作室的核心用户画像其实很清晰一边是想展示作品、靠套餐接单的摄影师或工作室另一边是想找风格、约时间、看档期的客户。围绕这个场景功能需求可以拆成几条主线作品集展示这是摄影工作室的脸面需要支持图片、视频等多种展示形式最好能按风格分类比如婚纱、写真、商业、儿童。套餐服务摄影师不能只标一个价格套餐要区分档次、包含服务内容、适用人数、底片数量、精修张数这是线上转化的基础。在线预约与订单客户看中套餐后要挑选档期、提交预约需求工作室后台能实时看到订单状态。订单状态流转新预约、已确认、拍摄中、已完成、已取消状态一多逻辑就容易乱。会员与评价老客户复购、拍摄完后的评价反馈能给工作室带来口碑。这些需求拆清楚之后再映射到前后端分离的架构里就非常顺了Vue 负责页面展示和用户交互SpringBoot 提供 RESTful APIMyBatis 负责数据库操作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 是半自动 ORMSQL 由你自己控制查询性能和可优化空间都在自己手里不像 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 ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;套餐表要注意“服务内容”这类字段如果直接存纯文本后期要搞套餐对比功能时很难处理。我的做法是主体字段正常设计服务清单单独用 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 groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version2.3.1/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency三是配置文件。网上摄影工作室系统的application.yml里最基本的要配置数据源、MyBatis 映射文件位置和日志级别spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/photostudio?serverTimezoneAsia/ShanghaiuseUnicodetruecharacterEncodingutf8 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 evictionLRU flushInterval60000 size512 readOnlytrue/但有一类坑在摄影系统里特别常见涉及图片和视频的列表查询结果集很大如果直接缓存内存直接告急。所以二级缓存不是所有表都适合开我的经验是只有套餐表、摄影师表这种数据量小、更新频率低的才值得开。订单和用户数据都是强一致性的绝对不能开缓存。再说 MyBatis 动态 SQL。这玩意儿是 MyBatis 最实用的功能没有之一。网上摄影工作室的前端在筛选作品时可能需要按风格、城市、价格区间组合查询如果每种组合都写一条 SQL那得写死。用动态 SQL 就灵活多了select idsearchPackages resultTypePackage SELECT * FROM package where if teststyle ! null and style ! AND style #{style} /if if testcity ! null and city ! AND city #{city} /if if testmaxPrice ! null AND price lt; #{maxPrice} /if /where ORDER BY create_time DESC /select这里有个很阴间的细节就是“单个数字字符比较”的问题。如果你在 if 标签里写teststatus 0而且 status 是 String 类型MyBatis 在解析 OGNL 表达式时会把0当成字符而不是字符串很可能导致比较结果和你预期相反。解决方式有两种改成status 0.toString()或者直接让 controller 层把参数转成 Integer 再传入。这个坑不长记性的人很容易吃亏。2.4 JWT 登录认证与前后端 Token 处理网上摄影工作室里有用户登录、后台管理所以权限认证是绕不开的环节。目前最主流的方案就是 JWT 拦截器。JWTJSON 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.jsvideojs-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 包损坏。我习惯在构建命令里加上--finalNamephotostudio来指定文件名管理起来更清爽。启动方式推荐用 nohup 放在后台运行nohup java -jar photostudio.jar --spring.profiles.activeprod app.log 21 生产环境一般要准备一份生产配置application-prod.yml数据库连接地址改为线上数据库日志路径独立配置还要开启优雅停机spring: datasource: url: jdbc:mysql://your-mysql-host:3306/photostudio?serverTimezoneAsia/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 后面加上serverTimezoneAsia/Shanghai也可以执行 SQL 设置全局时区SET GLOBAL time_zone 8:00;两种都行我建议两个都做双保险。还有 MySQL 8.0 和 5.7 的驱动类名不一样5.7 用com.mysql.jdbc.Driver8.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”这么简单而是理解了一个业务系统从需求分析到部署落地的完整链路。前端怎么组织代码、后端怎么设计接口、数据表怎么建模、部署踩了哪些坑这些能力才是项目真正留给你的沉淀。以后不管你是要拓展功能、换成微服务架构还是把这个项目写进简历都有了一个扎实的底子。我最后想提醒一句项目复现过程中遇到问题先自己看日志、查代码、断点调试实在不行再搜索。整个过程下来你会发现独立解决十个问题比看二十篇教程都管用。
