博主介绍国内互联网知名博主 · 5年软件开发师研究方向✔ 项目指导 | PPT | 代码实现 | 源码定制 | 代码讲解Java(SpringBoot / SSM) · Python · Vue ·Mysql数据库 · 微信小程序 · Android大数据 · 机器学习/深度学习 · React · Go · PHP · Node.js等源码免费获取如需完整源码及数据库脚本可关注并私信获取或在评论区留言交流技术问题一、 项目背景高校内学生存在大量闲置教材、数码、生活用品流转需求传统校园二手交易依靠微信群、朋友圈信息分散存在信息杂乱、交易无记录、缺少商品管理、沟通渠道匮乏等问题。 本校园二手交易平台采用前后端分离架构基于 SpringBoot Vue MySQL 开发面向在校师生搭建校内闲置物品交易渠道。平台区分普通用户前台、管理员后台实现二手商品发布浏览、购物车、下单订单、在线咨询、商品评论、订单状态流转完整电商业务适配校园场景的本地化二手交易需求。1.1 项目运行截图1.2系统业务目标普通用户浏览二手商品、商品详情查看、加入购物车、立即购买、发表评论、在线咨询卖家、管理个人发布商品、维护个人订单管理员用户管理、商品分类维护、二手商品审核管理、在线咨询处理、全量订单管理支持按订单状态分类筛选业务闭环商品发布→浏览选购→购物车→下单→订单状态流转→评论互动前后端解耦接口标准化支持后续拓展消息通知、交易担保等功能。1.3技术栈清单后端技术SpringBoot 2.7.x快速搭建 Java 服务简化 SSM 繁琐配置Spring MVC请求路由、参数校验、接口开发MyBatis-Plus持久层框架简化 MySQL CRUD 操作MySQL 8.0关系型数据库存储商品、订单、用户业务数据Lombok简化实体类 get/set 模板代码Hutool日期处理、文件工具、字符串工具类Maven项目依赖管理前端技术Vue2/Vue3 Element UI后台管理系统组件库Vue Router前端路由管理、菜单权限控制Axios前后端 HTTP 请求通信NProgress页面加载进度条原生 HTMLCSS前台商城首页、商品展示页面辅助工具Postman 接口调试、Navicat 数据库可视化、IDEA 开发工具二、架构选型对比与方案分析深度重点章节2.1 主流 Web 架构方案横向对比表格架构方案优势劣势适用场景本系统选型结论SSMJSP 单体架构开发入门简单无跨域问题前后端代码高度耦合前端改动需要重启后端扩展性差小型极简内部系统❌ 舍弃SpringBoot Vue 前后端分离前后端独立并行开发、UI 迭代灵活、接口可对外复用、职责清晰需要处理跨域、前后端需要统一接口契约B 端管理平台、商城类 Web 系统✅采用本方案SpringCloud 微服务架构支持高并发、水平扩容、服务拆分独立部署架构复杂度陡增运维成本高项目体量小造成过度设计大型分布式电商平台❌ 舍弃2.2 前后端分离核心难点剖析浏览器跨域问题Vue 前端端口与 SpringBoot 后端端口不一致同源策略拦截请求身份鉴权方案抉择Session 会话机制 vs Token 令牌机制电商核心并发问题购物车、订单创建、库存扣减并发安全统一接口规范前后端必须约定请求参数、异常返回格式。最终落地方案全局 CORS 跨域配置 Token 无状态鉴权统一 JSON 全局返回体。三、数据库设计3.1 核心数据表结构1用户表user区分普通买家、管理员角色存储平台账号信息CREATE TABLE user ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL COMMENT 登录账号, password VARCHAR(100) NOT NULL COMMENT 登录密码, name VARCHAR(50) COMMENT 姓名, phone VARCHAR(20), address VARCHAR(255), role VARCHAR(10) COMMENT 角色admin/user, create_time DATETIME );2商品分类表goods_type二手商品分类科技数码、二手书籍、服饰等CREATE TABLE goods_type ( id INT PRIMARY KEY AUTO_INCREMENT, type_name VARCHAR(50) NOT NULL COMMENT 分类名称, remark VARCHAR(200) );3二手商品表goods平台核心业务表存储用户发布闲置商品信息CREATE TABLE goods ( id INT PRIMARY KEY AUTO_INCREMENT, goods_name VARCHAR(100) NOT NULL COMMENT 商品名称, type_id INT COMMENT 商品分类id, brand VARCHAR(50) COMMENT 品牌, old_degree VARCHAR(20) COMMENT 新旧程度全新/九成新等, price_range VARCHAR(30) COMMENT 价格区间, price DECIMAL(10,2) COMMENT 实际售价, address VARCHAR(100) COMMENT 发货地点宿舍楼栋, cover VARCHAR(255) COMMENT 商品封面图片, description TEXT COMMENT 商品详情描述, publish_time DATETIME COMMENT 发布时间, user_id INT COMMENT 发布人id, status VARCHAR(20) COMMENT 商品状态上架/已售出/下架 );4购物车表shopping_cart用户收藏待购买商品CREATE TABLE shopping_cart ( id INT PRIMARY KEY AUTO_INCREMENT, user_id INT, goods_id INT, num INT DEFAULT 1 COMMENT 选购数量, create_time DATETIME );5订单表orders记录交易订单区分多种订单状态未支付、已支付、已发货、已完成、已取消、已退款CREATE TABLE orders ( id INT PRIMARY KEY AUTO_INCREMENT, order_no VARCHAR(50) UNIQUE NOT NULL COMMENT 订单编号, goods_id INT, user_id INT COMMENT 买家id, seller_id INT COMMENT 卖家id, num INT COMMENT 购买数量, price DECIMAL(10,2) COMMENT 商品单价, total_price DECIMAL(10,2) COMMENT 订单总价, pay_type VARCHAR(20) COMMENT 支付方式, status VARCHAR(20) COMMENT 订单状态, receiver_name VARCHAR(50), receiver_phone VARCHAR(20), receiver_address VARCHAR(255), remark VARCHAR(200), create_time DATETIME COMMENT 下单时间 );6商品评论表comment商品详情页评论功能CREATE TABLE comment ( id INT PRIMARY KEY AUTO_INCREMENT, goods_id INT, user_id INT, content TEXT COMMENT 评论内容, create_time DATETIME );7在线咨询表consult用户与卖家在线留言咨询CREATE TABLE consult ( id INT PRIMARY KEY AUTO_INCREMENT, goods_id INT, from_user INT COMMENT 咨询人, to_user INT COMMENT 卖家, content TEXT, reply TEXT COMMENT 卖家回复, create_time DATETIME );3.2 数据库设计思路说明采用逻辑外键设计不在数据库建立物理外键避免删除、更新锁表提升系统并发能力关联关系由业务代码维护订单独立分表商品表只维护基础信息实现商品信息与交易业务解耦订单使用独立订单号自增主键 id 仅用作数据库主键对外展示业务编号。四、系统功能模块划分4.1 前台商城普通用户访问首页轮播横幅、二手商品推荐、商品分区展示二手商品模块商品列表多条件筛选、商品详情、查看评论、在线咨询卖家购物车添加商品、修改数量、删除购物车、结算下单订单功能创建订单、查看订单、根据订单状态管理交易个人中心发布二手商品、管理我的商品、我的订单、个人信息修改。4.2 后台管理系统管理员访问用户管理平台所有账号信息维护商品分类管理新增、编辑、删除商品分类二手商品管理多条件查询商品、查看详情、查看评论、编辑、删除商品在线咨询管理查看用户咨询记录、处理咨询留言订单管理支持按订单状态未支付 / 已支付 / 已发货 / 已完成 / 已取消 / 已退款筛选统一管理全平台订单。五、核心技术实现详解5.1 SpringBoot 后端核心实现5.1.1 全局跨域配置前后端分离首要问题推荐全局配置类方式优于单个接口注解。Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE) .allowCredentials(true) .maxAge(3600); } }关键点拦截器场景下必须放行 OPTIONS 预检请求否则跨域配置失效。5.1.2 统一全局返回结果封装统一接口响应格式前端无需区分不同接口返回结构集中处理异常。Data public class ResultT { private Integer code; private String msg; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMsg(操作成功); result.setData(data); return result; } public static T ResultT fail(String msg) { ResultT result new Result(); result.setCode(500); result.setMsg(msg); return result; } }5.1.3 订单创建核心业务逻辑下单时校验商品状态、自动生成唯一订单编号、计算订单总价。// 1.生成唯一订单号时间戳随机数 String orderNo DateUtil.format(new Date(),yyyyMMddHHmmss) RandomUtil.randomNumbers(4); // 2.计算订单总价 BigDecimal totalPrice goods.getPrice().multiply(new BigDecimal(num)); // 3.组装订单实体写入数据库 Orders order new Orders(); order.setOrderNo(orderNo); order.setGoodsId(goodsId); order.setNum(num); order.setTotalPrice(totalPrice); order.setStatus(未支付);5.1.4 文件上传商品封面图片application.yml 配置上传大小限spring: servlet: multipart: max-file-size: 10MB max-request-size: 20MB后端接收前端 FormData 图片保存至服务器目录返回图片访问地址存入商品表。5.2 Vue 前端核心实现5.2.1 Axios 请求统一封装统一注入 token 令牌、拦截全局异常、统一处理返回码const service axios.create({ baseURL: http://localhost:8089/api, timeout: 10000 }) // 请求拦截器 service.interceptors.request.use(config { const token localStorage.getItem(token); if(token) { config.headers.Authorization token; } return config }) // 响应拦截器 service.interceptors.response.use(res { return res.data }, error { Message.error(网络请求异常); return Promise.reject(error); })5.2.2 商品列表多条件联合查询前台与后台商品列表支持商品名称、品牌、新旧程度、价格区间、发货地点多字段模糊筛选前端收集所有查询参数随请求传递。5.2.3 订单状态标签动态渲染根据后端返回订单状态字符串前端渲染不同样式标签区分未支付、已完成、已取消等订单。六、项目开发踩坑经验CSDN 文章高价值章节6.1 后端踩坑汇总MyBatis-Plus 分页查询失效原因缺少分页拦截器 Bean解决方案注册MybatisPlusInterceptor分页插件。图片上传后访问 404SpringBoot 不会自动映射自定义静态资源文件夹需要编写WebMvcConfigurer配置资源映射路径。并发下单超卖风险多用户同时购买同一件二手商品缺少并发控制优化方案使用数据库乐观锁更新商品状态时增加条件限制。Token 过期无感知前端未捕获 401 未授权状态码解决方案axios 响应拦截器捕获 401自动清除本地存储并跳转登录页。日期参数前后端传递转换异常前端字符串日期无法直接映射 LocalDate/LocalDateTime配置全局日期转换器。6.2 前端踩坑汇总跨域 OPTIONS 预检请求被登录拦截器拦截解决方案拦截器代码中判断请求方式放行 OPTIONS 请求。Element UI 表格分页切换查询条件丢失解决方案将所有筛选参数保存在 data 变量每次分页请求携带完整查询条件。购物车数量增减边界问题没有限制最小购买数量为 1出现 0、负数数量前端增加数值校验。6.3 业务逻辑踩坑汇总用户购买已经下架 / 已售出商品下单前缺少商品状态校验删除商品时未校验是否存在有效订单产生数据孤儿订单状态流转缺少状态机控制出现非法状态变更已完成订单再次发起支付。七、系统功能演示说明前台首页轮播横幅、二手商品推荐板块卡片形式展示商品封面、名称、分类、新旧程度商品详情页面展示商品完整参数、数量选择、加入购物车、立即购买、在线咨询、商品评论标签页管理员商品管理页面多条件搜索表格支持新增、修改、删除、查看评论管理员订单管理页面左侧菜单按订单状态分组支持订单编号、商品名称检索统一管理全平台交易订单。八、系统优化与拓展方向8.1 现有优化方案引入 Redis 缓存热门商品减轻 MySQL 查询压力订单状态采用状态机管理规范订单流转逻辑用户密码采用 BCrypt 加密存储杜绝明文密码添加接口参数全局校验防止非法参数传入。8.2 后续拓展功能新增消息通知订单状态变更推送站内消息接入简单支付模拟接口使用 ECharts 实现交易数据统计看板商品收藏功能、商品搜索关键词高亮移动端 H5 适配。九、总结本文实现的校园二手交易平台基于 SpringBootVue 前后端分离架构贴合高校闲置物品交易场景完整实现商城基础业务链路。文中对比了多种 Web 架构选型详细讲解跨域、订单创建、文件上传等核心功能实现同时整理大量开发阶段真实踩坑解决方案。项目代码规范、接口统一可直接作为课程设计、毕业设计、小型校园交易平台二次开发基础框架。
