简介基于SpringBootVue的购物商城管理系统是一套完整可运行的高分毕业设计项目面向计算机相关专业学生及需要快速搭建前后端分离项目的开发者。项目采用SpringBoot提供后端接口、Vue构建管理端页面并配有数据库初始化脚本代码为作者手工编写结构规范适合作为毕业设计、期末大作业或课程设计的参考范本。压缩包共262个文件约1.51MB涵盖Java后端源码、Vue前端页面、JS脚本、XML配置、SQL数据库文件及项目说明文档等核心业务模块与配置一目了然。已有3717人学习浏览项目完整度高内置说明文档可辅助快速部署。压缩包内除购物商城前后端源码外还包含数据库表结构、接口控制类、Service业务实现、实体类等关键代码便于读者理解订单、用户、商品等模块的开发思路也支持在此基础上扩展二次开发。1. 基于SpringBootVue的购物商城管理系统这份高分毕设源码先跑通再读代码打开这个“基于SpringBootVue的购物商城管理系统源码数据库高分毕业设计.zip”第一眼看到的不只是一堆Java和Vue文件还有一个能直接导入MySQL的SQL脚本。很多第一次接触前后端分离项目的同学习惯性先点开源码开始读结果被环境问题卡了一整天。我的建议正好反过来先把数据库导进去把两个终端跑起来再回到代码里看每一层在干什么。这份资源能解决的不只是“交一份作业”它把用户、商品、购物车、订单、后台管理这几个商城核心模块串成了一个完整闭环适合计算机专业做课程设计、毕业设计也适合刚转Java开发的人拿真实项目练手。2. 项目结构拆解SpringBoot后端与Vue前端各自管什么先读懂再动手2.1 后端分层Controller-Service-Mapper 三层结构与选型理由拿到压缩包后先别急着运行把整体目录扫一遍比看单文件重要得多。这个项目的后端是标准的 SpringBoot Maven 工程前端是独立的 Vue 工程两者通过 JSON 接口通信。后端目录结构一般长这样shopping-mall/ ├── pom.xml ├── src/main/java/com/example/mall/ │ ├── MallApplication.java │ ├── controller/ │ │ ├── UserController.java │ │ ├── ProductController.java │ │ ├── CartController.java │ │ └── OrderController.java │ ├── service/ │ │ └── impl/ │ ├── mapper/ │ ├── entity/ │ ├── config/ │ │ ├── WebMvcConfig.java │ │ └── JwtInterceptor.java │ ├── common/ │ │ └── Result.java │ └── utils/ │ └── JwtUtil.java └── src/main/resources/ ├── application.yml └── mapper/ ├── ProductMapper.xml └── OrderMapper.xml这套结构是 Java 后端最常见的分层Controller 只做参数接收和结果包装Service 写业务逻辑Mapper 负责数据库访问。Entity 对应表结构DTO/VO 通常在 service 和 controller 之间传递。选型上SpringBoot 相比传统 SSM 最大优势是“约定优于配置”内嵌 Tomcat 省掉一堆 XMLMyBatis 则把 SQL 放在 mapper.xml 里复杂查询和动态拼接时候好排查也比 JPA 更容易向答辩老师讲清楚每一条 SQL 是怎么写的。2.2 前端模块Vue Router、Vuex 与 Element UI 的页面组织前端目录通常是标准 Vue 脚手架结构用 Vue Router 管理路由Vuex 存登录状态Element UI 提供现成的表格、表单、弹窗组件。目录大致如下frontend/ ├── package.json ├── vue.config.js ├── src/ │ ├── main.js │ ├── router/index.js │ ├── store/index.js │ ├── api/ │ │ ├── request.js │ │ ├── user.js │ │ └── product.js │ ├── views/ │ │ ├── Home.vue │ │ ├── ProductList.vue │ │ ├── Cart.vue │ │ ├── Order.vue │ │ └── admin/ │ │ ├── Dashboard.vue │ │ └── ProductManage.vue │ └── components/ │ ├── Header.vue │ └── Pagination.vue └── public/Vue Router 这里一般会区分普通用户路由和后台管理路由路由守卫里判断本地有没有 token没有就跳回登录页。Vuex 负责把登录接口返回的用户信息和 token 存到内存同时同步一份到 localStorage这样刷新页面后还能恢复登录状态。Element UI 的表格列里经常会用到插槽来自定义操作按钮比如“上架/下架”“删除”这也是 Vue 组件化最实用的特性之一。前后端对应关系很清晰前端api/user.js里的login请求对应后端UserController的/api/user/login前端api/product.js里的getList对应ProductController的/api/product/list。理解了这张对应表读代码时就能顺着一条请求链路从前端页面追到 SQL 语句。3. 本地跑通两个终端把前后端拉起来环境与配置逐项说清3.1 环境准备JDK、Maven、Node.js、MySQL 版本怎么选这份源码踩坑最多的不是代码本身而是环境版本。常见组合是 JDK 1.8 Maven 3.6 Node 14/16 MySQL 5.7/8.0。SpringBoot 2.x 对 JDK 1.8 最友好不要一上来就用 JDK 17 甚至更高版本后面会踩“springboot版本太高”导致的依赖兼容问题。先检查本机环境java -version mvn -version node -v npm -v mysql --version如果 node 版本大于 16老项目的node-sass很容易编译失败后面避坑章节我会专门说这个。如果本机已经装了更高版本建议用 nvm 切到 Node 14或者改用sass替代node-sass。MySQL 8.0 需要把 JDBC 驱动换成com.mysql.cj.jdbc.Driver并且 URL 上加serverTimezoneAsia/Shanghai否则启动时会报时区错误。3.2 导入数据库并配置 application.yml数据库脚本一般放在压缩包根目录文件名类似mall.sql或db/mall.sql。先建库再导入避免脚本里没有建库语句时直接source报错mysql -u root -p CREATE DATABASE IF NOT EXISTS mall DEFAULT CHARACTER SET utf8mb4; USE mall; SOURCE /path/to/mall.sql;导入后检查一下表数量通常有user、product、category、cart、order、order_item这几张核心表。如果脚本里有测试数据商品表应该有十几条记录登录表里也应该有一个预设账号比如admin / 123456这些在答辩演示时能省不少事。接下来改后端配置找到src/main/resources/application.ymlserver: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/mall?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true这里三个最关键参数数据库名mall要和导入时一致用户名密码改成你本机的characterEncodingutf8保证中文不乱码。MyBatis 的map-underscore-to-camel-case打开后数据库字段create_time能自动映射到 Java 属性createTime不用写一堆resultMap。3.3 启动后端与前端验证第一个接口后端用 IDEA 直接打开工程等 Maven 依赖下载完运行MallApplication主类。命令行启动也可以但不方便看 SQL 日志所以我还是建议用 IDEA。确认控制台出现 “Started MallApplication” 后先验证后端接口通不通curl -X POST http://localhost:8080/api/user/login \ -H Content-Type: application/json \ -d {username:admin,password:123456}正常会返回一个 JSON里面带token字段。这时候后端已经跑通前端再跟上。打开frontend目录npm install npm run serve前端默认运行在http://localhost:8081。如果页面能打开但请求后端 404最常见原因是跨域。项目里一般会用vue.config.js配代理module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } };代理配置好后前端请求/api/user/login会被转发到后端 8080不会触发浏览器的跨域限制。这一步走通后整个项目的最小闭环就建立起来了注册、登录、浏览商品、加购物车、下单结算每一步都能在页面上点出来。4. 核心功能代码走读登录鉴权、商品检索、购物车与订单落库4.1 JWT登录流程从Controller到Interceptor登录是这个项目里第一个完整的前后端交互链路。前端拿到用户名密码发给后端后端检查数据库里的用户记录校验通过后用 JWT 生成 token前端把 token 存到 localStorage之后每次请求都带上。代码一般在UserControllerRestController RequestMapping(/api/user) public class UserController { Autowired private UserService userService; PostMapping(/login) public Result login(RequestBody LoginDTO dto) { User user userService.login(dto.getUsername(), dto.getPassword()); if (user null) { return Result.error(用户名或密码错误); } String token JwtUtil.generateToken(user.getId(), user.getUsername()); return Result.success(Collections.singletonMap(token, token)); } }Controller 里不写具体校验逻辑只负责调 service 和封装返回这种写法后续扩展“记住我”“验证码”时改起来都很干净。JwtUtil.generateToken一般会设置过期时间常见参数是 24 小时密钥写在配置文件里不要硬编码在代码中。核心是拦截器public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token request.getHeader(Authorization); if (token ! null JwtUtil.verify(token)) { return true; } response.setStatus(401); return false; } }拦截器在WebMvcConfig里注册时要放行登录、注册和前端静态资源请求。如果发现登录后跳转页面正常但一调商品接口就 401十有八九是拦截器把不需要拦截的路径也拦了或者前端请求头里没有带Authorization。4.2 商品检索与MyBatis动态SQL分页和搜索怎么拼商品列表是商城首页的核心通常要支持按分类筛选、按关键词搜索、分页排序。MyBatis 在这个场景下的优势非常明显动态 SQL 可以按需拼接条件。ProductMapper.xml里常见写法select idselectProductPage resultTypecom.example.mall.entity.Product SELECT id, name, price, stock, image, category_id FROM product where if testkeyword ! null and keyword ! AND name LIKE CONCAT(%, #{keyword}, %) /if if testcategoryId ! null AND category_id #{categoryId} /if /where ORDER BY id DESC LIMIT #{offset}, #{pageSize} /select这里的#{}是预编译参数能防 SQL 注入where标签会自动处理第一个条件前面多余的AND。调用时 service 层需要算好offset比如第 2 页、每页 10 条offset (pageNum - 1) * pageSize。分页查询还要配一个count查询前端分页组件才知道总共多少页。很多新手只写 list 查询不写 count结果前端翻页总显示只有一页这就是没有理解 MyBatis 分页需要“两条 SQL”配合。另外要注意商品列表返回给前端的字段里不应该包含stock之外的所有内部字段比如创建时间这类。通常用一个ProductVO来输出避免把数据库字段原样暴露。4.3 订单状态机与库存扣减事务与并发边界订单流程比登录和商品查询要复杂得多也是毕业设计答辩时的高频提问点。一个基础的下单逻辑是创建订单主表、创建订单明细、扣减库存、清空购物车。这些操作必须在一个事务里否则会出现“订单建了但库存没扣”“购物车清空失败但订单成功”这类脏数据。Service public class OrderServiceImpl implements OrderService { Autowired private OrderMapper orderMapper; Autowired private ProductMapper productMapper; Override Transactional(rollbackFor Exception.class) public Long createOrder(OrderCreateDTO dto, Long userId) { Order order new Order(); order.setUserId(userId); order.setTotalAmount(dto.getTotalAmount()); order.setStatus(0); // 0-待支付 orderMapper.insert(order); Long orderId order.getId(); for (OrderItemDTO item : dto.getItems()) { int rows productMapper.deductStock(item.getProductId(), item.getQuantity()); if (rows 0) { throw new RuntimeException(库存不足); } OrderItem orderItem new OrderItem(); orderItem.setOrderId(orderId); orderItem.setProductId(item.getProductId()); orderItem.setQuantity(item.getQuantity()); orderMapper.insertItem(orderItem); } cartMapper.clearCart(userId); return orderId; } }Transactional(rollbackFor Exception.class)确保任何一步抛异常时前面已经执行的insert和update全部回滚。deductStock的 SQL 是关键UPDATE product SET stock stock - #{num} WHERE id #{productId} AND stock #{num}stock #{num}这个条件很巧妙它让数据库在并发下单时只允许库存足够的更新成功受影响行数为 0 就说明库存不够业务层直接抛异常回滚。如果没有这行判断两个请求同时读到库存 1同时扣成 0就会出现超卖。这是并发场景下最基础、最好用的防超卖写法比先查再更稳得多。5. 避坑/常见问题毕设源码从导入到部署的五个高频翻车点5.1 npm install 时 node-sass 编译失败现象前端执行npm install控制台抛出一堆node-gyp错误关键字是gyp ERR! stack Python not found或node-sass二进制缺失最后安装失败。原因老项目里用的node-sass依赖节点版本非常严格。Node 16 以上基本都会编译失败因为要下载的预编译二进制找不到对应版本只能现场用 Python 和 C 编译而多数 Windows 机器根本没有编译环境。解决最稳妥的办法是用 nvm 切换到 Node 14然后删除node_modules和package-lock.json重新npm install。如果不想切版本也可以在package.json里把node-sass替换成sass代码里import的写法几乎不变。这个坑我每次帮人看毕设都要排一次现在拿到新项目会先看一眼package.json里有没有node-sass有的话环境先行。5.2 数据库连接失败Access denied 或 Unknown database现象后端启动后控制台报Access denied for user rootlocalhost或者Unknown database mall有时候是Communications link failure。原因前者是application.yml里的账号密码和本机 MySQL 不一致或者 MySQL 8 的密码加密规则与旧驱动不兼容后者是 SQL 脚本没导入成功或者配置里库名写错。解决先确认 SQL 导入是否完整进入 MySQL 后用USE mall; SHOW TABLES;看表是否存在。然后核对配置如果本机装的 MySQL 8.0驱动要写com.mysql.cj.jdbc.DriverURL 上加serverTimezoneAsia/Shanghai如果账号密码都对但仍报Communications link failure检查 MySQL 服务是否启动以及 3306 端口是不是被占用。这一步过了后端启动基本就顺了。5.3 前后端都能启动但登录请求 404 或 500现象前端页面能打开输入预设账号登录浏览器 Network 面板里请求标红要么 404要么 500响应里提示Cross origin。原因404 大多是请求地址没走代理前端直接请求http://localhost:8080/api/user/login而后端接口路径其实是/api/user/login但开发环境下后端没有开启 CORS浏览器拦截跨域请求500 则可能是数据库连接有问题或参数名对不上。解决前端开发环境下优先用vue.config.js里的proxy所有请求都走/api前缀由代理转发到后端。确认前端request.js里的 baseURL 不要写成绝对地址统一用相对路径。如果后端确实开启了跨域需要实现WebMvcConfigurer里的addCorsMappings允许前端来源地址访问。我一般习惯两者都配代理留给开发用CORS 留给以后部署联调用。5.4 接口返回中文乱码现象登录成功后页面显示的用户昵称、商品名称全是问号或者乱码切换到商品列表也一样。原因最常见的是 MySQL 连接 URL 没指定characterEncodingutf8或者数据库表本身用latin1建的另一个可能原因是 SQL 脚本导入时客户端字符集不一致导致库里存的就已经是乱码。解决先改application.yml里的 JDBC URL加上useUnicodetruecharacterEncodingutf8然后确认 MySQL 表字符集是utf8mb4执行ALTER TABLE product CONVERT TO CHARACTER SET utf8mb4;可以补救。如果库里已经是乱码改连接方式也没用只能重新导入一份干净的 SQL 脚本这次导入前先执行SET NAMES utf8mb4;。这个坑最容易排查时间浪费在“前端显示乱码”上其实源头在数据库。5.5 换一台电脑后项目跑不起来版本不匹配连环坑现象压缩包在一台机器上跑得好好的拷到另一台电脑后端报ClassNotFoundException或Failed to determine embedded database driver name前端启动后控制台报语法错误。原因这不是项目代码的问题是环境版本不一致。新电脑装了 JDK 17 或 Node 18SpringBoot 2.x 的旧依赖在这些新版本上不一定兼容数据库版本从 5.7 换到 8.0驱动和 URL 参数也要跟着变。解决先固定环境版本再启动项目。后端安装 JDK 1.8IDEA 的 Project Structure 里把 SDK 指到 1.8Maven 的 compiler 配置也改成 1.8前端把 Node 切到 14。如果项目里的 SpringBoot 版本太低导致 JDK 17 实在跑不起来也可以选择升级 SpringBoot 版本但那样牵连的依赖更多不如装一个 JDK 8 来得快。我自己的习惯是压缩包里放一个环境说明.txt把 JDK、Node、MySQL 版本和启动顺序写清楚省得每次换机器都要重新猜。6. 进阶用法加一个订单统计接口让毕业设计从“能跑”变“能讲”很多拿到这份源码的人跑通之后就停在了“演示能点”的层面。但答辩时老师最常问的不是某个页面怎么实现而是“你这个系统有没有自己的思路”。一个很实用的做法是在现有订单表基础上加一个统计接口用数据说话。后端先写一个OrderStatsVO包含month和amount两个字段然后在OrderMapper里加一条聚合查询select idselectMonthlySales resultTypecom.example.mall.vo.OrderStatsVO SELECT DATE_FORMAT(create_time, %Y-%m) AS month, SUM(total_amount) AS amount FROM orders WHERE status 2 GROUP BY DATE_FORMAT(create_time, %Y-%m) ORDER BY month DESC LIMIT 6 /select这里只统计已支付状态的订单status 2是订单状态定义里的“已完成”具体数字要根据你自己项目里的状态枚举调整。在OrderController里加一个/api/order/statistics接口返回最近六个月的销售额趋势。前端在后台管理页里用一个表格或者简单的柱状图展示这个列表答辩时就能对着数据说“哪个月是销售高峰、为什么最高我们系统做了什么促销活动。”如果还想再进一步可以把前端打包后放进 SpringBoot 的resources/static目录这样部署时只需要启动一个 8080 端口不用再单独跑 Node 服务也能避开“两个服务怎么同时给老师演示”这种尴尬问题。操作不复杂npm run build生成dist把dist里的文件复制到后端的static目录再启动一次后端就能直接访问。从那以后我每次拿到新项目都会强制自己先跑通最小闭环再读核心代码最后加一个小功能点才算真正接手。这个过程能帮我快速区分“别人的代码”和“自己能讲清楚的代码”希望你也能在这份源码上跑出点自己的东西。希望帮到你。本文还有配套的精品资源点击获取
简介基于SpringBootVue的购物商城管理系统是一套完整可运行的高分毕业设计项目面向计算机相关专业学生及需要快速搭建前后端分离项目的开发者。项目采用SpringBoot提供后端接口、Vue构建管理端页面并配有数据库初始化脚本代码为作者手工编写结构规范适合作为毕业设计、期末大作业或课程设计的参考范本。压缩包共262个文件约1.51MB涵盖Java后端源码、Vue前端页面、JS脚本、XML配置、SQL数据库文件及项目说明文档等核心业务模块与配置一目了然。已有3717人学习浏览项目完整度高内置说明文档可辅助快速部署。压缩包内除购物商城前后端源码外还包含数据库表结构、接口控制类、Service业务实现、实体类等关键代码便于读者理解订单、用户、商品等模块的开发思路也支持在此基础上扩展二次开发。1. 基于SpringBootVue的购物商城管理系统这份高分毕设源码先跑通再读代码打开这个“基于SpringBootVue的购物商城管理系统源码数据库高分毕业设计.zip”第一眼看到的不只是一堆Java和Vue文件还有一个能直接导入MySQL的SQL脚本。很多第一次接触前后端分离项目的同学习惯性先点开源码开始读结果被环境问题卡了一整天。我的建议正好反过来先把数据库导进去把两个终端跑起来再回到代码里看每一层在干什么。这份资源能解决的不只是“交一份作业”它把用户、商品、购物车、订单、后台管理这几个商城核心模块串成了一个完整闭环适合计算机专业做课程设计、毕业设计也适合刚转Java开发的人拿真实项目练手。2. 项目结构拆解SpringBoot后端与Vue前端各自管什么先读懂再动手2.1 后端分层Controller-Service-Mapper 三层结构与选型理由拿到压缩包后先别急着运行把整体目录扫一遍比看单文件重要得多。这个项目的后端是标准的 SpringBoot Maven 工程前端是独立的 Vue 工程两者通过 JSON 接口通信。后端目录结构一般长这样shopping-mall/ ├── pom.xml ├── src/main/java/com/example/mall/ │ ├── MallApplication.java │ ├── controller/ │ │ ├── UserController.java │ │ ├── ProductController.java │ │ ├── CartController.java │ │ └── OrderController.java │ ├── service/ │ │ └── impl/ │ ├── mapper/ │ ├── entity/ │ ├── config/ │ │ ├── WebMvcConfig.java │ │ └── JwtInterceptor.java │ ├── common/ │ │ └── Result.java │ └── utils/ │ └── JwtUtil.java └── src/main/resources/ ├── application.yml └── mapper/ ├── ProductMapper.xml └── OrderMapper.xml这套结构是 Java 后端最常见的分层Controller 只做参数接收和结果包装Service 写业务逻辑Mapper 负责数据库访问。Entity 对应表结构DTO/VO 通常在 service 和 controller 之间传递。选型上SpringBoot 相比传统 SSM 最大优势是“约定优于配置”内嵌 Tomcat 省掉一堆 XMLMyBatis 则把 SQL 放在 mapper.xml 里复杂查询和动态拼接时候好排查也比 JPA 更容易向答辩老师讲清楚每一条 SQL 是怎么写的。2.2 前端模块Vue Router、Vuex 与 Element UI 的页面组织前端目录通常是标准 Vue 脚手架结构用 Vue Router 管理路由Vuex 存登录状态Element UI 提供现成的表格、表单、弹窗组件。目录大致如下frontend/ ├── package.json ├── vue.config.js ├── src/ │ ├── main.js │ ├── router/index.js │ ├── store/index.js │ ├── api/ │ │ ├── request.js │ │ ├── user.js │ │ └── product.js │ ├── views/ │ │ ├── Home.vue │ │ ├── ProductList.vue │ │ ├── Cart.vue │ │ ├── Order.vue │ │ └── admin/ │ │ ├── Dashboard.vue │ │ └── ProductManage.vue │ └── components/ │ ├── Header.vue │ └── Pagination.vue └── public/Vue Router 这里一般会区分普通用户路由和后台管理路由路由守卫里判断本地有没有 token没有就跳回登录页。Vuex 负责把登录接口返回的用户信息和 token 存到内存同时同步一份到 localStorage这样刷新页面后还能恢复登录状态。Element UI 的表格列里经常会用到插槽来自定义操作按钮比如“上架/下架”“删除”这也是 Vue 组件化最实用的特性之一。前后端对应关系很清晰前端api/user.js里的login请求对应后端UserController的/api/user/login前端api/product.js里的getList对应ProductController的/api/product/list。理解了这张对应表读代码时就能顺着一条请求链路从前端页面追到 SQL 语句。3. 本地跑通两个终端把前后端拉起来环境与配置逐项说清3.1 环境准备JDK、Maven、Node.js、MySQL 版本怎么选这份源码踩坑最多的不是代码本身而是环境版本。常见组合是 JDK 1.8 Maven 3.6 Node 14/16 MySQL 5.7/8.0。SpringBoot 2.x 对 JDK 1.8 最友好不要一上来就用 JDK 17 甚至更高版本后面会踩“springboot版本太高”导致的依赖兼容问题。先检查本机环境java -version mvn -version node -v npm -v mysql --version如果 node 版本大于 16老项目的node-sass很容易编译失败后面避坑章节我会专门说这个。如果本机已经装了更高版本建议用 nvm 切到 Node 14或者改用sass替代node-sass。MySQL 8.0 需要把 JDBC 驱动换成com.mysql.cj.jdbc.Driver并且 URL 上加serverTimezoneAsia/Shanghai否则启动时会报时区错误。3.2 导入数据库并配置 application.yml数据库脚本一般放在压缩包根目录文件名类似mall.sql或db/mall.sql。先建库再导入避免脚本里没有建库语句时直接source报错mysql -u root -p CREATE DATABASE IF NOT EXISTS mall DEFAULT CHARACTER SET utf8mb4; USE mall; SOURCE /path/to/mall.sql;导入后检查一下表数量通常有user、product、category、cart、order、order_item这几张核心表。如果脚本里有测试数据商品表应该有十几条记录登录表里也应该有一个预设账号比如admin / 123456这些在答辩演示时能省不少事。接下来改后端配置找到src/main/resources/application.ymlserver: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/mall?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true这里三个最关键参数数据库名mall要和导入时一致用户名密码改成你本机的characterEncodingutf8保证中文不乱码。MyBatis 的map-underscore-to-camel-case打开后数据库字段create_time能自动映射到 Java 属性createTime不用写一堆resultMap。3.3 启动后端与前端验证第一个接口后端用 IDEA 直接打开工程等 Maven 依赖下载完运行MallApplication主类。命令行启动也可以但不方便看 SQL 日志所以我还是建议用 IDEA。确认控制台出现 “Started MallApplication” 后先验证后端接口通不通curl -X POST http://localhost:8080/api/user/login \ -H Content-Type: application/json \ -d {username:admin,password:123456}正常会返回一个 JSON里面带token字段。这时候后端已经跑通前端再跟上。打开frontend目录npm install npm run serve前端默认运行在http://localhost:8081。如果页面能打开但请求后端 404最常见原因是跨域。项目里一般会用vue.config.js配代理module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } };代理配置好后前端请求/api/user/login会被转发到后端 8080不会触发浏览器的跨域限制。这一步走通后整个项目的最小闭环就建立起来了注册、登录、浏览商品、加购物车、下单结算每一步都能在页面上点出来。4. 核心功能代码走读登录鉴权、商品检索、购物车与订单落库4.1 JWT登录流程从Controller到Interceptor登录是这个项目里第一个完整的前后端交互链路。前端拿到用户名密码发给后端后端检查数据库里的用户记录校验通过后用 JWT 生成 token前端把 token 存到 localStorage之后每次请求都带上。代码一般在UserControllerRestController RequestMapping(/api/user) public class UserController { Autowired private UserService userService; PostMapping(/login) public Result login(RequestBody LoginDTO dto) { User user userService.login(dto.getUsername(), dto.getPassword()); if (user null) { return Result.error(用户名或密码错误); } String token JwtUtil.generateToken(user.getId(), user.getUsername()); return Result.success(Collections.singletonMap(token, token)); } }Controller 里不写具体校验逻辑只负责调 service 和封装返回这种写法后续扩展“记住我”“验证码”时改起来都很干净。JwtUtil.generateToken一般会设置过期时间常见参数是 24 小时密钥写在配置文件里不要硬编码在代码中。核心是拦截器public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token request.getHeader(Authorization); if (token ! null JwtUtil.verify(token)) { return true; } response.setStatus(401); return false; } }拦截器在WebMvcConfig里注册时要放行登录、注册和前端静态资源请求。如果发现登录后跳转页面正常但一调商品接口就 401十有八九是拦截器把不需要拦截的路径也拦了或者前端请求头里没有带Authorization。4.2 商品检索与MyBatis动态SQL分页和搜索怎么拼商品列表是商城首页的核心通常要支持按分类筛选、按关键词搜索、分页排序。MyBatis 在这个场景下的优势非常明显动态 SQL 可以按需拼接条件。ProductMapper.xml里常见写法select idselectProductPage resultTypecom.example.mall.entity.Product SELECT id, name, price, stock, image, category_id FROM product where if testkeyword ! null and keyword ! AND name LIKE CONCAT(%, #{keyword}, %) /if if testcategoryId ! null AND category_id #{categoryId} /if /where ORDER BY id DESC LIMIT #{offset}, #{pageSize} /select这里的#{}是预编译参数能防 SQL 注入where标签会自动处理第一个条件前面多余的AND。调用时 service 层需要算好offset比如第 2 页、每页 10 条offset (pageNum - 1) * pageSize。分页查询还要配一个count查询前端分页组件才知道总共多少页。很多新手只写 list 查询不写 count结果前端翻页总显示只有一页这就是没有理解 MyBatis 分页需要“两条 SQL”配合。另外要注意商品列表返回给前端的字段里不应该包含stock之外的所有内部字段比如创建时间这类。通常用一个ProductVO来输出避免把数据库字段原样暴露。4.3 订单状态机与库存扣减事务与并发边界订单流程比登录和商品查询要复杂得多也是毕业设计答辩时的高频提问点。一个基础的下单逻辑是创建订单主表、创建订单明细、扣减库存、清空购物车。这些操作必须在一个事务里否则会出现“订单建了但库存没扣”“购物车清空失败但订单成功”这类脏数据。Service public class OrderServiceImpl implements OrderService { Autowired private OrderMapper orderMapper; Autowired private ProductMapper productMapper; Override Transactional(rollbackFor Exception.class) public Long createOrder(OrderCreateDTO dto, Long userId) { Order order new Order(); order.setUserId(userId); order.setTotalAmount(dto.getTotalAmount()); order.setStatus(0); // 0-待支付 orderMapper.insert(order); Long orderId order.getId(); for (OrderItemDTO item : dto.getItems()) { int rows productMapper.deductStock(item.getProductId(), item.getQuantity()); if (rows 0) { throw new RuntimeException(库存不足); } OrderItem orderItem new OrderItem(); orderItem.setOrderId(orderId); orderItem.setProductId(item.getProductId()); orderItem.setQuantity(item.getQuantity()); orderMapper.insertItem(orderItem); } cartMapper.clearCart(userId); return orderId; } }Transactional(rollbackFor Exception.class)确保任何一步抛异常时前面已经执行的insert和update全部回滚。deductStock的 SQL 是关键UPDATE product SET stock stock - #{num} WHERE id #{productId} AND stock #{num}stock #{num}这个条件很巧妙它让数据库在并发下单时只允许库存足够的更新成功受影响行数为 0 就说明库存不够业务层直接抛异常回滚。如果没有这行判断两个请求同时读到库存 1同时扣成 0就会出现超卖。这是并发场景下最基础、最好用的防超卖写法比先查再更稳得多。5. 避坑/常见问题毕设源码从导入到部署的五个高频翻车点5.1 npm install 时 node-sass 编译失败现象前端执行npm install控制台抛出一堆node-gyp错误关键字是gyp ERR! stack Python not found或node-sass二进制缺失最后安装失败。原因老项目里用的node-sass依赖节点版本非常严格。Node 16 以上基本都会编译失败因为要下载的预编译二进制找不到对应版本只能现场用 Python 和 C 编译而多数 Windows 机器根本没有编译环境。解决最稳妥的办法是用 nvm 切换到 Node 14然后删除node_modules和package-lock.json重新npm install。如果不想切版本也可以在package.json里把node-sass替换成sass代码里import的写法几乎不变。这个坑我每次帮人看毕设都要排一次现在拿到新项目会先看一眼package.json里有没有node-sass有的话环境先行。5.2 数据库连接失败Access denied 或 Unknown database现象后端启动后控制台报Access denied for user rootlocalhost或者Unknown database mall有时候是Communications link failure。原因前者是application.yml里的账号密码和本机 MySQL 不一致或者 MySQL 8 的密码加密规则与旧驱动不兼容后者是 SQL 脚本没导入成功或者配置里库名写错。解决先确认 SQL 导入是否完整进入 MySQL 后用USE mall; SHOW TABLES;看表是否存在。然后核对配置如果本机装的 MySQL 8.0驱动要写com.mysql.cj.jdbc.DriverURL 上加serverTimezoneAsia/Shanghai如果账号密码都对但仍报Communications link failure检查 MySQL 服务是否启动以及 3306 端口是不是被占用。这一步过了后端启动基本就顺了。5.3 前后端都能启动但登录请求 404 或 500现象前端页面能打开输入预设账号登录浏览器 Network 面板里请求标红要么 404要么 500响应里提示Cross origin。原因404 大多是请求地址没走代理前端直接请求http://localhost:8080/api/user/login而后端接口路径其实是/api/user/login但开发环境下后端没有开启 CORS浏览器拦截跨域请求500 则可能是数据库连接有问题或参数名对不上。解决前端开发环境下优先用vue.config.js里的proxy所有请求都走/api前缀由代理转发到后端。确认前端request.js里的 baseURL 不要写成绝对地址统一用相对路径。如果后端确实开启了跨域需要实现WebMvcConfigurer里的addCorsMappings允许前端来源地址访问。我一般习惯两者都配代理留给开发用CORS 留给以后部署联调用。5.4 接口返回中文乱码现象登录成功后页面显示的用户昵称、商品名称全是问号或者乱码切换到商品列表也一样。原因最常见的是 MySQL 连接 URL 没指定characterEncodingutf8或者数据库表本身用latin1建的另一个可能原因是 SQL 脚本导入时客户端字符集不一致导致库里存的就已经是乱码。解决先改application.yml里的 JDBC URL加上useUnicodetruecharacterEncodingutf8然后确认 MySQL 表字符集是utf8mb4执行ALTER TABLE product CONVERT TO CHARACTER SET utf8mb4;可以补救。如果库里已经是乱码改连接方式也没用只能重新导入一份干净的 SQL 脚本这次导入前先执行SET NAMES utf8mb4;。这个坑最容易排查时间浪费在“前端显示乱码”上其实源头在数据库。5.5 换一台电脑后项目跑不起来版本不匹配连环坑现象压缩包在一台机器上跑得好好的拷到另一台电脑后端报ClassNotFoundException或Failed to determine embedded database driver name前端启动后控制台报语法错误。原因这不是项目代码的问题是环境版本不一致。新电脑装了 JDK 17 或 Node 18SpringBoot 2.x 的旧依赖在这些新版本上不一定兼容数据库版本从 5.7 换到 8.0驱动和 URL 参数也要跟着变。解决先固定环境版本再启动项目。后端安装 JDK 1.8IDEA 的 Project Structure 里把 SDK 指到 1.8Maven 的 compiler 配置也改成 1.8前端把 Node 切到 14。如果项目里的 SpringBoot 版本太低导致 JDK 17 实在跑不起来也可以选择升级 SpringBoot 版本但那样牵连的依赖更多不如装一个 JDK 8 来得快。我自己的习惯是压缩包里放一个环境说明.txt把 JDK、Node、MySQL 版本和启动顺序写清楚省得每次换机器都要重新猜。6. 进阶用法加一个订单统计接口让毕业设计从“能跑”变“能讲”很多拿到这份源码的人跑通之后就停在了“演示能点”的层面。但答辩时老师最常问的不是某个页面怎么实现而是“你这个系统有没有自己的思路”。一个很实用的做法是在现有订单表基础上加一个统计接口用数据说话。后端先写一个OrderStatsVO包含month和amount两个字段然后在OrderMapper里加一条聚合查询select idselectMonthlySales resultTypecom.example.mall.vo.OrderStatsVO SELECT DATE_FORMAT(create_time, %Y-%m) AS month, SUM(total_amount) AS amount FROM orders WHERE status 2 GROUP BY DATE_FORMAT(create_time, %Y-%m) ORDER BY month DESC LIMIT 6 /select这里只统计已支付状态的订单status 2是订单状态定义里的“已完成”具体数字要根据你自己项目里的状态枚举调整。在OrderController里加一个/api/order/statistics接口返回最近六个月的销售额趋势。前端在后台管理页里用一个表格或者简单的柱状图展示这个列表答辩时就能对着数据说“哪个月是销售高峰、为什么最高我们系统做了什么促销活动。”如果还想再进一步可以把前端打包后放进 SpringBoot 的resources/static目录这样部署时只需要启动一个 8080 端口不用再单独跑 Node 服务也能避开“两个服务怎么同时给老师演示”这种尴尬问题。操作不复杂npm run build生成dist把dist里的文件复制到后端的static目录再启动一次后端就能直接访问。从那以后我每次拿到新项目都会强制自己先跑通最小闭环再读核心代码最后加一个小功能点才算真正接手。这个过程能帮我快速区分“别人的代码”和“自己能讲清楚的代码”希望你也能在这份源码上跑出点自己的东西。希望帮到你。本文还有配套的精品资源点击获取
：用 TaoToken 统一 Key 追踪榜单项目 API 调用)
