温馨提示本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系名片一、项目背景与意义随着汽车保有量的持续增长汽车维修、保养、美容、保险等后市场服务需求快速扩张。传统汽车服务门店多依赖纸质工单、Excel 表格和电话沟通来管理客户、车辆、维修项目与配件库存普遍存在信息分散、工单流转不透明、库存账实不符、客户复购难以追踪等问题。本系统基于Spring Boot Vue3前后端分离架构构建一套覆盖「客户—车辆—服务工单—配件库存—结算统计」全流程的汽车服务管理系统帮助门店实现业务数字化提升服务效率与客户体验。二、系统目标与核心功能系统面向汽车维修保养门店主要服务于管理员、服务顾问、维修技师、仓库管理员四类角色核心目标如下客户与车辆档案统一管理一个客户可关联多台车辆记录车牌、车型、里程、保养记录。服务工单全流程闭环从预约、接车、派工、维修、质检到结算状态可追溯。配件库存精细化管理入库、出库、领料、盘点与库存预警。经营数据可视化营业额、工单量、热门服务项目、客户复购率等统计报表。权限与安全控制基于角色的菜单与接口权限控制操作日志留痕。三、技术选型层次技术栈说明后端框架Spring Boot 3.x快速构建 RESTful 接口内置 Tomcat持久层MyBatis-Plus简化 CRUD支持分页与条件构造器数据库MySQL 8.0存储业务数据支持事务与索引优化缓存Redis缓存登录令牌、字典数据与热点统计认证授权Spring Security JWT无状态认证接口级权限校验前端框架Vue3 TypeScript组合式 API类型安全构建工具Vite快速冷启动与热更新UI 组件库Element Plus后台管理常用组件状态与路由Pinia Vue Router全局状态管理与动态路由图表ECharts经营数据可视化四、系统架构设计系统采用前后端分离架构前端通过 Axios 调用后端 RESTful 接口后端按 Controller、Service、Mapper 三层组织代码公共能力认证、日志、异常处理、文件上传以切面与拦截器方式统一实现。flowchart TD A[Vue3 前端 Element Plus] --|HTTP / JSON| B[Nginx 静态资源与反向代理] B -- C[Spring Boot 应用] C -- D[Controller 层] D -- E[Service 层] E -- F[Mapper 层 MyBatis-Plus] F -- G[(MySQL 8.0)] C -- H[(Redis 缓存)] C -- I[文件存储 本地或 OSS] C -- J[Spring Security JWT 认证]五、数据库设计核心表设计围绕客户、车辆、工单、服务项目与配件展开主要表结构如下表名说明关键字段sys_user系统用户id、username、password、role_id、statuscustomer客户档案id、name、phone、level、create_timevehicle车辆档案id、customer_id、plate_no、brand、model、mileageservice_item服务项目id、name、price、duration、categorywork_order服务工单id、order_no、vehicle_id、status、total_amount、create_timeorder_item工单明细id、order_id、item_type、item_id、quantity、pricepart配件库存id、name、spec、stock、warn_stock、unit_pricestock_record出入库记录id、part_id、type、quantity、operator、create_time工单状态建议使用枚举统一管理待接车 → 已接车 → 维修中 → 待质检 → 已完成 → 已结算并通过状态机校验流转合法性避免越级变更。六、后端核心实现6.1 统一响应与全局异常处理Data public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT r new Result(); r.setCode(200); r.setMessage(操作成功); r.setData(data); return r; } public static T ResultT fail(String message) { ResultT r new Result(); r.setCode(500); r.setMessage(message); return r; } }6.2 JWT 认证与权限校验登录成功后签发 JWT前端将令牌存入 Pinia 与 localStorage请求时通过拦截器放入Authorization请求头。后端自定义过滤器解析令牌并写入SecurityContext结合PreAuthorize实现接口级权限控制。Component public class JwtAuthenticationFilter extends OncePerRequestFilter { Resource private JwtUtil jwtUtil; Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws ServletException, IOException { String header request.getHeader(Authorization); if (header ! null header.startsWith(Bearer )) { String token header.substring(7); if (jwtUtil.validate(token)) { String username jwtUtil.getUsername(token); ListString roles jwtUtil.getRoles(token); UsernamePasswordAuthenticationToken auth new UsernamePasswordAuthenticationToken(username, null, roles.stream().map(SimpleGrantedAuthority::new).toList()); SecurityContextHolder.getContext().setAuthentication(auth); } } chain.doFilter(request, response); } }6.3 工单创建与库存扣减工单结算时需要同时更新工单状态、写入明细并扣减配件库存必须保证事务一致性。这里使用Transactional配合乐观锁字段version防止并发超卖。Service public class WorkOrderService { Resource private WorkOrderMapper workOrderMapper; Resource private PartMapper partMapper; Transactional(rollbackFor Exception.class) public void settle(Long orderId) { WorkOrder order workOrderMapper.selectById(orderId); if (order null || !已完成.equals(order.getStatus())) { throw new BizException(工单状态不允许结算); } ListOrderItem items order.getItems(); for (OrderItem item : items) { if (PART.equals(item.getItemType())) { int rows partMapper.deductStock(item.getItemId(), item.getQuantity()); if (rows 0) { throw new BizException(配件库存不足 item.getItemId()); } } } order.setStatus(已结算); workOrderMapper.updateById(order); } }七、前端核心实现7.1 请求封装与统一拦截import axios from axios import { ElMessage } from element-plus import { useUserStore } from /stores/user const request axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000 }) request.interceptors.request.use(config { const userStore useUserStore() if (userStore.token) { config.headers.Authorization Bearer ${userStore.token} } return config }) request.interceptors.response.use( res { const { code, message, data } res.data if (code 200) return data ElMessage.error(message || 请求失败) return Promise.reject(new Error(message)) }, err { if (err.response?.status 401) { useUserStore().logout() } ElMessage.error(err.message) return Promise.reject(err) } ) export default request7.2 工单列表页template el-table :dataorderList v-loadingloading el-table-column proporderNo label工单号 width180 / el-table-column propplateNo label车牌号 width120 / el-table-column propcustomerName label客户 width120 / el-table-column propstatus label状态 template #default{ row } el-tag :typestatusType(row.status){{ row.status }}/el-tag /template /el-table-column el-table-column proptotalAmount label金额 / el-table-column label操作 width160 template #default{ row } el-button link typeprimary clickhandleDetail(row)详情/el-button el-button link typesuccess :disabledrow.status ! 已完成 clickhandleSettle(row)结算/el-button /template /el-table-column /el-table /template script setup langts import { ref, onMounted } from vue import { getOrderPage, settleOrder } from /api/order const orderList ref([]) const loading ref(false) const loadData async () { loading.value true try { orderList.value await getOrderPage({ page: 1, size: 10 }) } finally { loading.value false } } const handleSettle async (row: any) { await settleOrder(row.id) loadData() } onMounted(loadData) /script八、系统部署与运行准备环境JDK 17、Node.js 18、MySQL 8.0、Redis 6。导入数据库脚本修改后端application.yml中的数据源与 Redis 配置。后端执行mvn clean package运行java -jar car-service.jar。前端执行npm install与npm run build将dist目录交由 Nginx 托管。Nginx 配置/api反向代理到后端服务解决跨域问题。九、总结与展望本文围绕 Spring Boot Vue3 前后端分离架构完成了汽车服务管理系统从需求分析、技术选型、数据库设计到核心功能实现的整体方案。系统通过工单状态机与事务控制保证了业务一致性通过 JWT 与角色权限保障了数据安全。后续可继续扩展的方向包括接入微信小程序实现客户自助预约、引入消息队列处理库存与通知异步任务、基于历史工单数据做保养提醒与客户流失预警以及对接第三方支付与电子发票能力。