1. 项目到底做了什么整体设计与技术选型最近整理了一套可以开箱即跑的在线商城系统后端用 SpringBoot前端用 Vue数据库是 MySQL。三个端凑在一起就是一套完整的电商闭环——前台能浏览商品、加购、结算下单后台能管理商品、分类、轮播图、订单发货。刚开始我不太相信直接运行这四个字因为市面上挂了这句口号的源码十个里有一半不是缺依赖就是漏配置文件。亲自在干净环境里从零跑了一遍之后这套确实没让我踩大坑。先说说这套系统的定位。它不是某个企业级商城的商业源码而是一个适合作为毕业设计、课程设计、入职练手项目或个人作品集素材的完整工程。好处在于结构清晰、角色分明、页面完整能帮你快速理解一个真实的电商系统需要覆盖哪些业务模块而不是停留在 CRUD 层面的玩具Demo。从我接触过的项目来看很多初学者写商城容易陷进只会写增删改查、不懂业务归属的误区而这套系统的代码组织方式就是一个正面例子。1.1 技术栈为什么这样组合SpringBoot Vue MySQL 这套组合放在今天已经是中小型 Web 项目的绝对主流搭配。SpringBoot 解决后端应用的基础设施问题它内嵌 Tomcat、自动配置数据源、通过 Starter 机制把繁琐的 SSM 配置全部简化掉你不用再像以前那样写一堆 XML 文件一个SpringBootApplication注解就能把服务拉起来。Vue 则负责前端交互基于组件化开发让页面逻辑变得清晰配合 Element UI 这类桌面组件库后台管理界面半小时内就能搭出像样的样子。MySQL 是做关系型数据存储的标配事务支持可靠、生态成熟对于商城这种并发读写要求不极端、表结构又相对规矩的场景它比非关系型数据库更合适。有人可能会问怎么不用 Spring Cloud怎么不用 Redis怎么不用微服务那一套问得好。像这种单体商城系统业务规模远没有达到需要拆分的程度。购物车、订单、用户、商品这些核心模块之间本身就是强一致性的关系型数据放进同一个事务里统一管理比拆成微服务之后再去处理分布式事务要简单得多。强行引入微服务只会让项目复杂化一台笔记本跑一堆服务光运维成本就够你喝一壶。所以这套系统的技术选型核心逻辑是够用且不过度设计。1.2 前后端如何分工协作既然是前后端分离就得约定好接口规范和联调机制。这套系统里后端将自己封装成一套纯 API 服务所有的业务逻辑、权限校验、数据库操作都跑到服务端完成然后把结果以 JSON 格式返回给前端。前端只负责渲染页面、收集用户行为再通过 axios 发 HTTP 请求去取数据。这里有个非常关键的细节不要在前端直接拼 SQL 或者把数据库地址暴露给浏览器。凡是涉及到数据安全的东西都应该是后端偷偷干完前端拿到结果展示就行。我看到不少练手项目在这方面意识不强把数据库账号密码写死在application.properties里还提交到仓库这是绝对不能学的坏习惯。后面我会专门讲怎么处理配置文件的暴露问题。接口风格上这套系统用了 RESTful 风格比如获取商品列表走GET /api/goods/list提交订单走POST /api/order/add。路径里的名词是资源HTTP 方法表达动作语义比较清楚。你如果翻代码会发现接口路径大多是以/api开头后面挂模块名这样区分前台和后台的权限边界也方便——后台管理类接口单独走一套鉴权逻辑前台消费者接口又是另一套。1.3 系统的权限模型是怎么设计的商城系统天然有两种角色普通用户和管理员。普通用户在前台注册登录、逛店下单管理员进后台管理系统配置。这套系统没有做复杂的 RBAC 权限表而是用一套简单粗暴但很有效的方案——区分登录角色然后通过拦截器校验。前端登录成功之后后端会签发一个 token用 JWT 实现。之后每次请求前端要在请求头里带上这个 token。后端拦截器先验证 token 是否合法、是否过期、对应的用户角色是什么再决定放不放行。管理员接口还需要额外校验你的角色值是不是管理员防止普通用户通过手工拼接 URL 去访问后台接口。这种设计在学校项目和中小型公司内部系统里非常常见学习成本低也能让你在后面做毕业设计时应付权限管理这个加分项。如果哪天你觉得它不够安全可以往 Spring Security JWT 的方向扩展但起点是这一套简洁的逻辑你改起来也容易理解。1.4 已经内置的关键业务模块我大致盘点了这套系统的核心模块基本能覆盖电商标配用户模块注册、登录、个人信息管理商品模块商品列表、商品详情、分类筛选、轮播图展示购物车模块加入购物车、修改数量、删除、批量结算订单模块确认订单、提交订单、订单列表、订单详情、发货状态后台管理模块商品管理、分类管理、轮播图配置、订单处理对比那些只能把人加进去、把商品列出来的半成品这套系统确实把业务流程打通了。从浏览器里商品列表页选择一件商品加入购物车到下单再到管理员后台看到这个订单并修改发货状态整条链路是通的。这种全链路跑通的体验对学习业务非常有帮助。2. 核心模块拆解从前台购物到后台管理如果说上一部分是在讲整体架构那这一部分就直接对着模块看细节。我强烈建议你拿到源码之后不要闭着眼睛到处点而是带着问题去看这个页面的数据是从哪个接口来的这个接口的数据又是从哪张表里查出来的这个链路理清楚项目才算真正变成你的。2.1 前台商城的设计思路前台页面主打简洁。首页通常包含顶部导航、轮播图、商品分类导航、商品列表。这些数据量不大所以接口响应很快用户体验的关键在于图片加载和列表渲染。技术上用 Vue 的循环渲染来处理商品卡片一类商品一张卡片里面放商品图、名称、价格、销量点击进入详情页。商品详情页比较有讲究它涉及到两种数据静态的商品主图和商品参数动态的价格与库存。这套系统把商品信息存在 MySQL 的商品表中详情页打开时根据路径参数去查一次表返回商品记录前端渲染成图文信息。这个流程对学习数据如何一步步变成页面非常直观。加入购物车是商城最核心的交互之一。前后端分离模式下购物车可以是前端状态管理比如 Vuex也可以在服务端存一份。这套系统将购物车数据存在服务端数据库用户登录后生成的购物车数据能在不同设备间同步切到手机浏览器登录同一个账号购物车里的东西还在这是电子商务的基本要求。缺点是多了一次网络请求和数据库读写但对一个单体项目来说完全不成问题。结算下单的流程会复杂一些。前端把用户勾选的商品、数量、地址信息组织好传给后端。后端先校验库存是否充足、价格是否正确再把订单数据写入订单表、订单明细表同时扣减库存量。这一串操作都放在一个数据库事务里任何一个环节报错都会回滚保证不会出现订单建好了但库存没扣这种脏数据。2.2 后台管理模块怎么组织的后台和管理前台是两套独立的 Vue 页面组件只不过打包在同一个项目里按路由去区分。登录时如果识别到管理员身份就跳转到后台路由普通用户访问后台路由会被前端路由守卫拦下来跳到登录页。这算是一层前端保护真正安全靠的是后端接口权限校验。后台的界面拿 Element UI 来构建。表格负责商品列表展示每行后面跟编辑删除按钮表单弹窗处理新增和修改。商品管理是整个系统的信息源头商品名称、价格、库存、图片、描述都从这里录入。分类管理则是商品分类树的维护前台的分类导航从分类表动态读取后台改完分类前台立刻跟着变。轮播图配置虽然看起来很简单但它解释了文件上传这个刚需——管理员上传一张图片存到后端服务器的某个目录或通过 Base64 的方式存库再配置展示顺序前台的轮播组件按排序字段读取展示。订单管理是电商系统里最体现业务复杂度的模块。订单状态有未付款、待发货、已发货、已完成等状态管理员在后台看到新订单确认无误后点击发货订单状态更新为待收货前台用户看到的状态也跟着变化。这里面需要一个状态流转规则这套系统用简单的数值标记状态位前端根据数值显示不同的标签。商业项目里会用状态机去约束防止乱跳状态但学习阶段先理解状态位的概念更现实。2.3 数据库表设计商城的骨架我再三强调过看电商项目的核心先看它的数据表结构。这套系统的表不算多但每张表都有明确职责。用户表存账号密码和基本信息密码是 MD5 加密存储的这个点我后面会单独说因为它和安全息息相关。商品表存标题、副标题、图片、价格、库存、销量、状态、分类ID分类是一张独立的分类表通过外键关联起来。这种设计你在初学数据库时就该知道实体表之间合理拆分不该把冗余字段都塞在同一张表。订单表又分为主表和明细表两张。主表记一次订单的整体信息包括用户ID、订单号、总金额、状态、创建时间明细表记这个订单里每一件商品的信息包括商品ID、购买数量、当时的单价。为什么总价要单独存一份当时单价而不直接去关联商品表里的价格字段呢因为商品价格会变订单生成后应该以当时的成交价为准这个设计是电商系统的严谨之处你写论文或者答辩时能把这一点讲清楚很加分。购物车表的结构也很有意思。它记录了用户ID、商品ID、数量。理论上购物车不是每时每刻都在结算所以不用把价格冗余进去结算的时候实时查商品表并计算价格就行。这样设计逻辑简单库存变更以后价格也始终是最新的。2.4 关键接口代码层面怎么看拿到项目后建议你先从后端入口类开始看找到Controller层的文件。Controller 层不写业务逻辑只是接收参数、调用 Service、封装返回。Service 层放业务规则——比如下单时校验库存、计算总价、生成订单号这些核心逻辑都在这层。Mapper 层跟数据库打交道这套项目用的是 MyBatis 或 MyBatis-Plus具体取决于版本Mapper 接口里写 SQL 注解或者 XML 文件来操作数据库。如果你之前一直写的是一个 Controller 里堆几千行代码的面包店式项目那你看这套代码会特别有收获。它层次分明Controller、Service、Mapper 职责单一代码结构运营清楚Controller 不越权干 Mapper 的活Service 也不把 HTTP 层的对象直接传下去而是用 DTO 对象做数据裁剪。这个习惯是真实开发里每天都在用的。3. 从下载到跑起来完整的运行配置指南直接运行是这套源码的招牌卖点但真要跑起来还有不少环境变量要注意。我自己在全新电脑上做过一次完整部署从装 JDK 到浏览器能看到商城页面总共用了大概二十分钟。操作系统是 Windows 10 和 CentOS 7 各跑了一遍都是没有额外修改代码的情况下成功的。这里我把完整的步骤和参数整理出来按顺序照着走就行。3.1 环境准备清单开始之前先把必备的环境确认好。以下是这份源码的运行环境要求版本对不上可能会导致莫名其妙的问题所以请尽量贴近推荐值组件推荐版本说明JDK1.8Java 8部分 JDK 11 也能跑但尽量避免高版本兼容问题Maven3.6.x 或 3.8.x构建后端项目、管理依赖MySQL5.7 或 8.05.7 兼容性最好8.0 需注意驱动配置Node.js12.x ~ 16.x版本过高可能导致 node-sass 编译失败npm随 Node 自带用于安装前端依赖开发工具IDEA / VSCode后端建议 IDEA前端 VSCode 也可以这里有一个比较容易踩的坑Node.js 版本。如果项目里用的是 node-sass 这种老牌依赖Node 17 以上的版本经常会在npm install时报错因为 node-sass 和 Node 版本不匹配。我之前就遇到过一上来就装了最新的 Node 18结果前端项目死活装不上依赖。解决办法是装一个 14 或 16 的 LTS 版本或者用项目里自带的.nvmrc指定版本。总之先用推荐环境跑通再考虑升级这是最稳的思路。3.2 数据库初始化步骤项目源码里一般都会附带一个.sql文件比如only.sql或者school_mall.sql。这个文件的作用不是摆样子而是让你几分钟内还原出整套项目的初始数据。里面包含了建库建表语句和测试数据包括几个管理员账号、几十个商品和分类数据。不用手动去一个个建表那是浪费时间。初始化数据库的步骤很简单。先确保 MySQL 服务已经启动然后打开命令行执行mysql -u root -p # 输入密码进入 MySQL 命令行进入 MySQL 之后第一步创建数据库。这一步不是可选的因为 SQL 文件里写的建库语句可能和你本地的字符集、编码规则不完全匹配所以建议手动创建数据库再导入而不是直接执行source让它自己建。命令如下CREATE DATABASE IF NOT EXISTS only DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE only; source /你的路径/only.sql;导入完成后你可以用 Navicat 或者命令行看一眼表数据。如果商品表里查出十几条记录说明导入成功了。如果你的 SQL 文件默认是另一个库名记得把application.yml里的数据库名改成实际那个不然启动时找不到表。3.3 后端配置与启动用 IDEA 打开后端项目后先等一下 Maven 自动下载依赖。这里有一个很现实的问题Maven 中央仓库在国内访问速度不太理想如果等了很久依赖还没下来请配置阿里云镜像。在 Maven 的settings.xml里加一段 mirror 配置mirror idaliyunmaven/id mirrorOf*/mirrorOf name阿里云公共仓库/name urlhttps://maven.aliyun.com/repository/public/url /mirror依赖拉完之后找到application.yml或application.properties重点看数据源配置server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/only?useUnicodetruecharacterEncodingutf8mb4useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456这里的password一定要改成你本地 MySQL 的密码。如果 MySQL 是 8.0 以上版本驱动类名要用com.mysql.cj.jdbc.DriverURL 里建议加上serverTimezone否则时区报错会教你做人。全部改好后启动主类里带有SpringBootApplication的文件看到控制台打印 Spring Boot 启动成功的日志说明后端已经就绪。如果中间报端口被占用先查一下是谁占了 8080netstat -ano | findstr 8080 taskkill /PID 对应的进程号 /F3.4 前端安装与启动后端跑起来之后接着处理前端。打开前端项目目录确认里面有package.json文件。然后执行依赖安装npm install如果你网络条件不太稳定装到一半容易卡死可以换成国内镜像源npm config set registry https://registry.npmmirror.com依赖装完后启动开发服务器npm run serve启动成功后控制台会显示App running at: http://localhost:8081。这东西要注意前端开发服务器默认不会用 8080因为 8080 已经被后端占了所以 Vue 会顺延到 8081。你如果手动配置了前端端口不要在npm run serve之后去访问 8080那个端口是后端的 API 接口。浏览器打开前端地址看到商城首页就说明前后端已经沟通起来了。有一点容易忽略前端代码里访问后端接口的地址是写在一个配置文件里的比如vue.config.js里的代理设置或者src/utils/request.js里的baseURL。默认指向http://localhost:8080。如果你电脑上后端用的不是 8080 端口记得改这一处。代理配置的意义在于解决前端开发时的跨域问题配置好之后前端请求就会通过代理转发到后端浏览器里看不到跨域报错。4. 运行中的典型问题与排查技巧这部分是本文里最有含金量的内容。我自己从头跑这套项目再加上帮别人远程排查的经验整理出一份高频问题速查表。你如果照着前三章的步骤走完还是跑不起来九成问题都在下面这几项里。4.1 数据库连接报错Access denied / 时区问题这是新手遇到最多的错误。Access denied for user rootlocalhost说明用户名或密码不对去application.yml里改掉就行。如果遇到The server time zone value Öйú±ê׼ʱ¼ä is unrecognized这种乱码报错是因为 MySQL 服务器时区没配置在连接串后面加serverTimezoneAsia/Shanghai再重启就解决了。4.2 端口被占用导致启动失败SpringBoot 默认端口是 8080很多程序都在用这个端口。启动报Port already in use时最简单的方式是换一个端口比如在后端配置文件里改成server.port: 9999。注意改后端端口后前端代理的 target 地址也要同步改否则前端请求发过来全是 404。4.3 前端 npm install 一直失败最可能的原因是 node-sass 版本和 Node 版本不兼容。解决办法有两个要么换个低版本 Node要么把依赖里的 node-sass 卸载改成 sass。后面这个方案改动稍大因为 import 语法有一点区别但对这个项目来说你只需要把package.json里的node-sass删掉执行npm install -D sass大部分情况下能跑通。如果根因是网络问题那就切换镜像源再试。4.4 页面能打开但数据不显示页面能打开说明前端静态资源加载正常但列表或表单里没有数据后端接口十有八九报错了。先用 F12 打开浏览器开发者工具切到 Network 标签页刷新页面看某个接口的状态码。如果显示 500去后端控制台看异常栈。常见的坑是数据库表名前缀不一致——比如代码里写死了表名goods而实际 SQL 里的表是goods_info就会报Table doesnt exist。排查这种问题直接搜控制台的 SQL 日志最快。4.5 登录密码错误账号根本登录不上去源码自带的账号一般有初始密码比如管理员admin/admin123普通用户user/123456。如果你改了密码或者忘了直接去数据库用户表里把 MD5 加密后的密文替换成初始密码。这里要提醒一个安全问题这套系统里的密码用的是 MD5 加盐虽然应付学习场景足够但正式项目里推荐升级到 BCrypt。MD5 有一个致命弱点是彩虹表攻击同一串密码加密结果固定不变安全性不足。初级开发者能在答辩时主动说出这个安全优化点是会加分的。4.6 接口返回 401 或 403这说明后端的 token 校验没过。排查思路先看登录接口返回的 token 是否成功存入了本地localStorage 或 Vuex再看请求拦截器是否在请求头里正确填加了 token。一个非常常见的问题前端请求头字段名写错了比如后端约定的字段是token前端写成了Authorization对不上自然被拦截器拦截。现象可能原因解决方向启动报 Access Denied数据库密码配置错误修改 application.yml前端依赖装不上node-sass 与 Node 版本冲突降 Node 版本或换 sass页面无数据接口 500表名不一致或字段缺失查看 SQL 日志定位报错登录接口正常但商品接口 403token 未附加到请求头检查前端拦截器图片不显示图片路径存的是绝对磁盘路径改成访问后端静态资源的映射路径4.7 期间踩过的隐形坑排错过程中有一个细节特别容易被忽略字符集。如果页面显示的中文全是问号或者插入数据库后中文乱码十有八九是 JDBC 连接串里的characterEncoding没设置或者设置成了单纯的utf8。MySQL 里的utf8其实只支持部分字符表情符号或者生僻字会直接变成?正确做法是用utf8mb4。建库的时候我上面也明确写了用utf8mb4字符集这个坑不解决轻则页面不好看重则数据写不进去非常影响体验。5. 项目拿下来之后怎么物尽其用很多同学拿到源码跑通了截两张图就以为自己会了。这个状态很危险。源码阅读和源码运行是两码事你应该照着下面的路径去读一下源码让这套项目真正变成你的作品。5.1 顺着用户下单的链路读代码建议从前台用户点击下单这个动作开始顺着链路一路通关前端页面是哪一个组件点击按钮绑定了什么方法方法里调用了哪个 API 模块HTTP 请求打到后端哪个 ControllerController 调用了哪个 ServiceService 里有哪些核心逻辑涉及到哪些表哪些字段这条链路走一遍你就把整个电商系统主流程彻底打通了。我当初看一套类似的商城项目就是靠这个方法从网页上点什么一直追踪到数据库里哪条记录变了比直接看十篇架构文章都管用。5.2 在此基础上加一个自己的功能模块想进一步提升就尝试在这个基础上做二次开发。先别动核心逻辑挑一个相对独立的小功能比如商品评价模块。你需要新加一张评价表包含评价ID、订单ID、商品ID、用户ID、评分内容、创建时间。然后是后端的实体类、Mapper、Service、Controller前端的评价列表和评价提交表单。把这个功能完整加进去你会发现之前读源码时很多不确定的套路自己真正动手写一遍就全明白了。加一个模块比改十条 Bug 更有学习价值因为它逼着你理解系统现有的约定。5.3 可以做的优化方向如果你想拿这套项目去求职或者做答辩有几个优化点非常值得做。第一个是接口数据脱敏比如用户表的密码不要出现在查询结果里可以在实体类注解层面做忽略。第二个是把跨域配置写得更规范区分开发环境与生产环境避免接口暴露面过大。第三个是引入 Redis 做缓存商品列表这类读多写少的数据可以缓存起来降低数据库压力。这几个方向都不难但工程量不大却足够讲出故事。写在代码之外前后端分离的商城项目表面上是三套技术拼在一起其实考验的是对业务链路的理解。你什么时候能把用户在页面上点了一个按钮到数据库里某条记录状态被更新这一整条链路讲清楚这个项目就算真的吃透了。我把这套项目跑通那天最大的体会是真正值得反复研究的不是某个框架的新特性而是这些经典业务模块之间如何配合、如何取舍、如何保证数据一致性。希望这份笔记能帮你少走几步弯路把时间花在真正提升能力的地方。