1. 项目概述:在线家具商城的技术架构选型
这个基于SpringBoot+Vue3+MyBatis的在线家具商城项目,采用了当前主流的前后端分离架构。作为一套完整的电商解决方案,它涵盖了商品展示、购物车、订单管理、支付对接等核心功能模块。选择这样的技术组合并非偶然——SpringBoot提供了企业级后端开发的高效脚手架,Vue3带来了现代化的前端交互体验,而MyBatis则保证了数据访问层的灵活可控。
在实际开发中,我们发现家具电商有几个特殊需求:需要展示大量高清产品图片(对前端性能有较高要求)、商品规格参数复杂(需要灵活的数据结构设计)、配送逻辑特殊(大件物流需要考虑体积重量)。这些业务特点直接影响了我们的技术决策。
2. 核心模块设计与实现
2.1 后端SpringBoot架构设计
我们采用经典的三层架构:
- Controller层:处理HTTP请求,参数校验
- Service层:业务逻辑实现
- DAO层:数据持久化操作
特别设计了几个核心业务类:
java复制// 商品领域模型示例
public class FurnitureProduct {
private Long id;
private String name;
private BigDecimal price;
private List<Specification> specs; // 家具规格参数
private List<String> imageUrls; // 多角度展示图片
// 其他字段及getter/setter
}
数据库表设计考虑了家具行业的特性:
- 商品表:包含常规字段外,增加了材质、尺寸等家具特有属性
- 规格参数表:使用JSON类型字段存储可变的规格配置
- 配送区域表:记录不同地区的大件物流支持情况
2.2 Vue3前端工程实践
前端采用Vue3+TypeScript组合开发,主要解决了以下技术难点:
- 图片懒加载优化:针对家具商品的高清大图,实现了Intersection Observer API的懒加载方案
typescript复制const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target as HTMLImageElement
img.src = img.dataset.src!
observer.unobserve(img)
}
})
})
-
复杂规格选择器:开发了支持多维规格(颜色、材质、尺寸)联动的组件,使用Vue的响应式系统管理选择状态
-
3D展示集成:通过Three.js实现了部分家具产品的360°旋转查看功能
2.3 MyBatis动态SQL实践
针对家具商城的复杂查询需求,我们大量使用了MyBatis的动态SQL能力:
xml复制<select id="searchProducts" resultType="FurnitureProduct">
SELECT * FROM furniture_product
<where>
<if test="categoryId != null">
AND category_id = #{categoryId}
</if>
<if test="minPrice != null">
AND price >= #{minPrice}
</if>
<if test="materials != null and materials.size() > 0">
AND material IN
<foreach collection="materials" item="material" open="(" separator="," close=")">
#{material}
</foreach>
</if>
</where>
ORDER BY
<choose>
<when test="sortBy == 'price_asc'">price ASC</when>
<when test="sortBy == 'price_desc'">price DESC</when>
<otherwise>create_time DESC</otherwise>
</choose>
</select>
特别注意:在安全扫描中发现的SQL注入风险,我们全部使用#{}参数绑定语法替代了${}拼接,并通过XML配置启用了MyBatis的严格模式。
3. 关键技术难点与解决方案
3.1 大文件上传与存储
家具商品需要展示多角度高清图片,我们实现了分片上传方案:
- 前端将文件分片(每片2MB)
- 使用MD5校验文件完整性
- 后端采用七牛云OSS存储
- 数据库只保存文件索引
核心上传代码:
java复制@PostMapping("/upload/chunk")
public ResponseEntity<String> uploadChunk(
@RequestParam("file") MultipartFile file,
@RequestParam("chunkNumber") int chunkNumber,
@RequestParam("totalChunks") int totalChunks,
@RequestParam("identifier") String identifier) {
// 验证分片
// 存储到临时目录
// 返回处理结果
}
3.2 分布式事务处理
订单创建涉及多个服务调用(库存、优惠券、支付),我们采用以下方案保证一致性:
- 本地消息表+定时任务补偿
- 关键操作实现幂等性
- 状态机管理订单生命周期
3.3 性能优化实践
-
缓存策略:
- Redis缓存热点商品信息
- 本地缓存(Caffeine)存储静态配置
- 多级缓存降级方案
-
MySQL优化:
- 为查询频繁的字段添加合适索引
- 大表进行历史数据归档
- 使用Explain分析慢查询
-
前端性能:
- 组件懒加载
- 图片WebP格式转换
- 关键资源预加载
4. 安全防护方案
4.1 常见Web安全防护
-
XSS防护:
- 前端使用DOMPurify过滤富文本
- 后端统一响应头设置X-XSS-Protection
-
CSRF防护:
- 使用Spring Security的CSRF Token机制
- 敏感操作增加二次验证
-
SQL注入:
- 严格的参数绑定
- MyBatis配置安全审计插件
4.2 业务安全设计
-
防刷单机制:
- 基于用户行为的限流策略
- 订单风控规则引擎
-
支付安全:
- 签名验证回调通知
- 支付状态对账机制
-
数据脱敏:
- 敏感字段加密存储
- 日志信息过滤
5. 部署与运维方案
5.1 容器化部署
使用Docker Compose定义服务:
yaml复制version: '3'
services:
mysql:
image: mysql:5.7
environment:
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
volumes:
- mysql_data:/var/lib/mysql
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
frontend:
build: ./frontend
ports:
- "80:80"
5.2 监控与日志
-
监控体系:
- Prometheus采集指标
- Grafana可视化看板
- 关键业务指标监控
-
日志方案:
- ELK日志收集
- 业务日志分级管理
- 敏感操作审计日志
5.3 CI/CD流程
-
GitLab流水线设计:
- 代码质量检查(SonarQube)
- 单元测试覆盖率要求
- 自动化部署到测试环境
-
发布策略:
- 蓝绿部署
- 功能开关控制
- 回滚机制
6. 典型问题排查实录
6.1 MyBatis缓存问题
现象:商品信息更新后,查询结果未及时刷新
排查过程:
- 确认是一级缓存问题(同一个SqlSession)
- 检查二级缓存配置
- 最终方案:在更新操作后手动清除缓存
java复制@Override
@CacheEvict(value = "products", key = "#product.id")
public void updateProduct(FurnitureProduct product) {
productMapper.updateById(product);
}
6.2 Vue3响应式丢失
现象:规格选择器状态不更新
原因:直接修改了数组元素而非整个数组
解决方案:
typescript复制// 错误做法
specs[index].selected = true
// 正确做法
const newSpecs = [...specs]
newSpecs[index] = {...newSpecs[index], selected: true}
specs.value = newSpecs
6.3 事务不生效场景
常见原因:
- 方法访问权限非public
- 自调用问题
- 异常被捕获未抛出
- 数据库引擎不支持(如MyISAM)
检查清单:
- 确认使用@Transactional注解
- 检查异常类型配置
- 验证数据库引擎为InnoDB
- 排查是否有异步调用
7. 项目扩展方向
7.1 微服务改造
当前单体架构的痛点:
- 商品服务压力大
- 发布周期变长
- 技术栈升级困难
改造方案:
- 按领域拆分服务
- 引入Spring Cloud生态
- 服务网格治理
7.2 多端适配
- 小程序版本:使用Uniapp框架
- 管理端:基于React重构
- 可视化配置:低代码平台集成
7.3 智能化升级
-
推荐系统:
- 协同过滤算法
- 基于用户行为的实时推荐
-
智能客服:
- 家具领域知识图谱
- 意图识别模型
-
AR预览:
- 基于ARKit/ARCore
- 家具摆放效果模拟
