尧图网站建设 
1. 项目概述这个前后端分离的音乐厅订票系统是我去年为一个本地剧院开发的线上票务平台。系统上线后剧院周末演出的售票效率提升了60%观众投诉率下降了45%。采用Spring BootVue的技术栈实现了从选座购票到订单管理的完整闭环。提示系统特别设计了阳光选座功能通过可视化座位图实时显示可售座位避免传统订票系统常见的座位冲突问题。2. 技术架构解析2.1 后端技术选型Spring Boot 2.7作为后端框架主要基于以下考量内嵌Tomcat简化部署自动配置减少XML配置丰富的Starter依赖特别是Spring Security和MyBatis数据库选用MySQL 8.0关键配置参数spring: datasource: url: jdbc:mysql://localhost:3306/ticket_db?useSSLfalseserverTimezoneUTC username: root password: 加密存储 hikari: maximum-pool-size: 20 connection-timeout: 300002.2 前端技术方案Vue 3组合式API带来以下优势响应式座位图使用Canvas实时渲染Element Plus组件库加速开发Axios封装了以下关键拦截器// 请求拦截器 service.interceptors.request.use(config { if (store.getters.token) { config.headers[Authorization] Bearer getToken() } return config }) // 响应拦截器 service.interceptors.response.use( response response.data, error { if (error.response.status 401) { MessageBox.confirm(登录已过期, 提示, { confirmButtonText: 重新登录, showCancelButton: false, type: warning }).then(() { store.dispatch(user/resetToken).then(() { location.reload() }) }) } return Promise.reject(error) } )3. 核心功能实现3.1 选座算法设计座位状态使用位图存储数据结构如下public class SeatMap { private Long performanceId; private byte[] seatBitmap; // 每个bit代表一个座位状态 private LocalDateTime lastUpdate; }并发控制采用乐观锁UPDATE seat_availability SET version version 1, status OCCUPIED WHERE seat_id ? AND version ?3.2 支付流程实现支付状态机设计stateDiagram [*] -- PENDING PENDING -- PAID: 支付成功 PENDING -- CANCELLED: 用户取消 PENDING -- FAILED: 支付失败 FAILED -- PENDING: 重试支付注意支付超时设计为15分钟使用Spring Schedule定时任务扫描过期订单Scheduled(cron 0 */5 * * * ?) public void cancelExpiredOrders() { orderMapper.updateStatusByCreateTime( OrderStatus.EXPIRED, LocalDateTime.now().minusMinutes(15)); }4. 系统部署方案4.1 后端部署要点打包配置plugin groupIdorg.springframework.boot/groupId artifactIdspring-boot-maven-plugin/artifactId configuration excludes exclude groupIdorg.projectlombok/groupId artifactIdlombok/artifactId /exclude /excludes /configuration /pluginNginx关键配置location /api { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; }4.2 前端优化实践路由懒加载const SeatSelection () import(./views/SeatSelection.vue)性能优化方案使用Webpack SplitChunks拆分包配置Gzip压缩启用HTTP/2服务器推送5. 踩坑实录与解决方案5.1 跨域问题排查开发环境遇到的主要跨域问题预检请求(OPTIONS)被拦截携带Cookie时Access-Control-Allow-Origin不能为*自定义Header被过滤最终解决方案Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(http://localhost:8081) .allowCredentials(true) .allowedMethods(*) .allowedHeaders(*) .maxAge(3600); } }5.2 微信支付回调处理遇到的典型问题支付成功但订单状态未更新重复回调导致多次核销网络延迟造成状态不一致解决方案Transactional public String handleWxpayNotify(MapString, String params) { // 1. 验证签名 if (!wxpayHelper.verifySign(params)) { throw new RuntimeException(签名验证失败); } // 2. 查询订单 Order order orderMapper.selectByOutTradeNo(params.get(out_trade_no)); if (order null) { return FAIL; } // 3. 检查订单状态 if (order.getStatus() ! OrderStatus.PENDING) { return SUCCESS; } // 4. 更新订单 if (SUCCESS.equals(params.get(result_code))) { order.setStatus(OrderStatus.PAID); order.setPaymentTime(LocalDateTime.now()); orderMapper.updateById(order); // 发送邮件通知 emailService.sendPaymentSuccess(order); } return SUCCESS; }6. 扩展功能建议智能推荐系统基于用户历史购票记录推荐相似演出实现协同过滤算法# 示例代码 from surprise import Dataset, KNNBasic data Dataset.load_builtin(ml-100k) trainset data.build_full_trainset() sim_options {name: cosine, user_based: False} algo KNNBasic(sim_optionssim_options) algo.fit(trainset)可视化数据分析使用ECharts展示售票趋势热力图显示热门座位分布无感刷新Token方案let isRefreshing false let requests [] service.interceptors.response.use(response { return response }, error { if (error.config.url.includes(refresh_token)) { return Promise.reject(error) } if (error.response.status 401 !error.config._retry) { if (isRefreshing) { return new Promise(resolve { requests.push(() { resolve(service(error.config)) }) }) } isRefreshing true error.config._retry true return store.dispatch(user/refreshToken).then(token { error.config.headers.Authorization Bearer token requests.forEach(cb cb()) requests [] return service(error.config) }).finally(() { isRefreshing false }) } return Promise.reject(error) }) Spring Boot+Vue音乐厅订票系统开发实践
1. 项目概述这个前后端分离的音乐厅订票系统是我去年为一个本地剧院开发的线上票务平台。系统上线后剧院周末演出的售票效率提升了60%观众投诉率下降了45%。采用Spring BootVue的技术栈实现了从选座购票到订单管理的完整闭环。提示系统特别设计了阳光选座功能通过可视化座位图实时显示可售座位避免传统订票系统常见的座位冲突问题。2. 技术架构解析2.1 后端技术选型Spring Boot 2.7作为后端框架主要基于以下考量内嵌Tomcat简化部署自动配置减少XML配置丰富的Starter依赖特别是Spring Security和MyBatis数据库选用MySQL 8.0关键配置参数spring: datasource: url: jdbc:mysql://localhost:3306/ticket_db?useSSLfalseserverTimezoneUTC username: root password: 加密存储 hikari: maximum-pool-size: 20 connection-timeout: 300002.2 前端技术方案Vue 3组合式API带来以下优势响应式座位图使用Canvas实时渲染Element Plus组件库加速开发Axios封装了以下关键拦截器// 请求拦截器 service.interceptors.request.use(config { if (store.getters.token) { config.headers[Authorization] Bearer getToken() } return config }) // 响应拦截器 service.interceptors.response.use( response response.data, error { if (error.response.status 401) { MessageBox.confirm(登录已过期, 提示, { confirmButtonText: 重新登录, showCancelButton: false, type: warning }).then(() { store.dispatch(user/resetToken).then(() { location.reload() }) }) } return Promise.reject(error) } )3. 核心功能实现3.1 选座算法设计座位状态使用位图存储数据结构如下public class SeatMap { private Long performanceId; private byte[] seatBitmap; // 每个bit代表一个座位状态 private LocalDateTime lastUpdate; }并发控制采用乐观锁UPDATE seat_availability SET version version 1, status OCCUPIED WHERE seat_id ? AND version ?3.2 支付流程实现支付状态机设计stateDiagram [*] -- PENDING PENDING -- PAID: 支付成功 PENDING -- CANCELLED: 用户取消 PENDING -- FAILED: 支付失败 FAILED -- PENDING: 重试支付注意支付超时设计为15分钟使用Spring Schedule定时任务扫描过期订单Scheduled(cron 0 */5 * * * ?) public void cancelExpiredOrders() { orderMapper.updateStatusByCreateTime( OrderStatus.EXPIRED, LocalDateTime.now().minusMinutes(15)); }4. 系统部署方案4.1 后端部署要点打包配置plugin groupIdorg.springframework.boot/groupId artifactIdspring-boot-maven-plugin/artifactId configuration excludes exclude groupIdorg.projectlombok/groupId artifactIdlombok/artifactId /exclude /excludes /configuration /pluginNginx关键配置location /api { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; }4.2 前端优化实践路由懒加载const SeatSelection () import(./views/SeatSelection.vue)性能优化方案使用Webpack SplitChunks拆分包配置Gzip压缩启用HTTP/2服务器推送5. 踩坑实录与解决方案5.1 跨域问题排查开发环境遇到的主要跨域问题预检请求(OPTIONS)被拦截携带Cookie时Access-Control-Allow-Origin不能为*自定义Header被过滤最终解决方案Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(http://localhost:8081) .allowCredentials(true) .allowedMethods(*) .allowedHeaders(*) .maxAge(3600); } }5.2 微信支付回调处理遇到的典型问题支付成功但订单状态未更新重复回调导致多次核销网络延迟造成状态不一致解决方案Transactional public String handleWxpayNotify(MapString, String params) { // 1. 验证签名 if (!wxpayHelper.verifySign(params)) { throw new RuntimeException(签名验证失败); } // 2. 查询订单 Order order orderMapper.selectByOutTradeNo(params.get(out_trade_no)); if (order null) { return FAIL; } // 3. 检查订单状态 if (order.getStatus() ! OrderStatus.PENDING) { return SUCCESS; } // 4. 更新订单 if (SUCCESS.equals(params.get(result_code))) { order.setStatus(OrderStatus.PAID); order.setPaymentTime(LocalDateTime.now()); orderMapper.updateById(order); // 发送邮件通知 emailService.sendPaymentSuccess(order); } return SUCCESS; }6. 扩展功能建议智能推荐系统基于用户历史购票记录推荐相似演出实现协同过滤算法# 示例代码 from surprise import Dataset, KNNBasic data Dataset.load_builtin(ml-100k) trainset data.build_full_trainset() sim_options {name: cosine, user_based: False} algo KNNBasic(sim_optionssim_options) algo.fit(trainset)可视化数据分析使用ECharts展示售票趋势热力图显示热门座位分布无感刷新Token方案let isRefreshing false let requests [] service.interceptors.response.use(response { return response }, error { if (error.config.url.includes(refresh_token)) { return Promise.reject(error) } if (error.response.status 401 !error.config._retry) { if (isRefreshing) { return new Promise(resolve { requests.push(() { resolve(service(error.config)) }) }) } isRefreshing true error.config._retry true return store.dispatch(user/refreshToken).then(token { error.config.headers.Authorization Bearer token requests.forEach(cb cb()) requests [] return service(error.config) }).finally(() { isRefreshing false }) } return Promise.reject(error) })