简介本资源是面向高校计算机专业学生与Web全栈初学者的超市管理系统课程设计实践项目基于Java后端、Vue前端及HTML/JavaScript技术栈完整实现湖北工业大学超市管理业务场景涵盖商品管理、库存统计、员工权限与基础订单流程。压缩包共240个文件总计58.68MB其中41个Java文件构成Spring Boot服务层与数据访问逻辑30个Vue组件实现响应式管理界面43个JS脚本支撑交互功能27个drawio文件提供系统架构图、数据库ER图及模块流程图另有docx实验报告模板、xlsx数据样例与pptx答辩材料便于课程设计全过程交付。内容预览显示包含nginx部署配置、Element UI样式文件及多份规范化的课程设计文档体现工程化开发意识。目前已有291人学习下载适合用于软件工程实训、系统分析与设计课程实践或毕业设计参考可直接运行调试、快速理解前后端分离架构落地细节。1. 这不是“又一个学生作业”湖北工业大学超市管理系统源码背后的真实工程逻辑你搜“湖北工业大学超市管理系统”大概率会看到一堆压缩包、百度网盘链接和“含数据库文档”的宣传语。但真正打开代码很多人卡在第一步为什么用 Java 做后端却要配 Vue为什么 HTML 文件里混着script srcvue.min.js和new Vue({ el: #app })这不是技术堆砌而是高校后勤场景下典型的分层约束——前端必须轻量可离线教室机房无 Node 环境、后端需对接校内统一身份认证Java Spring Security 更易集成、数据库要兼容学校现有 Oracle 或 MySQL 实训平台。这套系统真正解决的是管理员在无公网 IP 的校园内网中用浏览器直接完成商品入库、会员充值、销售流水导出三类高频操作。它面向的是信息学院大三实训课学生、后勤处临时录入员、以及需要快速验证 Java Web Vue 组合可行性的课程设计指导教师。如果你正被“前后端分离怎么部署到 Tomcat”“Vue 组件如何调用 Java 接口”“HTML 表单提交后页面不刷新”卡住这篇就是为你写的实操路径。2. 后端用 Java 实现业务闭环从 Spring Boot 路由到 JDBC 数据库连接2.1 为什么选 Spring Boot 而非传统 Servlet——应对高校实训环境的三个硬约束高校机房普遍禁用 Maven 私服、限制外网下载依赖、且 JDK 版本常锁定在 8 或 11。Spring Boot 的嵌入式 Tomcat 和spring-boot-starter-web自动装配机制能绕过手动配置web.xml和server.xml的繁琐步骤。更重要的是其RestController注解天然适配 Vue 的 AJAX 请求避免学生因Content-Type不匹配或 CORS 配置错误导致前端收不到 JSON 数据。提示不要用spring-boot-starter-parent的最新版。湖北工业大学实训服务器常见 JDK 1.8应锁定spring-boot-starter-parent为2.3.12.RELEASE否则RequestBody解析会因 Jackson 版本冲突报HttpMessageNotReadableException。2.2 商品管理模块的核心 Controller 与 Service 层实现以“添加商品”为例Java 后端需暴露 RESTful 接口并处理字段校验。关键点在于校验逻辑必须落在 Service 层而非 Controller因为实训作业常要求展示分层架构理解度。// src/main/java/com/hbut/supermarket/controller/GoodsController.java RestController RequestMapping(/api/goods) public class GoodsController { Autowired private GoodsService goodsService; // 注意此处用 Validated 而非 Valid支持分组校验 PostMapping public ResponseEntityMapString, Object addGoods(Validated RequestBody Goods goods) { MapString, Object result new HashMap(); try { goodsService.save(goods); result.put(code, 200); result.put(msg, 添加成功); return ResponseEntity.ok(result); } catch (IllegalArgumentException e) { result.put(code, 400); result.put(msg, e.getMessage()); return ResponseEntity.badRequest().body(result); } } }// src/main/java/com/hbut/supermarket/service/GoodsService.java Service public class GoodsService { Autowired private GoodsMapper goodsMapper; // MyBatis Mapper 接口 Transactional public void save(Goods goods) { // 校验规则商品名不能为空、价格必须大于 0、条形码长度为 13 位 if (goods.getName() null || goods.getName().trim().isEmpty()) { throw new IllegalArgumentException(商品名称不能为空); } if (goods.getPrice() 0) { throw new IllegalArgumentException(商品价格必须大于 0); } if (goods.getBarcode() null || !goods.getBarcode().matches(\\d{13})) { throw new IllegalArgumentException(条形码必须为13位数字); } goodsMapper.insert(goods); } }2.2.1 Goods 实体类的关键注解与数据库映射// src/main/java/com/hbut/supermarket/model/Goods.java public class Goods { private Long id; NotBlank(message 商品名称不能为空) Size(max 50, message 商品名称不能超过50个字符) private String name; NotNull(message 价格不能为空) DecimalMin(value 0.01, message 价格不能小于0.01) private BigDecimal price; NotBlank(message 条形码不能为空) Pattern(regexp \\d{13}, message 条形码必须为13位数字) private String barcode; // getter/setter 省略 }注意NotBlank和Pattern是 Hibernate Validator 提供的校验注解需在pom.xml中显式引入dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-validation/artifactId /dependency2.3 数据库连接配置适配湖北工业大学机房常见的 Oracle/MySQL 双环境实训环境常要求同一套代码切换数据库。Spring Boot 的application.yml应采用 profile 方式隔离配置# src/main/resources/application.yml spring: profiles: active: mysql # 默认启用 mysql 配置 --- spring: config: activate: on-profile: mysql datasource: url: jdbc:mysql://localhost:3306/supermarket?useSSLfalseserverTimezoneAsia/ShanghaicharacterEncodingutf8 username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver --- spring: config: activate: on-profile: oracle datasource: url: jdbc:oracle:thin:192.168.1.100:1521:orcl username: supermarket password: supermarket driver-class-name: oracle.jdbc.driver.OracleDriver启动时指定 profilejava -jar supermarket.jar --spring.profiles.activeoracle。这样无需修改代码即可切换数据库符合高校多机房环境的实际需求。3. 前端用 Vue HTML 构建可离线运行的管理界面避开 Node 环境依赖3.1 为什么不用 Vue CLI 而用 CDN 引入——直击高校机房真实限制HBuilderX 是湖北工业大学计算机学院指定的前端开发工具其默认不集成 Node.js 环境且实训机禁止安装 npm。因此项目前端采用CDN 直接引入 Vue 2.6.14兼容 IE11 Axios Element UI的组合所有 JS/CSS 通过script和link标签加载HTML 文件双击即可运行完全脱离构建工具。!-- src/main/resources/static/index.html -- !doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title湖北工业大学超市管理系统/title !-- Element UI CSS -- link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css !-- Vue 2.6.14非 Vue 3因 Vue 3 需要 ProxyIE11 不支持 -- script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.min.js/script !-- Axios -- script srchttps://cdn.jsdelivr.net/npm/axios0.21.4/dist/axios.min.js/script !-- Element UI JS -- script srchttps://unpkg.com/element-ui/lib/index.js/script /head body div idapp el-container el-header湖北工业大学超市管理系统/el-header el-main goods-list/goods-list /el-main /el-container /div script // 全局配置 Axios 基础 URL指向本地 Tomcat axios.defaults.baseURL http://localhost:8080/api; // 定义商品列表组件 Vue.component(goods-list, { data() { return { tableData: [], loading: false, dialogVisible: false, form: { name: , price: , barcode: } } }, methods: { fetchData() { this.loading true; axios.get(/goods).then(res { this.tableData res.data.data; // 注意后端返回结构 }).catch(err { this.$message.error(获取商品列表失败 err.response?.data?.msg || 网络错误); }).finally(() { this.loading false; }); }, submitForm() { axios.post(/goods, this.form).then(res { this.$message.success(res.data.msg); this.dialogVisible false; this.fetchData(); this.form { name: , price: , barcode: }; }).catch(err { this.$message.error(err.response?.data?.msg || 添加失败); }); } }, mounted() { this.fetchData(); }, template: div el-button typeprimary clickdialogVisible true添加商品/el-button el-table :datatableData stripe stylewidth: 100% v-loadingloading el-table-column propname label商品名称/el-table-column el-table-column propprice label价格/el-table-column el-table-column propbarcode label条形码/el-table-column /el-table el-dialog title添加商品 :visible.syncdialogVisible el-form :modelform el-form-item label商品名称 propname el-input v-modelform.name/el-input /el-form-item el-form-item label价格 propprice el-input v-modelform.price typenumber/el-input /el-form-item el-form-item label条形码 propbarcode el-input v-modelform.barcode maxlength13/el-input /el-form-item /el-form div slotfooter classdialog-footer el-button clickdialogVisible false取 消/el-button el-button typeprimary clicksubmitForm确 定/el-button /div /el-dialog /div }); new Vue({ el: #app }); /script /body /html3.1.1 关键参数说明与避坑点参数说明常见错误axios.defaults.baseURL必须设为http://localhost:8080/api因 Spring Boot 默认端口 8080且 ControllerRequestMapping(/api/goods)设成/api会导致跨域请求失败设成http://127.0.0.1:8080/api在部分机房 DNS 解析失败res.data.data后端返回格式为{ code: 200, msg: success, data: [...] }Vue 需取data字段前端未解构直接res.data赋值给tableData导致表格空白v-modelform.price输入框绑定price字段但后端接收的是BigDecimal需确保字符串能被RequestBody自动转换若输入12.5正常但输入12,5逗号小数点会 400 错误提示HBuilderX 中调试此 HTML 时务必右键选择“在内置浏览器中运行”而非“在 Chrome 中运行”——后者会触发 CORS而内置浏览器等同于本地文件协议无跨域限制。4. Java 与 Vue 的数据契约定义统一的 API 响应结构与错误处理机制4.1 后端统一封装 Result 类——让 Vue 前端不再写重复的 if-else 判断高校实训作业常被要求体现“前后端协作规范”。一个ResultT包装类能强制约定所有接口返回格式避免前端对每个接口单独解析code和msg。// src/main/java/com/hbut/supermarket/common/Result.java public class ResultT { private Integer code; private String msg; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.code 200; result.msg 操作成功; result.data data; return result; } public static T ResultT error(String msg) { ResultT result new Result(); result.code 500; result.msg msg; return result; } // getter/setter 省略 }Controller 改写为PostMapping public ResultVoid addGoods(Validated RequestBody Goods goods) { try { goodsService.save(goods); return Result.success(null); } catch (IllegalArgumentException e) { return Result.error(e.getMessage()); } }此时前端 Axios 请求可统一处理axios.post(/goods, this.form).then(res { if (res.data.code 200) { this.$message.success(res.data.msg); this.dialogVisible false; this.fetchData(); this.form { name: , price: , barcode: }; } else { this.$message.error(res.data.msg); } }).catch(err { this.$message.error(网络错误请检查后端是否启动); });4.2 前端拦截器注入 Token对接湖北工业大学统一身份认证UAA的预备设计虽然当前版本未接入 UAA但预留了扩展点。若后续需集成校内 CAS 单点登录只需在axios.interceptors.request.use中注入 ticket// 在 index.html 的 script 标签内Vue 实例创建前添加 axios.interceptors.request.use(config { // 从 localStorage 读取 ticketCAS 登录后存入 const ticket localStorage.getItem(cas_ticket); if (ticket config.url.includes(/api/)) { config.headers[X-CAS-Ticket] ticket; } return config; });后端对应添加拦截器Component public class CasAuthInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String ticket request.getHeader(X-CAS-Ticket); if (ticket null || !validateCasTicket(ticket)) { response.setStatus(401); response.getWriter().write({\code\:401,\msg\:\未登录或票据无效\}); return false; } return true; } }5. 本地运行与调试全流程从 JDK 配置到 HBuilderX 页面验证5.1 Java 环境检查清单湖北工业大学机房典型配置检查项命令正常输出示例异常处理JDK 版本java -versionjava version 1.8.0_291若显示11.0.15需切换 JDKexport JAVA_HOME/opt/jdk1.8.0_291Maven 版本mvn -vApache Maven 3.6.3若提示 command not found使用mvn compile替代mvn package跳过打包阶段端口占用netstat -ano | findstr :8080Windowslsof -i :8080Linux/macOS显示 PIDtaskkill /PID 1234 /FWindows或kill -9 1234Linux/macOS5.2 三步启动法确保前后端同时就绪第一步启动后端# 进入项目根目录含 pom.xml cd supermarket-backend # 编译并运行跳过测试节省时间 mvn clean compile exec:java -Dexec.mainClasscom.hbut.supermarket.SupermarketApplication -Dmaven.test.skiptrue观察控制台输出Tomcat started on port(s): 8080即启动成功。第二步确认接口可用在浏览器访问http://localhost:8080/api/goods应返回 JSON 数组即使为空。若返回 404检查GoodsController是否加了RestController和RequestMapping。第三步HBuilderX 打开前端页面将index.html拖入 HBuilderX 工作区右键 → “在内置浏览器中运行”页面加载后点击“添加商品”输入测试数据观察控制台 Network 标签页中/api/goods请求状态码是否为 2005.2.1 最常遇到的 3 个错误及定位方法现象控制台报错定位路径解决方案页面空白控制台无报错Failed to load resource: net::ERR_CONNECTION_REFUSED浏览器开发者工具 → Network → 点击/api/goods→ 查看 Preview后端未启动或端口被占执行netstat检查 8080表格有数据但点击“添加”无反应Uncaught (in promise) TypeError: Cannot read property msg of undefined前端代码中res.data.msg报错后端返回格式不符检查Result类是否被正确序列化确认ResponseBody生效添加成功但表格不刷新控制台无错误Network 显示 200Vue Devtools → Components → 查看goods-list组件 datathis.tableData未响应式更新改用this.$set(this, tableData, newData)或确保fetchData()被正确调用5.3 一键导出销售报表HTML JavaScript 实现客户端 Excel 生成系统需支持导出销售流水为 Excel但高校机房禁用后端 POI 依赖体积大、易冲突。采用纯前端方案用xlsx库将 JSON 数据转为.xlsx文件。在index.html的head中追加script srchttps://cdn.jsdelivr.net/npm/xlsx0.18.5/dist/xlsx.full.min.js/script在 Vue 组件中添加导出方法methods: { exportToExcel() { // 模拟销售流水数据实际从 /api/sales 接口获取 const data [ { id: 1, goodsName: 矿泉水, price: 2.00, quantity: 5, time: 2023-09-01 08:30 }, { id: 2, goodsName: 方便面, price: 5.50, quantity: 2, time: 2023-09-01 09:15 } ]; const ws XLSX.utils.json_to_sheet(data); const wb XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 销售流水); XLSX.writeFile(wb, 湖北工业大学超市销售报表.xlsx); } }注意xlsx.full.min.js体积约 800KB若机房网络慢可改用更轻量的SheetJS精简版或预生成 CSV用BlobURL.createObjectURL兼容性更强。6. Vue 组件通信优化用 Event Bus 解耦商品列表与搜索框6.1 为什么不用 Vuex——契合课程设计的轻量级状态管理Vuex 需额外学习 store、mutation、action 概念而实训课重点在“能跑通”。Event Bus 是 Vue 2 的经典模式仅需 3 行代码即可实现跨组件通信且不增加构建复杂度。在index.html的script标签顶部添加// 创建全局事件总线 const EventBus new Vue();6.1.1 商品搜索功能的完整实现链路步骤 1创建搜索组件!-- 在 index.html 的 el-header 内添加 -- el-input placeholder请输入商品名称 v-modelsearchKeyword keyup.enter.nativeonSearch el-button slotappend iconel-icon-search clickonSearch/el-button /el-input步骤 2在 Vue 实例 data 中声明搜索关键词new Vue({ el: #app, data: { searchKeyword: }, methods: { onSearch() { // 触发全局搜索事件 EventBus.$emit(search-goods, this.searchKeyword); } } });步骤 3商品列表组件监听事件// 在 goods-list 组件的 mounted 钩子中监听 mounted() { this.fetchData(); // 监听搜索事件 EventBus.$on(search-goods, (keyword) { if (keyword.trim() ) { this.fetchData(); // 清空关键词时重载全部 } else { axios.get(/goods/search?keyword${encodeURIComponent(keyword)}).then(res { this.tableData res.data.data; }); } }); }, // 组件销毁时移除监听避免内存泄漏 beforeDestroy() { EventBus.$off(search-goods); }步骤 4后端提供搜索接口GetMapping(/search) public ResultListGoods searchGoods(RequestParam String keyword) { ListGoods list goodsService.searchByName(keyword); return Result.success(list); }// GoodsService.java public ListGoods searchByName(String keyword) { return goodsMapper.selectByNameLike(% keyword.trim() %); }!-- GoodsMapper.xml -- select idselectByNameLike resultTypeGoods SELECT * FROM goods WHERE name LIKE #{keyword} /select此方案彻底解耦了搜索输入框与商品表格无需父子组件 props 传递也无需引入 Vuex符合高校课程设计“够用就好”的工程原则。本文还有配套的精品资源点击获取
简介本资源是面向高校计算机专业学生与Web全栈初学者的超市管理系统课程设计实践项目基于Java后端、Vue前端及HTML/JavaScript技术栈完整实现湖北工业大学超市管理业务场景涵盖商品管理、库存统计、员工权限与基础订单流程。压缩包共240个文件总计58.68MB其中41个Java文件构成Spring Boot服务层与数据访问逻辑30个Vue组件实现响应式管理界面43个JS脚本支撑交互功能27个drawio文件提供系统架构图、数据库ER图及模块流程图另有docx实验报告模板、xlsx数据样例与pptx答辩材料便于课程设计全过程交付。内容预览显示包含nginx部署配置、Element UI样式文件及多份规范化的课程设计文档体现工程化开发意识。目前已有291人学习下载适合用于软件工程实训、系统分析与设计课程实践或毕业设计参考可直接运行调试、快速理解前后端分离架构落地细节。1. 这不是“又一个学生作业”湖北工业大学超市管理系统源码背后的真实工程逻辑你搜“湖北工业大学超市管理系统”大概率会看到一堆压缩包、百度网盘链接和“含数据库文档”的宣传语。但真正打开代码很多人卡在第一步为什么用 Java 做后端却要配 Vue为什么 HTML 文件里混着script srcvue.min.js和new Vue({ el: #app })这不是技术堆砌而是高校后勤场景下典型的分层约束——前端必须轻量可离线教室机房无 Node 环境、后端需对接校内统一身份认证Java Spring Security 更易集成、数据库要兼容学校现有 Oracle 或 MySQL 实训平台。这套系统真正解决的是管理员在无公网 IP 的校园内网中用浏览器直接完成商品入库、会员充值、销售流水导出三类高频操作。它面向的是信息学院大三实训课学生、后勤处临时录入员、以及需要快速验证 Java Web Vue 组合可行性的课程设计指导教师。如果你正被“前后端分离怎么部署到 Tomcat”“Vue 组件如何调用 Java 接口”“HTML 表单提交后页面不刷新”卡住这篇就是为你写的实操路径。2. 后端用 Java 实现业务闭环从 Spring Boot 路由到 JDBC 数据库连接2.1 为什么选 Spring Boot 而非传统 Servlet——应对高校实训环境的三个硬约束高校机房普遍禁用 Maven 私服、限制外网下载依赖、且 JDK 版本常锁定在 8 或 11。Spring Boot 的嵌入式 Tomcat 和spring-boot-starter-web自动装配机制能绕过手动配置web.xml和server.xml的繁琐步骤。更重要的是其RestController注解天然适配 Vue 的 AJAX 请求避免学生因Content-Type不匹配或 CORS 配置错误导致前端收不到 JSON 数据。提示不要用spring-boot-starter-parent的最新版。湖北工业大学实训服务器常见 JDK 1.8应锁定spring-boot-starter-parent为2.3.12.RELEASE否则RequestBody解析会因 Jackson 版本冲突报HttpMessageNotReadableException。2.2 商品管理模块的核心 Controller 与 Service 层实现以“添加商品”为例Java 后端需暴露 RESTful 接口并处理字段校验。关键点在于校验逻辑必须落在 Service 层而非 Controller因为实训作业常要求展示分层架构理解度。// src/main/java/com/hbut/supermarket/controller/GoodsController.java RestController RequestMapping(/api/goods) public class GoodsController { Autowired private GoodsService goodsService; // 注意此处用 Validated 而非 Valid支持分组校验 PostMapping public ResponseEntityMapString, Object addGoods(Validated RequestBody Goods goods) { MapString, Object result new HashMap(); try { goodsService.save(goods); result.put(code, 200); result.put(msg, 添加成功); return ResponseEntity.ok(result); } catch (IllegalArgumentException e) { result.put(code, 400); result.put(msg, e.getMessage()); return ResponseEntity.badRequest().body(result); } } }// src/main/java/com/hbut/supermarket/service/GoodsService.java Service public class GoodsService { Autowired private GoodsMapper goodsMapper; // MyBatis Mapper 接口 Transactional public void save(Goods goods) { // 校验规则商品名不能为空、价格必须大于 0、条形码长度为 13 位 if (goods.getName() null || goods.getName().trim().isEmpty()) { throw new IllegalArgumentException(商品名称不能为空); } if (goods.getPrice() 0) { throw new IllegalArgumentException(商品价格必须大于 0); } if (goods.getBarcode() null || !goods.getBarcode().matches(\\d{13})) { throw new IllegalArgumentException(条形码必须为13位数字); } goodsMapper.insert(goods); } }2.2.1 Goods 实体类的关键注解与数据库映射// src/main/java/com/hbut/supermarket/model/Goods.java public class Goods { private Long id; NotBlank(message 商品名称不能为空) Size(max 50, message 商品名称不能超过50个字符) private String name; NotNull(message 价格不能为空) DecimalMin(value 0.01, message 价格不能小于0.01) private BigDecimal price; NotBlank(message 条形码不能为空) Pattern(regexp \\d{13}, message 条形码必须为13位数字) private String barcode; // getter/setter 省略 }注意NotBlank和Pattern是 Hibernate Validator 提供的校验注解需在pom.xml中显式引入dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-validation/artifactId /dependency2.3 数据库连接配置适配湖北工业大学机房常见的 Oracle/MySQL 双环境实训环境常要求同一套代码切换数据库。Spring Boot 的application.yml应采用 profile 方式隔离配置# src/main/resources/application.yml spring: profiles: active: mysql # 默认启用 mysql 配置 --- spring: config: activate: on-profile: mysql datasource: url: jdbc:mysql://localhost:3306/supermarket?useSSLfalseserverTimezoneAsia/ShanghaicharacterEncodingutf8 username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver --- spring: config: activate: on-profile: oracle datasource: url: jdbc:oracle:thin:192.168.1.100:1521:orcl username: supermarket password: supermarket driver-class-name: oracle.jdbc.driver.OracleDriver启动时指定 profilejava -jar supermarket.jar --spring.profiles.activeoracle。这样无需修改代码即可切换数据库符合高校多机房环境的实际需求。3. 前端用 Vue HTML 构建可离线运行的管理界面避开 Node 环境依赖3.1 为什么不用 Vue CLI 而用 CDN 引入——直击高校机房真实限制HBuilderX 是湖北工业大学计算机学院指定的前端开发工具其默认不集成 Node.js 环境且实训机禁止安装 npm。因此项目前端采用CDN 直接引入 Vue 2.6.14兼容 IE11 Axios Element UI的组合所有 JS/CSS 通过script和link标签加载HTML 文件双击即可运行完全脱离构建工具。!-- src/main/resources/static/index.html -- !doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title湖北工业大学超市管理系统/title !-- Element UI CSS -- link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css !-- Vue 2.6.14非 Vue 3因 Vue 3 需要 ProxyIE11 不支持 -- script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.min.js/script !-- Axios -- script srchttps://cdn.jsdelivr.net/npm/axios0.21.4/dist/axios.min.js/script !-- Element UI JS -- script srchttps://unpkg.com/element-ui/lib/index.js/script /head body div idapp el-container el-header湖北工业大学超市管理系统/el-header el-main goods-list/goods-list /el-main /el-container /div script // 全局配置 Axios 基础 URL指向本地 Tomcat axios.defaults.baseURL http://localhost:8080/api; // 定义商品列表组件 Vue.component(goods-list, { data() { return { tableData: [], loading: false, dialogVisible: false, form: { name: , price: , barcode: } } }, methods: { fetchData() { this.loading true; axios.get(/goods).then(res { this.tableData res.data.data; // 注意后端返回结构 }).catch(err { this.$message.error(获取商品列表失败 err.response?.data?.msg || 网络错误); }).finally(() { this.loading false; }); }, submitForm() { axios.post(/goods, this.form).then(res { this.$message.success(res.data.msg); this.dialogVisible false; this.fetchData(); this.form { name: , price: , barcode: }; }).catch(err { this.$message.error(err.response?.data?.msg || 添加失败); }); } }, mounted() { this.fetchData(); }, template: div el-button typeprimary clickdialogVisible true添加商品/el-button el-table :datatableData stripe stylewidth: 100% v-loadingloading el-table-column propname label商品名称/el-table-column el-table-column propprice label价格/el-table-column el-table-column propbarcode label条形码/el-table-column /el-table el-dialog title添加商品 :visible.syncdialogVisible el-form :modelform el-form-item label商品名称 propname el-input v-modelform.name/el-input /el-form-item el-form-item label价格 propprice el-input v-modelform.price typenumber/el-input /el-form-item el-form-item label条形码 propbarcode el-input v-modelform.barcode maxlength13/el-input /el-form-item /el-form div slotfooter classdialog-footer el-button clickdialogVisible false取 消/el-button el-button typeprimary clicksubmitForm确 定/el-button /div /el-dialog /div }); new Vue({ el: #app }); /script /body /html3.1.1 关键参数说明与避坑点参数说明常见错误axios.defaults.baseURL必须设为http://localhost:8080/api因 Spring Boot 默认端口 8080且 ControllerRequestMapping(/api/goods)设成/api会导致跨域请求失败设成http://127.0.0.1:8080/api在部分机房 DNS 解析失败res.data.data后端返回格式为{ code: 200, msg: success, data: [...] }Vue 需取data字段前端未解构直接res.data赋值给tableData导致表格空白v-modelform.price输入框绑定price字段但后端接收的是BigDecimal需确保字符串能被RequestBody自动转换若输入12.5正常但输入12,5逗号小数点会 400 错误提示HBuilderX 中调试此 HTML 时务必右键选择“在内置浏览器中运行”而非“在 Chrome 中运行”——后者会触发 CORS而内置浏览器等同于本地文件协议无跨域限制。4. Java 与 Vue 的数据契约定义统一的 API 响应结构与错误处理机制4.1 后端统一封装 Result 类——让 Vue 前端不再写重复的 if-else 判断高校实训作业常被要求体现“前后端协作规范”。一个ResultT包装类能强制约定所有接口返回格式避免前端对每个接口单独解析code和msg。// src/main/java/com/hbut/supermarket/common/Result.java public class ResultT { private Integer code; private String msg; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.code 200; result.msg 操作成功; result.data data; return result; } public static T ResultT error(String msg) { ResultT result new Result(); result.code 500; result.msg msg; return result; } // getter/setter 省略 }Controller 改写为PostMapping public ResultVoid addGoods(Validated RequestBody Goods goods) { try { goodsService.save(goods); return Result.success(null); } catch (IllegalArgumentException e) { return Result.error(e.getMessage()); } }此时前端 Axios 请求可统一处理axios.post(/goods, this.form).then(res { if (res.data.code 200) { this.$message.success(res.data.msg); this.dialogVisible false; this.fetchData(); this.form { name: , price: , barcode: }; } else { this.$message.error(res.data.msg); } }).catch(err { this.$message.error(网络错误请检查后端是否启动); });4.2 前端拦截器注入 Token对接湖北工业大学统一身份认证UAA的预备设计虽然当前版本未接入 UAA但预留了扩展点。若后续需集成校内 CAS 单点登录只需在axios.interceptors.request.use中注入 ticket// 在 index.html 的 script 标签内Vue 实例创建前添加 axios.interceptors.request.use(config { // 从 localStorage 读取 ticketCAS 登录后存入 const ticket localStorage.getItem(cas_ticket); if (ticket config.url.includes(/api/)) { config.headers[X-CAS-Ticket] ticket; } return config; });后端对应添加拦截器Component public class CasAuthInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String ticket request.getHeader(X-CAS-Ticket); if (ticket null || !validateCasTicket(ticket)) { response.setStatus(401); response.getWriter().write({\code\:401,\msg\:\未登录或票据无效\}); return false; } return true; } }5. 本地运行与调试全流程从 JDK 配置到 HBuilderX 页面验证5.1 Java 环境检查清单湖北工业大学机房典型配置检查项命令正常输出示例异常处理JDK 版本java -versionjava version 1.8.0_291若显示11.0.15需切换 JDKexport JAVA_HOME/opt/jdk1.8.0_291Maven 版本mvn -vApache Maven 3.6.3若提示 command not found使用mvn compile替代mvn package跳过打包阶段端口占用netstat -ano | findstr :8080Windowslsof -i :8080Linux/macOS显示 PIDtaskkill /PID 1234 /FWindows或kill -9 1234Linux/macOS5.2 三步启动法确保前后端同时就绪第一步启动后端# 进入项目根目录含 pom.xml cd supermarket-backend # 编译并运行跳过测试节省时间 mvn clean compile exec:java -Dexec.mainClasscom.hbut.supermarket.SupermarketApplication -Dmaven.test.skiptrue观察控制台输出Tomcat started on port(s): 8080即启动成功。第二步确认接口可用在浏览器访问http://localhost:8080/api/goods应返回 JSON 数组即使为空。若返回 404检查GoodsController是否加了RestController和RequestMapping。第三步HBuilderX 打开前端页面将index.html拖入 HBuilderX 工作区右键 → “在内置浏览器中运行”页面加载后点击“添加商品”输入测试数据观察控制台 Network 标签页中/api/goods请求状态码是否为 2005.2.1 最常遇到的 3 个错误及定位方法现象控制台报错定位路径解决方案页面空白控制台无报错Failed to load resource: net::ERR_CONNECTION_REFUSED浏览器开发者工具 → Network → 点击/api/goods→ 查看 Preview后端未启动或端口被占执行netstat检查 8080表格有数据但点击“添加”无反应Uncaught (in promise) TypeError: Cannot read property msg of undefined前端代码中res.data.msg报错后端返回格式不符检查Result类是否被正确序列化确认ResponseBody生效添加成功但表格不刷新控制台无错误Network 显示 200Vue Devtools → Components → 查看goods-list组件 datathis.tableData未响应式更新改用this.$set(this, tableData, newData)或确保fetchData()被正确调用5.3 一键导出销售报表HTML JavaScript 实现客户端 Excel 生成系统需支持导出销售流水为 Excel但高校机房禁用后端 POI 依赖体积大、易冲突。采用纯前端方案用xlsx库将 JSON 数据转为.xlsx文件。在index.html的head中追加script srchttps://cdn.jsdelivr.net/npm/xlsx0.18.5/dist/xlsx.full.min.js/script在 Vue 组件中添加导出方法methods: { exportToExcel() { // 模拟销售流水数据实际从 /api/sales 接口获取 const data [ { id: 1, goodsName: 矿泉水, price: 2.00, quantity: 5, time: 2023-09-01 08:30 }, { id: 2, goodsName: 方便面, price: 5.50, quantity: 2, time: 2023-09-01 09:15 } ]; const ws XLSX.utils.json_to_sheet(data); const wb XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 销售流水); XLSX.writeFile(wb, 湖北工业大学超市销售报表.xlsx); } }注意xlsx.full.min.js体积约 800KB若机房网络慢可改用更轻量的SheetJS精简版或预生成 CSV用BlobURL.createObjectURL兼容性更强。6. Vue 组件通信优化用 Event Bus 解耦商品列表与搜索框6.1 为什么不用 Vuex——契合课程设计的轻量级状态管理Vuex 需额外学习 store、mutation、action 概念而实训课重点在“能跑通”。Event Bus 是 Vue 2 的经典模式仅需 3 行代码即可实现跨组件通信且不增加构建复杂度。在index.html的script标签顶部添加// 创建全局事件总线 const EventBus new Vue();6.1.1 商品搜索功能的完整实现链路步骤 1创建搜索组件!-- 在 index.html 的 el-header 内添加 -- el-input placeholder请输入商品名称 v-modelsearchKeyword keyup.enter.nativeonSearch el-button slotappend iconel-icon-search clickonSearch/el-button /el-input步骤 2在 Vue 实例 data 中声明搜索关键词new Vue({ el: #app, data: { searchKeyword: }, methods: { onSearch() { // 触发全局搜索事件 EventBus.$emit(search-goods, this.searchKeyword); } } });步骤 3商品列表组件监听事件// 在 goods-list 组件的 mounted 钩子中监听 mounted() { this.fetchData(); // 监听搜索事件 EventBus.$on(search-goods, (keyword) { if (keyword.trim() ) { this.fetchData(); // 清空关键词时重载全部 } else { axios.get(/goods/search?keyword${encodeURIComponent(keyword)}).then(res { this.tableData res.data.data; }); } }); }, // 组件销毁时移除监听避免内存泄漏 beforeDestroy() { EventBus.$off(search-goods); }步骤 4后端提供搜索接口GetMapping(/search) public ResultListGoods searchGoods(RequestParam String keyword) { ListGoods list goodsService.searchByName(keyword); return Result.success(list); }// GoodsService.java public ListGoods searchByName(String keyword) { return goodsMapper.selectByNameLike(% keyword.trim() %); }!-- GoodsMapper.xml -- select idselectByNameLike resultTypeGoods SELECT * FROM goods WHERE name LIKE #{keyword} /select此方案彻底解耦了搜索输入框与商品表格无需父子组件 props 传递也无需引入 Vuex符合高校课程设计“够用就好”的工程原则。本文还有配套的精品资源点击获取
)
)
