1. 项目背景与技术选型143线上约拍系统是一款基于移动互联网的摄影服务平台旨在连接摄影师与有拍摄需求的用户。这个项目采用前后端分离架构后端使用SpringBoot框架前端采用Vue.js并通过微信小程序触达用户。这种技术组合在当前互联网产品开发中非常典型能够充分发挥各技术的优势。SpringBoot作为后端框架的选择主要基于以下几个考量快速开发通过自动配置和起步依赖简化了Spring应用的初始搭建和开发过程微服务友好内置Tomcat容器易于打包部署适合构建RESTful API生态丰富与MyBatis、Redis等常用中间件集成简单监控完善通过Actuator可以方便地监控应用状态Vue.js作为前端框架的优势在于渐进式框架可以逐步采用与其他库或已有项目整合组件化开发单文件组件(.vue)将模板、逻辑和样式封装在一起响应式数据绑定简化了DOM操作提高开发效率丰富的生态系统Vue Router、Vuex等配套工具完善微信小程序作为用户入口的优势无需安装即用即走降低用户使用门槛社交属性可以方便地分享和传播原生体验接近原生应用的流畅体验微信生态可以直接使用微信支付、地理位置等能力2. 系统架构设计2.1 整体架构系统采用典型的三层架构表现层微信小程序 管理后台(Web)业务逻辑层SpringBoot应用数据持久层MySQL Redis[微信小程序] ←HTTP/HTTPS→ [Nginx] ←→ [SpringBoot应用] ↑ ↓ [管理后台(Web)] ←HTTP/HTTPS→ [MySQL] ↑ ↓ [Redis]2.2 后端架构关键点SpringBoot应用采用模块化设计common公共模块包含工具类、常量定义等dao数据访问层使用MyBatis-Plus简化CRUD操作service业务逻辑层controllerRESTful API接口层config配置类包含Spring Security、Swagger等配置数据库设计考虑因素用户系统摄影师和普通用户采用同一张表通过角色区分约拍订单记录订单状态、时间、地点等关键信息作品展示摄影师可以上传作品集评价系统用户可以对摄影师的服务进行评价2.3 前端架构设计微信小程序采用原生自定义组件开发pages各页面目录components自定义组件utils工具函数styles公共样式servicesAPI请求封装管理后台采用Vue全家桶Vue CLI搭建项目基础结构Vue Router管理路由Vuex管理全局状态Element UI作为UI组件库Axios处理HTTP请求3. 核心功能实现3.1 用户认证与授权系统采用JWT(JSON Web Token)进行用户认证流程如下用户通过微信登录获取code后端用code向微信服务器换取openid后端生成JWT返回给客户端客户端在后续请求中携带JWTSpring Security配置关键代码Configuration EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { Override protected void configure(HttpSecurity http) throws Exception { http.csrf().disable() .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS) .and() .authorizeRequests() .antMatchers(/api/auth/**).permitAll() .anyRequest().authenticated() .and() .addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class); } Bean public JwtAuthenticationFilter jwtAuthenticationFilter() { return new JwtAuthenticationFilter(); } }微信小程序端登录实现// 登录 wx.login({ success: res { if (res.code) { // 发送code到后端 wx.request({ url: https://yourdomain.com/api/auth/login, method: POST, data: { code: res.code }, success: res { // 存储token wx.setStorageSync(token, res.data.token) } }) } } })3.2 约拍订单流程订单状态机设计[待支付] → [已支付] → [进行中] → [已完成] ↓ [已取消]订单创建关键代码RestController RequestMapping(/api/orders) public class OrderController { Autowired private OrderService orderService; PostMapping public ResponseEntity? createOrder(RequestBody OrderCreateDTO dto) { Long userId SecurityUtils.getCurrentUserId(); Order order orderService.createOrder(userId, dto); return ResponseEntity.ok(order); } }3.3 支付系统集成系统集成微信支付主要流程小程序端调用后端创建支付订单后端调用微信支付统一下单API后端返回支付参数给小程序小程序调用wx.requestPayment发起支付后端处理支付回调通知支付服务关键代码Service public class WechatPayService { public MapString, String createMiniAppPayment(Order order, String openid) { MapString, String params new HashMap(); params.put(appid, wechatConfig.getAppId()); params.put(mch_id, wechatConfig.getMchId()); params.put(nonce_str, WXPayUtil.generateNonceStr()); params.put(body, 约拍服务- order.getTitle()); params.put(out_trade_no, order.getOrderNo()); params.put(total_fee, String.valueOf(order.getAmount())); params.put(spbill_create_ip, 127.0.0.1); params.put(notify_url, wechatConfig.getNotifyUrl()); params.put(trade_type, JSAPI); params.put(openid, openid); // 签名并调用微信支付API String signedXml WXPayUtil.generateSignedXml(params, wechatConfig.getKey()); String response HttpUtil.post(https://api.mch.weixin.qq.com/pay/unifiedorder, signedXml); // 解析返回结果 MapString, String result WXPayUtil.xmlToMap(response); if (SUCCESS.equals(result.get(return_code))) { // 准备小程序支付参数 MapString, String payParams new HashMap(); payParams.put(appId, wechatConfig.getAppId()); payParams.put(timeStamp, String.valueOf(System.currentTimeMillis() / 1000)); payParams.put(nonceStr, WXPayUtil.generateNonceStr()); payParams.put(package, prepay_id result.get(prepay_id)); payParams.put(signType, MD5); String paySign WXPayUtil.generateSignature(payParams, wechatConfig.getKey()); payParams.put(paySign, paySign); return payParams; } throw new RuntimeException(微信支付下单失败); } }4. 性能优化与安全4.1 缓存策略系统采用多级缓存策略本地缓存使用Caffeine缓存高频访问的数据分布式缓存Redis缓存共享数据数据库缓存MySQL查询缓存典型缓存实现Service CacheConfig(cacheNames photographer) public class PhotographerServiceImpl implements PhotographerService { Autowired private PhotographerMapper photographerMapper; Override Cacheable(key #id) public Photographer getById(Long id) { return photographerMapper.selectById(id); } Override CachePut(key #photographer.id) public Photographer update(Photographer photographer) { photographerMapper.updateById(photographer); return photographer; } Override CacheEvict(key #id) public void delete(Long id) { photographerMapper.deleteById(id); } }4.2 数据库优化索引优化为常用查询字段建立合适索引分库分表用户表和订单表按用户ID分片SQL优化避免SELECT *使用JOIN替代子查询读写分离主库写从库读4.3 安全措施XSS防护前端过滤特殊字符后端使用HttpOnly CookieCSRF防护虽然RESTful API无状态但仍验证RefererSQL注入使用MyBatis预编译语句数据脱敏敏感信息如手机号在传输和存储时加密接口限流使用Guava RateLimiter防止暴力请求安全配置示例Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addInterceptors(InterceptorRegistry registry) { // 接口限流拦截器 registry.addInterceptor(rateLimitInterceptor()) .addPathPatterns(/api/**); // XSS防护拦截器 registry.addInterceptor(xssInterceptor()) .addPathPatterns(/api/**); } Bean public RateLimitInterceptor rateLimitInterceptor() { return new RateLimitInterceptor(); } Bean public XssInterceptor xssInterceptor() { return new XssInterceptor(); } }5. 部署与监控5.1 容器化部署使用Docker容器化部署SpringBoot应用FROM openjdk:8-jdk-alpine VOLUME /tmp ARG JAR_FILEtarget/*.jar COPY ${JAR_FILE} app.jar ENTRYPOINT [java,-Djava.security.egdfile:/dev/./urandom,-jar,/app.jar]使用docker-compose编排服务version: 3 services: app: image: your-registry/photo-booking:latest ports: - 8080:8080 environment: - SPRING_PROFILES_ACTIVEprod depends_on: - redis - mysql redis: image: redis:alpine ports: - 6379:6379 mysql: image: mysql:5.7 environment: - MYSQL_ROOT_PASSWORDyourpassword - MYSQL_DATABASEphoto_booking ports: - 3306:3306 volumes: - mysql_data:/var/lib/mysql volumes: mysql_data:5.2 监控与告警SpringBoot Actuator暴露健康指标Prometheus收集指标数据Grafana展示监控图表ELK收集和分析日志Actuator配置management: endpoints: web: exposure: include: * endpoint: health: show-details: always prometheus: enabled: true6. 项目总结与扩展在实际开发过程中有几个关键点值得注意微信小程序审核小程序涉及支付功能需要企业资质且服务类目要选择正确图片存储建议使用OSS服务存储用户上传的图片不要直接存在服务器消息通知除了小程序模板消息可以考虑增加短信提醒预约冲突摄影师时间管理需要特别处理防止同一时段被多次预约系统未来可以扩展的方向摄影师端APP提供更专业的作品管理和客户沟通工具AI推荐基于用户喜好推荐合适的摄影师和风格社区功能用户分享拍摄经验和作品线下活动组织摄影沙龙和外拍活动技术债与优化点引入Spring Cloud实现微服务化使用WebSocket实现实时消息通知增加自动化测试覆盖率优化小程序首屏加载速度 SpringBoot+Vue微信小程序约拍系统架构设计与实现
1. 项目背景与技术选型143线上约拍系统是一款基于移动互联网的摄影服务平台旨在连接摄影师与有拍摄需求的用户。这个项目采用前后端分离架构后端使用SpringBoot框架前端采用Vue.js并通过微信小程序触达用户。这种技术组合在当前互联网产品开发中非常典型能够充分发挥各技术的优势。SpringBoot作为后端框架的选择主要基于以下几个考量快速开发通过自动配置和起步依赖简化了Spring应用的初始搭建和开发过程微服务友好内置Tomcat容器易于打包部署适合构建RESTful API生态丰富与MyBatis、Redis等常用中间件集成简单监控完善通过Actuator可以方便地监控应用状态Vue.js作为前端框架的优势在于渐进式框架可以逐步采用与其他库或已有项目整合组件化开发单文件组件(.vue)将模板、逻辑和样式封装在一起响应式数据绑定简化了DOM操作提高开发效率丰富的生态系统Vue Router、Vuex等配套工具完善微信小程序作为用户入口的优势无需安装即用即走降低用户使用门槛社交属性可以方便地分享和传播原生体验接近原生应用的流畅体验微信生态可以直接使用微信支付、地理位置等能力2. 系统架构设计2.1 整体架构系统采用典型的三层架构表现层微信小程序 管理后台(Web)业务逻辑层SpringBoot应用数据持久层MySQL Redis[微信小程序] ←HTTP/HTTPS→ [Nginx] ←→ [SpringBoot应用] ↑ ↓ [管理后台(Web)] ←HTTP/HTTPS→ [MySQL] ↑ ↓ [Redis]2.2 后端架构关键点SpringBoot应用采用模块化设计common公共模块包含工具类、常量定义等dao数据访问层使用MyBatis-Plus简化CRUD操作service业务逻辑层controllerRESTful API接口层config配置类包含Spring Security、Swagger等配置数据库设计考虑因素用户系统摄影师和普通用户采用同一张表通过角色区分约拍订单记录订单状态、时间、地点等关键信息作品展示摄影师可以上传作品集评价系统用户可以对摄影师的服务进行评价2.3 前端架构设计微信小程序采用原生自定义组件开发pages各页面目录components自定义组件utils工具函数styles公共样式servicesAPI请求封装管理后台采用Vue全家桶Vue CLI搭建项目基础结构Vue Router管理路由Vuex管理全局状态Element UI作为UI组件库Axios处理HTTP请求3. 核心功能实现3.1 用户认证与授权系统采用JWT(JSON Web Token)进行用户认证流程如下用户通过微信登录获取code后端用code向微信服务器换取openid后端生成JWT返回给客户端客户端在后续请求中携带JWTSpring Security配置关键代码Configuration EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { Override protected void configure(HttpSecurity http) throws Exception { http.csrf().disable() .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS) .and() .authorizeRequests() .antMatchers(/api/auth/**).permitAll() .anyRequest().authenticated() .and() .addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class); } Bean public JwtAuthenticationFilter jwtAuthenticationFilter() { return new JwtAuthenticationFilter(); } }微信小程序端登录实现// 登录 wx.login({ success: res { if (res.code) { // 发送code到后端 wx.request({ url: https://yourdomain.com/api/auth/login, method: POST, data: { code: res.code }, success: res { // 存储token wx.setStorageSync(token, res.data.token) } }) } } })3.2 约拍订单流程订单状态机设计[待支付] → [已支付] → [进行中] → [已完成] ↓ [已取消]订单创建关键代码RestController RequestMapping(/api/orders) public class OrderController { Autowired private OrderService orderService; PostMapping public ResponseEntity? createOrder(RequestBody OrderCreateDTO dto) { Long userId SecurityUtils.getCurrentUserId(); Order order orderService.createOrder(userId, dto); return ResponseEntity.ok(order); } }3.3 支付系统集成系统集成微信支付主要流程小程序端调用后端创建支付订单后端调用微信支付统一下单API后端返回支付参数给小程序小程序调用wx.requestPayment发起支付后端处理支付回调通知支付服务关键代码Service public class WechatPayService { public MapString, String createMiniAppPayment(Order order, String openid) { MapString, String params new HashMap(); params.put(appid, wechatConfig.getAppId()); params.put(mch_id, wechatConfig.getMchId()); params.put(nonce_str, WXPayUtil.generateNonceStr()); params.put(body, 约拍服务- order.getTitle()); params.put(out_trade_no, order.getOrderNo()); params.put(total_fee, String.valueOf(order.getAmount())); params.put(spbill_create_ip, 127.0.0.1); params.put(notify_url, wechatConfig.getNotifyUrl()); params.put(trade_type, JSAPI); params.put(openid, openid); // 签名并调用微信支付API String signedXml WXPayUtil.generateSignedXml(params, wechatConfig.getKey()); String response HttpUtil.post(https://api.mch.weixin.qq.com/pay/unifiedorder, signedXml); // 解析返回结果 MapString, String result WXPayUtil.xmlToMap(response); if (SUCCESS.equals(result.get(return_code))) { // 准备小程序支付参数 MapString, String payParams new HashMap(); payParams.put(appId, wechatConfig.getAppId()); payParams.put(timeStamp, String.valueOf(System.currentTimeMillis() / 1000)); payParams.put(nonceStr, WXPayUtil.generateNonceStr()); payParams.put(package, prepay_id result.get(prepay_id)); payParams.put(signType, MD5); String paySign WXPayUtil.generateSignature(payParams, wechatConfig.getKey()); payParams.put(paySign, paySign); return payParams; } throw new RuntimeException(微信支付下单失败); } }4. 性能优化与安全4.1 缓存策略系统采用多级缓存策略本地缓存使用Caffeine缓存高频访问的数据分布式缓存Redis缓存共享数据数据库缓存MySQL查询缓存典型缓存实现Service CacheConfig(cacheNames photographer) public class PhotographerServiceImpl implements PhotographerService { Autowired private PhotographerMapper photographerMapper; Override Cacheable(key #id) public Photographer getById(Long id) { return photographerMapper.selectById(id); } Override CachePut(key #photographer.id) public Photographer update(Photographer photographer) { photographerMapper.updateById(photographer); return photographer; } Override CacheEvict(key #id) public void delete(Long id) { photographerMapper.deleteById(id); } }4.2 数据库优化索引优化为常用查询字段建立合适索引分库分表用户表和订单表按用户ID分片SQL优化避免SELECT *使用JOIN替代子查询读写分离主库写从库读4.3 安全措施XSS防护前端过滤特殊字符后端使用HttpOnly CookieCSRF防护虽然RESTful API无状态但仍验证RefererSQL注入使用MyBatis预编译语句数据脱敏敏感信息如手机号在传输和存储时加密接口限流使用Guava RateLimiter防止暴力请求安全配置示例Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addInterceptors(InterceptorRegistry registry) { // 接口限流拦截器 registry.addInterceptor(rateLimitInterceptor()) .addPathPatterns(/api/**); // XSS防护拦截器 registry.addInterceptor(xssInterceptor()) .addPathPatterns(/api/**); } Bean public RateLimitInterceptor rateLimitInterceptor() { return new RateLimitInterceptor(); } Bean public XssInterceptor xssInterceptor() { return new XssInterceptor(); } }5. 部署与监控5.1 容器化部署使用Docker容器化部署SpringBoot应用FROM openjdk:8-jdk-alpine VOLUME /tmp ARG JAR_FILEtarget/*.jar COPY ${JAR_FILE} app.jar ENTRYPOINT [java,-Djava.security.egdfile:/dev/./urandom,-jar,/app.jar]使用docker-compose编排服务version: 3 services: app: image: your-registry/photo-booking:latest ports: - 8080:8080 environment: - SPRING_PROFILES_ACTIVEprod depends_on: - redis - mysql redis: image: redis:alpine ports: - 6379:6379 mysql: image: mysql:5.7 environment: - MYSQL_ROOT_PASSWORDyourpassword - MYSQL_DATABASEphoto_booking ports: - 3306:3306 volumes: - mysql_data:/var/lib/mysql volumes: mysql_data:5.2 监控与告警SpringBoot Actuator暴露健康指标Prometheus收集指标数据Grafana展示监控图表ELK收集和分析日志Actuator配置management: endpoints: web: exposure: include: * endpoint: health: show-details: always prometheus: enabled: true6. 项目总结与扩展在实际开发过程中有几个关键点值得注意微信小程序审核小程序涉及支付功能需要企业资质且服务类目要选择正确图片存储建议使用OSS服务存储用户上传的图片不要直接存在服务器消息通知除了小程序模板消息可以考虑增加短信提醒预约冲突摄影师时间管理需要特别处理防止同一时段被多次预约系统未来可以扩展的方向摄影师端APP提供更专业的作品管理和客户沟通工具AI推荐基于用户喜好推荐合适的摄影师和风格社区功能用户分享拍摄经验和作品线下活动组织摄影沙龙和外拍活动技术债与优化点引入Spring Cloud实现微服务化使用WebSocket实现实时消息通知增加自动化测试覆盖率优化小程序首屏加载速度