先说个结论宠物商城这类系统几乎是我能想到的最适合拿来练手 Java 全栈的项目之一。用户、商品、购物车、订单、地址、评论一套典型的电商业务闭环都有了但又不会像真正的大型商城那样把支付、库存、物流全给你卷进来工作量刚好卡在个人能够独立完成的范围里还能把 Java、Vue、MySQL 三门硬功夫一次性串起来。这套基于 Java Vue 的宠物商城平台网站系统就是这么设计的。后端 Spring Boot 提供接口前端 Vue 负责页面交互MySQL 存业务数据配套源码、数据库脚本和开发文档一起给到拿到手就能直接跑起来改。不管你是要交数据库课程设计、Java 课程设计还是准备拿一套完整项目应付毕业设计或者纯粹想把自己从 SSM 零散代码里拽出来看看一条完整的全栈链路长什么样这套系统都能直接上车。接下来我从技术选型、数据库设计、前后端核心实现一直聊到部署时容易踩的坑全程按实际开发流程走保证你能照着复现。1. 项目定位与技术选型思路1.1 为什么是宠物商城而不是图书商城、学生管理系统很多人做课设会习惯性选“图书管理”“学生信息管理”这类老掉牙题目上手确实简单但做完几乎学不到东西因为业务模型太单薄了无非就是增删改查。宠物商城就不一样它属于典型的 B2C 电商形态商品、分类、购物车、订单、用户地址、订单项这些实体天然存在关联关系做数据库设计时有得写写后端接口时有得写写前端页面时也有得写。更关键的是电商场景里藏着大量值得深入的问题库存扣减怎么做才不出负数订单状态怎么流转才不混乱用户登录状态怎么在前端和后端之间安全传递购物车勾选结算时数据一致性怎么保证这些问题在图书管理系统里遇不到但在宠物商城里躲不开做完一遍你再去面 Java 开发岗时被问到“库存超卖怎么解决”脑子里是有真实画面的。宠物这个题材本身也有优势。相比图书、数码产品宠物商品天然有图片展示需求、有品种分类需求、有价格差异界面做出来视觉效果更好看演示答辩时也更有故事可讲比如“这是一只金毛幼犬属于中型犬分类”这种描述比“这是一本Java教材”生动得多。1.2 前后端分离架构与核心框架版本选择这套系统采用前后端完全分离架构后端只写 RESTful API不返回任何 HTML 页面前端通过 HTTP 请求调用接口拿到 JSON 数据后自己渲染。这样做的好处是两个端可以并行开发也符合目前企业里主流的协作模式。后端技术栈我建议这样组合技术选型说明JDK1.8稳定性党首选课程设计环境兼容性最好Spring Boot2.7.x不要一上来就追 3.x部分老教程和插件可能不兼容MyBatis-Plus3.5.x单表 CRUD 不用写 SQL分页也自带省时间MySQL5.7 或 8.0本地推荐 5.7云服务器推荐 8.0看环境JWTjjwt 0.9.x无状态登录鉴权前后端分离项目标配Lombok最新版消除 getter/setter 噪音代码前端技术栈也很主流技术选型说明VueVue 2 Element UI生态环境最完善坑最少课设首选构建工具Vue CLI比 Vite 稳定网上教程多HTTP 库Axios统一拦截器挂 token处理响应码路由Vue Routerhistory / hash 二选一部署时注意区别状态管理简单场景不用 Vuex购物车数据直接存 localStorage 即可说实话现在网上很多教程默认你用的是 Vue 3 Element Plus但如果你只是想快速把课设跑起来Vue 2 Element UI 的资料量是最大的遇到问题一搜基本都有答案。项目稳比版本新更重要。1.3 为什么这套组合能覆盖面试高频考点很多同学做完项目不知道怎么往简历上写其实这套系统的技术含量完全够用关键是你得有意识地把细节吃透。后端这块Spring Boot 自动装配原理、MyBatis-Plus 条件构造器的实现思路、JWT 无状态认证方案、Interceptor 拦截器链的加载顺序都是 Java 面试八股文里反复出现的内容。你在这个项目里亲手写过一遍远比背答案印象深。尤其事务这块下单操作要同时扣库存、生成订单、清空购物车只要在 Service 方法上加了Transactional面试官问“事务失效的场景有哪些”时你能直接拿自己的代码举例。前端这块Vue 生命周期八阶段、组件传值父子通信、路由守卫 beforeEach 里做登录鉴权、Axios 请求拦截器里加 token都是 Vue 面试题的高频考点。项目里用到了就不是背出来的是写出来的。数据库这块更不用说数据库课程设计本身就是这题的娘家。三范式建模、外键约束、索引设计、事务隔离级别全部可以在答辩时展开讲。2. 数据库设计与核心业务表结构2.1 六张核心表撑起整个商城数据库是这套系统最值得花时间的地方也是答辩时最容易问出深度的地方。宠物商城核心表我梳理成六张彼此之间有清晰的外键关联用户表 user字段包含 id、username、password、nickname、avatar、phone、email、create_time、status。密码必须存加密后的密文我用的是 BCrypt比 MD5 安全得多答辩时老师问“为什么不用 MD5”这就是加分点。商品分类表 categoryid、name、parent_id、sort、icon。这里做了父子级设计支持二级分类比如“宠物狗”下面还有“金毛”“柯基”这样前端可以做成多级菜单数据建模也更有说服力。宠物商品表 productid、category_id、name、subtitle、main_image、price、stock、sales、status、detail。图片字段存的是 URL 路径不是二进制内容price 用 decimal(10,2)避免精度问题stock 和 sales 两个字段配合使用卖一单加一单销量。购物车表 cartid、user_id、product_id、quantity、checked。核心设计是唯一约束uk_user_product(user_id, product_id)同一个用户对同一件商品只有一条记录重复添加就累加数量不会产生垃圾数据。订单表 orderid、order_no、user_id、total_price、receiver_name、receiver_phone、receiver_address、status、create_time、pay_time、ship_time、finish_time。注意订单表名不能直接叫order因为 order 是 MySQL 的保留字我加了下划线前缀tb_order。订单明细表 order_itemid、order_id、product_id、product_name、product_image、current_price、quantity、total_price。下单时要把商品名称和价格快照到明细表里这是电商系统的标准做法防止商品后续改价或下架后订单数据对不上。2.2 关联关系设计思路这些表之间的关联关系其实就是整个商城的数据流用户在商品列表页选择宠物商品加入购物车购物车勾选后结算系统生成一笔主订单和若干条订单明细后台管理员对订单进行发货操作状态随之流转。外键在物理上我建议不要建逻辑上通过字段关联即可。很多课程设计为了展示“会用外键”加了大量 FOREIGN KEY结果删除商品时被外键约束卡死体验很糟糕。用逻辑外键配合应用层校验既灵活又容易演示。订单状态我用 int 类型存储0 待付款、1 待发货、2 已发货、3 已完成、4 已取消、5 售后中。面试官问到状态机设计时就有的聊了状态流转不是随便跳的待付款只能到待发货或者取消发货后只能到完成或者售后。2.3 初始化脚本与常见设计坑项目里附带一个pet_shop.sql脚本创建数据库、建表、插入模拟数据一条龙。我插入的模拟数据里包括 6 个一级分类、20 多个商品、2 个测试账号密码都提前用 BCrypt 加密好前端登录框直接输账号就能进不用自己手动跑加密工具。这里有几个坑需要重点提醒MySQL 8.0 以上版本的驱动类名是com.mysql.cj.jdbc.Driver并且连接 URL 里要带上serverTimezoneAsia/Shanghai否则会报时区错误。商品价格字段一定用 decimal不要用 float/double。浮点数在二进制里都无法精确表示比如 0.1 在计算时可能出现 0.100000000001金额这种敏感字段容不得半点误差。不要把所有字段都设成 NOT NULL。像订单的 pay_time、ship_time 这类后续才会写入的字段初始必须是允许 NULL 的否则插入订单时就会报错。MySQL 5.7 的默认字符集是 latin1建库时必须显式指定utf8mb4不然中文数据全变问号。utf8mb4 比 utf8 多支持 emoji 字符做商城迟早会遇到用户昵称带 emoji 的情况一步到位就好。3. 后端 Spring Boot 核心实现细节3.1 分层结构Controller、Service、Mapper、entity 各司其职后端的包结构直接决定代码可维护性我的划分方式是标准的四层结构。Controller 只接收请求参数和返回结果不写任何业务逻辑Service 层承载所有业务规则比如下单要校验库存、扣减库存、生成订单号Mapper 层负责数据库访问entity 包放数据库表对应的实体类。举一个最典型的例子注册功能。Controller 接收前端传来的用户名和密码后调用 Service 的 register 方法。Service 里先判断用户名是否存在存在就抛异常提示“用户名已被注册”不存在就 BCrypt 加密密码插入用户记录Controller 捕获异常后把错误信息包装成统一的 JSON 格式返回前端。这样每一层只干一件事出问题能快速定位。统一返回结果我封装了一个 Result 类包含 code、msg、data 三个字段。code 为 200 表示成功500 表示业务异常401 表示未登录。前端 axios 拦截器可以直接根据 code 做全局提示不用每个接口单独处理。3.2 JWT 登录鉴权从登录接口到拦截器链登录流程是面试官最爱深挖的部分我把完整链路讲一遍。用户输入账号密码后后端先查数据库用 BCrypt 的 matches 方法校验密码是否一致。一致就生成一个 JWT tokentoken 里塞入用户 id 和用户名用密钥签名后返回给前端前端拿到 token 存储到 localStorage后续每次请求都在请求头里带上Authorization: Bearer token。后端这边我自定义了一个JwtInterceptor实现 Spring 的HandlerInterceptor接口在preHandle里解析请求头中的 token没带 token 直接拦截返回 401token 过期或者被篡改就返回“登录状态已过期请重新登录”校验通过就放行并把用户信息塞到 request 的 attribute 里后续 Controller 随时取用。注册拦截器的时候注意 Version 兼容问题Spring Boot 2.7 不用WebMvcConfigurerAdapter要实现WebMvcConfigurer接口才能生效。这里要多说一句为什么密码加密要用 BCrypt 而不是 MD5。MD5 是典型的散列算法同一个密码加密结果永远相同黑客用彩虹表一对比就能还原出原始密码。BCrypt 每次加密会随机混入盐值同一密码加密结果都不同即使数据库泄露想要暴力破解的成本也高很多。3.3 商品分页查询与条件检索接口商品列表页要支持分类筛选、关键字搜索、按价格排序、下架商品隐藏这些条件叠加起来很容易把代码写得一团乱麻。MyBatis-Plus 的条件构造器 LambdaQueryWrapper 在这是神器。我封装了一个 PageResult 通用分页返回结构包含 total、list、pageNum、pageSize 字段。前端每次翻页传入 pageNum 和 pageSize后端返回总数和当前页数据前端 Element UI 的 el-pagination 组件直接对接即可。排序字段我做了白名单处理前端传 price_asc、price_desc、sales_desc 这几个固定标识后端映射到具体的排序 SQL不直接拼接前端传过来的列名能有效防止 SQL 注入。3.4 购物车结算的下单事务设计下单流程是整个系统最核心的一段代码也是并发控制和安全意识的集中体现。用户在购物车页勾选商品后点击结算前端把选中的购物车记录 id 数组和收货地址 id 传给后端。后端 Service 方法上加Transactional然后依次执行根据购物车 id 查出所有选中商品判断商品状态是否正常、库存是否足够。用当前时间戳加用户 id 加随机数生成唯一的订单号格式类似20250316153000123001时间戳保证基本不重复加随机数防止极端情况下并发重复。遍历购物车商品累加总价并把商品名称、图片、单价快照进 order_item。批量扣减库存同时把商品销量 field 加一。保存主订单和订单明细。删除购物车中已结算的记录。库存扣减这里我用的是乐观锁写法在 product 表加一个 version 字段更新时带上where stock #{oldStock}或者where version #{version}影响行数为 0 说明有人抢先改了数据直接抛异常让用户重新下单。这种方案虽然不如悲观锁和 Redis 分布式锁高级但应付课程设计足够原理也比裸 SQL 更新高一个档次。另外订单状态初始为 0 待付款实际演示时一般直接模拟支付点击“立即支付”把状态改成 1 待发货再把支付时间写入这样整个闭环就完整了。4. 前端 Vue 实现与页面交互4.1 环境准备从安装 Node 到跑起 dev server很多同学卡在第一步Vue 环境装到一半项目跑不起来。我按最稳的路线走一遍先装 Node.js 16 或 18 LTS 版本用官方安装包一路下一步安装完在命令行执行node -v和npm -v确认版本号都出来。Vue CLI 全局安装执行npm install -g vue/cli国内网络慢就先执行npm config set registry https://registry.npmmirror.com换国内镜像源这一步很关键默认源拉包的速度能等得人怀疑人生。项目创建用vue create pet-shop-web交互面板里选择 “Manually select features”勾选 Babel、Router、Vuex。Vue 版本选 2.x不要选 3后续细节我会解释为什么。进入项目目录后安装 UI 组件库npm i element-ui -SHTTP 库npm i axios -S然后在main.js里全局注册 Element UI 和它的样式。一切就绪后执行npm run serve浏览器访问 localhost:8080能看到 Vue 默认页面就说明环境通了。这里提一下为什么建议 Vue 2。Element UI 官方只支持 Vue 2Vue 3 对应的是 Element Plus两者 API 不完全一样。网上的课程设计参考代码绝大多数都是 Vue 2 写的你跟着抄作业也好、查报错也好都远比 Vue 3 顺滑。课设求的是稳不是追新。4.2 路由配置与登录守卫的完整设计路由配置文件router/index.js里我按页面维度拆分成公开路由和需要登录的路由。首页、商品列表、商品详情属于公开页面谁都能看购物车、结算页、个人中心、订单列表必须登录才能访问。Vue Router 的beforeEach全局前置守卫是核心。每次路由跳转前守卫里先读 localStorage 里的 token如果没有 token 且目标路由需要登录就跳转到登录页并携带redirect参数记录来源地址登录成功后回跳原页面。这个体验细节面试时提出来很有含金量。路由传参这块也容易踩坑。商品详情页一般需要知道是哪个商品我用的是定义路由时加path: /product/:id的方式详情页用this.$route.params.id拿到商品 id。不要把商品 id 放在 query 参数里好处是刷新页面后参数不会丢而且 URL 更符合 RESTful 风格。4.3 Axios 请求封装与统一错误处理前后端对接最怕代码里到处写axios.get每个地方还要自己处理错误。我在utils/request.js里做了一个二次封装请求拦截器中从 localStorage 取出 token存在就添加到请求头Authorization字段响应拦截器中统一判断返回状态码200 直接返回 data401 跳转登录页并清掉本地 token其他错误码用 Element UI 的 Message 组件弹出错误提示。这样业务代码里只需要关注成功逻辑不用写 try-catch 处理全局错误。封装好之后调用接口只需一行代码const res await request({ url: /product/list, method: get, params: { pageNum, pageSize } })省下来的重复代码量非常可观代码可读性也好很多。4.4 首页、商品列表、购物车三个关键页面首页我用了 Element UI 的 el-carousel 轮播组件放三张宠物主题 Banner下面展示分类入口和热销商品推荐。数据来源是后端的热销接口按销量字段排序取前 8 条直接用 el-card 组件渲染商品卡片点击卡片跳转详情页。商品列表页核心是筛选交互左侧是分类树点击不同分类触发重新请求顶部是关键字搜索框和价格排序按钮。我用一个queryParams对象统一维护这些筛选条件任何筛选条件变化时调用loadProducts()方法重新请求接口页码重置为 1逻辑清晰。购物车页的难点在于勾选联动计算。页面左侧是商品勾选状态上方是全选按钮底部是已选商品数量合计和金额合计。我监听勾选变化时重新计算totalPrice并把选中状态同步到 localStorage这样用户刷新页面购物车数据不会丢。图片这块多说一句本地环境商品图我统一放在后端的static/images/upload目录下前端拼接完整 URL 展示。如果是上线部署推荐把图片上传到云存储或者 Nginx 静态目录避免后端重启丢文件。另外如果你有宠物视频展示需求可以考虑用 Vue 插件支持播放 HLS 流格式这也是目前电商平台主流的视频方案感兴趣可以自己扩展。5. 部署运行、常见问题排查与避坑实录5.1 从本地到云服务器的前后端部署流程本地跑通只是第一步毕业设计通常要求在服务器上演示。我以一台配置不高的云服务器为例讲一下部署链路。后端部署先把项目用 Maven 打成 jar 包mvn clean package -DskipTests把 jar 包传到服务器用nohup java -jar pet-shop-api.jar log.log 21 启动默认端口 8080。如果遇到端口被占用用lsof -i:8080查占用进程并处理。前端部署稍微绕一点。执行npm run build后dist 目录就是静态文件。两种方案可选一种是用 Nginx 直接托管 dist 目录并配置/api路径代理到后端接口另一种是把 dist 里的文件放到 Spring Boot 的 static 目录下后端统一出 html 和接口。推荐第一种 Nginx 部署方案反向代理配置核心如下server { listen 80; server_name your-domain.com; root /opt/pet-shop-web/dist; index index.html; location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location / { try_files $uri $uri/ /index.html; } }try_files这行的作用是解决 Vue Router history 模式刷新页面 404 的问题。刷新路由页面时 nginx 找不到对应的静态文件就回退到 index.html由前端路由接管。5.2 高频报错速查表我整理了一张问题排查速查表这些是我实测过程中踩过或者帮人排过的真实问题异常现象根本原因处理方案前端访问后端接口报跨域后端未开启 CORS实现 WebMvcConfigurer 加跨域配置或使用 CrossOrigin数据库连接报 Public Key Retrieval 错误MySQL 8.0 认证方式问题JDBC URL 加allowPublicKeyRetrievaltrueuseSSLfalsenpm install 极慢或失败默认 npm 源网络问题切换 npmmirror 镜像源删除 node_modules 重装上传的图片刷新后 404图片在后端临时目录重启丢失配置静态资源映射直接映射磁盘目录Vue 打包后组件样式错乱样式全局污染或 CSS 加载顺序问题组件内统一 scoped 作用域清理全局 style登录接口偶尔返回 401token 过期时间太短修改 JWT 过期时间为 24 小时前端拦截器自动跳登录下单成功后库存没变化并发场景回滚或 update 影响行数为 0检查事务注解检查乐观锁 SQL 条件启动报端口被占用上一次服务未关闭杀掉 java 进程或修改 application.yml 端口5.3 数据库同步与备份的实用建议做课程设期间经常要改表结构、补测试数据本地开发环境改崩了恢复成本很高。我的习惯是每完成一个功能模块就用 Navicat 的备份功能导出一份.sql文件存到项目 docs 目录里代码改坏了随时回滚数据库。如果你在用云数据库或者需要多人协作可以顺手了解一下数据库同步工具比如主从复制、数据迁移工具这些都是数据库面试的加分项但课设阶段不用真搭主从本地导出导入脚本已经足够。核心原则就一条数据库脚本必须放在项目工程里和源码一起版本管理。否则换一台电脑重新部署时代码有了数据没了当场傻眼。5.4 答辩时的 5 个加分点与 3 个雷区答辩是项目的临门一脚代码写得好不好是一回事展示得好不好是另一回事。我给你列几个我亲自验证过有效的加分细节演示下单前先打开数据库表下单完成后切到数据库刷新订单表和库存字段让老师直观看到数据变化比口头说我做了事务有说服力一百倍。主动提“BCrypt 加密密码”和“乐观锁防超卖”这两个设计点这是区分普通课设和优秀课设的关键。准备一张 ER 图能对着图讲清楚表关联关系数据库设计这关就过了。代码中预留了管理后台接口和 JWT 登录入口可以说后续可以扩展管理员端体现扩展性思维。提到的每一个技术点都要能接住追问只说“用过 JWT”但说不清 JWT 由哪三部分组成反而扣分。雷区同样重要。不要在原项目基础上过度堆功能但没跑通演示当场崩了最惨不要把前端的关键业务逻辑写在页面组件里不封装老师一问复用性就露馅不要只在本地能跑、不准备部署方案一问部署一句也答不上很减分。最后再分享两个我在实际使用中的小技巧第一个是调试接口时一定学会用浏览器的开发者工具网络面板。前端报错先别急着看代码打开 F12 切到 Network看请求有没有发出去、状态码是多少、响应体是什么80% 的问题能一眼定位是前端问题还是后端问题。这个习惯对以后工作也受用。第二个是给商品表加一个is_hot标志字段首页热销区查询时加个条件就能过滤不用单独建热销表。很多同学数据库设计喜欢拆很多表实际上业务没复杂到那个程度时用字段表达逻辑更轻更灵活。这套系统的价值不止是拿来交作业更推荐你把每个模块当成一个知识点深挖JWT 是怎么做到无状态认证的、MyBatis-Plus 的条件构造器是怎么动态拼接 SQL 的、事务注解加在哪个方法上才生效。把这些细节弄懂一个项目吃透比零散刷十个项目强太多。
