SpringBoot+Vue售后管理系统开发与部署指南

1. 项目概述基于SpringBootVue的售后管理系统这套售后管理系统采用前后端分离架构前端使用Vue.js框架后端基于SpringBootMyBatis技术栈数据库选用MySQL。系统实现了从工单创建、分配、处理到结算的完整售后流程管理包含客户信息管理、服务记录追踪、配件库存管理、数据分析报表等核心模块。我在实际部署这套系统时发现虽然源码结构清晰但完整运行需要处理好前端代理配置、跨域问题、数据库初始化等关键环节。特别是当需要二次开发时理解前后端交互协议和权限控制机制尤为重要。2. 技术栈选型与架构解析2.1 为什么选择这些技术组合SpringBoot作为后端框架具有自动配置、内嵌服务器等优势能快速构建RESTful API。实测中启动一个基础服务只需SpringBootApplication public class AfterSaleApplication { public static void main(String[] args) { SpringApplication.run(AfterSaleApplication.class, args); } }Vue.js的响应式特性非常适合构建动态管理界面。例如工单状态变更时前端自动更新视图template div v-ifticket.status pending button clickhandleProcess开始处理/button /div /templateMyBatis的XML映射方式相比JPA更灵活适合复杂查询场景。比如这个多条件工单查询select idselectTickets resultTypeTicket SELECT * FROM ticket where if teststatus ! nullAND status #{status}/if if teststartDate ! nullAND create_time #{startDate}/if /where /select2.2 前后端分离架构的优势开发效率前后端可并行开发通过Swagger文档定义接口规范部署独立前端静态资源可通过Nginx分发后端服务集群部署技术栈灵活可单独升级某一端技术而不影响整体系统注意跨域问题必须通过配置解决建议使用Spring的CrossOrigin或Nginx反向代理3. 核心功能模块实现3.1 工单生命周期管理系统采用状态机模式管理工单流转创建 → 分配 → 处理中 → 待验收 → 已完成 ↘ 已取消后端使用枚举定义状态public enum TicketStatus { CREATED(已创建), ASSIGNED(已分配), PROCESSING(处理中), PENDING_ACCEPTANCE(待验收), COMPLETED(已完成), CANCELLED(已取消); }3.2 权限控制系统基于RBAC模型实现包含5张核心表用户表(sys_user)角色表(sys_role)菜单表(sys_menu)用户角色关联表(sys_user_role)角色菜单关联表(sys_role_menu)前端路由通过meta属性控制权限{ path: /ticket, component: Layout, meta: { title: 工单管理, roles: [admin, service] } }4. 数据库设计与优化4.1 主要表结构表名字段示例索引设计ticketid, customer_id, product_id, fault_desc联合索引(customer_id, create_time)customerid, name, phone, address唯一索引(phone)service_recordid, ticket_id, technician_id外键索引(ticket_id)4.2 性能优化实践大文本字段单独存储故障描述等字段拆到ticket_detail表历史数据归档超过3个月的工单自动迁移到历史表使用MyBatis二级缓存配置cache evictionLRU flushInterval60000 size512/5. 系统部署实战指南5.1 后端部署关键步骤数据库初始化CREATE DATABASE after_sale DEFAULT CHARSET utf8mb4; mysql -u root -p after_sale db_init.sql修改应用配置spring: datasource: url: jdbc:mysql://localhost:3306/after_sale?useSSLfalse username: root password: yourpassword打包与运行mvn clean package -DskipTests java -jar target/after-sale-1.0.0.jar5.2 前端部署注意事项环境变量配置VUE_APP_BASE_API http://your-api-domain.com生产环境构建npm install --registryhttps://registry.npm.taobao.org npm run build:prodNginx配置示例server { listen 80; server_name your.domain.com; location / { root /path/to/dist; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://backend-server:8080/; } }6. 二次开发建议6.1 扩展功能方向微信小程序客户端通过uni-app快速移植工单自动分配算法基于地理位置和技师负载配件库存预警集成消息推送6.2 代码结构说明after-sale ├── after-sale-api (前端) │ ├── public │ ├── src │ │ ├── api (接口定义) │ │ ├── views (页面组件) │ │ └── store (Vuex状态) ├── after-sale-server (后端) │ ├── src/main/java │ │ ├── config (Spring配置) │ │ ├── controller (API入口) │ │ └── service (业务逻辑) │ └── src/main/resources │ ├── mapper (MyBatis映射) │ └── application.yml7. 常见问题解决方案7.1 跨域问题排查检查前端axios的baseURL配置是否正确确认后端CORS配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(*); } }7.2 页面刷新404问题必须配置Nginx的try_fileslocation / { try_files $uri $uri/ /index.html; }7.3 MyBatis日志打印在application.yml中添加logging: level: com.after.sale.mapper: debug8. 性能监控与调优8.1 SpringBoot Actuator集成添加依赖dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-actuator/artifactId /dependency配置端点management: endpoints: web: exposure: include: health,metrics,info8.2 Vue性能优化路由懒加载const TicketList () import(./views/ticket/List.vue)生产环境关闭sourcemapmodule.exports { productionSourceMap: false }这套系统在实际部署到客户环境时我特别建议做好数据备份方案。MySQL的定时备份可以这样配置# 每天凌晨备份 0 0 * * * mysqldump -uroot -p yourpassword after_sale /backups/after_sale_$(date \%Y\%m\%d).sql