SpringBoot+Vue构建电商平台：权限控制与订单系统实战

Cookie Young

1. 项目概述与核心价值

最近刚完成一个基于SpringBoot+Vue的图书商城项目，这个双角色权限管控的系统让我对电商平台开发有了更深入的理解。不同于简单的CRUD练习，这个项目完整实现了从商品管理到用户购买的全流程闭环，特别适合想学习企业级应用开发的Java开发者。

系统采用经典的前后端分离架构，后端用SpringBoot+MyBatis实现RESTful API，前端用Vue构建响应式界面。最让我满意的是它的权限设计——管理员和普通用户的操作界面和功能完全隔离，这在实际商业项目中非常常见。管理员可以管理商品分类、处理订单、查看用户评价；而用户端则提供了完整的购物流程，包括加入购物车、收藏商品、发表评论等功能。

提示：项目需要JDK8、MySQL5.7+环境运行，前端开发建议使用最新版Vue CLI。我在Mac和Windows环境下都测试过，只要环境配置正确都能顺利运行。

2. 技术栈选型解析

2.1 后端技术组合

选择SpringBoot作为后端框架是经过深思熟虑的。相比传统的SSM框架，SpringBoot的自动配置特性让项目启动速度提升了至少30%。我特别配置了：

Spring Security用于权限控制
MyBatis-Plus增强数据库操作
Lombok简化实体类编写
Swagger生成API文档

数据库选用MySQL5.7+主要是考虑到事务支持和JSON字段功能。在设计表结构时，我特别注意了几点：

用户表与订单表采用外键关联但不在数据库层面强制约束
商品评价使用冗余存储部分用户信息避免频繁联表查询
购物车数据同时保存在数据库和Redis中提升性能

2.2 前端技术方案

Vue3的组合式API让前端开发效率大幅提升。项目中使用的主要技术包括：

Vue Router管理路由
Pinia替代Vuex做状态管理
Element Plus组件库
Axios处理HTTP请求

特别值得一提的是，我封装了一个智能的请求拦截器，可以：

自动携带token
统一处理401错误
显示加载动画
格式化错误消息

javascript复制// 请求拦截器示例
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    config.headers['Content-Type'] = 'application/json'
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

3. 核心功能实现细节

3.1 双角色权限系统

权限控制是项目的核心难点。我采用RBAC模型，通过后端控制权限，前端动态渲染菜单。具体实现流程：

用户登录后获取token和角色信息
根据角色向后端请求可访问的路由配置
前端动态添加路由
全局路由守卫校验权限

在后端，我自定义了一个注解@PreAuthorize来控制接口访问：

java复制@Target({ElementType.METHOD, ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
public @interface PreAuthorize {
    String[] value() default {};
}

// 使用示例
@PreAuthorize("admin")
@GetMapping("/users")
public Result listUsers() {
    // ...
}

3.2 商品管理模块

商品管理包含几个关键技术点：

分类管理：采用无限级分类设计，使用parent_id字段实现树形结构。前端用递归组件渲染分类树。

sql复制CREATE TABLE `category` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(64) NOT NULL,
  `parent_id` bigint DEFAULT NULL,
  `sort` int DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB;

商品搜索：结合MySQL全文索引和Elasticsearch实现多条件搜索。对于小型项目，只用MySQL也能满足需求：

java复制public Page<Product> search(String keyword, Long categoryId, int page, int size) {
    QueryWrapper<Product> wrapper = new QueryWrapper<>();
    if (StringUtils.isNotBlank(keyword)) {
        wrapper.like("name", keyword).or().like("description", keyword);
    }
    if (categoryId != null) {
        wrapper.eq("category_id", categoryId);
    }
    return productMapper.selectPage(new Page<>(page, size), wrapper);
}

4. 订单系统设计与实现

4.1 订单状态机

订单流程是电商系统的核心，我设计了一个严谨的状态流转机制：

code复制待支付 → 已取消
待支付 → 已支付 → 已发货 → 已完成
        已支付 → 退款中 → 已退款

使用状态模式实现：

java复制public interface OrderState {
    void pay(Order order);
    void cancel(Order order);
    void ship(Order order);
    void confirm(Order order);
    void refund(Order order);
}

@Component
@Scope("prototype")
public class PaidState implements OrderState {
    @Override
    public void ship(Order order) {
        order.setState(OrderStatus.SHIPPED);
        // 发送发货通知...
    }
}

4.2 购物车与库存控制

购物车实现有几个关键点需要注意：

未登录用户使用浏览器本地存储
登录后合并本地购物车到服务器
下单时检查库存并锁定

库存扣减采用乐观锁防止超卖：

sql复制UPDATE product_sku 
SET stock = stock - #{quantity} 
WHERE id = #{skuId} AND stock >= #{quantity}

5. 部署与性能优化

5.1 系统部署方案

推荐使用Docker Compose部署，我的配置包含：

SpringBoot应用容器
MySQL容器
Redis容器
Nginx容器（前端）

yaml复制version: '3'
services:
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
      - redis
  
  mysql:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: root
    volumes:
      - ./data/mysql:/var/lib/mysql

  redis:
    image: redis:alpine

5.2 性能优化实践

经过测试，我实施了以下优化措施：

使用Redis缓存热门商品数据
数据库查询添加适当索引
启用SpringBoot的Gzip压缩
前端路由懒加载
图片使用WebP格式

优化后，首页加载时间从1.8s降低到600ms左右。

6. 常见问题与解决方案

在开发过程中遇到几个典型问题：

跨域问题：虽然配置了CORS，但带cookie的请求仍然失败
- 解决方案：需要设置axios.defaults.withCredentials = true，并且后端要配置allowCredentials

文件上传大小限制：SpringBoot默认只允许1MB文件

解决方案：在application.yml中添加配置：

yaml复制spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 10MB

Vue路由刷新404：生产环境刷新非首页路由报错
- 解决方案：Nginx配置添加try_files：
```
nginx复制location / {
    try_files $uri $uri/ /index.html;
}
```

7. 扩展与改进方向

这个项目已经实现了电商核心功能，但还有几个可以增强的方向：

支付系统集成：目前是模拟支付，可以接入支付宝/微信支付SDK
推荐系统：基于用户行为实现简单的协同过滤推荐
秒杀功能：使用Redis实现商品秒杀
数据统计：集成ECharts实现销售数据可视化

我在用户收藏功能中预留了行为数据采集接口，为后续推荐系统做准备：

java复制public void addFavorite(Long userId, Long productId) {
    // 记录用户行为
    userBehaviorService.record(userId, BehaviorType.FAVORITE, productId);
    // 添加收藏...
}

这个项目从技术选型到功能实现都尽量贴近实际商业项目，特别是权限控制和订单流程的设计，都是经过多次迭代优化的结果。建议学习者可以先把基础功能跑通，然后再逐步研究各个模块的实现细节。