简介这是一套面向Java Web初学者与课程设计开发者的二次元商品购物商城完整项目采用Spring Boot后端与Vue前端分离架构适合作为毕业设计、课程作业或电商入门练手参考。压缩包共715个文件约30.09MB其中63个java文件承载后端业务逻辑38个js与36个css构成前端页面与样式另有2个sql脚本与mwb数据库模型文件支撑数据层374张jpg与153张png提供商品与界面素材xml、yaml、properties等配置文件则用于环境与依赖管理。资源同时附带部署说明、系统介绍与数据库设计文档涵盖商品管理、订单管理、用户管理等核心模块可帮助读者理解前后端交互流程、表结构设计与项目落地方式。目前已有330人学习下载适合希望快速掌握Spring Boot与Vue整合开发、并需要一套可直接运行参考项目的读者。1. 二次元商品商城从零跑通这套 SpringBootVue 方案到底值不值得做拿到一个「基于 SpringBootVue 的二次元商品购物商城」的源码包多数人第一反应是解压、找 README、翻 application.yml然后卡在数据库连不上或者前端 404。我前后端分离的商城项目做过不少二次元周边这个品类看着小众但商品 SKU 的规格维度角色、尺寸、材质、再版批次比普通电商更碎正好是练手「多规格 SKU 订单拆单」的好场景。这套技术栈的核心价值在于SpringBoot 负责商品、订单、用户、库存的后端接口Vue 负责前台商城展示和后台管理界面MySQL 存业务数据。适合想完整走一遍电商闭环的开发者也适合拿它当毕业设计或接私活的底子。下面按「环境怎么配 → 数据库怎么建 → 后端怎么跑 → 前端怎么接 → 坑在哪」的顺序拆开讲每一步都能照着复现。2. 环境与项目结构先把 SpringBoot 和 Vue 的版本对齐2.1 为什么版本对齐比装环境更容易翻车这套项目最常见的启动失败不是代码写错而是 SpringBoot 版本和 JDK 版本对不上。热搜里「springboot版本太高」这个词不是白来的——SpringBoot 3.x 强制要求 JDK 17而很多教程和旧代码还停留在 JDK 8。如果你本地是 JDK 8拿到一个 SpringBoot 3.x 的 pom.xml编译阶段就会报Unsupported class file major version。反过来JDK 17 跑 SpringBoot 2.x 一般没问题但个别依赖会有反射警告。我一般会先看 pom.xml 里的parent版本号再决定用哪个 JDK。常见做法是SpringBoot 2.7.x 配 JDK 8 或 11SpringBoot 3.0 配 JDK 17。Vue 这边同理Vue 2 用vue-cli脚手架Vue 3 用vite两者的package.json和构建命令完全不同。先确认这两组版本再动手装环境能省掉一半的排查时间。2.2 后端项目结构与关键目录一个标准的 SpringBoot 商城后端目录结构大致是这样src/main/java/com/xxx/mall/ ├── controller/ // 接口层接收前端请求 ├── service/ // 业务逻辑订单、库存计算在这 ├── mapper/ // MyBatis 的 DAO 接口 ├── entity/ // 数据库表对应的实体类 ├── config/ // 跨域、拦截器、Swagger 配置 └── MallApplication.java // 启动类 src/main/resources/ ├── application.yml // 数据库、端口、文件上传路径 ├── mapper/ // MyBatis XML 映射文件 └── static/ // 前端打包后放这里如果合并部署application.yml是第一个要改的文件重点看三处数据库连接、服务端口、文件上传目录。数据库连接串里的库名、用户名、密码必须和你本地 MySQL 一致否则启动直接报Access denied或Unknown database。2.3 前端项目结构与依赖安装Vue 前端通常是独立目录结构如下src/ ├── api/ // 封装 axios 请求对应后端接口 ├── views/ // 页面组件商品列表、详情、购物车 ├── router/ // 路由配置动态路由和权限在这 ├── store/ // Vuex/Pinia 状态管理存用户登录态 └── main.js // 入口文件安装依赖用npm install或yarn国内网络建议先配镜像源。热搜里「vue安装依赖」和「vue安装及环境配置」是高频问题核心就两步Node.js 版本别太新Vue 2 项目用 Node 14/16 最稳Node 18 可能报 OpenSSL 错误以及依赖装完后检查node_modules是否完整。如果npm install卡住换cnpm或配淘宝镜像通常能解决。提示Node 18 以上跑老 Vue 2 项目如果报error:0308010C:digital envelope routines::unsupported在启动命令前加export NODE_OPTIONS--openssl-legacy-provider即可这是 OpenSSL 版本差异导致的不是代码问题。3. 数据库设计与建表二次元商品的 SKU 怎么存3.1 商品多规格表结构设计二次元商品和普通商品最大的区别是规格维度多。一个手办可能有「角色 尺寸 版本」三个维度每个维度又有多个值。如果只用一张商品表加一个spec字段存 JSON查询和库存扣减会非常痛苦。常见做法是拆成三张表商品主表、规格表、SKU 表。表名作用关键字段goods商品主信息id, name, category_id, cover, detailgoods_spec规格名id, goods_id, spec_namegoods_sku具体 SKUid, goods_id, spec_value, price, stockgoods_sku里每一行代表一个可售单元比如「初音未来 1/7 比例 再版」对应一条记录价格和库存都挂在这行上。下单时扣的是 SKU 的库存不是商品主表的库存。3.2 建库建表与初始数据导入拿到源码包后数据库脚本一般在sql/目录下文件名可能是mall.sql或init.sql。导入步骤# 1. 登录 MySQL mysql -u root -p # 2. 创建数据库字符集用 utf8mb4 支持 emoji CREATE DATABASE anime_mall DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; # 3. 切换到该库 USE anime_mall; # 4. 导入表结构和数据 source /path/to/mall.sql;导入完成后用SHOW TABLES;确认表都建好了。如果脚本里没有CREATE DATABASE语句需要先手动建库再导入。字符集一定要用utf8mb4二次元商品名里经常有日文假名和特殊符号utf8存不下会报错或乱码。3.3 数据库增删改查在项目里的落点热搜里「数据库增删改查」是基础操作但在这套项目里要理解它对应哪些业务。商品管理后台的「新增商品」对应INSERT INTO goods加INSERT INTO goods_sku「下架商品」通常是UPDATE goods SET status 0而不是物理删除「订单查询」是SELECT联表查orders和order_item。理解这层映射改代码时才知道该动哪个 Mapper。注意导入 SQL 脚本前先备份已有数据库。有些脚本开头带DROP TABLE IF EXISTS直接跑会清掉同名表。4. 后端启动与接口联调SpringBoot 配置怎么改才不报错4.1 application.yml 三个必改项后端跑不起来九成问题出在application.yml。重点改这三处server: port: 8080 # 后端服务端口被占用就换 spring: datasource: url: jdbc:mysql://localhost:3306/anime_mall?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root # 改成你的 MySQL 用户名 password: 123456 # 改成你的密码 driver-class-name: com.mysql.cj.jdbc.Driver servlet: multipart: max-file-size: 10MB # 商品图片上传大小限制 max-request-size: 20MBurl里的serverTimezone必须加否则 MySQL 8 会报时区错误。driver-class-name用com.mysql.cj.jdbc.Driver这是 MySQL 8 的驱动类老的com.mysql.jdbc.Driver已废弃。4.2 启动类与跨域配置启动类本身很简单关键是跨域配置。前后端分离时前端跑在 8081后端跑在 8080浏览器会拦截跨域请求。常见做法是加一个全局跨域配置类Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) // 允许所有来源生产环境要收紧 .allowedMethods(GET, POST, PUT, DELETE) .allowCredentials(true) .maxAge(3600); } }allowedOriginPatterns用*是开发阶段图方便上线前必须改成具体域名否则有安全风险。allowCredentials(true)和allowedOrigins(*)不能同时用这是 Spring 的限制所以要用allowedOriginPatterns。4.3 接口联调与 Swagger 验证后端启动后先访问http://localhost:8080看是否返回 Whitelabel 页面能返回说明服务起来了。然后调商品列表接口验证数据库连通# 测试商品列表接口 curl http://localhost:8080/goods/list?page1size10如果返回 JSON 数据说明 Controller、Service、Mapper、数据库整条链路通了。如果报 500看控制台堆栈大概率是 Mapper XML 里的 SQL 写错或字段名对不上。项目如果集成了 Swagger访问http://localhost:8080/swagger-ui.html能看到所有接口文档联调时比手写 curl 方便。提示接口返回中文乱码检查数据库连接串是否带characterEncodingutf8以及数据库和表的字符集是否为utf8mb4。5. 前端对接与打包部署Vue 怎么和 SpringBoot 合体5.1 接口地址配置与代理前端调后端接口地址配置在src/api/或.env文件里。开发阶段用代理解决跨域// vue.config.js module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, // 后端地址 changeOrigin: true, pathRewrite: { ^/api: } // 去掉 /api 前缀 } } } }这样前端请求/api/goods/list会被代理到http://localhost:8080/goods/list。pathRewrite的作用是去掉前缀具体要不要去掉看后端接口有没有统一加/api。5.2 前端打包与放进 SpringBoot热搜里「vue打包放进springboot中」是部署阶段的常见需求。步骤是# 1. 前端打包生成 dist 目录 npm run build # 2. 把 dist 里的文件复制到 SpringBoot 的 static 目录 cp -r dist/* ../mall-backend/src/main/resources/static/ # 3. 重新打包后端 mvn clean package -DskipTests # 4. 运行 jar java -jar target/mall-0.0.1-SNAPSHOT.jar合并部署后访问http://localhost:8080就能同时打开前端页面和后端接口。注意 Vue Router 要用history模式的话需要在 SpringBoot 里加一个配置把所有非静态资源请求转发到index.html否则刷新页面会 404。5.3 动态路由与权限控制后台管理界面通常需要根据用户角色动态生成路由。热搜里「vue动态路由」和「vue路由参数」在这套项目里对应的是登录后拿到用户角色前端根据角色过滤路由表只挂载有权限的菜单。实现方式是在router/index.js里定义静态路由和动态路由登录成功后调用router.addRoute()添加。路由参数用this.$route.params.id或query获取商品详情页一般用params传商品 ID。6. 避坑与排查这套商城跑不起来时先看这几条6.1 数据库连接失败Access denied 和 Unknown database现象是启动时报java.sql.SQLException: Access denied for user rootlocalhost。原因通常是application.yml里的用户名密码和本地 MySQL 不一致或者 MySQL 8 的 root 用户默认不允许远程连接。解决方法是先用命令行mysql -u root -p确认能登录再核对配置文件。如果是Unknown database说明库名写错或没建库手动CREATE DATABASE即可。6.2 前端 npm install 报错Node 版本和依赖冲突现象是npm install卡住或报ERESOLVE unable to resolve dependency tree。原因是 Node 版本太新或者依赖之间有版本冲突。解决方法是降级 Node 到 14 或 16或者用npm install --legacy-peer-deps跳过 peer 依赖检查。如果还不行删掉node_modules和package-lock.json重装。6.3 跨域报错CORS policy 拦截现象是浏览器控制台报Access to XMLHttpRequest has been blocked by CORS policy。原因是后端没配跨域或者配了但allowedOrigins和allowCredentials冲突。解决方法是检查跨域配置类是否生效开发阶段用allowedOriginPatterns(*)生产环境改成具体域名。6.4 图片上传失败路径不存在或大小超限现象是上传商品图片时报FileNotFoundException或MaxUploadSizeExceededException。原因是上传目录不存在或者文件超过multipart配置的大小限制。解决方法是手动创建上传目录并在application.yml里调大max-file-size。上传路径建议用绝对路径相对路径在不同启动方式下会指向不同目录。6.5 打包后页面空白静态资源路径不对现象是java -jar启动后访问首页一片空白控制台报 404。原因是 Vue 打包默认用绝对路径/js/app.js而 SpringBoot 的 context-path 可能不是根路径。解决方法是在vue.config.js里设置publicPath: ./改成相对路径后重新打包。7. 进阶技巧用接口文档和日志把联调效率提上去这套项目跑通之后真正花时间的是联调。我的习惯是先把 Swagger 或 Knife4j 集成进去让所有接口有可视化文档前端不用追着后端问参数格式。集成方式很简单加依赖dependency groupIdcom.github.xiaoymin/groupId artifactIdknife4j-openapi2-spring-boot-starter/artifactId version4.3.0/version /dependency然后在配置类里开启EnableKnife4j访问http://localhost:8080/doc.html就能看到接口文档。每个接口的入参、出参、错误码都列清楚前端照着文档写请求比口头沟通靠谱得多。另一个技巧是给关键业务加日志。订单创建、库存扣减、支付回调这三处一定要打日志格式带上订单号和用户 ID。出问题时直接 grep 订单号能快速定位是哪一步断了。我一般用log.info(创建订单 orderNo{}, userId{}, skuId{}, orderNo, userId, skuId)这种占位符写法比字符串拼接性能好也不会因为拼错类型报错。最后说个验证方法跑通之后自己下一单完整流程——加购物车、下单、扣库存、查订单。如果库存扣了但订单没生成说明事务没配好如果订单生成了但库存没扣说明扣减逻辑没放在同一个事务里。这种端到端验证比单测更能暴露问题。我踩过最深的坑就是库存扣减用了UPDATE ... SET stock stock - 1但没加WHERE stock 0并发下直接扣成负数后来加了条件判断和乐观锁才解决。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/27 17:11:22 · 阅读 1.2k SpringBoot+Vue二次元商城实战：多规格SKU与订单拆单全流程
简介这是一套面向Java Web初学者与课程设计开发者的二次元商品购物商城完整项目采用Spring Boot后端与Vue前端分离架构适合作为毕业设计、课程作业或电商入门练手参考。压缩包共715个文件约30.09MB其中63个java文件承载后端业务逻辑38个js与36个css构成前端页面与样式另有2个sql脚本与mwb数据库模型文件支撑数据层374张jpg与153张png提供商品与界面素材xml、yaml、properties等配置文件则用于环境与依赖管理。资源同时附带部署说明、系统介绍与数据库设计文档涵盖商品管理、订单管理、用户管理等核心模块可帮助读者理解前后端交互流程、表结构设计与项目落地方式。目前已有330人学习下载适合希望快速掌握Spring Boot与Vue整合开发、并需要一套可直接运行参考项目的读者。1. 二次元商品商城从零跑通这套 SpringBootVue 方案到底值不值得做拿到一个「基于 SpringBootVue 的二次元商品购物商城」的源码包多数人第一反应是解压、找 README、翻 application.yml然后卡在数据库连不上或者前端 404。我前后端分离的商城项目做过不少二次元周边这个品类看着小众但商品 SKU 的规格维度角色、尺寸、材质、再版批次比普通电商更碎正好是练手「多规格 SKU 订单拆单」的好场景。这套技术栈的核心价值在于SpringBoot 负责商品、订单、用户、库存的后端接口Vue 负责前台商城展示和后台管理界面MySQL 存业务数据。适合想完整走一遍电商闭环的开发者也适合拿它当毕业设计或接私活的底子。下面按「环境怎么配 → 数据库怎么建 → 后端怎么跑 → 前端怎么接 → 坑在哪」的顺序拆开讲每一步都能照着复现。2. 环境与项目结构先把 SpringBoot 和 Vue 的版本对齐2.1 为什么版本对齐比装环境更容易翻车这套项目最常见的启动失败不是代码写错而是 SpringBoot 版本和 JDK 版本对不上。热搜里「springboot版本太高」这个词不是白来的——SpringBoot 3.x 强制要求 JDK 17而很多教程和旧代码还停留在 JDK 8。如果你本地是 JDK 8拿到一个 SpringBoot 3.x 的 pom.xml编译阶段就会报Unsupported class file major version。反过来JDK 17 跑 SpringBoot 2.x 一般没问题但个别依赖会有反射警告。我一般会先看 pom.xml 里的parent版本号再决定用哪个 JDK。常见做法是SpringBoot 2.7.x 配 JDK 8 或 11SpringBoot 3.0 配 JDK 17。Vue 这边同理Vue 2 用vue-cli脚手架Vue 3 用vite两者的package.json和构建命令完全不同。先确认这两组版本再动手装环境能省掉一半的排查时间。2.2 后端项目结构与关键目录一个标准的 SpringBoot 商城后端目录结构大致是这样src/main/java/com/xxx/mall/ ├── controller/ // 接口层接收前端请求 ├── service/ // 业务逻辑订单、库存计算在这 ├── mapper/ // MyBatis 的 DAO 接口 ├── entity/ // 数据库表对应的实体类 ├── config/ // 跨域、拦截器、Swagger 配置 └── MallApplication.java // 启动类 src/main/resources/ ├── application.yml // 数据库、端口、文件上传路径 ├── mapper/ // MyBatis XML 映射文件 └── static/ // 前端打包后放这里如果合并部署application.yml是第一个要改的文件重点看三处数据库连接、服务端口、文件上传目录。数据库连接串里的库名、用户名、密码必须和你本地 MySQL 一致否则启动直接报Access denied或Unknown database。2.3 前端项目结构与依赖安装Vue 前端通常是独立目录结构如下src/ ├── api/ // 封装 axios 请求对应后端接口 ├── views/ // 页面组件商品列表、详情、购物车 ├── router/ // 路由配置动态路由和权限在这 ├── store/ // Vuex/Pinia 状态管理存用户登录态 └── main.js // 入口文件安装依赖用npm install或yarn国内网络建议先配镜像源。热搜里「vue安装依赖」和「vue安装及环境配置」是高频问题核心就两步Node.js 版本别太新Vue 2 项目用 Node 14/16 最稳Node 18 可能报 OpenSSL 错误以及依赖装完后检查node_modules是否完整。如果npm install卡住换cnpm或配淘宝镜像通常能解决。提示Node 18 以上跑老 Vue 2 项目如果报error:0308010C:digital envelope routines::unsupported在启动命令前加export NODE_OPTIONS--openssl-legacy-provider即可这是 OpenSSL 版本差异导致的不是代码问题。3. 数据库设计与建表二次元商品的 SKU 怎么存3.1 商品多规格表结构设计二次元商品和普通商品最大的区别是规格维度多。一个手办可能有「角色 尺寸 版本」三个维度每个维度又有多个值。如果只用一张商品表加一个spec字段存 JSON查询和库存扣减会非常痛苦。常见做法是拆成三张表商品主表、规格表、SKU 表。表名作用关键字段goods商品主信息id, name, category_id, cover, detailgoods_spec规格名id, goods_id, spec_namegoods_sku具体 SKUid, goods_id, spec_value, price, stockgoods_sku里每一行代表一个可售单元比如「初音未来 1/7 比例 再版」对应一条记录价格和库存都挂在这行上。下单时扣的是 SKU 的库存不是商品主表的库存。3.2 建库建表与初始数据导入拿到源码包后数据库脚本一般在sql/目录下文件名可能是mall.sql或init.sql。导入步骤# 1. 登录 MySQL mysql -u root -p # 2. 创建数据库字符集用 utf8mb4 支持 emoji CREATE DATABASE anime_mall DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; # 3. 切换到该库 USE anime_mall; # 4. 导入表结构和数据 source /path/to/mall.sql;导入完成后用SHOW TABLES;确认表都建好了。如果脚本里没有CREATE DATABASE语句需要先手动建库再导入。字符集一定要用utf8mb4二次元商品名里经常有日文假名和特殊符号utf8存不下会报错或乱码。3.3 数据库增删改查在项目里的落点热搜里「数据库增删改查」是基础操作但在这套项目里要理解它对应哪些业务。商品管理后台的「新增商品」对应INSERT INTO goods加INSERT INTO goods_sku「下架商品」通常是UPDATE goods SET status 0而不是物理删除「订单查询」是SELECT联表查orders和order_item。理解这层映射改代码时才知道该动哪个 Mapper。注意导入 SQL 脚本前先备份已有数据库。有些脚本开头带DROP TABLE IF EXISTS直接跑会清掉同名表。4. 后端启动与接口联调SpringBoot 配置怎么改才不报错4.1 application.yml 三个必改项后端跑不起来九成问题出在application.yml。重点改这三处server: port: 8080 # 后端服务端口被占用就换 spring: datasource: url: jdbc:mysql://localhost:3306/anime_mall?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root # 改成你的 MySQL 用户名 password: 123456 # 改成你的密码 driver-class-name: com.mysql.cj.jdbc.Driver servlet: multipart: max-file-size: 10MB # 商品图片上传大小限制 max-request-size: 20MBurl里的serverTimezone必须加否则 MySQL 8 会报时区错误。driver-class-name用com.mysql.cj.jdbc.Driver这是 MySQL 8 的驱动类老的com.mysql.jdbc.Driver已废弃。4.2 启动类与跨域配置启动类本身很简单关键是跨域配置。前后端分离时前端跑在 8081后端跑在 8080浏览器会拦截跨域请求。常见做法是加一个全局跨域配置类Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) // 允许所有来源生产环境要收紧 .allowedMethods(GET, POST, PUT, DELETE) .allowCredentials(true) .maxAge(3600); } }allowedOriginPatterns用*是开发阶段图方便上线前必须改成具体域名否则有安全风险。allowCredentials(true)和allowedOrigins(*)不能同时用这是 Spring 的限制所以要用allowedOriginPatterns。4.3 接口联调与 Swagger 验证后端启动后先访问http://localhost:8080看是否返回 Whitelabel 页面能返回说明服务起来了。然后调商品列表接口验证数据库连通# 测试商品列表接口 curl http://localhost:8080/goods/list?page1size10如果返回 JSON 数据说明 Controller、Service、Mapper、数据库整条链路通了。如果报 500看控制台堆栈大概率是 Mapper XML 里的 SQL 写错或字段名对不上。项目如果集成了 Swagger访问http://localhost:8080/swagger-ui.html能看到所有接口文档联调时比手写 curl 方便。提示接口返回中文乱码检查数据库连接串是否带characterEncodingutf8以及数据库和表的字符集是否为utf8mb4。5. 前端对接与打包部署Vue 怎么和 SpringBoot 合体5.1 接口地址配置与代理前端调后端接口地址配置在src/api/或.env文件里。开发阶段用代理解决跨域// vue.config.js module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, // 后端地址 changeOrigin: true, pathRewrite: { ^/api: } // 去掉 /api 前缀 } } } }这样前端请求/api/goods/list会被代理到http://localhost:8080/goods/list。pathRewrite的作用是去掉前缀具体要不要去掉看后端接口有没有统一加/api。5.2 前端打包与放进 SpringBoot热搜里「vue打包放进springboot中」是部署阶段的常见需求。步骤是# 1. 前端打包生成 dist 目录 npm run build # 2. 把 dist 里的文件复制到 SpringBoot 的 static 目录 cp -r dist/* ../mall-backend/src/main/resources/static/ # 3. 重新打包后端 mvn clean package -DskipTests # 4. 运行 jar java -jar target/mall-0.0.1-SNAPSHOT.jar合并部署后访问http://localhost:8080就能同时打开前端页面和后端接口。注意 Vue Router 要用history模式的话需要在 SpringBoot 里加一个配置把所有非静态资源请求转发到index.html否则刷新页面会 404。5.3 动态路由与权限控制后台管理界面通常需要根据用户角色动态生成路由。热搜里「vue动态路由」和「vue路由参数」在这套项目里对应的是登录后拿到用户角色前端根据角色过滤路由表只挂载有权限的菜单。实现方式是在router/index.js里定义静态路由和动态路由登录成功后调用router.addRoute()添加。路由参数用this.$route.params.id或query获取商品详情页一般用params传商品 ID。6. 避坑与排查这套商城跑不起来时先看这几条6.1 数据库连接失败Access denied 和 Unknown database现象是启动时报java.sql.SQLException: Access denied for user rootlocalhost。原因通常是application.yml里的用户名密码和本地 MySQL 不一致或者 MySQL 8 的 root 用户默认不允许远程连接。解决方法是先用命令行mysql -u root -p确认能登录再核对配置文件。如果是Unknown database说明库名写错或没建库手动CREATE DATABASE即可。6.2 前端 npm install 报错Node 版本和依赖冲突现象是npm install卡住或报ERESOLVE unable to resolve dependency tree。原因是 Node 版本太新或者依赖之间有版本冲突。解决方法是降级 Node 到 14 或 16或者用npm install --legacy-peer-deps跳过 peer 依赖检查。如果还不行删掉node_modules和package-lock.json重装。6.3 跨域报错CORS policy 拦截现象是浏览器控制台报Access to XMLHttpRequest has been blocked by CORS policy。原因是后端没配跨域或者配了但allowedOrigins和allowCredentials冲突。解决方法是检查跨域配置类是否生效开发阶段用allowedOriginPatterns(*)生产环境改成具体域名。6.4 图片上传失败路径不存在或大小超限现象是上传商品图片时报FileNotFoundException或MaxUploadSizeExceededException。原因是上传目录不存在或者文件超过multipart配置的大小限制。解决方法是手动创建上传目录并在application.yml里调大max-file-size。上传路径建议用绝对路径相对路径在不同启动方式下会指向不同目录。6.5 打包后页面空白静态资源路径不对现象是java -jar启动后访问首页一片空白控制台报 404。原因是 Vue 打包默认用绝对路径/js/app.js而 SpringBoot 的 context-path 可能不是根路径。解决方法是在vue.config.js里设置publicPath: ./改成相对路径后重新打包。7. 进阶技巧用接口文档和日志把联调效率提上去这套项目跑通之后真正花时间的是联调。我的习惯是先把 Swagger 或 Knife4j 集成进去让所有接口有可视化文档前端不用追着后端问参数格式。集成方式很简单加依赖dependency groupIdcom.github.xiaoymin/groupId artifactIdknife4j-openapi2-spring-boot-starter/artifactId version4.3.0/version /dependency然后在配置类里开启EnableKnife4j访问http://localhost:8080/doc.html就能看到接口文档。每个接口的入参、出参、错误码都列清楚前端照着文档写请求比口头沟通靠谱得多。另一个技巧是给关键业务加日志。订单创建、库存扣减、支付回调这三处一定要打日志格式带上订单号和用户 ID。出问题时直接 grep 订单号能快速定位是哪一步断了。我一般用log.info(创建订单 orderNo{}, userId{}, skuId{}, orderNo, userId, skuId)这种占位符写法比字符串拼接性能好也不会因为拼错类型报错。最后说个验证方法跑通之后自己下一单完整流程——加购物车、下单、扣库存、查订单。如果库存扣了但订单没生成说明事务没配好如果订单生成了但库存没扣说明扣减逻辑没放在同一个事务里。这种端到端验证比单测更能暴露问题。我踩过最深的坑就是库存扣减用了UPDATE ... SET stock stock - 1但没加WHERE stock 0并发下直接扣成负数后来加了条件判断和乐观锁才解决。希望帮到你。本文还有配套的精品资源点击获取