1. 项目概述：前后端分离在线拍卖系统
这个基于SpringBoot+Vue+MyBatis+MySQL的在线拍卖系统，是我去年为一个收藏品交易平台开发的核心项目。相比传统单体架构，前后端分离设计让我们的开发效率提升了40%以上，特别是在拍卖倒计时、实时出价等高频交互场景下，Vue的响应式特性完美解决了页面频繁刷新的性能瓶颈。
系统采用经典的三层架构：
- 前端：Vue 2.6 + Element UI + Axios
- 后端：SpringBoot 2.3 + MyBatis-Plus 3.4
- 数据库：MySQL 8.0 + Redis缓存
实测在阿里云2核4G服务器上，系统可稳定支撑500+并发出价请求，关键就在于我们针对拍卖业务特点做了以下优化：
- 使用WebSocket实现出价实时推送
- Redis缓存热门拍品数据
- 数据库读写分离配置
特别提醒：MyBatis-Plus虽然简化了CRUD操作，但在处理动态SQL时如果使用${}拼接要特别注意SQL注入防护，我们项目就曾因此在安全扫描中被标记为中危漏洞。
2. 核心技术栈解析
2.1 SpringBoot后端设计要点
采用多模块Maven项目结构：
auction-system ├── auction-common // 公共模块 ├── auction-dao // 数据访问层 ├── auction-service // 业务逻辑层 └── auction-web // 控制层关键配置示例（application.yml片段）：
spring: datasource: url: jdbc:mysql://localhost:3306/auction?useSSL=false&serverTimezone=Asia/Shanghai username: root password: 加密密码建议使用Jasypt redis: host: 127.0.0.1 port: 6379 password:开发中遇到的典型问题及解决方案：
- 跨域问题：通过自定义CorsFilter解决
- 接口幂等性：为出价接口添加Redis分布式锁
- 参数校验：使用Hibernate Validator+自定义注解
2.2 Vue前端工程化实践
前端项目结构采用Vue CLI标准脚手架扩展：
src/ ├── api/ // 接口定义 ├── assets/ // 静态资源 ├── components/ // 公共组件 │ ├── CountDown.vue // 拍卖倒计时组件 │ └── BidList.vue // 出价记录组件 ├── router/ // 路由配置 ├── store/ // Vuex状态管理 └── views/ // 页面视图核心交互逻辑示例（出价按钮组件）：
// BidButton.vue methods: { async handleBid() { if (!this.isLogin) { this.$message.error('请先登录') return } try { const res = await bidApi({ itemId: this.itemId, price: this.currentPrice + this.step }) this.$emit('bid-success', res.data) } catch (e) { this.$message.error(e.message) } } }重要经验：Vue DevTools插件是调试必备工具，特别是在处理Vuex状态变更时能直观看到数据流动。
3. 数据库设计与优化
3.1 MySQL表结构设计
核心表关系图：
CREATE TABLE `auction_item` ( `id` bigint NOT NULL AUTO_INCREMENT, `name` varchar(100) NOT NULL COMMENT '拍品名称', `start_price` decimal(12,2) NOT NULL, `current_price` decimal(12,2) DEFAULT NULL, `start_time` datetime NOT NULL, `end_time` datetime NOT NULL, `status` tinyint NOT NULL COMMENT '0未开始 1进行中 2已结束', PRIMARY KEY (`id`), KEY `idx_status_time` (`status`,`end_time`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; CREATE TABLE `bid_record` ( `id` bigint NOT NULL AUTO_INCREMENT, `item_id` bigint NOT NULL, `user_id` bigint NOT NULL, `price` decimal(12,2) NOT NULL, `bid_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`), KEY `idx_item` (`item_id`), KEY `idx_user` (`user_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;3.2 性能优化方案
查询优化：
- 为拍卖列表添加复合索引(status,end_time)
- 使用JOIN替代子查询获取最高出价者信息
- 热门拍品数据缓存到Redis
事务控制：
@Transactional(rollbackFor = Exception.class) public BidResult placeBid(BidRequest request) { // 1. 校验拍品状态 // 2. 校验出价是否高于当前价 // 3. 记录出价 // 4. 更新拍品当前价 }- 分表策略：当bid_record表超过500万行时，按item_id哈希分表
4. 系统部署实战
4.1 生产环境部署清单
| 组件 | 版本 | 配置要求 |
|---|---|---|
| JDK | 1.8+ | 服务器基础环境 |
| MySQL | 8.0 | 主从架构 |
| Redis | 6.0+ | 持久化开启 |
| Nginx | 1.18+ | 负载均衡 |
| Node.js | 14.16+ | 前端构建 |
4.2 关键部署步骤
后端服务部署：
# 打包 mvn clean package -DskipTests # 启动（生产环境建议用nohup） java -jar auction-web.jar --spring.profiles.active=prod前端项目部署：
# 安装依赖 npm install --registry=https://registry.npm.taobao.org # 构建生产包 npm run build # Nginx配置示例 location / { root /usr/share/nginx/html/auction; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend-server; proxy_set_header Host $host; }4.3 运维监控方案
- SpringBoot Actuator健康检查
- Prometheus + Grafana监控JVM指标
- ELK日志收集系统
- 使用阿里云SLB实现负载均衡
5. 典型问题排查指南
5.1 出价延迟问题
现象：高峰期出价记录有3-5秒延迟 排查步骤：
- 检查Redis监控，发现CPU使用率峰值达90%
- 分析慢查询日志，发现BGSAVE阻塞主线程
- 解决方案：
- 升级Redis配置
- 改为阿里云Redis云服务
- 调整save策略为低峰期执行
5.2 MyBatis动态SQL注入风险
问题代码示例：
<select id="findItems" parameterType="map" resultMap="itemResult"> SELECT * FROM auction_item WHERE status = ${status} <if test="name != null"> AND name LIKE '%${name}%' </if> </select>安全改造方案：
- 全部改用#{}参数绑定
- 使用MyBatis-Plus的QueryWrapper构建查询
- 添加SQL注入过滤器
5.3 Vue跨域问题
开发环境解决方案：
// vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } }生产环境解决方案：
- Nginx反向代理配置
- 后端添加CORS过滤器
- 使用Spring Cloud Gateway统一网关
6. 项目扩展方向
- 支付系统集成：对接支付宝/微信支付接口
- 智能推荐：基于用户行为推荐相似拍品
- 移动端适配：开发React Native跨平台APP
- 区块链存证：将成交记录上链存证
- 直播拍卖：集成腾讯云直播SDK
在实现WebSocket集群时，我们最终采用了Redis的Pub/Sub功能来解决多节点间的消息同步问题，关键代码片段：
@Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.enableStompBrokerRelay("/topic") .setRelayHost(redisHost) .setRelayPort(redisPort); registry.setApplicationDestinationPrefixes("/app"); } }这个项目让我深刻体会到，一个健壮的拍卖系统不仅需要处理好常规的CRUD操作，更要特别注意并发控制、实时通信和数据一致性这些特殊场景。比如在最后1分钟有密集出价时，系统要确保每个出价都能被正确处理且所有用户看到的价格完全一致，这需要前后端密切配合。
