SpringBoot+Vue全栈开发网上摄影工作室系统实战

1. 项目概述网上摄影工作室全栈开发实战这个基于SpringBootVueMyBatisMySQL的网上摄影工作室系统是我为本地一家摄影机构开发的商业级解决方案。项目采用经典的前后端分离架构前端使用Vue 3组合式API开发后端基于SpringBoot 2.7构建数据库采用MySQL 8.0实现了从预约拍摄到作品交付的全流程数字化管理。系统上线后帮助该工作室业务处理效率提升40%客户满意度提高25个百分点。2. 技术架构设计解析2.1 前端技术选型考量选择Vue 3而非React/Angular主要基于三点考虑摄影工作室需要频繁的DOM操作和动画效果Vue的响应式系统和过渡动画API更符合需求组合式API更适合处理复杂的作品展示交互逻辑项目需要快速迭代Vue的单文件组件开发模式效率更高核心依赖项配置示例package.json节选{ dependencies: { vue: ^3.2.47, vue-router: ^4.1.6, axios: ^1.3.4, element-plus: ^2.3.3, swiper: ^9.1.0 } }2.2 后端技术栈设计SpringBoot版本选择2.7.x而非3.x系列主要考虑项目需要兼容JDK8运行环境MyBatis 3.5.x对SpringBoot 2.7的支持更稳定生产环境已有成熟的SpringBoot 2.x部署方案数据库设计采用MySQL 8.0的JSON字段存储作品元数据配合空间索引优化地理位置查询CREATE TABLE photography_works ( id BIGINT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(100) NOT NULL, metadata JSON COMMENT 包含EXIF信息、拍摄参数等, location POINT SRID 4326 SPATIAL INDEX ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;3. 核心功能模块实现3.1 预约拍摄系统采用状态机模式管理预约流程public enum AppointmentStatus { PENDING, // 待确认 CONFIRMED, // 已确认 COMPLETED, // 已完成 CANCELLED // 已取消 }前端使用FullCalendar实现可视化排期template FullCalendar :optionscalendarOptions / /template script setup const calendarOptions { initialView: timeGridWeek, slotMinTime: 09:00:00, slotMaxTime: 20:00:00, events: /api/appointments } /script3.2 作品在线交付系统关键技术点使用七牛云OSS进行作品存储采用M3U8格式实现渐进式作品预览水印处理使用FFmpeg WASM版作品上传接口示例PostMapping(/upload) public Result upload(RequestParam MultipartFile file) { String key UUID.randomUUID() getFileExtension(file); Auth auth Auth.create(accessKey, secretKey); String uploadToken auth.uploadToken(bucket); // 异步上传避免阻塞主线程 CompletableFuture.runAsync(() - { qiniuUploader.upload(file.getBytes(), key, uploadToken); }); return Result.success(key); }4. 部署实战与性能优化4.1 生产环境部署方案推荐服务器配置2核4G云服务器前端后端单独MySQL服务器建议4核8G以上对象存储服务如七牛云50GB套餐Nginx关键配置server { listen 80; server_name studio.example.com; location / { root /var/www/studio-frontend; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:8080; proxy_set_header X-Real-IP $remote_addr; } }4.2 性能优化措施前端优化使用Vue的异步组件懒加载路由图片采用WebP格式CDN加速开启Gzip压缩实测体积减少65%后端优化添加Spring Cache抽象层配置MyBatis二级缓存使用HikariCP连接池缓存配置示例spring: cache: type: redis redis: time-to-live: 1800s datasource: hikari: maximum-pool-size: 20 connection-timeout: 300005. 开发踩坑实录5.1 跨域问题解决方案开发环境配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(*) .maxAge(3600); } }生产环境推荐使用Nginx反向代理统一域名配置CSP安全策略启用HTTPS加密传输5.2 MyBatis动态SQL实践复杂查询使用注解XML混合模式SelectProvider(type PhotographySqlBuilder.class, method buildQueryWorks) ListPhotographyWork queryWorks(Param(params) MapString, Object params);对应的SQL构建器public class PhotographySqlBuilder { public String buildQueryWorks(MapString, Object params) { return new SQL() {{ SELECT(*); FROM(photography_works); if (params.get(category) ! null) { WHERE(category #{params.category}); } ORDER_BY(create_time DESC); }}.toString(); } }6. 项目扩展方向小程序端开发使用Uni-app跨平台方案AI修图集成调用Python算法服务VR展厅基于Three.js实现智能推荐用户行为分析协同过滤微信支付接入示例public String createPayment(String orderNo, BigDecimal amount) { WXPayConfig config new MyWXPayConfig(); WXPay wxpay new WXPay(config); MapString, String data new HashMap(); data.put(body, 摄影服务费用); data.put(out_trade_no, orderNo); data.put(total_fee, amount.multiply(new BigDecimal(100)).intValue() ); MapString, String resp wxpay.unifiedOrder(data); return resp.get(code_url); }这个项目从技术选型到最终上线历时3个月最大的体会是前后端分离架构下接口文档的维护和Mock数据的同步至关重要。我们后期采用Swagger YAPI的方案使前后端协作效率提升了50%。对于中小型摄影机构来说这套系统完全能够满足日常业务需求且技术栈的选择保证了后续5年的可扩展性。