1. 项目概述
作为一名参与过多个电商系统开发的全栈工程师，我最近完成了一个基于SpringBoot2+Vue3的宠物商城项目。这个系统采用了当前主流的技术栈，前后端完全分离，后端使用SpringBoot2框架提供RESTful API，前端则基于Vue3构建响应式用户界面。
在实际开发过程中，我发现宠物电商与传统电商系统相比有几个显著特点：商品SKU相对集中但规格复杂（如宠物食品的年龄段、口味等），用户对物流时效性要求更高，以及存在大量需要定期复购的商品。这些特性直接影响到了系统的架构设计和功能实现。
2. 技术选型与架构设计
2.1 后端技术栈
我们选择SpringBoot2作为后端框架主要基于以下考虑：
- 自动配置特性大幅减少了XML配置
- 内嵌Tomcat服务器简化部署
- 丰富的Starter依赖可快速集成常用组件
- Actuator提供的监控端点便于运维
数据库访问层采用MyBatis-Plus而非原生MyBatis，主要看中其：
- 强大的CRUD操作封装
- 灵活的Lambda表达式查询
- 完善的分页插件支持
- 优秀的性能优化特性
java复制// 典型MyBatis-Plus查询示例
public Page<Product> getProductsByCategory(Long categoryId, int page, int size) {
return productMapper.selectPage(new Page<>(page, size),
Wrappers.<Product>lambdaQuery()
.eq(Product::getCategoryId, categoryId)
.orderByDesc(Product::getPublishTime));
}
2.2 前端技术栈
Vue3相比Vue2有几个显著优势特别适合电商项目：
- Composition API使代码组织更灵活
- 更好的TypeScript支持
- 更小的打包体积
- 更高的运行时性能
我们特别利用了Vue3的以下特性：
<script setup>语法简化组件编写- Pinia状态管理替代Vuex
- Vite构建工具提升开发体验
javascript复制// Vue3组合式API示例
const { data: products } = useFetch('/api/products', {
params: {
categoryId: route.query.category,
page: pagination.value.page,
size: pagination.value.size
}
})
2.3 系统架构设计
系统采用经典的三层架构：
- 表现层：Vue3前端应用
- 业务逻辑层：SpringBoot服务
- 数据访问层：MyBatis-Plus+MySQL
关键设计决策：
- 使用JWT进行无状态认证
- 采用Redis缓存热点数据
- 使用Elasticsearch实现商品搜索
- 通过RabbitMQ处理异步任务（如订单超时）
3. 核心功能实现
3.1 用户认证模块
认证流程设计要点：
- 密码存储使用BCrypt加密
- 登录成功返回JWT令牌
- 令牌刷新机制保障用户体验
java复制// Spring Security配置核心代码
@Configuration
@EnableWebSecurity
public class SecurityConfig {
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.anyRequest().authenticated()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()))
.addFilter(new JwtAuthorizationFilter(authenticationManager()));
return http.build();
}
}
3.2 商品管理模块
商品模型设计考虑了宠物行业特点：
- 支持多规格（如狗粮的不同重量）
- 详细的商品参数（成分、适用年龄等）
- 丰富的媒体展示（图片、视频）
数据库设计优化：
- 使用JSON类型存储规格参数
- 商品与分类采用多级关联
- 建立全文索引提升搜索性能
3.3 购物车与订单系统
购物车实现关键点：
- 支持登录/未登录两种状态
- 本地存储与服务器同步机制
- 实时计算优惠和运费
订单状态机设计：
mermaid复制stateDiagram
[*] --> 待支付
待支付 --> 已取消: 超时未支付
待支付 --> 已支付: 支付成功
已支付 --> 已发货: 商家发货
已发货 --> 已完成: 用户确认
已发货 --> 退款中: 申请退款
退款中 --> 已退款: 退款成功
4. 性能优化实践
4.1 数据库优化
-
索引策略：
- 为所有外键建立索引
- 商品表建立复合索引(category_id, is_featured)
- 订单表按user_id和create_time排序
-
查询优化：
- 避免N+1查询问题
- 合理使用MyBatis-Plus的@TableField注解
- 大数据量查询使用流式处理
4.2 缓存策略
多级缓存设计：
- 本地缓存(Caffeine)：高频访问的基础数据
- 分布式缓存(Redis)：
- 商品详情缓存
- 购物车数据缓存
- 秒杀库存缓存
缓存失效策略：
- 主动失效：数据变更时清除相关缓存
- 被动失效：设置合理的TTL
4.3 前端性能优化
- 代码分割：按路由懒加载组件
- 图片优化：WebP格式+懒加载
- API请求：合理使用缓存策略
- 预加载关键资源
5. 部署与运维
5.1 容器化部署
使用Docker Compose编排服务：
yaml复制version: '3'
services:
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
- redis
frontend:
build: ./frontend
ports:
- "80:80"
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: pet123
redis:
image: redis:alpine
5.2 监控与告警
监控体系搭建：
- SpringBoot Actuator暴露指标
- Prometheus收集指标数据
- Grafana展示监控仪表盘
- AlertManager配置告警规则
关键监控指标：
- JVM内存使用
- 数据库连接池状态
- API响应时间
- 系统吞吐量
6. 开发经验与避坑指南
6.1 跨域问题解决
前后端分离常见问题：
- 开发环境配置代理
- 生产环境使用Nginx反向代理
- 正确处理CORS预检请求
推荐解决方案：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*")
.maxAge(3600);
}
}
6.2 数据一致性保障
分布式事务处理方案：
- 最终一致性优于强一致性
- 使用本地消息表
- 定时任务补偿机制
- 幂等性设计
6.3 安全防护措施
必须实现的安全特性：
- SQL注入防护
- XSS攻击防护
- CSRF防护
- 敏感数据加密
- 接口限流防刷
7. 项目扩展方向
基于现有系统可扩展的功能：
- 宠物社交功能
- 在线问诊服务
- 智能推荐系统
- 会员积分体系
- 多商户入驻平台
技术演进路线：
- 微服务化改造
- 引入Service Mesh
- 实现灰度发布
- 建设数据中台
在实际开发过程中，我深刻体会到良好的架构设计对项目可维护性的重要性。特别是在电商系统中，提前考虑扩展性和性能问题可以避免后期的重构成本。建议在项目初期就建立完善的监控体系，这对快速定位线上问题非常有帮助