1. 项目概述：前后端分离宠物商城系统架构解析
这个基于SpringBoot+Vue+MyBatis+MySQL的宠物商城系统，采用了典型的前后端分离架构模式。前端使用Vue3构建用户界面，后端采用SpringBoot提供RESTful API服务，通过MyBatis实现数据持久化，MySQL作为关系型数据库存储业务数据。这种架构设计使得前端和后端可以独立开发、测试和部署，大大提升了开发效率和系统可维护性。
提示：选择前后端分离架构时，需要考虑团队技术栈匹配度。如果团队前端技术较弱，可以考虑使用Thymeleaf等服务器端渲染技术作为过渡方案。
我在实际电商系统开发中发现，宠物类垂直电商平台有几个显著特点：商品SKU相对标准化（如宠物食品按重量、口味分类）、用户复购率高、需要完善的宠物档案管理系统。这些特性在本系统的数据库设计中都需要重点考虑。
2. 技术栈选型与项目初始化
2.1 开发环境准备
对于Java开发环境，我强烈推荐使用JDK17+LTS版本，这是目前SpringBoot3.x的官方推荐版本。与JDK8相比，JDK17在GC性能和模块化支持上有显著提升。IDE方面，IntelliJ IDEA Ultimate版对Vue和SpringBoot都有更好的支持，特别是它的Database工具可以直接操作MySQL数据库。
前端环境需要安装：
- Node.js 16.x或18.x LTS版本
- Vue CLI 5.x
- axios 1.x网络请求库
- Element Plus组件库（适合电商后台管理系统）
bash复制# 验证Node环境
node -v
# 安装Vue CLI
npm install -g @vue/cli
# 创建Vue项目
vue create pet-store-frontend
2.2 后端项目初始化
使用Spring Initializr创建项目时，除了基础的Web、MyBatis、MySQL依赖外，建议添加：
- Spring Security（后续做权限控制）
- Lombok（简化实体类代码）
- Spring Cache（缓存商品数据）
- Validation（参数校验）
xml复制<!-- pom.xml关键依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-cache</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>
数据库设计方面，宠物商城核心表应包括：
- 用户表（含宠物主人信息）
- 宠物档案表（记录用户宠物信息）
- 商品SPU/SKU表
- 订单表（关联用户和商品）
- 购物车表
3. 核心功能模块实现
3.1 用户认证与权限管理
采用JWT实现无状态认证，避免Session带来的扩展性问题。Spring Security配置需要注意：
java复制@Configuration
@EnableWebSecurity
public class SecurityConfig {
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.antMatchers("/api/product/**").hasAnyRole("USER","ADMIN")
.anyRequest().authenticated()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()))
.sessionManagement()
.sessionCreationPolicy(SessionCreationPolicy.STATELESS);
return http.build();
}
}
注意：生产环境必须开启CSRF防护，前后端分离项目可以通过在Cookie中设置SameSite属性来防御CSRF攻击。
3.2 商品模块设计
采用SPU+SKU模型设计商品系统：
- SPU（Standard Product Unit）：如"皇家猫粮"
- SKU（Stock Keeping Unit）：如"皇家猫粮-鸡肉味-1.5kg"
MyBatis映射文件需要注意一对多关系的处理：
xml复制<resultMap id="spuResultMap" type="ProductSpu">
<id property="id" column="spu_id"/>
<result property="name" column="spu_name"/>
<collection property="skus" ofType="ProductSku">
<id property="id" column="sku_id"/>
<result property="spec" column="sku_spec"/>
</collection>
</resultMap>
3.3 购物车与订单系统
购物车实现需要考虑：
- 未登录用户使用浏览器本地存储
- 已登录用户同步到服务端
- 合并本地和服务端购物车的策略
订单状态机设计示例：
java复制public enum OrderStatus {
UNPAID(1, "待支付"),
PAID(2, "已支付"),
SHIPPED(3, "已发货"),
COMPLETED(4, "已完成"),
CANCELLED(5, "已取消");
// 状态流转校验逻辑
public static boolean canChangeTo(OrderStatus from, OrderStatus to) {
// 实现状态流转规则
}
}
4. 前后端交互与联调
4.1 API设计规范
采用RESTful风格设计API，注意：
- 使用复数名词表示资源：/api/products
- GET用于查询，POST用于创建，PUT用于全量更新
- 分页参数统一使用page和size
- 返回统一格式：
json复制{
"code": 200,
"message": "success",
"data": {...},
"timestamp": 1672531200000
}
4.2 跨域解决方案
除了基础的CORS配置外，生产环境建议：
- 配置Nginx反向代理，统一API入口
- 对敏感操作接口添加CSRF Token
- 限制允许的HTTP方法和Headers
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("https://yourdomain.com")
.allowedMethods("GET", "POST", "PUT")
.allowCredentials(true)
.maxAge(3600);
}
}
4.3 文件上传处理
宠物商城需要处理宠物照片、商品图片等上传需求。建议：
- 使用阿里云OSS等对象存储服务
- 前端采用分片上传提升大文件传输可靠性
- 后端接口做好文件类型和大小校验
java复制@PostMapping("/upload")
public Result<String> upload(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return Result.fail("文件不能为空");
}
if (!file.getContentType().startsWith("image/")) {
return Result.fail("仅支持图片上传");
}
// 上传到OSS逻辑
String url = ossClient.upload(file);
return Result.success(url);
}
5. 系统部署与性能优化
5.1 多环境配置
SpringBoot支持通过profile区分环境配置：
yaml复制# application-dev.yml
spring:
datasource:
url: jdbc:mysql://localhost:3306/pet_store_dev
username: dev_user
password: dev123
# application-prod.yml
spring:
datasource:
url: jdbc:mysql://prod-db:3306/pet_store
username: ${DB_USER}
password: ${DB_PASSWORD}
启动时通过--spring.profiles.active=prod指定环境。
5.2 数据库优化建议
- 为常用查询字段添加索引：
sql复制ALTER TABLE product_sku ADD INDEX idx_spu_id (spu_id);
-
大表考虑分库分表，如订单表按用户ID哈希分片
-
使用连接池监控SQL性能：
yaml复制spring:
datasource:
hikari:
connection-timeout: 30000
maximum-pool-size: 20
idle-timeout: 600000
5.3 缓存策略
采用多级缓存提升系统响应速度：
- 使用Redis缓存热点商品数据
- 本地Caffeine缓存用户个性化数据
- 前端对静态资源设置长期缓存
java复制@Configuration
@EnableCaching
public class CacheConfig {
@Bean
public RedisCacheManager cacheManager(RedisConnectionFactory factory) {
RedisCacheConfiguration config = RedisCacheConfiguration.defaultCacheConfig()
.entryTtl(Duration.ofMinutes(30))
.disableCachingNullValues();
return RedisCacheManager.builder(factory)
.cacheDefaults(config)
.build();
}
}
6. 常见问题排查与解决
6.1 MyBatis映射问题
问题现象：查询返回的字段值为null
解决方案：
- 检查数据库字段名和实体类属性名是否一致
- 使用@Results注解显式指定映射关系
- 在application.yml中开启驼峰命名转换：
yaml复制mybatis:
configuration:
map-underscore-to-camel-case: true
6.2 Vue跨域问题
问题现象：开发环境接口请求被浏览器拦截
解决方案：
- 配置vue.config.js代理：
js复制module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
}
- 确保后端CORS配置包含前端开发地址
- 对于复杂请求（如PUT、DELETE），需要处理预检请求
6.3 生产环境HTTPS问题
问题现象：混合内容警告或API请求被阻止
解决方案：
- 后端API同样启用HTTPS
- 前端axios配置baseURL为https
- 设置Secure和SameSite属性：
java复制@Bean
public CookieSerializer cookieSerializer() {
DefaultCookieSerializer serializer = new DefaultCookieSerializer();
serializer.setSameSite("None");
serializer.setUseSecureCookie(true);
return serializer;
}
7. 项目扩展与进阶方向
7.1 微服务化改造
当系统规模扩大时，可以考虑：
- 将用户服务、商品服务、订单服务拆分为独立模块
- 使用Spring Cloud Alibaba实现服务治理
- 引入Sentinel实现流量控制
7.2 支付系统集成
宠物商城需要集成支付功能：
- 微信支付和支付宝的沙箱环境调试
- 支付结果异步通知处理
- 订单状态与支付状态对账
java复制@RestController
@RequestMapping("/api/payment")
public class PaymentController {
@PostMapping("/callback")
public String paymentCallback(@RequestBody String notifyData) {
// 验证签名
// 更新订单状态
// 返回处理结果
return "success";
}
}
7.3 数据分析与推荐
基于用户行为数据：
- 使用Elasticsearch实现商品搜索
- 基于协同过滤算法推荐相关商品
- 分析用户购买习惯优化库存
java复制// 商品搜索服务示例
public interface ProductSearchService {
Page<Product> search(String keyword, int page, int size);
void indexProduct(Product product);
}
在开发这类电商系统时，我最大的体会是：数据库设计阶段多花一小时，开发阶段能节省一天时间。特别是宠物商城的商品属性复杂多变，需要设计足够灵活的SKU系统。另外，前后端分离项目一定要在开发初期就约定好API规范，使用Swagger或YApi等工具维护接口文档，这能极大减少联调时的问题。