企业官网建设流程全解析

1. 代码获取

https://blog.xiaobias.com/article/7

2. 项目简介

本项目为一款在线拍卖系统，提供线上商品拍卖功能。系统包含前端用户门户（基于 layui）和后端管理界面（基于 Vue + Element UI），支持用户注册/登录、浏览拍卖商品、参与竞拍、生成历史竞拍记录、管理员审核竞拍、生成订单及支付等完整流程。数据库采用 MySQL，后端使用 Spring Boot + MyBatis-Plus 框架，权限控制基于 Shiro 和自定义 Token 机制。

3. 技术栈

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 业务流程示例

1. 用户注册/登录 → 进入商品列表页。
2. 选择“竞拍中”的商品 → 点击“竞拍”按钮，填写出价（系统逻辑未完全展示，但前端会携带用户信息提交至lishijingpai表）。
3. 管理员后台查看历史竞拍记录 → 审核通过 → 系统自动生成竞拍订单（jingpaidingdan表）。
4. 用户查看订单 → 点击“支付”（模拟） → 订单状态变为“已支付”。
5. 管理员可管理轮播图、公告等，维护系统首页内容。

5. 部分代码

5.1 数据库表结构示例（paimaishangpin）

CREATETABLE`paimaishangpin`(`id`bigint(20)NOTNULLAUTO_INCREMENTCOMMENT'主键',`addtime`timestampNOTNULLDEFAULTCURRENT_TIMESTAMPCOMMENT'创建时间',`shangpinmingcheng`varchar(200)NOTNULLCOMMENT'商品名称',`shangpinleixing`varchar(200)NOTNULLCOMMENT'商品类型',`tupian`varchar(200)DEFAULTNULLCOMMENT'图片',`jiage`int(11)NOTNULLCOMMENT'价格',`shangpinxiangqing`longtextCOMMENT'商品详情',`huodongshijian`varchar(200)DEFAULTNULLCOMMENT'活动时间',`huodongzhuangtai`varchar(200)DEFAULTNULLCOMMENT'活动状态',PRIMARYKEY(`id`))ENGINE=InnoDBDEFAULTCHARSET=utf8COMMENT='拍卖商品';

5.2 后端 Controller 示例（竞拍订单）

@RestController@RequestMapping("/jingpaidingdan")publicclassJingpaidingdanController{@AutowiredprivateJingpaidingdanServicejingpaidingdanService;@RequestMapping("/page")publicRpage(@RequestParamMap<String,Object>params,JingpaidingdanEntityjingpaidingdan,HttpServletRequestrequest){StringtableName=request.getSession().getAttribute("tableName").toString();if(tableName.equals("yonghu")){jingpaidingdan.setYonghuming((String)request.getSession().getAttribute("username"));}EntityWrapper<JingpaidingdanEntity>ew=newEntityWrapper<>();PageUtilspage=jingpaidingdanService.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:false

Use the tool for decoding
IGh0dHBzOi8vYmxvZy54aWFvYmlhcy5jb20vYXJ0aWNsZS83

6. 部分截图

7. 项目总结

本项目是一个功能较为完整的在线拍卖系统，涵盖用户端和管理端。后端采用 Spring Boot + MyBatis-Plus 实现 RESTful API，数据库设计合理，包含商品、竞拍、订单、用户等核心表。权限控制通过 Token + Session 结合 Shiro 实现，前端分为 layui 用户门户和 Vue Element 管理后台，满足不同角色的操作需求。

主要亮点：

• 竞拍流程完整（用户出价 → 管理员审核 → 生成订单 → 支付）。
• 支持轮播图动态配置和公告发布。
• 前后端分离，接口统一返回R对象。

整体而言，该项目可作为学习 Spring Boot + MyBatis-Plus + Vue 整合开发的参考案例，也可在此基础上扩展更复杂的拍卖规则和支付功能。