基于SpringBoot2+vue2的在线拍卖系统

1. 代码获取https://blog.xiaobias.com/article/72. 项目简介本项目为一款在线拍卖系统提供线上商品拍卖功能。系统包含前端用户门户基于 layui和后端管理界面基于 Vue Element UI支持用户注册/登录、浏览拍卖商品、参与竞拍、生成历史竞拍记录、管理员审核竞拍、生成订单及支付等完整流程。数据库采用 MySQL后端使用 Spring Boot MyBatis-Plus 框架权限控制基于 Shiro 和自定义 Token 机制。3. 技术栈层级技术/框架说明后端框架Spring Boot 2.2.2.RELEASE提供 IOC、Web 支持ORM 框架MyBatis-Plus 2.3 MyBatis简化数据库操作支持分页数据库MySQL 5.7.32数据库springbootp0eo6权限控制Apache Shiro 1.3.2 自定义 Token登录认证、接口鉴权前端管理Vue 2 Element UI后台管理界面前端门户layui HTML/CSS/JS用户端页面含轮播图、商品列表、竞拍操作等工具库Hutool, Fastjson, Commons-lang3字符串处理、JSON、MD5 等构建工具Maven依赖管理4. 详细介绍4.1 系统角色管理员可管理用户、商品类型、拍卖商品、历史竞拍审核、竞拍订单、留言板、轮播图、竞拍公告等。普通用户可浏览拍卖商品、参与竞拍、查看自己的历史竞拍和订单、留言反馈、支付订单等。4.2 核心模块4.2.1 拍卖商品管理表paimaishangpin存储商品名称、类型、图片、起拍价格、商品详情、活动时间、活动状态竞拍中/已结束。管理员可增删改查拍卖商品前端用户可查看商品详情并点击“竞拍”参与。4.2.2 商品类型管理表shangpinleixing维护商品分类手机、数码、电器、书籍等用于商品筛选。4.2.3 历史竞拍用户点击“竞拍”后系统自动向表lishijingpai插入一条记录包含商品名称、类型、出价价格、用户信息、日期等。该记录默认sfsh是否审核为“否”需要管理员审核。管理员审核通过后该竞拍记录生效并自动生成对应的竞拍订单。4.2.4 竞拍订单表jingpaidingdan存储成交订单信息包括订单编号、商品名称、成交价格、用户信息、支付状态ispay。用户可在个人中心查看自己的订单并完成支付前端模拟支付按钮。4.2.5 用户管理表yonghu存储用户账号yonghuming、密码、姓名、性别、头像、身份证、手机、邮箱、地址。支持用户注册、登录、修改个人信息。4.2.6 留言板表messages存储用户留言及管理员回复。用户可发表留言管理员可回复。4.2.7 系统管理轮播图管理表config存储首页轮播图图片地址picture1~picture3等。竞拍公告表news存储公告标题、简介、图片、内容用户端可查看公告列表及详情。4.2.8 前后端分离与权限后端所有 API 均需携带Token头进行身份验证除IgnoreAuth标注的接口如登录、注册、部分列表查询。前端管理后台Vue通过http.js拦截器自动添加 Token。用户端页面通过localStorage存储 Token 和用户角色判断权限按钮显示。4.3 业务流程示例用户注册/登录 → 进入商品列表页。选择“竞拍中”的商品 → 点击“竞拍”按钮填写出价系统逻辑未完全展示但前端会携带用户信息提交至lishijingpai表。管理员后台查看历史竞拍记录 → 审核通过 → 系统自动生成竞拍订单jingpaidingdan表。用户查看订单 → 点击“支付”模拟 → 订单状态变为“已支付”。管理员可管理轮播图、公告等维护系统首页内容。5. 部分代码5.1 数据库表结构示例paimaishangpinCREATETABLEpaimaishangpin(idbigint(20)NOTNULLAUTO_INCREMENTCOMMENT主键,addtimetimestampNOTNULLDEFAULTCURRENT_TIMESTAMPCOMMENT创建时间,shangpinmingchengvarchar(200)NOTNULLCOMMENT商品名称,shangpinleixingvarchar(200)NOTNULLCOMMENT商品类型,tupianvarchar(200)DEFAULTNULLCOMMENT图片,jiageint(11)NOTNULLCOMMENT价格,shangpinxiangqinglongtextCOMMENT商品详情,huodongshijianvarchar(200)DEFAULTNULLCOMMENT活动时间,huodongzhuangtaivarchar(200)DEFAULTNULLCOMMENT活动状态,PRIMARYKEY(id))ENGINEInnoDBDEFAULTCHARSETutf8COMMENT拍卖商品;5.2 后端 Controller 示例竞拍订单RestControllerRequestMapping(/jingpaidingdan)publicclassJingpaidingdanController{AutowiredprivateJingpaidingdanServicejingpaidingdanService;RequestMapping(/page)publicRpage(RequestParamMapString,Objectparams,JingpaidingdanEntityjingpaidingdan,HttpServletRequestrequest){StringtableNamerequest.getSession().getAttribute(tableName).toString();if(tableName.equals(yonghu)){jingpaidingdan.setYonghuming((String)request.getSession().getAttribute(username));}EntityWrapperJingpaidingdanEntityewnewEntityWrapper();PageUtilspagejingpaidingdanService.queryPage(params,MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew,jingpaidingdan),params),params));returnR.ok().put(data,page);}// ... 其他增删改查方法}5.3 前端用户登录login.html片段http.request(data.role/login,get,data,function(res){layer.msg(登录成功,{time:2000,icon:6});localStorage.setItem(Token,res.token);localStorage.setItem(role,jquery(#role:checked).attr(title));localStorage.setItem(userTable,data.role);localStorage.setItem(adminName,data.username);// 跳转首页window.location.href../../index.html;});5.4 MyBatis-Plus 配置mybatis-plus:mapper-locations:classpath*:mapper/*.xmltypeAliasesPackage:com.entityglobal-config:id-type:1field-strategy:2db-column-underline:truelogic-delete-value:-1logic-not-delete-value:0configuration:map-underscore-to-camel-case:truecache-enabled:falseUse the tool for decodingIGh0dHBzOi8vYmxvZy54aWFvYmlhcy5jb20vYXJ0aWNsZS836. 部分截图7. 项目总结本项目是一个功能较为完整的在线拍卖系统涵盖用户端和管理端。后端采用 Spring Boot MyBatis-Plus 实现 RESTful API数据库设计合理包含商品、竞拍、订单、用户等核心表。权限控制通过 Token Session 结合 Shiro 实现前端分为 layui 用户门户和 Vue Element 管理后台满足不同角色的操作需求。主要亮点竞拍流程完整用户出价 → 管理员审核 → 生成订单 → 支付。支持轮播图动态配置和公告发布。前后端分离接口统一返回R对象。整体而言该项目可作为学习 Spring Boot MyBatis-Plus Vue 整合开发的参考案例也可在此基础上扩展更复杂的拍卖规则和支付功能。