最近把一个 Spring Boot Vue 的鲜花商城项目从源码到数据库、再到文档完整梳理了一遍正好有朋友在问这套系统适不适合作为电商练手项目、本地到底怎么跑起来、代码结构又该怎么读。趁热把整个拆解过程和实操心得整理成文。这套鲜花商城属于典型的前后端分离电商项目后端基于 Spring Boot 提供 RESTful 接口前端基于 Vue 构建页面交互数据库用 MySQL项目里包含了初始化 SQL 脚本、完整源码和使用文档。对正在找简历项目的开发者来说它的覆盖面很完整——登录注册、商品浏览、购物车、下单结算、订单管理、后台商品维护、轮播图管理、用户管理全都有可以说是电商业务里最常用的一套闭环。这篇文章适合三类人看一是刚学完框架不知道做什么项目的学生二是想快速跑通一个电商系统做二次开发的在职开发者三是准备用现成源码做毕业设计但对着代码不知道从哪下手的朋友。1. 项目整体设计与功能拆解1.1 花店线上化到底需要解决什么问题鲜花商城和普通服饰、数码电商最大的区别在于商品天然有时效和礼品属性。用户买花要么是当天配送的急单要么是节日送礼的定时单所以系统里虽然不一定要实现很复杂的物流但订单状态、收货信息、配送备注这些字段一定得预留。这个项目在需求层面切得比较聪明它没有去碰支付网关、优惠券、秒杀这些重业务而是把核心放在了商品管理、购物车、订单流转和后台管理上属于电商最小可用闭环的典型形态。从角色划分来看系统只有两大类用户——普通会员和管理员。会员端能注册登录、浏览分类、把花加入购物车、提交订单、查看自己的订单列表管理员端则负责商品增删改查、上下架、分类维护、订单状态修改、轮播图设置、会员列表管理。功能划分清楚之后前后端的工作边界自然就出来了。1.2 核心用例与业务闭环梳理我把整套核心流程捋了一遍它是这样走的用户从首页进入点击分类或搜索找到商品详情页可以调整购买数量并加入购物车购物车页面支持改数量、删除、批量结算确认订单时填写收货人、电话、地址和备注提交后生成订单管理员在后台看到待发货订单可以修改为已发货/已完成等状态。用户端订单列表会同步展示这些状态。这一整套流程里有三个容易被忽略但很关键的细节。第一库存字段是挂在商品表上的下单成功时扣减库存如果库存不足会提示库存不足并阻止提交第二订单表里存了商品快照相关的信息也就是说订单明细里的价格不会因为商品改价而变化第三购物车数据是关联了用户 ID 的不是纯前端 localStorage 假数据这样换设备登录数据还在。这些设计看起来基础但恰恰是很多自研电商项目一开始没想清楚、后面返工的地方。1.3 为什么前后端分离是更合理的技术形态看到 Spring Boot Vue 的组合很多人第一反应是又要配跨域了。但前后端分离在这个项目里确实是更合理的API 接口可以被小程序端、移动端复用前端部署在 Nginx 上可以做静态资源缓存后端只对外暴露 JSON 接口职责边界很清楚。而且对于学习来说前后端分开也更容易定位问题——接口报错就去看后端日志页面渲染异常就去看前端 Console不需要在一个庞大的单体视图层里翻来翻去。2. 核心技术与数据库设计拆解2.1 后端分层架构与关键依赖后端部分用的是标准 Spring Boot 分层结构Controller 层接收请求、Service 层处理业务逻辑、Mapper/Dao 层操作数据库实体类与数据库表一一对应。我看了下源码Mapper 层用的是 MyBatis 体系SQL 写在 XML 或注解里相比 Spring Data JPA 来说SQL 可控性更强对初学者理解 SQL 执行细节也更友好。关键依赖主要包含以下几块spring-boot-starter-web // Web 接口基础 mybatis-spring-boot-starter // 数据持久层 mysql-connector-java // MySQL 驱动 lombok // 简化实体类样板代码 spring-boot-starter-validation // 参数校验 jjwt 或 hutool 工具类 // 根据具体源码而定涉及 token 与常用工具配置文件 application.yml 里的核心项是数据源、MyBatis 映射路径和端口。其中 MyBatis 的 mapper-locations 配置最容易踩坑路径写错会直接报 Invalid bound statement后面排错部分我会重点讲。2.2 前端构建方式与页面组织前端部分用 Vue 全家桶的方式组织Vue 2.x Vue Router Vuex Element UI 是比较常见的组合Axios 统一封装了 HTTP 请求。页面放置上一般是 views 目录下按角色区分 user 和 admin 两块公共组件抽到 components 目录路由通过 router 配置结合导航守卫做登录权限控制。我比较建议拿到源码之后先从前端 router 目录开始读把路由表过一遍就能快速建立起整个系统的页面地图。比如 /login 是登录页/index 是首页/shop 是商品列表/cart 是购物车/order 是订单列表/admin 下面是后台管理相关的页面。配合路由的 meta 字段和 beforeEach 钩子就能理解哪些页面需要登录才能进入逻辑在代码里写得非常清晰。2.3 数据库表结构一张表一张表说清楚数据库是整个系统的地基我把核心表整理了一下总共大概十张左右它们之间的关系用一句话就能串起来用户表承载会员和管理员商品分类表挂商品表购物车表按用户维度记录选购订单表加订单明细表组成一对多关系轮播图表负责首页展示地址表或备注字段负责配送信息。表名核心字段作用userid, username, password, role, avatar会员与管理员统一存储role 区分身份categoryid, name, level, sort商品分类支持一级二级分类展示productid, category_id, name, price, stock, image, status商品基本信息status 控制上下架cartid, user_id, product_id, quantity购物车记录ordersid, user_id, total_amount, status, receive_info订单主表记录收货人、地址、备注order_itemid, order_id, product_id, product_name, price, quantity订单明细存商品快照bannerid, image, url, sort首页轮播图addressid, user_id, name, phone, detail收货地址视源码而定密码在数据库里不要直接存明文我看到源码里用了 MD5 加盐或 BCrypt 做加密这一点特别重要。在演示项目里大家经常图省事存明文但一旦放到简历上面试官看到明文密码基本就扣分了所以如果你打算二次开发第一件事就应该把密码加密逻辑补上。3. 关键业务逻辑与核心代码实现3.1 登录鉴权与用户身份控制这个系统的登录设计可以分两种情况如果引入了 JWT流程就是登录成功后后端生成 token 返回前端把 token 存到 sessionStorage 或 Vuex 里之后每次请求通过 Axios 拦截器在请求头里带上 Authorization后端通过过滤器或拦截器校验 token 并解析用户信息如果用的是 Session 方式那就靠 Cookie 携带 JSESSIONID 来维持状态。从源码来看Controller 里做得比较典型的一个设计是管理员接口和普通用户接口分开校验。具体实现上通过后端拦截器判断请求路径是否包含 /admin 前缀再检查当前登录用户是否为管理员角色。前端则通过路由守卫控制页面访问。这套前端控制页面、后端控制接口的双层校验是所有电商项目的基本功面试问到权限控制时可以直接拿这个项目举例。3.2 购物车与下单流程的联动逻辑购物车这里有个细节值得单独拿出来讲。购物车添加商品时前端把 product_id 和 quantity 传给后端后端要先查一下这张购物车里有没有同款商品——有的话做数量累加没有才新建记录。这个逻辑听起来简单但很多初学者直接用 insert 语句导致同一商品在购物车里出现好几行用户结算时体验很怪。下单流程更要注意事务控制。在下单这个 Service 方法上一定要加 Transactional因为一次提交涉及多个表的写操作先插入订单主表、再插入订单明细、然后扣减商品库存、最后清空对应购物车记录。这一串操作里任何一步报错前面写入的数据都必须回滚否则就会出现订单生成了但库存没扣或购物车清空了但订单没生成的脏数据。我在源码里确认过这块事务注解是加了的新手拿到项目后可以重点看看这个方法的完整写法。Transactional public Integer submitOrder(OrderVO orderVO, Integer userId) { // 1. 计算总金额并生成订单主表记录 // 2. 遍历购物车明细写入订单明细表 // 3. 扣减商品库存检查库存是否充足 // 4. 删除对应的购物车记录 // 5. 返回订单 id }3.3 商品检索、分类展示与轮播图商品列表页的检索逻辑相对常规根据分类 id 或关键字 keyword 进行模糊查询分页用 PageHelper 插件或者手写 LIMIT 实现。首页则调一个接口查轮播图列表再查推荐商品或最新商品。这里前端展示的时候要注意图片路径问题——如果图片上传后存在本地磁盘路径那么数据库存的一般是相对路径前端展示时需要用完整的基础地址拼接如果直接用绝对路径换机器跑的时候图片就会全部挂掉。这部分在二开时有个常见坑上传图片功能如果没有接入云存储只是上传到本地目录那么本地目录路径千万别写在项目源码目录下否则打包部署后图片会丢失。比较稳妥的做法是配置一个外部目录例如 /data/upload然后通过 Spring Boot 的静态资源映射把该目录映射到 /images/** 访问路径。3.4 后台管理的核心操作实现后台管理端是所有电商系统里代码量最大的部分这个项目也不例外。商品管理涉及图片上传、分类选择、价格库存录入列表支持分页和条件搜索订单管理需要修改订单状态而状态值通常用数字表示前端再通过状态字典映射成中文文本显示。这里面的映射逻辑值得注意——如果后端返回的是 0、1、2、3 这样的状态码前端最好做一个统一的枚举映射文件不要散落在各个页面里写死。4. 本地部署与运行指南4.1 环境准备清单在动手跑这个项目之前建议先对照一下环境版本避免因为版本不匹配浪费大量时间。我列一个实际验证过的组合组件版本建议备注JDK1.8 或 11Spring Boot 2.x 不建议直接用 17Maven3.6用于后端依赖下载和打包MySQL5.7 或 8.0注意 8.0 的驱动配置变化Node.js14~16Vue 2 旧依赖在 Node 18 容易出兼容问题开发工具IDEA VSCode 搭配后端 IDEA前端 VSCode也可全用 IDEA提示如果你用的是 MySQL 8.0驱动类要从 com.mysql.jdbc.Driver 改为 com.mysql.cj.jdbc.DriverURL 里尽量加上 serverTimezoneAsia/Shanghai 参数否则连接时会因为时区问题报错。4.2 数据库初始化操作拿到项目压缩包后第一步不是启动代码而是先把数据库准备好。在 MySQL 里执行以下操作打开 Navicat 或命令行创建一个名为 flower或项目文档中指定的库名的数据库字符集选 utf8mb4排序规则选 utf8mb4_general_ci。找到源码目录下的 sql 文件通常叫 flower.sql 或 init.sql直接导入。导入完成后检查几个核心表——user、product、orders 里是否已有数据管理员账号默认一般是 admin/admin123 之类具体看文档说明。注意SQL 文件执行时如果报语法错误大概率是 MySQL 版本问题。比如用了 8.0 才支持的语法但你在 5.7 上执行或者反过来。确认版本后选择对应兼容的 SQL 即可。4.3 后端启动步骤后端启动是最容易出问题的环节按照下面的顺序来做基本可以一路跑通用 IDEA 打开后端目录一般是项目根目录下的 backend 或 server 文件夹等待 Maven 自动下载依赖。如果下载极慢把 Maven 的 settings.xml 里的中央仓库镜像换成国内镜像。修改 application.yml 中的数据源配置数据库名、用户名、密码必须和本地 MySQL 一致。确认 mapper-locations 路径是否和你的 Mapper XML 实际位置匹配。源码结构不同这个路径也不一样常见的是 classpath:mapper/*.xml。启动 Application 主类看到 Tomcat started on port(s): 8080 表示后端已经起来了。用浏览器访问 http://localhost:8080/ 看到的是 404 或接口提示属正常现象因为后端不直接暴露页面你可以先用接口测试工具请求一个商品列表接口验证连通性。4.4 前端启动步骤前端目录打开后先执行 npm install 安装依赖。依赖装完后关键一步是确认 src 目录里 API 请求的基础地址指向是否正确// request.js 或 api.js 里的 baseURL 配置 axios.defaults.baseURL http://localhost:8080确认无误后执行 npm run serve看到编译成功提示后访问 http://localhost:8087端口以实际配置为准。如果前端端口比如 8080 被后端占用需要在 vue.config.js 里改 devServer 的 port或者把后端端口改成 8081二选一即可。5. 常见问题与排错技巧实录我把跑这个项目最容易遇到的几个坑按概率从高到低列出来几乎每个拿到源码的人都绕不开前三项。5.1 跨域请求被拦截前后端分离项目第一次联调时浏览器 Console 报 Access-Control-Allow-Origin 错误基本就是跨域问题。解决方法有三种按推荐顺序排后端加全局跨域配置实现 CorsFilter 或实现 WebMvcConfigurer 的 addCorsMappings 方法允许 localhost 指定端口访问。前端 Vue 配置代理在 vue.config.js 里配置 devServer.proxy把 /api 前缀代理到 http://localhost:8080同时前端请求路径改成相对路径。后端加 CrossOrigin 注解到 Controller 上——适合快速调试但代码里写死跨域规则不推荐在正式项目用。我自己调试时比较喜欢方法二因为前端代理的方式在生产环境可以无缝切换为 Nginx 反向代理思路是通用的。5.2 数据库连接失败或表找不到如果启动日志里报 Failed to configure a DataSource 或 Unknown database先检查三件事application.yml 里的数据库名称是否和本地创建的库名一致用户名密码是否正确MySQL 服务有没有启动。如果报 Table doesnt exist这说明 SQL 文件导入不完整或者导入到了错误的库重新对照文档导入即可。经验之谈不要在代码里手写多个数据源配置去排查问题先保证最简配置能跑通再考虑加东西。5.3 前端依赖安装失败或启动报错npm install 报错的情况里优先级最高的是换镜像源。执行 npm config set registry https://registry.npmmirror.com 再重新安装大部分网络类报错都能解决。如果安装成功后 npm run serve 报模块找不到多半是依赖版本和 Node 版本不匹配建议直接用 Node 14 或 16 的版本再试。5.4 端口占用导致的启动失败端口占用是另一个高频问题。后端启动报 Port 8080 was already in use 时要么换端口要么杀掉占用进程。命令行里执行 netstat -ano | findstr 8080 找到 PID 后强制结束进程。新手经常会遇到前端端口和后端端口互相冲突改端口时注意两边的 baseURL 或代理配置要同步改否则又会出现跨域问题。5.5 常见问题速查表现象可能原因快速处理方式前端页面打不开Node 启动失败 / 端口冲突查看终端报错改端口或重装依赖登录一直失败数据库账号密码错误 / 密码加密方式不一致检查库里 admin 记录和登录代码使用的加密算法图片显示不出来图片路径拼接错误 / 上传目录不存在检查访问路径和静态资源映射配置下单后库存没变事务失效或 SQL 逻辑缺失检查 Service 方法是否有 Transactional扣库存语句是否被调用接口返回 500SQL 报错或参数不匹配看后端控制台异常栈对照 SQL 和参数排查页面有数据但样式混乱Element UI 按需引入遗漏或全局样式覆盖检查 main.js 里样式引入顺序6. 个人实操体会与二次开发建议这个项目整体跑通之后我有几个实际感受可以分享。首先是阅读源码的顺序问题——我建议不要按目录从上往下看而是先看数据库 SQL 脚本把表结构之间的关系搞清楚再看后端接口层最后看前端页面这条路线比逐行读代码效率高得多。其次是如果打算拿它做毕业设计或作品集强烈建议至少做两处自定义改动一是把默认的鲜花商品数据换成你自己定义的品类和商品二是增加一个原项目没有的小功能比如收藏夹、商品评论或简单搜索历史这样项目才真正属于你面试时也有具体的改动细节可以讲。另外提醒一下源码里如果有明显的 TODO 或注释掉的代码区块比如支付功能只做了占位、订单超时取消没有实现这些既是项目的完整度短板也是你可以补充的亮点。把它做成在原项目基础上扩展的思路比自己从零造轮子更稳也比纯照搬源码更有竞争力。最后再分享一个小技巧拿到任何这种源码数据库文档的整合包第一件事永远是在本地按文档完整跑通一遍跑通之后再谈改代码。不要上来就改业务逻辑因为你还没建立哪个文件对应哪个功能的心理地图。先把系统当成黑盒用一遍再顺着一个完整业务链路注册→下单→后台发货逐步打开对应文件你对这个项目的理解深度会完全不一样。 
长河君 · 2026/10/17 16:02:52 · 阅读 1.2k Spring Boot+Vue鲜花商城项目实战：从部署到二次开发拆解
最近把一个 Spring Boot Vue 的鲜花商城项目从源码到数据库、再到文档完整梳理了一遍正好有朋友在问这套系统适不适合作为电商练手项目、本地到底怎么跑起来、代码结构又该怎么读。趁热把整个拆解过程和实操心得整理成文。这套鲜花商城属于典型的前后端分离电商项目后端基于 Spring Boot 提供 RESTful 接口前端基于 Vue 构建页面交互数据库用 MySQL项目里包含了初始化 SQL 脚本、完整源码和使用文档。对正在找简历项目的开发者来说它的覆盖面很完整——登录注册、商品浏览、购物车、下单结算、订单管理、后台商品维护、轮播图管理、用户管理全都有可以说是电商业务里最常用的一套闭环。这篇文章适合三类人看一是刚学完框架不知道做什么项目的学生二是想快速跑通一个电商系统做二次开发的在职开发者三是准备用现成源码做毕业设计但对着代码不知道从哪下手的朋友。1. 项目整体设计与功能拆解1.1 花店线上化到底需要解决什么问题鲜花商城和普通服饰、数码电商最大的区别在于商品天然有时效和礼品属性。用户买花要么是当天配送的急单要么是节日送礼的定时单所以系统里虽然不一定要实现很复杂的物流但订单状态、收货信息、配送备注这些字段一定得预留。这个项目在需求层面切得比较聪明它没有去碰支付网关、优惠券、秒杀这些重业务而是把核心放在了商品管理、购物车、订单流转和后台管理上属于电商最小可用闭环的典型形态。从角色划分来看系统只有两大类用户——普通会员和管理员。会员端能注册登录、浏览分类、把花加入购物车、提交订单、查看自己的订单列表管理员端则负责商品增删改查、上下架、分类维护、订单状态修改、轮播图设置、会员列表管理。功能划分清楚之后前后端的工作边界自然就出来了。1.2 核心用例与业务闭环梳理我把整套核心流程捋了一遍它是这样走的用户从首页进入点击分类或搜索找到商品详情页可以调整购买数量并加入购物车购物车页面支持改数量、删除、批量结算确认订单时填写收货人、电话、地址和备注提交后生成订单管理员在后台看到待发货订单可以修改为已发货/已完成等状态。用户端订单列表会同步展示这些状态。这一整套流程里有三个容易被忽略但很关键的细节。第一库存字段是挂在商品表上的下单成功时扣减库存如果库存不足会提示库存不足并阻止提交第二订单表里存了商品快照相关的信息也就是说订单明细里的价格不会因为商品改价而变化第三购物车数据是关联了用户 ID 的不是纯前端 localStorage 假数据这样换设备登录数据还在。这些设计看起来基础但恰恰是很多自研电商项目一开始没想清楚、后面返工的地方。1.3 为什么前后端分离是更合理的技术形态看到 Spring Boot Vue 的组合很多人第一反应是又要配跨域了。但前后端分离在这个项目里确实是更合理的API 接口可以被小程序端、移动端复用前端部署在 Nginx 上可以做静态资源缓存后端只对外暴露 JSON 接口职责边界很清楚。而且对于学习来说前后端分开也更容易定位问题——接口报错就去看后端日志页面渲染异常就去看前端 Console不需要在一个庞大的单体视图层里翻来翻去。2. 核心技术与数据库设计拆解2.1 后端分层架构与关键依赖后端部分用的是标准 Spring Boot 分层结构Controller 层接收请求、Service 层处理业务逻辑、Mapper/Dao 层操作数据库实体类与数据库表一一对应。我看了下源码Mapper 层用的是 MyBatis 体系SQL 写在 XML 或注解里相比 Spring Data JPA 来说SQL 可控性更强对初学者理解 SQL 执行细节也更友好。关键依赖主要包含以下几块spring-boot-starter-web // Web 接口基础 mybatis-spring-boot-starter // 数据持久层 mysql-connector-java // MySQL 驱动 lombok // 简化实体类样板代码 spring-boot-starter-validation // 参数校验 jjwt 或 hutool 工具类 // 根据具体源码而定涉及 token 与常用工具配置文件 application.yml 里的核心项是数据源、MyBatis 映射路径和端口。其中 MyBatis 的 mapper-locations 配置最容易踩坑路径写错会直接报 Invalid bound statement后面排错部分我会重点讲。2.2 前端构建方式与页面组织前端部分用 Vue 全家桶的方式组织Vue 2.x Vue Router Vuex Element UI 是比较常见的组合Axios 统一封装了 HTTP 请求。页面放置上一般是 views 目录下按角色区分 user 和 admin 两块公共组件抽到 components 目录路由通过 router 配置结合导航守卫做登录权限控制。我比较建议拿到源码之后先从前端 router 目录开始读把路由表过一遍就能快速建立起整个系统的页面地图。比如 /login 是登录页/index 是首页/shop 是商品列表/cart 是购物车/order 是订单列表/admin 下面是后台管理相关的页面。配合路由的 meta 字段和 beforeEach 钩子就能理解哪些页面需要登录才能进入逻辑在代码里写得非常清晰。2.3 数据库表结构一张表一张表说清楚数据库是整个系统的地基我把核心表整理了一下总共大概十张左右它们之间的关系用一句话就能串起来用户表承载会员和管理员商品分类表挂商品表购物车表按用户维度记录选购订单表加订单明细表组成一对多关系轮播图表负责首页展示地址表或备注字段负责配送信息。表名核心字段作用userid, username, password, role, avatar会员与管理员统一存储role 区分身份categoryid, name, level, sort商品分类支持一级二级分类展示productid, category_id, name, price, stock, image, status商品基本信息status 控制上下架cartid, user_id, product_id, quantity购物车记录ordersid, user_id, total_amount, status, receive_info订单主表记录收货人、地址、备注order_itemid, order_id, product_id, product_name, price, quantity订单明细存商品快照bannerid, image, url, sort首页轮播图addressid, user_id, name, phone, detail收货地址视源码而定密码在数据库里不要直接存明文我看到源码里用了 MD5 加盐或 BCrypt 做加密这一点特别重要。在演示项目里大家经常图省事存明文但一旦放到简历上面试官看到明文密码基本就扣分了所以如果你打算二次开发第一件事就应该把密码加密逻辑补上。3. 关键业务逻辑与核心代码实现3.1 登录鉴权与用户身份控制这个系统的登录设计可以分两种情况如果引入了 JWT流程就是登录成功后后端生成 token 返回前端把 token 存到 sessionStorage 或 Vuex 里之后每次请求通过 Axios 拦截器在请求头里带上 Authorization后端通过过滤器或拦截器校验 token 并解析用户信息如果用的是 Session 方式那就靠 Cookie 携带 JSESSIONID 来维持状态。从源码来看Controller 里做得比较典型的一个设计是管理员接口和普通用户接口分开校验。具体实现上通过后端拦截器判断请求路径是否包含 /admin 前缀再检查当前登录用户是否为管理员角色。前端则通过路由守卫控制页面访问。这套前端控制页面、后端控制接口的双层校验是所有电商项目的基本功面试问到权限控制时可以直接拿这个项目举例。3.2 购物车与下单流程的联动逻辑购物车这里有个细节值得单独拿出来讲。购物车添加商品时前端把 product_id 和 quantity 传给后端后端要先查一下这张购物车里有没有同款商品——有的话做数量累加没有才新建记录。这个逻辑听起来简单但很多初学者直接用 insert 语句导致同一商品在购物车里出现好几行用户结算时体验很怪。下单流程更要注意事务控制。在下单这个 Service 方法上一定要加 Transactional因为一次提交涉及多个表的写操作先插入订单主表、再插入订单明细、然后扣减商品库存、最后清空对应购物车记录。这一串操作里任何一步报错前面写入的数据都必须回滚否则就会出现订单生成了但库存没扣或购物车清空了但订单没生成的脏数据。我在源码里确认过这块事务注解是加了的新手拿到项目后可以重点看看这个方法的完整写法。Transactional public Integer submitOrder(OrderVO orderVO, Integer userId) { // 1. 计算总金额并生成订单主表记录 // 2. 遍历购物车明细写入订单明细表 // 3. 扣减商品库存检查库存是否充足 // 4. 删除对应的购物车记录 // 5. 返回订单 id }3.3 商品检索、分类展示与轮播图商品列表页的检索逻辑相对常规根据分类 id 或关键字 keyword 进行模糊查询分页用 PageHelper 插件或者手写 LIMIT 实现。首页则调一个接口查轮播图列表再查推荐商品或最新商品。这里前端展示的时候要注意图片路径问题——如果图片上传后存在本地磁盘路径那么数据库存的一般是相对路径前端展示时需要用完整的基础地址拼接如果直接用绝对路径换机器跑的时候图片就会全部挂掉。这部分在二开时有个常见坑上传图片功能如果没有接入云存储只是上传到本地目录那么本地目录路径千万别写在项目源码目录下否则打包部署后图片会丢失。比较稳妥的做法是配置一个外部目录例如 /data/upload然后通过 Spring Boot 的静态资源映射把该目录映射到 /images/** 访问路径。3.4 后台管理的核心操作实现后台管理端是所有电商系统里代码量最大的部分这个项目也不例外。商品管理涉及图片上传、分类选择、价格库存录入列表支持分页和条件搜索订单管理需要修改订单状态而状态值通常用数字表示前端再通过状态字典映射成中文文本显示。这里面的映射逻辑值得注意——如果后端返回的是 0、1、2、3 这样的状态码前端最好做一个统一的枚举映射文件不要散落在各个页面里写死。4. 本地部署与运行指南4.1 环境准备清单在动手跑这个项目之前建议先对照一下环境版本避免因为版本不匹配浪费大量时间。我列一个实际验证过的组合组件版本建议备注JDK1.8 或 11Spring Boot 2.x 不建议直接用 17Maven3.6用于后端依赖下载和打包MySQL5.7 或 8.0注意 8.0 的驱动配置变化Node.js14~16Vue 2 旧依赖在 Node 18 容易出兼容问题开发工具IDEA VSCode 搭配后端 IDEA前端 VSCode也可全用 IDEA提示如果你用的是 MySQL 8.0驱动类要从 com.mysql.jdbc.Driver 改为 com.mysql.cj.jdbc.DriverURL 里尽量加上 serverTimezoneAsia/Shanghai 参数否则连接时会因为时区问题报错。4.2 数据库初始化操作拿到项目压缩包后第一步不是启动代码而是先把数据库准备好。在 MySQL 里执行以下操作打开 Navicat 或命令行创建一个名为 flower或项目文档中指定的库名的数据库字符集选 utf8mb4排序规则选 utf8mb4_general_ci。找到源码目录下的 sql 文件通常叫 flower.sql 或 init.sql直接导入。导入完成后检查几个核心表——user、product、orders 里是否已有数据管理员账号默认一般是 admin/admin123 之类具体看文档说明。注意SQL 文件执行时如果报语法错误大概率是 MySQL 版本问题。比如用了 8.0 才支持的语法但你在 5.7 上执行或者反过来。确认版本后选择对应兼容的 SQL 即可。4.3 后端启动步骤后端启动是最容易出问题的环节按照下面的顺序来做基本可以一路跑通用 IDEA 打开后端目录一般是项目根目录下的 backend 或 server 文件夹等待 Maven 自动下载依赖。如果下载极慢把 Maven 的 settings.xml 里的中央仓库镜像换成国内镜像。修改 application.yml 中的数据源配置数据库名、用户名、密码必须和本地 MySQL 一致。确认 mapper-locations 路径是否和你的 Mapper XML 实际位置匹配。源码结构不同这个路径也不一样常见的是 classpath:mapper/*.xml。启动 Application 主类看到 Tomcat started on port(s): 8080 表示后端已经起来了。用浏览器访问 http://localhost:8080/ 看到的是 404 或接口提示属正常现象因为后端不直接暴露页面你可以先用接口测试工具请求一个商品列表接口验证连通性。4.4 前端启动步骤前端目录打开后先执行 npm install 安装依赖。依赖装完后关键一步是确认 src 目录里 API 请求的基础地址指向是否正确// request.js 或 api.js 里的 baseURL 配置 axios.defaults.baseURL http://localhost:8080确认无误后执行 npm run serve看到编译成功提示后访问 http://localhost:8087端口以实际配置为准。如果前端端口比如 8080 被后端占用需要在 vue.config.js 里改 devServer 的 port或者把后端端口改成 8081二选一即可。5. 常见问题与排错技巧实录我把跑这个项目最容易遇到的几个坑按概率从高到低列出来几乎每个拿到源码的人都绕不开前三项。5.1 跨域请求被拦截前后端分离项目第一次联调时浏览器 Console 报 Access-Control-Allow-Origin 错误基本就是跨域问题。解决方法有三种按推荐顺序排后端加全局跨域配置实现 CorsFilter 或实现 WebMvcConfigurer 的 addCorsMappings 方法允许 localhost 指定端口访问。前端 Vue 配置代理在 vue.config.js 里配置 devServer.proxy把 /api 前缀代理到 http://localhost:8080同时前端请求路径改成相对路径。后端加 CrossOrigin 注解到 Controller 上——适合快速调试但代码里写死跨域规则不推荐在正式项目用。我自己调试时比较喜欢方法二因为前端代理的方式在生产环境可以无缝切换为 Nginx 反向代理思路是通用的。5.2 数据库连接失败或表找不到如果启动日志里报 Failed to configure a DataSource 或 Unknown database先检查三件事application.yml 里的数据库名称是否和本地创建的库名一致用户名密码是否正确MySQL 服务有没有启动。如果报 Table doesnt exist这说明 SQL 文件导入不完整或者导入到了错误的库重新对照文档导入即可。经验之谈不要在代码里手写多个数据源配置去排查问题先保证最简配置能跑通再考虑加东西。5.3 前端依赖安装失败或启动报错npm install 报错的情况里优先级最高的是换镜像源。执行 npm config set registry https://registry.npmmirror.com 再重新安装大部分网络类报错都能解决。如果安装成功后 npm run serve 报模块找不到多半是依赖版本和 Node 版本不匹配建议直接用 Node 14 或 16 的版本再试。5.4 端口占用导致的启动失败端口占用是另一个高频问题。后端启动报 Port 8080 was already in use 时要么换端口要么杀掉占用进程。命令行里执行 netstat -ano | findstr 8080 找到 PID 后强制结束进程。新手经常会遇到前端端口和后端端口互相冲突改端口时注意两边的 baseURL 或代理配置要同步改否则又会出现跨域问题。5.5 常见问题速查表现象可能原因快速处理方式前端页面打不开Node 启动失败 / 端口冲突查看终端报错改端口或重装依赖登录一直失败数据库账号密码错误 / 密码加密方式不一致检查库里 admin 记录和登录代码使用的加密算法图片显示不出来图片路径拼接错误 / 上传目录不存在检查访问路径和静态资源映射配置下单后库存没变事务失效或 SQL 逻辑缺失检查 Service 方法是否有 Transactional扣库存语句是否被调用接口返回 500SQL 报错或参数不匹配看后端控制台异常栈对照 SQL 和参数排查页面有数据但样式混乱Element UI 按需引入遗漏或全局样式覆盖检查 main.js 里样式引入顺序6. 个人实操体会与二次开发建议这个项目整体跑通之后我有几个实际感受可以分享。首先是阅读源码的顺序问题——我建议不要按目录从上往下看而是先看数据库 SQL 脚本把表结构之间的关系搞清楚再看后端接口层最后看前端页面这条路线比逐行读代码效率高得多。其次是如果打算拿它做毕业设计或作品集强烈建议至少做两处自定义改动一是把默认的鲜花商品数据换成你自己定义的品类和商品二是增加一个原项目没有的小功能比如收藏夹、商品评论或简单搜索历史这样项目才真正属于你面试时也有具体的改动细节可以讲。另外提醒一下源码里如果有明显的 TODO 或注释掉的代码区块比如支付功能只做了占位、订单超时取消没有实现这些既是项目的完整度短板也是你可以补充的亮点。把它做成在原项目基础上扩展的思路比自己从零造轮子更稳也比纯照搬源码更有竞争力。最后再分享一个小技巧拿到任何这种源码数据库文档的整合包第一件事永远是在本地按文档完整跑通一遍跑通之后再谈改代码。不要上来就改业务逻辑因为你还没建立哪个文件对应哪个功能的心理地图。先把系统当成黑盒用一遍再顺着一个完整业务链路注册→下单→后台发货逐步打开对应文件你对这个项目的理解深度会完全不一样。