尧图网页设计 
简介这是面向计算机专业学生的毕业设计资料主题为基于Spring Boot与Vue的网上商城系统。项目从毕业设计与课程实践的实际需求出发覆盖了商城用户端与后台管理端的主要功能模块包括商品信息维护、购物车管理、订单流转等常见业务场景。资源内含完整可运行的源码、数据库初始化脚本、毕业论文文档以及操作演示视频能够帮助学生从零搭建项目、理解前后端分离架构并快速准备答辩材料。压缩包共包含788个文件以Java后端代码、Vue组件、JavaScript脚本、CSS样式、HTML页面、SQL脚本和SVG图标为主资源总大小约34.9MB。源码中可以看到后台布局、侧边菜单、头部导航等典型前端结构并附有环境安装与项目启动脚本便于一键完成部署调试。目前已有97人学习下载。对于需要借鉴完整商城开发流程或直接进行二次扩展的同学而言这份资料兼具参考性与实用性。1. 网上商城系统毕业设计先想清楚这三层再动手网上商城系统大概是毕业设计里出现频率最高的题目但正因为做的人多答辩老师一眼就能看出你是自己写的还是找代码改的。基于SpringBootVueMySQL这套组合本质上是把电商业务拆成“前端页面展示、后端接口处理、数据库落盘”三层每一层都有明确的技术边界。SpringBoot负责提供RESTful接口和业务逻辑Vue负责渲染页面和交互状态MySQL负责商品、订单、用户这些核心数据的存储。对毕业生来说这个题目的价值不在于做出多完整的秒杀系统而在于把每条链路讲清楚一个商品从数据库查出来经过接口序列化到前端渲染成卡片点击下单最后写回订单表这条完整路径能跑通、能解释、能演示就已经超过大多数拿旧项目应付的同学了。这篇文章会按我从零搭这套系统时真正会走的路线来写从数据库设计到前后端联调再到论文素材和答辩视频的准备每一步都带可复现的代码和踩过的坑。2. SpringBootVueMySQL三件套的选型逻辑与数据库表设计2.1 为什么毕业设计商城系统绕不开这套组合“基于SSH的商城系统”早就不在主流讨论范围了SSM虽然有但前端还得写JSP体验太差。SpringBoot把配置封装掉大部分一个SpringBootApplication就能起服务配上spring-boot-starter-web和mybatis-plus写增删改查的门槛很低。Vue则是当前前后端分离的主流选择它的响应式数据绑定让购物车、商品列表这类交互页面写起来比jQuery时代舒服得多。MySQL的生态最成熟网上教程数量级大出问题搜得到答案对毕业生来说“能搜到答案”本身就很重要。这套组合在答辩时的解释逻辑是很顺的SpringBoot负责业务模块Vue负责展示层MySQL通过InnoDB事务保证订单和库存的一致性。三层之间通过JSON交互前端用Axios发HTTP请求。整个架构图就是经典的浏览器—前端服务器—后端服务器—数据库没有任何难以自圆其说的设计。2.2 以订单为主线设计MySQL核心表结构商城系统再复杂核心也不过是“用户下单买东西”。我一般会把表控制在六张以内用户表、商品表、购物车表、订单表、订单项表、商品分类表。这个规模写进毕业论文刚好不会因为太多表导致篇幅失控也不会因为太少显得工作量不足。表名关键字段作用userid, username, password, nickname, phone, create_time注册登录的身份信息categoryid, name, parent_id商品分类支持二级结构productid, category_id, name, price, stock, image, status商品基本信息与库存cartid, user_id, product_id, quantity未下单前的临时数据ordersid, order_no, user_id, total_amount, status, create_time订单主表status为状态机order_itemid, order_id, product_id, product_name, price, quantity下单时商品快照订单表一定要单独存一份product_name和price快照不能下单后去关联商品表实时查。原因很简单商品可能改名、下架或者调价历史订单里的数据必须对得上用户当时买的东西。这个细节答辩时被问到“为什么订单项要冗余商品字段”就能答上来属于亮点。2.3 用MySQL Workbench把ER模型落成建表语句设计好表之后我用MySQL Workbench建模的情况比较多它的EER Diagram可以直接拖表关系然后生成SQL脚本。对毕业生来说论文里放一张ER图是标配Workbench导出的图比手画专业很多。操作路径是Model - Create Diagram - 添加表并建立外键关系 - File - Export - Forward Engineer SQL Script。生成的核心建表脚本大致是这样CREATE TABLE product ( id bigint NOT NULL AUTO_INCREMENT COMMENT 商品ID, name varchar(100) NOT NULL COMMENT 商品名称, price decimal(10,2) NOT NULL COMMENT 价格单位元, stock int NOT NULL DEFAULT 0 COMMENT 库存, image varchar(255) DEFAULT NULL COMMENT 图片URL, status tinyint NOT NULL DEFAULT 1 COMMENT 1上架 0下架, PRIMARY KEY (id), KEY idx_category (category_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT商品表;注意三点金额字段用decimal而不是float浮点数计算金额会出现0.10.2不等于0.3的精度问题表引擎统一InnoDB因为订单和库存扣减需要事务支持索引不一定要建很多但外键关联的category_id要加索引否则联表查询会走全表扫描。正如你看到的price用decimal(10,2)最多支持到千万级别的商品单价毕业设计完全够用。字符集用utf8mb4因为utf8不支持emoji和部分生僻字手机端用户昵称经常有这类特殊字符用错会直接写入报错。3. 后端落地用SpringBoot搭出商品查询与登录鉴权的最小骨架3.1 用IDEA创建SpringBoot项目时的版本与依赖选择创建项目时最容易卡住的是SpringBoot版本过高导致的问题比如JDK版本不匹配、依赖坐标不一致。IDEA里新版Spring Initializr默认给的SpringBoot版本经常是3.x它要求JDK17以上。如果你本机装的是JDK8启动就会报UnsupportedClassVersionError。这里我的建议很简单毕业设计不要追新SpringBoot 2.7.x JDK8 是相容性最好的一组组合网上能找到的教程案例最多。pom.xml里需要的核心依赖就这几个dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependencyMyBatis-Plus的使用率很高帮我省掉大量XML mapper的书写。它的内置BaseMapper提供了selectById、selectList、insert这些通用方法日常增删改查不用自己写SQL。注意mybatis-plus-boot-starter3.5.3版本对应的是MyBatis-Plus 3.5.x这个版本对SpringBoot 2.x的兼容性最稳。3.2 商品列表接口从Controller到MyBatis的完整链路商品列表是商城最基础的接口写清楚这条链路后面所有模块都会照着写。前端请求GET /api/product/list?categoryId1page1size10后端返回分页数据。Controller层直接调用Service不写业务逻辑RestController RequestMapping(/api/product) public class ProductController { Resource private ProductService productService; GetMapping(/list) public Result getList(RequestParam(defaultValue 0) Long categoryId, RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size) { return Result.ok(productService.pageQuery(categoryId, page, size)); } }Service层处理分页查询和条件拼接Service public class ProductServiceImpl implements ProductService { Resource private ProductMapper productMapper; Override public IPageProduct pageQuery(Long categoryId, int page, int size) { PageProduct pageParam new Page(page, size); LambdaQueryWrapperProduct wrapper new LambdaQueryWrapper(); wrapper.eq(Objects.nonNull(categoryId), Product::getCategoryId, categoryId) .eq(Product::getStatus, 1) .orderByDesc(Product::getId); return productMapper.selectPage(pageParam, wrapper); } }这段代码里的LambdaQueryWrapper是MyBatis-Plus的条件构造器.eq(条件, 字段, 值)第一个参数是布尔条件Objects.nonNull(categoryId)表示只有前端传了分类ID才拼接该条件否则查询全部分类。orderByDesc(Product::getId)让新上架的商品排在前面。selectPage方法会自动生成LIMIT分页语句返回的IPage里包含total、records等字段前端可以直接用。3.3 登录与JWT的简单实现毕业设计够用登录鉴权是答辩时必问的点。我用的是JWT方案用户登录成功后后端签发一个Token前端存在localStorage里之后每次请求在Header里带上Authorization: Bearer xxx。后端用拦截器校验Token有效性不通过的请求直接返回401。JWT工具类里生成Token的代码public String generateToken(Long userId, String username) { return Jwts.builder() .setSubject(username) .claim(userId, userId) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() 24 * 60 * 60 * 1000)) .signWith(SignatureAlgorithm.HS256, SECRET_KEY) .compact(); }参数说明setSubject存放用户名claim放自定义字段用户IDsetExpiration设置24小时过期时间signWith使用HMAC-SHA256算法加盐签名。SECRET_KEY建议放配置文件里不要写死在代码里。这个方案比Session好讲的地方在于无状态、跨域友好、符合前后端分离的设计思想。3.4 密码存储必须加盐论文里值得写一笔注册功能里最容易犯的错是把密码明文存进MySQL。答辩老师看到password字段直接存的是123456基本就会认为你缺乏安全意识。我用的是spring-security-crypto里的BCryptPasswordEncoder加盐逻辑封装在内同一个密码每次加密的结果都不同但matches方法可以校验。Bean public BCryptPasswordEncoder passwordEncoder() { return new BCryptPasswordEncoder(); }前端传过来的明文密码通过passwordEncoder.encode()加密后入库。登录时用passwordEncoder.matches(rawPassword, encodedPassword)校验。这个设计在论文安全一章可以展开几百字也是区分“会写CRUD”和“有工程意识”的分水岭。4. 前端落地用Vue路由参数和状态管理把商城页面串起来4.1 vue安装及环境配置的稳定路径Vue环境配置是新手重灾区坑集中在Node版本和npm安装依赖上。我一般建议装Node 16.x太高的版本比如18、20在某些老项目里会有OpenSSL兼容问题报错类似error:0308010C:digital envelope routines::unsupported。如果已经装了高版本Node临时解法是在package.json的scripts里加一句处理但根治还是用nvm切低版本。脚手架选择上VuE2项目用vue/cli 4.xVue3项目用npm create vitelatest。毕业设计从资料易查角度考虑Vue2 Element UI的组合最多Vue3 Element Plus更符合当前趋势。我推荐Vue3答辩时面试官对新技术的认可度更高。npm换国内镜像源是必然要做的不然下载依赖要等到天荒地老npm config set registry https://registry.npmmirror.com这条命令之后npm install的速度会有质变。装完依赖用npm run dev起开发服务Vite默认端口5173Vue CLI默认8080。4.2 商品详情页用vue路由参数传递query与params商城页面跳转最常见的是从商品列表点进详情页这个时候要传商品ID。Vue Router里query和params两种方式我都用过区别要记清楚query在URL上明文显示?id1刷新页面参数还在params参数不显示在URL上但刷新会丢必须配合路由配置里的name使用。列表页触发跳转// 用query方式简单直观刷新不丢参数 this.$router.push({ path: /product/detail, query: { id: row.id } })详情页接收参数const productId this.$route.query.id这里注意不要在接收时直接写this.$route.query.id然后不做类型转换就传后端。query拿到的全是字符串后端接口若接收的是Long类型Spring能自动转换但前端做比较时比如productId 1永远为false必须parseInt转换一下。这个细节很小但是前端联调常见的bug来源。4.3 购物车状态管理不装Vuex用reactive也行购物车需要跨组件共享商品详情页加入购物车导航栏的角标要实时变化。Vue3里我经常用组合式API加reactive来完成不需要引入Vuex/Pinia减少依赖同时写起来也简单// store/cart.js import { reactive, computed } from vue const cartState reactive({ items: [], totalCount: 0 }) export function useCart() { const addToCart (product) { const index cartState.items.findIndex(item item.id product.id) if (index -1) { cartState.items[index].quantity 1 } else { cartState.items.push({ ...product, quantity: 1 }) } updateTotal() } const updateTotal () { cartState.totalCount cartState.items.reduce((sum, item) sum item.quantity, 0) } return { cartState: computed(() cartState), addToCart } }定义在外部的cartState是模块级单例任何组件只要调用useCart()拿到的都是同一个状态对象这就做到了响应式数据共享。computed的用法是让组件在渲染时自动追踪依赖当items变化时视图自动更新。相比Vuex这种方式没有严格的状态变更约束但毕业设计代码量完全不需要上Vuex模块化reactive更能体现对Vue3响应式原理的理解。4.4 前端图片路径的坑与绕法商品图片常出现“本地能显示打包部署后404”的问题。原因是Vue CLI和Vite对静态资源的处理不同。开发环境放在public目录下的图片用绝对路径/images/1.png能直接访问但打包部署到服务器非根路径时绝对路径会变成/xxx/images/1.png找不到文件。稳妥的做法是图片URL在数据库里存相对业务路径比如/upload/2024/05/1.png后端提供静态资源映射Configuration public class WebConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/upload/**) .addResourceHandler(file: uploadDir); } }对应前端显示图片时拼上后端域名前缀。这样图片请求走HTTP接口跟前端部署路径彻底解耦。5. 核心交易链路订单提交、事务边界与库存扣减5.1 为什么不能直接执行“减库存生成订单”网上很多商城源码的提交订单逻辑是先检查库存充足然后UPDATE product SET stock stock - 1 WHERE id ?再INSERT订单表。单用户没问题一旦并发就有超卖风险。两个请求同时读到库存为1都进入减库存操作最终会扣成负数。这个问题在毕业答辩时被追问的概率非常高。解决方案常用的有两种悲观锁SELECT FOR UPDATE和乐观锁版本号或条件更新。在高并发业务中悲观锁更可靠但性能差毕业设计用乐观锁足够也更容易讲清楚。5.2 用Transactional加乐观锁保证订单与库存一致订单提交必须在一个事务里完成。Spring的Transactional注解声明事务边界默认遇到RuntimeException回滚。下订单的Service代码如下Transactional(rollbackFor Exception.class) public Long submitOrder(OrderSubmitDTO dto) { // 1. 校验并锁定用户购物车 ListCartItem cartItems cartMapper.selectList( new LambdaQueryWrapperCartItem().eq(CartItem::getUserId, dto.getUserId())); // 2. 计算总金额 BigDecimal total BigDecimal.ZERO; for (CartItem item : cartItems) { Product product productMapper.selectById(item.getProductId()); total total.add(product.getPrice().multiply(new BigDecimal(item.getQuantity()))); } // 3. 插入订单主表 Orders order new Orders(); order.setOrderNo(generateOrderNo()); order.setUserId(dto.getUserId()); order.setTotalAmount(total); order.setStatus(0); // 0待付款 orderMapper.insert(order); // 4. 扣减库存乐观锁 for (CartItem item : cartItems) { int rows productMapper.deductStock(item.getProductId(), item.getQuantity()); if (rows 0) { throw new RuntimeException(库存不足); } } return order.getId(); }deductStock的SQL是关键UPDATE product SET stock stock - #{quantity} WHERE id #{productId} AND stock #{quantity}这里没有用版本号字段而是把“库存够不够”的判断条件直接放进UPDATE语句数据库行锁保证同一时刻只有一个事务能成功更新这一行。返回值rows等于1说明扣减成功等于0说明库存不足直接抛异常触发事务回滚之前插入的订单主表记录也会一并撤销。rollbackFor Exception.class的意义在于默认配置只回滚RuntimeException如果代码里抛出的是受检异常不加这个属性事务不会回滚订单会留在数据库里而库存没扣。5.3 MySQL存储过程在毕业设计里的适当位置MySQL存储过程在网上很多商城源码里会出现但它对毕业设计来说性价比并不高。存储过程的优势是减少网络交互、封装复杂SQL逻辑但问题也很明显调试困难、版本管理不便、与SpringBoot的集成不如直接在Service层写代码直观。我的观点是论文里可以提到存储过程的应用场景但代码实现用Java事务就够了。如果坚持要用存储过程来实现下单流程大致结构如下DELIMITER $$ CREATE PROCEDURE sp_create_order( IN p_user_id BIGINT, IN p_product_id BIGINT, IN p_quantity INT, OUT p_order_id BIGINT ) BEGIN DECLARE v_price DECIMAL(10,2); DECLARE EXIT HANDLER FOR SQLEXCEPTION ROLLBACK; START TRANSACTION; SELECT price INTO v_price FROM product WHERE id p_product_id FOR UPDATE; UPDATE product SET stock stock - p_quantity WHERE id p_product_id AND stock p_quantity; INSERT INTO orders (user_id, total_amount, status) VALUES (p_user_id, v_price * p_quantity, 0); SET p_order_id LAST_INSERT_ID(); COMMIT; END$$ DELIMITER ;Java端通过Select注解的CALL sp_create_order(...)调用。用SELECT ... FOR UPDATE做行锁SQLEXCEPTION回滚。这个方案可以作为论文“数据库优化方案”的小节内容但真正跑通的代码还是推荐1.2中的Spring事务方案因为出问题时能在IDEA断点调试存储过程只能靠SELECT排查。6. 打包部署与答辩素材把开发版代码变成能演示的成品6.1 vue打包后布局异常的排查顺序Vue项目开发环境正常npm run build部署后布局错乱是高频问题。先从三个角度排查首先看打包产物路径。Vite或Vue CLI默认base是/部署在Tomcat的webapps/ROOT下没问题但部署在webapps/mall子目录时所有JS/CSS路径都会变成/assets/xxx导致404页面只剩空白或纯HTML结构。Vite项目修改vite.config.js里的base: ./Vue CLI项目修改vue.config.js里的publicPath: ./即可。其次是路由模式。Vue Router默认hash模式URL带#号部署后刷新不会有问题。如果用history模式刷新/product/1这类地址时后端没有对应路由会报404。解决办法是后端配置forward到首页但毕业设计演示最简单的方式是直接使用hash模式不折腾。第三是CSS样式被全局污染。打包后某些组件的样式顺序变了Element Plus的样式覆盖自己的class。检查是否在main.js里正确引入了样式文件以及组件style是否加了scoped。6.2 MySQL连接参数与常见时区报错MySQL 8.x连接SpringBoot时最常见的报错是The server time zone value йʱ is unrecognized这是由于MySQL驱动8.0默认使用CST时区而服务器端时区配置缺失。连接串里显式指定时区可以解决spring: datasource: url: jdbc:mysql://localhost:3306/mall?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver参数逐个说明useUnicodetruecharacterEncodingutf8保证中文不乱码useSSLfalse跳过高版本MySQL的SSL握手本地开发连接更快serverTimezoneAsia/Shanghai解决时区报错allowPublicKeyRetrievaltrue在MySQL 8.x用caching_sha2_password插件连接比较老版本的驱动时需要配置。另外SpringBoot 2.4以上版本默认驱动类是com.mysql.cj.jdbc.Driver用旧驱动类会提示加载失败。6.3 论文里时序图和数据库设计图的素材从哪来论文需要时序图很多人用Visio手画再截图浪费时间且不专业。最简单的方式是装IDEA的PlantUML插件写代码自动生成时序图。比如订单提交的时序图用PlantUML描述startuml 用户 - Vue前端: 点击提交订单 Vue前端 - SpringBoot: POST /api/order/submit SpringBoot - MySQL: 查询购物车列表 SpringBoot - MySQL: 插入订单表 SpringBoot - MySQL: 更新商品库存 MySQL -- SpringBoot: 返回受影响行数 SpringBoot -- Vue前端: 返回订单ID Vue前端 - 用户: 跳转付款页 enduml这个文本粘贴到IDEA里就能渲染成标准的时序图导出PNG放入论文。数据库ER图用MySQL Workbench导出即可这类图在论文“系统设计”章节属于刚需。6.4 视频演示的录制脚本让答辩评委不用猜标题里提到的视频演示很多同学录制时对着屏幕乱点一通录完三十分钟没人想看。我一般控制在8分钟内按以下顺序推进系统登录注册展示密码加密效果- 商品列表浏览与关键词搜索 - 商品详情加入购物车 - 提交订单并演示库存扣减 - 后台管理界面添加商品 - 订单列表查看状态流转。全程用OBS录屏遇到访问接口时打开浏览器开发者工具Network面板展示请求和响应这是证明前后端真实联调而非静态页面切换的关键画面。一镜到底就好不要分段剪辑合成答辩评委会怀疑数据是硬编码的。录制时先把本地MySQL服务断掉故意演示一次数据库连接失败后的前端报错再接上服务恢复正常访问。这个10秒钟的反差画面比任何解释都有说服力。本文还有配套的精品资源点击获取 SpringBoot+Vue+MySQL网上商城毕业设计全栈实战解析
简介这是面向计算机专业学生的毕业设计资料主题为基于Spring Boot与Vue的网上商城系统。项目从毕业设计与课程实践的实际需求出发覆盖了商城用户端与后台管理端的主要功能模块包括商品信息维护、购物车管理、订单流转等常见业务场景。资源内含完整可运行的源码、数据库初始化脚本、毕业论文文档以及操作演示视频能够帮助学生从零搭建项目、理解前后端分离架构并快速准备答辩材料。压缩包共包含788个文件以Java后端代码、Vue组件、JavaScript脚本、CSS样式、HTML页面、SQL脚本和SVG图标为主资源总大小约34.9MB。源码中可以看到后台布局、侧边菜单、头部导航等典型前端结构并附有环境安装与项目启动脚本便于一键完成部署调试。目前已有97人学习下载。对于需要借鉴完整商城开发流程或直接进行二次扩展的同学而言这份资料兼具参考性与实用性。1. 网上商城系统毕业设计先想清楚这三层再动手网上商城系统大概是毕业设计里出现频率最高的题目但正因为做的人多答辩老师一眼就能看出你是自己写的还是找代码改的。基于SpringBootVueMySQL这套组合本质上是把电商业务拆成“前端页面展示、后端接口处理、数据库落盘”三层每一层都有明确的技术边界。SpringBoot负责提供RESTful接口和业务逻辑Vue负责渲染页面和交互状态MySQL负责商品、订单、用户这些核心数据的存储。对毕业生来说这个题目的价值不在于做出多完整的秒杀系统而在于把每条链路讲清楚一个商品从数据库查出来经过接口序列化到前端渲染成卡片点击下单最后写回订单表这条完整路径能跑通、能解释、能演示就已经超过大多数拿旧项目应付的同学了。这篇文章会按我从零搭这套系统时真正会走的路线来写从数据库设计到前后端联调再到论文素材和答辩视频的准备每一步都带可复现的代码和踩过的坑。2. SpringBootVueMySQL三件套的选型逻辑与数据库表设计2.1 为什么毕业设计商城系统绕不开这套组合“基于SSH的商城系统”早就不在主流讨论范围了SSM虽然有但前端还得写JSP体验太差。SpringBoot把配置封装掉大部分一个SpringBootApplication就能起服务配上spring-boot-starter-web和mybatis-plus写增删改查的门槛很低。Vue则是当前前后端分离的主流选择它的响应式数据绑定让购物车、商品列表这类交互页面写起来比jQuery时代舒服得多。MySQL的生态最成熟网上教程数量级大出问题搜得到答案对毕业生来说“能搜到答案”本身就很重要。这套组合在答辩时的解释逻辑是很顺的SpringBoot负责业务模块Vue负责展示层MySQL通过InnoDB事务保证订单和库存的一致性。三层之间通过JSON交互前端用Axios发HTTP请求。整个架构图就是经典的浏览器—前端服务器—后端服务器—数据库没有任何难以自圆其说的设计。2.2 以订单为主线设计MySQL核心表结构商城系统再复杂核心也不过是“用户下单买东西”。我一般会把表控制在六张以内用户表、商品表、购物车表、订单表、订单项表、商品分类表。这个规模写进毕业论文刚好不会因为太多表导致篇幅失控也不会因为太少显得工作量不足。表名关键字段作用userid, username, password, nickname, phone, create_time注册登录的身份信息categoryid, name, parent_id商品分类支持二级结构productid, category_id, name, price, stock, image, status商品基本信息与库存cartid, user_id, product_id, quantity未下单前的临时数据ordersid, order_no, user_id, total_amount, status, create_time订单主表status为状态机order_itemid, order_id, product_id, product_name, price, quantity下单时商品快照订单表一定要单独存一份product_name和price快照不能下单后去关联商品表实时查。原因很简单商品可能改名、下架或者调价历史订单里的数据必须对得上用户当时买的东西。这个细节答辩时被问到“为什么订单项要冗余商品字段”就能答上来属于亮点。2.3 用MySQL Workbench把ER模型落成建表语句设计好表之后我用MySQL Workbench建模的情况比较多它的EER Diagram可以直接拖表关系然后生成SQL脚本。对毕业生来说论文里放一张ER图是标配Workbench导出的图比手画专业很多。操作路径是Model - Create Diagram - 添加表并建立外键关系 - File - Export - Forward Engineer SQL Script。生成的核心建表脚本大致是这样CREATE TABLE product ( id bigint NOT NULL AUTO_INCREMENT COMMENT 商品ID, name varchar(100) NOT NULL COMMENT 商品名称, price decimal(10,2) NOT NULL COMMENT 价格单位元, stock int NOT NULL DEFAULT 0 COMMENT 库存, image varchar(255) DEFAULT NULL COMMENT 图片URL, status tinyint NOT NULL DEFAULT 1 COMMENT 1上架 0下架, PRIMARY KEY (id), KEY idx_category (category_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT商品表;注意三点金额字段用decimal而不是float浮点数计算金额会出现0.10.2不等于0.3的精度问题表引擎统一InnoDB因为订单和库存扣减需要事务支持索引不一定要建很多但外键关联的category_id要加索引否则联表查询会走全表扫描。正如你看到的price用decimal(10,2)最多支持到千万级别的商品单价毕业设计完全够用。字符集用utf8mb4因为utf8不支持emoji和部分生僻字手机端用户昵称经常有这类特殊字符用错会直接写入报错。3. 后端落地用SpringBoot搭出商品查询与登录鉴权的最小骨架3.1 用IDEA创建SpringBoot项目时的版本与依赖选择创建项目时最容易卡住的是SpringBoot版本过高导致的问题比如JDK版本不匹配、依赖坐标不一致。IDEA里新版Spring Initializr默认给的SpringBoot版本经常是3.x它要求JDK17以上。如果你本机装的是JDK8启动就会报UnsupportedClassVersionError。这里我的建议很简单毕业设计不要追新SpringBoot 2.7.x JDK8 是相容性最好的一组组合网上能找到的教程案例最多。pom.xml里需要的核心依赖就这几个dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependencyMyBatis-Plus的使用率很高帮我省掉大量XML mapper的书写。它的内置BaseMapper提供了selectById、selectList、insert这些通用方法日常增删改查不用自己写SQL。注意mybatis-plus-boot-starter3.5.3版本对应的是MyBatis-Plus 3.5.x这个版本对SpringBoot 2.x的兼容性最稳。3.2 商品列表接口从Controller到MyBatis的完整链路商品列表是商城最基础的接口写清楚这条链路后面所有模块都会照着写。前端请求GET /api/product/list?categoryId1page1size10后端返回分页数据。Controller层直接调用Service不写业务逻辑RestController RequestMapping(/api/product) public class ProductController { Resource private ProductService productService; GetMapping(/list) public Result getList(RequestParam(defaultValue 0) Long categoryId, RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size) { return Result.ok(productService.pageQuery(categoryId, page, size)); } }Service层处理分页查询和条件拼接Service public class ProductServiceImpl implements ProductService { Resource private ProductMapper productMapper; Override public IPageProduct pageQuery(Long categoryId, int page, int size) { PageProduct pageParam new Page(page, size); LambdaQueryWrapperProduct wrapper new LambdaQueryWrapper(); wrapper.eq(Objects.nonNull(categoryId), Product::getCategoryId, categoryId) .eq(Product::getStatus, 1) .orderByDesc(Product::getId); return productMapper.selectPage(pageParam, wrapper); } }这段代码里的LambdaQueryWrapper是MyBatis-Plus的条件构造器.eq(条件, 字段, 值)第一个参数是布尔条件Objects.nonNull(categoryId)表示只有前端传了分类ID才拼接该条件否则查询全部分类。orderByDesc(Product::getId)让新上架的商品排在前面。selectPage方法会自动生成LIMIT分页语句返回的IPage里包含total、records等字段前端可以直接用。3.3 登录与JWT的简单实现毕业设计够用登录鉴权是答辩时必问的点。我用的是JWT方案用户登录成功后后端签发一个Token前端存在localStorage里之后每次请求在Header里带上Authorization: Bearer xxx。后端用拦截器校验Token有效性不通过的请求直接返回401。JWT工具类里生成Token的代码public String generateToken(Long userId, String username) { return Jwts.builder() .setSubject(username) .claim(userId, userId) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() 24 * 60 * 60 * 1000)) .signWith(SignatureAlgorithm.HS256, SECRET_KEY) .compact(); }参数说明setSubject存放用户名claim放自定义字段用户IDsetExpiration设置24小时过期时间signWith使用HMAC-SHA256算法加盐签名。SECRET_KEY建议放配置文件里不要写死在代码里。这个方案比Session好讲的地方在于无状态、跨域友好、符合前后端分离的设计思想。3.4 密码存储必须加盐论文里值得写一笔注册功能里最容易犯的错是把密码明文存进MySQL。答辩老师看到password字段直接存的是123456基本就会认为你缺乏安全意识。我用的是spring-security-crypto里的BCryptPasswordEncoder加盐逻辑封装在内同一个密码每次加密的结果都不同但matches方法可以校验。Bean public BCryptPasswordEncoder passwordEncoder() { return new BCryptPasswordEncoder(); }前端传过来的明文密码通过passwordEncoder.encode()加密后入库。登录时用passwordEncoder.matches(rawPassword, encodedPassword)校验。这个设计在论文安全一章可以展开几百字也是区分“会写CRUD”和“有工程意识”的分水岭。4. 前端落地用Vue路由参数和状态管理把商城页面串起来4.1 vue安装及环境配置的稳定路径Vue环境配置是新手重灾区坑集中在Node版本和npm安装依赖上。我一般建议装Node 16.x太高的版本比如18、20在某些老项目里会有OpenSSL兼容问题报错类似error:0308010C:digital envelope routines::unsupported。如果已经装了高版本Node临时解法是在package.json的scripts里加一句处理但根治还是用nvm切低版本。脚手架选择上VuE2项目用vue/cli 4.xVue3项目用npm create vitelatest。毕业设计从资料易查角度考虑Vue2 Element UI的组合最多Vue3 Element Plus更符合当前趋势。我推荐Vue3答辩时面试官对新技术的认可度更高。npm换国内镜像源是必然要做的不然下载依赖要等到天荒地老npm config set registry https://registry.npmmirror.com这条命令之后npm install的速度会有质变。装完依赖用npm run dev起开发服务Vite默认端口5173Vue CLI默认8080。4.2 商品详情页用vue路由参数传递query与params商城页面跳转最常见的是从商品列表点进详情页这个时候要传商品ID。Vue Router里query和params两种方式我都用过区别要记清楚query在URL上明文显示?id1刷新页面参数还在params参数不显示在URL上但刷新会丢必须配合路由配置里的name使用。列表页触发跳转// 用query方式简单直观刷新不丢参数 this.$router.push({ path: /product/detail, query: { id: row.id } })详情页接收参数const productId this.$route.query.id这里注意不要在接收时直接写this.$route.query.id然后不做类型转换就传后端。query拿到的全是字符串后端接口若接收的是Long类型Spring能自动转换但前端做比较时比如productId 1永远为false必须parseInt转换一下。这个细节很小但是前端联调常见的bug来源。4.3 购物车状态管理不装Vuex用reactive也行购物车需要跨组件共享商品详情页加入购物车导航栏的角标要实时变化。Vue3里我经常用组合式API加reactive来完成不需要引入Vuex/Pinia减少依赖同时写起来也简单// store/cart.js import { reactive, computed } from vue const cartState reactive({ items: [], totalCount: 0 }) export function useCart() { const addToCart (product) { const index cartState.items.findIndex(item item.id product.id) if (index -1) { cartState.items[index].quantity 1 } else { cartState.items.push({ ...product, quantity: 1 }) } updateTotal() } const updateTotal () { cartState.totalCount cartState.items.reduce((sum, item) sum item.quantity, 0) } return { cartState: computed(() cartState), addToCart } }定义在外部的cartState是模块级单例任何组件只要调用useCart()拿到的都是同一个状态对象这就做到了响应式数据共享。computed的用法是让组件在渲染时自动追踪依赖当items变化时视图自动更新。相比Vuex这种方式没有严格的状态变更约束但毕业设计代码量完全不需要上Vuex模块化reactive更能体现对Vue3响应式原理的理解。4.4 前端图片路径的坑与绕法商品图片常出现“本地能显示打包部署后404”的问题。原因是Vue CLI和Vite对静态资源的处理不同。开发环境放在public目录下的图片用绝对路径/images/1.png能直接访问但打包部署到服务器非根路径时绝对路径会变成/xxx/images/1.png找不到文件。稳妥的做法是图片URL在数据库里存相对业务路径比如/upload/2024/05/1.png后端提供静态资源映射Configuration public class WebConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/upload/**) .addResourceHandler(file: uploadDir); } }对应前端显示图片时拼上后端域名前缀。这样图片请求走HTTP接口跟前端部署路径彻底解耦。5. 核心交易链路订单提交、事务边界与库存扣减5.1 为什么不能直接执行“减库存生成订单”网上很多商城源码的提交订单逻辑是先检查库存充足然后UPDATE product SET stock stock - 1 WHERE id ?再INSERT订单表。单用户没问题一旦并发就有超卖风险。两个请求同时读到库存为1都进入减库存操作最终会扣成负数。这个问题在毕业答辩时被追问的概率非常高。解决方案常用的有两种悲观锁SELECT FOR UPDATE和乐观锁版本号或条件更新。在高并发业务中悲观锁更可靠但性能差毕业设计用乐观锁足够也更容易讲清楚。5.2 用Transactional加乐观锁保证订单与库存一致订单提交必须在一个事务里完成。Spring的Transactional注解声明事务边界默认遇到RuntimeException回滚。下订单的Service代码如下Transactional(rollbackFor Exception.class) public Long submitOrder(OrderSubmitDTO dto) { // 1. 校验并锁定用户购物车 ListCartItem cartItems cartMapper.selectList( new LambdaQueryWrapperCartItem().eq(CartItem::getUserId, dto.getUserId())); // 2. 计算总金额 BigDecimal total BigDecimal.ZERO; for (CartItem item : cartItems) { Product product productMapper.selectById(item.getProductId()); total total.add(product.getPrice().multiply(new BigDecimal(item.getQuantity()))); } // 3. 插入订单主表 Orders order new Orders(); order.setOrderNo(generateOrderNo()); order.setUserId(dto.getUserId()); order.setTotalAmount(total); order.setStatus(0); // 0待付款 orderMapper.insert(order); // 4. 扣减库存乐观锁 for (CartItem item : cartItems) { int rows productMapper.deductStock(item.getProductId(), item.getQuantity()); if (rows 0) { throw new RuntimeException(库存不足); } } return order.getId(); }deductStock的SQL是关键UPDATE product SET stock stock - #{quantity} WHERE id #{productId} AND stock #{quantity}这里没有用版本号字段而是把“库存够不够”的判断条件直接放进UPDATE语句数据库行锁保证同一时刻只有一个事务能成功更新这一行。返回值rows等于1说明扣减成功等于0说明库存不足直接抛异常触发事务回滚之前插入的订单主表记录也会一并撤销。rollbackFor Exception.class的意义在于默认配置只回滚RuntimeException如果代码里抛出的是受检异常不加这个属性事务不会回滚订单会留在数据库里而库存没扣。5.3 MySQL存储过程在毕业设计里的适当位置MySQL存储过程在网上很多商城源码里会出现但它对毕业设计来说性价比并不高。存储过程的优势是减少网络交互、封装复杂SQL逻辑但问题也很明显调试困难、版本管理不便、与SpringBoot的集成不如直接在Service层写代码直观。我的观点是论文里可以提到存储过程的应用场景但代码实现用Java事务就够了。如果坚持要用存储过程来实现下单流程大致结构如下DELIMITER $$ CREATE PROCEDURE sp_create_order( IN p_user_id BIGINT, IN p_product_id BIGINT, IN p_quantity INT, OUT p_order_id BIGINT ) BEGIN DECLARE v_price DECIMAL(10,2); DECLARE EXIT HANDLER FOR SQLEXCEPTION ROLLBACK; START TRANSACTION; SELECT price INTO v_price FROM product WHERE id p_product_id FOR UPDATE; UPDATE product SET stock stock - p_quantity WHERE id p_product_id AND stock p_quantity; INSERT INTO orders (user_id, total_amount, status) VALUES (p_user_id, v_price * p_quantity, 0); SET p_order_id LAST_INSERT_ID(); COMMIT; END$$ DELIMITER ;Java端通过Select注解的CALL sp_create_order(...)调用。用SELECT ... FOR UPDATE做行锁SQLEXCEPTION回滚。这个方案可以作为论文“数据库优化方案”的小节内容但真正跑通的代码还是推荐1.2中的Spring事务方案因为出问题时能在IDEA断点调试存储过程只能靠SELECT排查。6. 打包部署与答辩素材把开发版代码变成能演示的成品6.1 vue打包后布局异常的排查顺序Vue项目开发环境正常npm run build部署后布局错乱是高频问题。先从三个角度排查首先看打包产物路径。Vite或Vue CLI默认base是/部署在Tomcat的webapps/ROOT下没问题但部署在webapps/mall子目录时所有JS/CSS路径都会变成/assets/xxx导致404页面只剩空白或纯HTML结构。Vite项目修改vite.config.js里的base: ./Vue CLI项目修改vue.config.js里的publicPath: ./即可。其次是路由模式。Vue Router默认hash模式URL带#号部署后刷新不会有问题。如果用history模式刷新/product/1这类地址时后端没有对应路由会报404。解决办法是后端配置forward到首页但毕业设计演示最简单的方式是直接使用hash模式不折腾。第三是CSS样式被全局污染。打包后某些组件的样式顺序变了Element Plus的样式覆盖自己的class。检查是否在main.js里正确引入了样式文件以及组件style是否加了scoped。6.2 MySQL连接参数与常见时区报错MySQL 8.x连接SpringBoot时最常见的报错是The server time zone value йʱ is unrecognized这是由于MySQL驱动8.0默认使用CST时区而服务器端时区配置缺失。连接串里显式指定时区可以解决spring: datasource: url: jdbc:mysql://localhost:3306/mall?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver参数逐个说明useUnicodetruecharacterEncodingutf8保证中文不乱码useSSLfalse跳过高版本MySQL的SSL握手本地开发连接更快serverTimezoneAsia/Shanghai解决时区报错allowPublicKeyRetrievaltrue在MySQL 8.x用caching_sha2_password插件连接比较老版本的驱动时需要配置。另外SpringBoot 2.4以上版本默认驱动类是com.mysql.cj.jdbc.Driver用旧驱动类会提示加载失败。6.3 论文里时序图和数据库设计图的素材从哪来论文需要时序图很多人用Visio手画再截图浪费时间且不专业。最简单的方式是装IDEA的PlantUML插件写代码自动生成时序图。比如订单提交的时序图用PlantUML描述startuml 用户 - Vue前端: 点击提交订单 Vue前端 - SpringBoot: POST /api/order/submit SpringBoot - MySQL: 查询购物车列表 SpringBoot - MySQL: 插入订单表 SpringBoot - MySQL: 更新商品库存 MySQL -- SpringBoot: 返回受影响行数 SpringBoot -- Vue前端: 返回订单ID Vue前端 - 用户: 跳转付款页 enduml这个文本粘贴到IDEA里就能渲染成标准的时序图导出PNG放入论文。数据库ER图用MySQL Workbench导出即可这类图在论文“系统设计”章节属于刚需。6.4 视频演示的录制脚本让答辩评委不用猜标题里提到的视频演示很多同学录制时对着屏幕乱点一通录完三十分钟没人想看。我一般控制在8分钟内按以下顺序推进系统登录注册展示密码加密效果- 商品列表浏览与关键词搜索 - 商品详情加入购物车 - 提交订单并演示库存扣减 - 后台管理界面添加商品 - 订单列表查看状态流转。全程用OBS录屏遇到访问接口时打开浏览器开发者工具Network面板展示请求和响应这是证明前后端真实联调而非静态页面切换的关键画面。一镜到底就好不要分段剪辑合成答辩评委会怀疑数据是硬编码的。录制时先把本地MySQL服务断掉故意演示一次数据库连接失败后的前端报错再接上服务恢复正常访问。这个10秒钟的反差画面比任何解释都有说服力。本文还有配套的精品资源点击获取