SpringBoot+Vue双角色图书商城架构设计与实践

1. 项目背景与核心价值

去年接手的一个企业级图书商城项目让我深刻体会到，前后端分离架构在复杂业务场景下的优势。这个基于SpringBoot+Vue的双角色图书商城，不仅需要处理常规的商品展示、订单流程，还要同时满足普通消费者和管理员两种完全不同的操作需求。

技术选型上，后端采用SpringBoot 2.7 + MyBatis-Plus组合，前端使用Vue3 + Element Plus。这种组合在保证开发效率的同时，能很好地支撑高并发场景。项目最大的特色在于通过同一套接口服务，根据JWT令牌中的角色信息动态返回不同的数据结构和操作权限。

2. 系统架构设计解析

2.1 前后端分离架构

采用经典的RESTful API交互模式：

• 前端：Vue3 + Vue Router + Pinia状态管理
• 后端：SpringBoot + Spring Security + Redis缓存
• 通信：Axios封装+JWT认证

特别设计了API网关层处理跨域和权限过滤，所有请求先经过网关校验令牌有效性，再路由到对应微服务。这种设计使我们可以灵活扩展新的业务模块。

2.2 双角色权限体系

用户体系分为两类角色：

1. 普通用户：浏览商品、加入购物车、下单支付
2. 管理员：商品CRUD、订单处理、数据统计

权限控制的关键在于Spring Security的@PreAuthorize注解和自定义的权限拦截器。例如商品删除接口：

java复制@DeleteMapping("/products/{id}")
@PreAuthorize("hasRole('ADMIN')")
public Result deleteProduct(@PathVariable Long id) {
    // 实现逻辑
}

3. 核心功能实现细节

3.1 商品模块双视图实现

前端通过路由守卫动态加载不同组件：

javascript复制router.beforeEach((to, from, next) => {
  const role = store.getters.role
  if (to.meta.requiresAdmin && role !== 'ADMIN') {
    next('/forbidden')
  } else {
    next()
  }
})

商品列表API根据角色返回不同字段：

java复制public ProductVO convertToVO(Product product, String role) {
    ProductVO vo = new ProductVO();
    vo.setId(product.getId());
    vo.setName(product.getName());
    if("ADMIN".equals(role)){
        vo.setCostPrice(product.getCostPrice());
        vo.setStock(product.getStock());
    }
    return vo;
}

3.2 购物车与订单流程

采用Redis缓存购物车数据，关键数据结构设计：

java复制// 购物车Hash结构
cart:userId -> {
    "productId1": "quantity",
    "productId2": "quantity"
}

// 商品库存缓存
stock:productId -> "100"

下单时使用Lua脚本保证原子性：

lua复制local stock = redis.call('get', KEYS[1])
if tonumber(stock) >= tonumber(ARGV[1]) then
    redis.call('decrby', KEYS[1], ARGV[1])
    return 1
else
    return 0
end

4. 关键技术难点解决方案

4.1 权限动态刷新问题

采用双Token机制解决：

• accessToken：短期有效（2小时），存放基础信息
• refreshToken：长期有效（7天），仅用于刷新

刷新流程：

1. 客户端检测401错误
2. 携带refreshToken请求新accessToken
3. 服务端校验refreshToken有效性
4. 生成新accessToken返回

4.2 高并发库存控制

采用分级缓存策略：

1. Redis预减库存
2. 数据库最终扣减
3. 定期库存校对

配合消息队列实现异步下单：

java复制@RabbitListener(queues = "order.queue")
public void processOrder(OrderMessage message) {
    // 数据库库存操作
    // 生成订单记录
}

5. 性能优化实践

5.1 前端优化方案

1. 组件懒加载：

javascript复制const AdminDashboard = () => import('./views/AdminDashboard.vue')

2. 接口请求合并：将商品详情、库存状态、促销信息等并行请求

3. 本地缓存策略：对静态商品信息使用localStorage缓存

5.2 后端优化措施

1. Nginx静态资源缓存配置：

nginx复制location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 30d;
}

2. MyBatis二级缓存配置：

xml复制<cache eviction="LRU" flushInterval="60000" size="1024"/>

3. 热点数据预加载：

java复制@Scheduled(fixedRate = 3600000)
public void preloadHotProducts() {
    // 加载销量前100的商品
}

6. 部署与监控方案

6.1 容器化部署

Docker Compose编排文件示例：

yaml复制version: '3'
services:
  frontend:
    build: ./frontend
    ports:
      - "80:80"
  backend:
    build: ./backend
    ports:
      - "8080:8080"
  redis:
    image: redis:alpine
    volumes:
      - redis_data:/data

6.2 监控体系搭建

1. SpringBoot Actuator健康检查
2. Prometheus + Grafana监控面板
3. ELK日志收集系统

关键监控指标：

• 接口响应时间P99
• JVM内存使用率
• Redis命中率
• 数据库连接池状态

7. 典型问题排查记录

7.1 跨域问题深度解决

除了常规的@CrossOrigin注解，还需要注意：

1. 复杂请求的预检处理
2. 带凭证请求的响应头配置
3. 网关层的CORS过滤器

完整解决方案：

java复制@Bean
public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOriginPattern("*");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
}

7.2 文件上传大小限制

需要同时配置：

1. SpringBoot应用参数：

properties复制spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=20MB

2. Nginx反向代理配置：

nginx复制client_max_body_size 20m;

3. 前端Axios配置：

javascript复制const instance = axios.create({
  baseURL: '/api',
  timeout: 30000,
  maxContentLength: 20 * 1024 * 1024
})

8. 项目演进方向

1. 微服务化改造：将用户、商品、订单拆分为独立服务
2. 支付系统增强：对接更多支付渠道
3. 推荐系统引入：基于用户行为的智能推荐
4. 多端适配：开发微信小程序版本

这个项目的完整代码我已经整理成模块化的结构，每个关键功能点都有详细的实现注释。在实际开发中最深的体会是：前后端分离项目中，清晰的接口文档和类型定义能节省50%以上的沟通成本。我们采用Swagger + TypeScript接口类型生成的方式，极大提升了协作效率。