简介本资源是一份面向计算机专业本科生的毕业设计论文完整文档聚焦SpringBootVue技术栈实现的火锅店管理系统适用于Java全栈开发入门与课程设计实践。文档涵盖系统需求分析、MVC架构设计、MySQL数据库建模、前后端功能模块说明含管理员用户/新闻公告管理、顾客信息查询、数据统计与维护等并附有Eclipse开发环境配置、关键技术原理简析及中英文摘要、目录与参考文献内容结构完整、逻辑清晰可直接用于答辩或二次开发参考。资源为单个Word文档.doc格式文件总数1个大小1.4MB轻量易读适合作为毕设选题范例、技术方案比对或SpringBootVue整合学习素材。目前已有90人学习下载文档内含详细系统分析过程、界面功能描述及关键词提炼便于快速掌握项目全貌与核心实现思路。1. SpringBootVue火锅店管理系统不是Demo是能跑通的毕业级全栈闭环很多同学拿到“SpringBootVue火锅店管理系统”这类毕设资源时第一反应是又一个 CRUD 堆砌的模板但实际拆开看它恰恰卡在高校教学与企业落地之间的关键缝——既不追求高并发压测也不堆砌微服务架构而是用最小可行技术组合SpringBoot 2.7.x Vue 2.6 MyBatis-Plus MySQL 5.7完成一个真实餐饮场景下的权限隔离、库存联动、前后端分离部署闭环。它解决的不是“能不能跑”而是“怎么让管理员改菜品价格后前端实时显示新价、库存不足时自动灰掉下单按钮、公告发布后所有用户刷新即见”这种颗粒度的业务一致性。系统里藏着大量被忽略的细节比如菜品表caipin_kucun_number字段参与下单扣减逻辑但没做数据库行锁或乐观锁比如 Vue 路由守卫只校验登录态未校验角色权限码admin/user导致前端路由可跳转但后端接口返回 403比如caipin_delete字段用整型而非布尔却在 Java 实体类中映射为Boolean引发 MyBatis 类型转换异常。这些不是 Bug而是教学项目特有的“留白式设计”——它逼你动手补全事务边界、补全权限拦截链、补全跨域配置的真实路径。适合刚学完 Spring MVC 和 Vue 基础想把零散知识点焊成一条完整流水线的开发者。2. 技术选型解耦为什么是 SpringBoot 2.7.x Vue 2.6 而非最新版2.1 SpringBoot 版本锁定避开 Spring Boot 3.x 的 Jakarta EE 9 兼容陷阱论文中明确使用 Eclipse Tomcat 搭建环境而当前主流开发工具链IntelliJ IDEA 2023、Maven 3.8对 Spring Boot 3.x 的支持已成熟但该毕设资源实际依赖的是Spring Boot 2.7.182023年10月最后一个 2.x 维护版。原因在于其pom.xml中关键依赖parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.18/version relativePath/ /parent提示若强行升级到 Spring Boot 3.2.xspring-boot-starter-web默认启用 Jakarta EE 9 命名空间如jakarta.servlet.*而项目中web.xml配置、Tomcat 9.x 的 Servlet API 仍为javax.servlet.*会导致ClassNotFoundException: javax.servlet.Filter。必须同步升级 Tomcat 到 10.1 并重写所有 Filter 类这已超出毕设改造范围。该版本选择带来三个实操优势内嵌 Tomcat 9.0.83与论文所述 Tomcat 环境完全一致无需额外配置server.xmlMyBatis-Plus 3.5.3.1完美兼容TableField(exist false)忽略非数据库字段避免 Vue 传参时caipin_commentback_text等冗余字段触发 SQL 异常Spring Security 5.7.10基于WebSecurityConfigurerAdapter的旧式配置仍有效比 Spring Security 6.x 的SecurityFilterChainBean 方式更易理解权限拦截逻辑。2.2 Vue 2.6 作为前端基座规避 Composition API 学习成本与生态断层项目前端代码位于src/main/resources/static目录下典型 Spring Boot 静态资源目录而非独立 Vue CLI 工程。其核心文件index.html引入script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.min.js/script script srchttps://cdn.jsdelivr.net/npm/axios0.21.4/dist/axios.min.js/script注意Vue 2.6 是最后一个支持v-model修饰符语法如v-model.lazy且与 Vue Router 3.x、Vuex 3.x 完全兼容的版本。若升级至 Vue 3.x需重写所有.vue单文件组件将export default { data() { return { ... } } }改为setup() { const state reactive({ ... }); return { ... }; }且 Axios 请求需从this.$http改为import axios from axios—— 这对仅掌握 Vue 2 基础的同学是陡峭的学习曲线。Vue 2.6 的真实价值在于其指令驱动的数据流控制v-foritem in caipinList渲染菜品列表时caipinList由axios.get(/caipin/list)返回响应式更新自动触发 DOM 重绘v-ifitem.caipin_kucun_number 0控制“立即下单”按钮显隐库存归零时按钮消失无需手动document.getElementById().style.displayclickhandleAddToCart(item)绑定事件方法内调用axios.post(/cart/add, { caipinId: item.id })成功后this.cartCount实时更新购物车角标。2.3 MySQL 5.7 与物理设计的隐性约束论文 4.3.2 节给出的caipin表结构中caipin_old_money和caipin_new_money字段类型为BigDecimal对应 MySQL 的DECIMAL(10,2)。但实际建表 SQL 若写成CREATE TABLE caipin ( id INT PRIMARY KEY AUTO_INCREMENT, caipin_name VARCHAR(100), caipin_old_money DECIMAL(10,2), -- ✅ 正确10位总长2位小数 caipin_new_money DECIMAL(10,2), caipin_kucun_number INT DEFAULT 0 );提示若误用FLOAT或DOUBLE存储金额会出现0.1 0.2 0.30000000000000004类精度丢失导致库存扣减后余额异常。MySQL 5.7 对DECIMAL的严格模式STRICT_TRANS_TABLES默认开启插入超长数字会报错而非截断倒逼开发者规范输入校验。该设计还埋了一个关键约束caipin_delete字段为INT类型值为0未删除或1已删除但 Java 实体类CaipinEntity.java中定义为private Boolean caipinDelete; // ❌ 错误MySQL INT 无法直接映射 Boolean // 正确应为 // private Integer caipinDelete; // 或使用 TableField(value caipin_delete, el caipinDelete null ? 0 : caipinDelete ? 1 : 0)此错误会导致 MyBatis 查询时caipinDelete始终为null逻辑删除失效。3. 核心模块实现从菜品管理到库存联动的三层穿透3.1 后端菜品管理MyBatis-Plus 分页查询与动态条件构建CaipinController.java中的列表查询接口GetMapping(/list) public R list(RequestParam MapString, Object params){ // 1. 构建 QueryWrapper支持多条件模糊搜索 QueryWrapperCaipinEntity wrapper new QueryWrapper(); String caipinName (String) params.get(caipinName); if(StringUtils.isNotBlank(caipinName)){ wrapper.like(caipin_name, caipinName); // ✅ 使用字段名而非属性名 } Integer shangxiaTypes (Integer) params.get(shangxiaTypes); if(shangxiaTypes ! null){ wrapper.eq(shangxia_types, shangxiaTypes); // ✅ 上架状态精确匹配 } // 2. 执行分页查询 PageCaipinEntity page new Page(PageUtil.getPage(params), 10); PageUtils pageUtil new PageUtils(caipinService.page(page, wrapper)); return R.ok().put(page, pageUtil); }参数说明PageUtil.getPage(params)从params中提取page和limit参数wrapper.like(caipin_name, caipinName)中caipin_name是数据库字段名因 MyBatis-Plus 默认关闭mapUnderscoreToCamelCase故不能写caipinNameshangxia_types字段值0下架或1上架前端通过复选框传递。此实现的关键在于避免 N1 查询caipinService.page()内部调用baseMapper.selectPage()MyBatis-Plus 自动生成单条 SQL 完成分页与条件过滤而非先查 ID 列表再循环查详情。3.2 前端菜品渲染Vue 指令与 Axios 请求的协同节奏caipin-list.vue中的列表渲染div v-foritem in caipinList :keyitem.id classcaipin-item img :srcitem.caipin_photo || /img/default.jpg alt菜品图 h3{{ item.caipin_name }}/h3 p classprice¥{{ item.caipin_new_money }} span v-ifitem.caipin_old_money item.caipin_new_money¥{{ item.caipin_old_money }}/span/p p classstock v-ifitem.caipin_kucun_number 0库存不足/p button clickaddToCart(item) :disableditem.caipin_kucun_number 0加入购物车/button /div逻辑说明:srcitem.caipin_photo || /img/default.jpg使用 Vue 的||短路运算符当caipin_photo为空时显示默认图v-ifitem.caipin_kucun_number 0控制库存提示文案显隐:disableditem.caipin_kucun_number 0绑定按钮禁用状态DOM 层面阻止点击比click.prevent更彻底。addToCart方法methods: { addToCart(item) { axios.post(/cart/add, { caipinId: item.id, number: 1 }).then(res { this.$message.success(已加入购物车); // ✅ 关键本地库存减1避免二次请求延迟 const index this.caipinList.findIndex(i i.id item.id); if (index ! -1 this.caipinList[index].caipin_kucun_number 0) { this.caipinList[index].caipin_kucun_number--; } }); } }3.3 库存扣减实战事务边界与并发安全的朴素实现CartController.java中的下单接口Transactional(rollbackFor Exception.class) PostMapping(/confirmOrder) public R confirmOrder(RequestBody MapString, Object params){ // 1. 获取购物车项 ListMapString, Object cartItems (ListMapString, Object) params.get(cartItems); // 2. 遍历扣减库存伪代码 for (MapString, Object item : cartItems) { Long caipinId Long.valueOf(item.get(caipinId).toString()); Integer number Integer.valueOf(item.get(number).toString()); // ✅ 关键先查再扣且加 for update 行锁 CaipinEntity caipin caipinService.getById(caipinId); if (caipin.getCaipinKucunNumber() number) { return R.error(菜品【 caipin.getCaipinName() 】库存不足); } caipin.setCaipinKucunNumber(caipin.getCaipinKucunNumber() - number); caipinService.updateById(caipin); // 触发 UPDATE caipin SET kucun ? WHERE id ? } // 3. 生成订单... return R.ok(); }参数说明Transactional确保整个扣减过程原子性caipinService.getById()在 MySQL 中执行SELECT * FROM caipin WHERE id ? FOR UPDATE对目标行加写锁阻塞其他事务的相同查询避免超卖updateById()执行UPDATE语句释放锁。此方案虽简单但在低并发火锅店场景下足够可靠。4. 权限与部署从角色隔离到 Nginx 反向代理的生产级落地4.1 前后端权限分离Vue 路由守卫 Spring Security 接口拦截双保险前端路由配置router/index.jsconst routes [ { path: /login, component: () import(/views/login.vue) }, { path: /admin, component: () import(/views/admin-layout.vue), children: [ { path: caipin, component: () import(/views/caipin-list.vue) }, { path: user, component: () import(/views/user-list.vue) } ], beforeEnter: (to, from, next) { const token localStorage.getItem(token); if (!token) { next(/login); } else { // ✅ 仅校验 token 存在不校验角色前端不可信 next(); } } } ];后端 Spring Security 配置SecurityConfig.javaOverride protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers(/static/**, /login, /register).permitAll() // 静态资源放行 .antMatchers(/admin/**).hasRole(ADMIN) // ✅ /admin/ 开头路径需 ADMIN 角色 .antMatchers(/user/**).hasAnyRole(ADMIN, USER) // 用户相关接口开放给两类角色 .anyRequest().authenticated(); // 其他请求需登录 }关键点前端beforeEnter仅做登录态检查真正的权限控制在后端hasRole(ADMIN)。若用户手动修改 localStorage 的 token 并访问/admin/caipin后端会返回403 Forbidden前端需捕获该状态并跳转登录页。4.2 生产部署Nginx 反向代理解决跨域与静态资源托管将 Vue 编译后的dist目录非src/main/resources/static与 Spring Boot JAR 包分离部署# /etc/nginx/conf.d/huoguo.conf upstream backend { server 127.0.0.1:8080; # Spring Boot 内嵌 Tomcat } server { listen 80; server_name huoguo.example.com; # ✅ Vue Router history 模式所有非静态资源请求都指向后端 location / { root /var/www/huoguo/dist; try_files $uri $uri/ /index.html; # 解决刷新 404 } # ✅ API 请求代理到后端 location /api/ { proxy_pass http://backend/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # ✅ 静态图片资源直接由 Nginx 提供 location /upload/ { alias /var/www/huoguo/upload/; } }参数说明try_files $uri $uri/ /index.html是 Vue Router history 模式的必需配置否则访问/admin/caipin会返回 Nginx 404location /api/将前端axios.get(/api/caipin/list)代理到http://backend/caipin/list避免开发期vue.config.js的devServer.proxyalias指令使/upload/xxx.jpg直接映射到服务器磁盘路径减轻后端文件读取压力。4.3 数据库连接池调优HikariCP 的最小化配置application.yml中的数据库配置spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/huoguo?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 hikari: connection-timeout: 30000 maximum-pool-size: 20 minimum-idle: 5 idle-timeout: 600000 max-lifetime: 1800000参数说明connection-timeout: 3000030秒防止网络抖动导致请求长时间挂起maximum-pool-size: 20适配火锅店日均 500 订单的并发量按每订单 3 次 DB 操作计峰值 QPS ≈ 10idle-timeout: 60000010分钟清理空闲连接避免 MySQLwait_timeout默认 8小时导致连接失效max-lifetime: 180000030分钟强制连接重建规避长连接内存泄漏。5. 毕设级调试技巧三步定位 MyBatis SQL 异常与 Vue 数据绑定失效5.1 MyBatis 日志追踪精准捕获 SQL 执行失败根源在application.yml中开启 MyBatis 日志mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # ✅ 控制台打印 SQL # 或使用 Log4j2 logging: level: com.huoguo.mapper: debug # ✅ 指定 Mapper 包路径当出现Caused by: java.sql.SQLSyntaxErrorException: Unknown column caipinName in field list时日志会输出 Preparing: SELECT id,caipin_name,caipin_photo,... FROM caipin WHERE caipin_name LIKE ? Parameters: 羊肉(String) Columns: id, caipin_name, caipin_photo, ... Row: 1, 羊肉, /upload/yangrou.jpg, ...关键观察点Preparing行显示实际执行的 SQL 字段名caipin_name而异常信息中的caipinName是 Java 属性名。这证明 MyBatis 未启用驼峰转换需在application.yml中添加mybatis-plus: configuration: map-underscore-to-camel-case: true # ✅ 启用下划线转驼峰5.2 Vue 数据响应式调试$nextTick 与 Vue Devtools 的组合验证当修改caipinList后 DOM 未更新时先检查是否遗漏this.$nextTickthis.caipinList newData; // ✅ 直接赋值触发响应式 // 若需在 DOM 更新后执行操作 this.$nextTick(() { console.log(DOM 已更新可安全操作元素); document.querySelector(.caipin-item).scrollIntoView(); });验证步骤浏览器打开 Vue Devtools → Components 面板找到CaipinList组件展开data观察caipinList数组长度与内容是否与预期一致若数据正确但视图未变检查模板中v-for的:key是否唯一如:keyitem.id避免 Vue 复用节点导致渲染错乱若caipinList显示为undefined检查axios.then()中是否漏写this.caipinList res.data.list或res结构是否为{ page: { list: [...] } }而非{ list: [...] }。5.3 端口冲突快速诊断Linux 下定位占用 8080 端口的进程当java -jar huoguo.jar报错Address already in use: bind时# 查找占用 8080 的进程 PID sudo lsof -i :8080 # 或 sudo netstat -tulpn | grep :8080 # 输出示例 # COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME # java 12345 user 23u IPv6 123456 0t0 TCP *:http-alt (LISTEN) # 强制终止进程 sudo kill -9 12345注意lsof命令需安装sudo apt install lsofUbuntu或sudo yum install lsofCentOS。若无权限执行sudo可改用ps aux | grep java查找疑似进程再用kill -15 PID发送优雅终止信号。部署时若需同时运行多个 Spring Boot 应用可在application.yml中指定不同端口server: port: 8081 # 避免与默认 8080 冲突本文还有配套的精品资源点击获取 
长河君 · 2026/9/19 7:45:09 · 阅读 1.2k SpringBoot2.7+Vue2.6火锅店系统实战解析
简介本资源是一份面向计算机专业本科生的毕业设计论文完整文档聚焦SpringBootVue技术栈实现的火锅店管理系统适用于Java全栈开发入门与课程设计实践。文档涵盖系统需求分析、MVC架构设计、MySQL数据库建模、前后端功能模块说明含管理员用户/新闻公告管理、顾客信息查询、数据统计与维护等并附有Eclipse开发环境配置、关键技术原理简析及中英文摘要、目录与参考文献内容结构完整、逻辑清晰可直接用于答辩或二次开发参考。资源为单个Word文档.doc格式文件总数1个大小1.4MB轻量易读适合作为毕设选题范例、技术方案比对或SpringBootVue整合学习素材。目前已有90人学习下载文档内含详细系统分析过程、界面功能描述及关键词提炼便于快速掌握项目全貌与核心实现思路。1. SpringBootVue火锅店管理系统不是Demo是能跑通的毕业级全栈闭环很多同学拿到“SpringBootVue火锅店管理系统”这类毕设资源时第一反应是又一个 CRUD 堆砌的模板但实际拆开看它恰恰卡在高校教学与企业落地之间的关键缝——既不追求高并发压测也不堆砌微服务架构而是用最小可行技术组合SpringBoot 2.7.x Vue 2.6 MyBatis-Plus MySQL 5.7完成一个真实餐饮场景下的权限隔离、库存联动、前后端分离部署闭环。它解决的不是“能不能跑”而是“怎么让管理员改菜品价格后前端实时显示新价、库存不足时自动灰掉下单按钮、公告发布后所有用户刷新即见”这种颗粒度的业务一致性。系统里藏着大量被忽略的细节比如菜品表caipin_kucun_number字段参与下单扣减逻辑但没做数据库行锁或乐观锁比如 Vue 路由守卫只校验登录态未校验角色权限码admin/user导致前端路由可跳转但后端接口返回 403比如caipin_delete字段用整型而非布尔却在 Java 实体类中映射为Boolean引发 MyBatis 类型转换异常。这些不是 Bug而是教学项目特有的“留白式设计”——它逼你动手补全事务边界、补全权限拦截链、补全跨域配置的真实路径。适合刚学完 Spring MVC 和 Vue 基础想把零散知识点焊成一条完整流水线的开发者。2. 技术选型解耦为什么是 SpringBoot 2.7.x Vue 2.6 而非最新版2.1 SpringBoot 版本锁定避开 Spring Boot 3.x 的 Jakarta EE 9 兼容陷阱论文中明确使用 Eclipse Tomcat 搭建环境而当前主流开发工具链IntelliJ IDEA 2023、Maven 3.8对 Spring Boot 3.x 的支持已成熟但该毕设资源实际依赖的是Spring Boot 2.7.182023年10月最后一个 2.x 维护版。原因在于其pom.xml中关键依赖parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.18/version relativePath/ /parent提示若强行升级到 Spring Boot 3.2.xspring-boot-starter-web默认启用 Jakarta EE 9 命名空间如jakarta.servlet.*而项目中web.xml配置、Tomcat 9.x 的 Servlet API 仍为javax.servlet.*会导致ClassNotFoundException: javax.servlet.Filter。必须同步升级 Tomcat 到 10.1 并重写所有 Filter 类这已超出毕设改造范围。该版本选择带来三个实操优势内嵌 Tomcat 9.0.83与论文所述 Tomcat 环境完全一致无需额外配置server.xmlMyBatis-Plus 3.5.3.1完美兼容TableField(exist false)忽略非数据库字段避免 Vue 传参时caipin_commentback_text等冗余字段触发 SQL 异常Spring Security 5.7.10基于WebSecurityConfigurerAdapter的旧式配置仍有效比 Spring Security 6.x 的SecurityFilterChainBean 方式更易理解权限拦截逻辑。2.2 Vue 2.6 作为前端基座规避 Composition API 学习成本与生态断层项目前端代码位于src/main/resources/static目录下典型 Spring Boot 静态资源目录而非独立 Vue CLI 工程。其核心文件index.html引入script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.min.js/script script srchttps://cdn.jsdelivr.net/npm/axios0.21.4/dist/axios.min.js/script注意Vue 2.6 是最后一个支持v-model修饰符语法如v-model.lazy且与 Vue Router 3.x、Vuex 3.x 完全兼容的版本。若升级至 Vue 3.x需重写所有.vue单文件组件将export default { data() { return { ... } } }改为setup() { const state reactive({ ... }); return { ... }; }且 Axios 请求需从this.$http改为import axios from axios—— 这对仅掌握 Vue 2 基础的同学是陡峭的学习曲线。Vue 2.6 的真实价值在于其指令驱动的数据流控制v-foritem in caipinList渲染菜品列表时caipinList由axios.get(/caipin/list)返回响应式更新自动触发 DOM 重绘v-ifitem.caipin_kucun_number 0控制“立即下单”按钮显隐库存归零时按钮消失无需手动document.getElementById().style.displayclickhandleAddToCart(item)绑定事件方法内调用axios.post(/cart/add, { caipinId: item.id })成功后this.cartCount实时更新购物车角标。2.3 MySQL 5.7 与物理设计的隐性约束论文 4.3.2 节给出的caipin表结构中caipin_old_money和caipin_new_money字段类型为BigDecimal对应 MySQL 的DECIMAL(10,2)。但实际建表 SQL 若写成CREATE TABLE caipin ( id INT PRIMARY KEY AUTO_INCREMENT, caipin_name VARCHAR(100), caipin_old_money DECIMAL(10,2), -- ✅ 正确10位总长2位小数 caipin_new_money DECIMAL(10,2), caipin_kucun_number INT DEFAULT 0 );提示若误用FLOAT或DOUBLE存储金额会出现0.1 0.2 0.30000000000000004类精度丢失导致库存扣减后余额异常。MySQL 5.7 对DECIMAL的严格模式STRICT_TRANS_TABLES默认开启插入超长数字会报错而非截断倒逼开发者规范输入校验。该设计还埋了一个关键约束caipin_delete字段为INT类型值为0未删除或1已删除但 Java 实体类CaipinEntity.java中定义为private Boolean caipinDelete; // ❌ 错误MySQL INT 无法直接映射 Boolean // 正确应为 // private Integer caipinDelete; // 或使用 TableField(value caipin_delete, el caipinDelete null ? 0 : caipinDelete ? 1 : 0)此错误会导致 MyBatis 查询时caipinDelete始终为null逻辑删除失效。3. 核心模块实现从菜品管理到库存联动的三层穿透3.1 后端菜品管理MyBatis-Plus 分页查询与动态条件构建CaipinController.java中的列表查询接口GetMapping(/list) public R list(RequestParam MapString, Object params){ // 1. 构建 QueryWrapper支持多条件模糊搜索 QueryWrapperCaipinEntity wrapper new QueryWrapper(); String caipinName (String) params.get(caipinName); if(StringUtils.isNotBlank(caipinName)){ wrapper.like(caipin_name, caipinName); // ✅ 使用字段名而非属性名 } Integer shangxiaTypes (Integer) params.get(shangxiaTypes); if(shangxiaTypes ! null){ wrapper.eq(shangxia_types, shangxiaTypes); // ✅ 上架状态精确匹配 } // 2. 执行分页查询 PageCaipinEntity page new Page(PageUtil.getPage(params), 10); PageUtils pageUtil new PageUtils(caipinService.page(page, wrapper)); return R.ok().put(page, pageUtil); }参数说明PageUtil.getPage(params)从params中提取page和limit参数wrapper.like(caipin_name, caipinName)中caipin_name是数据库字段名因 MyBatis-Plus 默认关闭mapUnderscoreToCamelCase故不能写caipinNameshangxia_types字段值0下架或1上架前端通过复选框传递。此实现的关键在于避免 N1 查询caipinService.page()内部调用baseMapper.selectPage()MyBatis-Plus 自动生成单条 SQL 完成分页与条件过滤而非先查 ID 列表再循环查详情。3.2 前端菜品渲染Vue 指令与 Axios 请求的协同节奏caipin-list.vue中的列表渲染div v-foritem in caipinList :keyitem.id classcaipin-item img :srcitem.caipin_photo || /img/default.jpg alt菜品图 h3{{ item.caipin_name }}/h3 p classprice¥{{ item.caipin_new_money }} span v-ifitem.caipin_old_money item.caipin_new_money¥{{ item.caipin_old_money }}/span/p p classstock v-ifitem.caipin_kucun_number 0库存不足/p button clickaddToCart(item) :disableditem.caipin_kucun_number 0加入购物车/button /div逻辑说明:srcitem.caipin_photo || /img/default.jpg使用 Vue 的||短路运算符当caipin_photo为空时显示默认图v-ifitem.caipin_kucun_number 0控制库存提示文案显隐:disableditem.caipin_kucun_number 0绑定按钮禁用状态DOM 层面阻止点击比click.prevent更彻底。addToCart方法methods: { addToCart(item) { axios.post(/cart/add, { caipinId: item.id, number: 1 }).then(res { this.$message.success(已加入购物车); // ✅ 关键本地库存减1避免二次请求延迟 const index this.caipinList.findIndex(i i.id item.id); if (index ! -1 this.caipinList[index].caipin_kucun_number 0) { this.caipinList[index].caipin_kucun_number--; } }); } }3.3 库存扣减实战事务边界与并发安全的朴素实现CartController.java中的下单接口Transactional(rollbackFor Exception.class) PostMapping(/confirmOrder) public R confirmOrder(RequestBody MapString, Object params){ // 1. 获取购物车项 ListMapString, Object cartItems (ListMapString, Object) params.get(cartItems); // 2. 遍历扣减库存伪代码 for (MapString, Object item : cartItems) { Long caipinId Long.valueOf(item.get(caipinId).toString()); Integer number Integer.valueOf(item.get(number).toString()); // ✅ 关键先查再扣且加 for update 行锁 CaipinEntity caipin caipinService.getById(caipinId); if (caipin.getCaipinKucunNumber() number) { return R.error(菜品【 caipin.getCaipinName() 】库存不足); } caipin.setCaipinKucunNumber(caipin.getCaipinKucunNumber() - number); caipinService.updateById(caipin); // 触发 UPDATE caipin SET kucun ? WHERE id ? } // 3. 生成订单... return R.ok(); }参数说明Transactional确保整个扣减过程原子性caipinService.getById()在 MySQL 中执行SELECT * FROM caipin WHERE id ? FOR UPDATE对目标行加写锁阻塞其他事务的相同查询避免超卖updateById()执行UPDATE语句释放锁。此方案虽简单但在低并发火锅店场景下足够可靠。4. 权限与部署从角色隔离到 Nginx 反向代理的生产级落地4.1 前后端权限分离Vue 路由守卫 Spring Security 接口拦截双保险前端路由配置router/index.jsconst routes [ { path: /login, component: () import(/views/login.vue) }, { path: /admin, component: () import(/views/admin-layout.vue), children: [ { path: caipin, component: () import(/views/caipin-list.vue) }, { path: user, component: () import(/views/user-list.vue) } ], beforeEnter: (to, from, next) { const token localStorage.getItem(token); if (!token) { next(/login); } else { // ✅ 仅校验 token 存在不校验角色前端不可信 next(); } } } ];后端 Spring Security 配置SecurityConfig.javaOverride protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers(/static/**, /login, /register).permitAll() // 静态资源放行 .antMatchers(/admin/**).hasRole(ADMIN) // ✅ /admin/ 开头路径需 ADMIN 角色 .antMatchers(/user/**).hasAnyRole(ADMIN, USER) // 用户相关接口开放给两类角色 .anyRequest().authenticated(); // 其他请求需登录 }关键点前端beforeEnter仅做登录态检查真正的权限控制在后端hasRole(ADMIN)。若用户手动修改 localStorage 的 token 并访问/admin/caipin后端会返回403 Forbidden前端需捕获该状态并跳转登录页。4.2 生产部署Nginx 反向代理解决跨域与静态资源托管将 Vue 编译后的dist目录非src/main/resources/static与 Spring Boot JAR 包分离部署# /etc/nginx/conf.d/huoguo.conf upstream backend { server 127.0.0.1:8080; # Spring Boot 内嵌 Tomcat } server { listen 80; server_name huoguo.example.com; # ✅ Vue Router history 模式所有非静态资源请求都指向后端 location / { root /var/www/huoguo/dist; try_files $uri $uri/ /index.html; # 解决刷新 404 } # ✅ API 请求代理到后端 location /api/ { proxy_pass http://backend/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # ✅ 静态图片资源直接由 Nginx 提供 location /upload/ { alias /var/www/huoguo/upload/; } }参数说明try_files $uri $uri/ /index.html是 Vue Router history 模式的必需配置否则访问/admin/caipin会返回 Nginx 404location /api/将前端axios.get(/api/caipin/list)代理到http://backend/caipin/list避免开发期vue.config.js的devServer.proxyalias指令使/upload/xxx.jpg直接映射到服务器磁盘路径减轻后端文件读取压力。4.3 数据库连接池调优HikariCP 的最小化配置application.yml中的数据库配置spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/huoguo?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 hikari: connection-timeout: 30000 maximum-pool-size: 20 minimum-idle: 5 idle-timeout: 600000 max-lifetime: 1800000参数说明connection-timeout: 3000030秒防止网络抖动导致请求长时间挂起maximum-pool-size: 20适配火锅店日均 500 订单的并发量按每订单 3 次 DB 操作计峰值 QPS ≈ 10idle-timeout: 60000010分钟清理空闲连接避免 MySQLwait_timeout默认 8小时导致连接失效max-lifetime: 180000030分钟强制连接重建规避长连接内存泄漏。5. 毕设级调试技巧三步定位 MyBatis SQL 异常与 Vue 数据绑定失效5.1 MyBatis 日志追踪精准捕获 SQL 执行失败根源在application.yml中开启 MyBatis 日志mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # ✅ 控制台打印 SQL # 或使用 Log4j2 logging: level: com.huoguo.mapper: debug # ✅ 指定 Mapper 包路径当出现Caused by: java.sql.SQLSyntaxErrorException: Unknown column caipinName in field list时日志会输出 Preparing: SELECT id,caipin_name,caipin_photo,... FROM caipin WHERE caipin_name LIKE ? Parameters: 羊肉(String) Columns: id, caipin_name, caipin_photo, ... Row: 1, 羊肉, /upload/yangrou.jpg, ...关键观察点Preparing行显示实际执行的 SQL 字段名caipin_name而异常信息中的caipinName是 Java 属性名。这证明 MyBatis 未启用驼峰转换需在application.yml中添加mybatis-plus: configuration: map-underscore-to-camel-case: true # ✅ 启用下划线转驼峰5.2 Vue 数据响应式调试$nextTick 与 Vue Devtools 的组合验证当修改caipinList后 DOM 未更新时先检查是否遗漏this.$nextTickthis.caipinList newData; // ✅ 直接赋值触发响应式 // 若需在 DOM 更新后执行操作 this.$nextTick(() { console.log(DOM 已更新可安全操作元素); document.querySelector(.caipin-item).scrollIntoView(); });验证步骤浏览器打开 Vue Devtools → Components 面板找到CaipinList组件展开data观察caipinList数组长度与内容是否与预期一致若数据正确但视图未变检查模板中v-for的:key是否唯一如:keyitem.id避免 Vue 复用节点导致渲染错乱若caipinList显示为undefined检查axios.then()中是否漏写this.caipinList res.data.list或res结构是否为{ page: { list: [...] } }而非{ list: [...] }。5.3 端口冲突快速诊断Linux 下定位占用 8080 端口的进程当java -jar huoguo.jar报错Address already in use: bind时# 查找占用 8080 的进程 PID sudo lsof -i :8080 # 或 sudo netstat -tulpn | grep :8080 # 输出示例 # COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME # java 12345 user 23u IPv6 123456 0t0 TCP *:http-alt (LISTEN) # 强制终止进程 sudo kill -9 12345注意lsof命令需安装sudo apt install lsofUbuntu或sudo yum install lsofCentOS。若无权限执行sudo可改用ps aux | grep java查找疑似进程再用kill -15 PID发送优雅终止信号。部署时若需同时运行多个 Spring Boot 应用可在application.yml中指定不同端口server: port: 8081 # 避免与默认 8080 冲突本文还有配套的精品资源点击获取