SpringBoot+Vue3+MyBatis构建电商系统实战

狭间

1. 项目概述

这个网上超市系统采用当前主流的前后端分离架构，基于Java SpringBoot+Vue3+MyBatis技术栈实现。作为一套完整的电商解决方案，它涵盖了商品管理、订单处理、支付对接、用户管理等核心模块，特别适合中小型零售企业快速搭建自己的在线销售平台。

我在实际开发中发现，这种技术组合有几个显著优势：SpringBoot提供了稳健的后端服务，Vue3带来了流畅的前端体验，而MyBatis则让数据库操作既灵活又高效。整套系统采用RESTful API进行通信，前后端完全解耦，开发团队可以并行工作，大大提升了开发效率。

2. 技术选型解析

2.1 后端技术栈

SpringBoot 2.7.x作为后端框架，主要基于以下考虑：

自动配置减少了大量样板代码
内嵌Tomcat服务器简化部署
丰富的starter依赖让集成各种组件变得简单
完善的生态和社区支持

数据库选用MySQL 8.0，主要因为：

完全开源且性能足够应对中小型电商场景
支持JSON数据类型，便于存储商品规格等半结构化数据
成熟的集群方案支持未来扩展

提示：在实际部署时，建议将MySQL的innodb_buffer_pool_size设置为物理内存的70%左右，这对电商系统的高并发查询性能至关重要。

2.2 前端技术栈

Vue3作为前端框架的选择理由：

Composition API使代码组织更灵活
更好的TypeScript支持
更小的打包体积和更快的渲染速度
Pinia状态管理替代Vuex，使用更简单

配套使用的关键技术：

Element Plus组件库：提供丰富的UI组件
Axios：处理HTTP请求
Vue Router：实现前端路由
Vite：极速的开发服务器和打包工具

3. 系统架构设计

3.1 整体架构

系统采用经典的三层架构：

表现层：Vue3实现的前端界面
业务逻辑层：SpringBoot实现的后端服务

Controller：接收HTTP请求
Service：业务逻辑处理
Mapper：数据库操作接口

数据持久层：MyBatis + MySQL

3.2 数据库设计

核心表结构设计要点：

商品表(product)：

采用SPU+SKU模型
包含基础信息、规格参数、库存等字段
使用JSON类型存储可变规格

订单表(order)：

包含订单基本信息
使用状态机管理订单生命周期
关联订单明细表(order_item)

用户表(user)：

基础用户信息
采用BCrypt加密存储密码
包含权限角色信息

sql复制CREATE TABLE `product` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `price` decimal(10,2) NOT NULL,
  `stock` int NOT NULL,
  `specs` json DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

4. 核心功能实现

4.1 商品管理模块

后端实现要点：

java复制@RestController
@RequestMapping("/api/products")
public class ProductController {
    
    @Autowired
    private ProductService productService;
    
    @GetMapping
    public ResponseEntity<List<Product>> listProducts(
        @RequestParam(required = false) String keyword,
        @RequestParam(defaultValue = "0") int page,
        @RequestParam(defaultValue = "10") int size) {
        // 实现分页查询逻辑
    }
    
    @PostMapping
    public ResponseEntity<Product> createProduct(@Valid @RequestBody ProductDTO dto) {
        // 实现商品创建逻辑
    }
}

前端实现要点：

vue复制<template>
  <el-table :data="products" style="width: 100%">
    <el-table-column prop="name" label="商品名称" />
    <el-table-column prop="price" label="价格" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="editProduct(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getProducts } from '@/api/product'

const products = ref([])

onMounted(async () => {
  products.value = await getProducts()
})
</script>

4.2 购物车与订单模块

关键技术点：

购物车数据存储在Vuex/Pinia中
下单时采用乐观锁防止超卖
订单状态使用状态模式管理

库存扣减示例：

java复制@Transactional
public boolean reduceStock(Long productId, int quantity) {
    Product product = productMapper.selectById(productId);
    if (product.getStock() < quantity) {
        return false;
    }
    int rows = productMapper.reduceStock(productId, quantity, product.getVersion());
    return rows > 0;
}

对应的MyBatis映射：

xml复制<update id="reduceStock">
    UPDATE product 
    SET stock = stock - #{quantity},
        version = version + 1
    WHERE id = #{id} AND version = #{version}
</update>

5. 前后端交互实现

5.1 API设计规范

采用RESTful风格设计API：

GET /api/products - 获取商品列表
POST /api/products - 创建商品
GET /api/products/{id} - 获取单个商品
PUT /api/products/{id} - 更新商品
DELETE /api/products/{id} - 删除商品

响应统一格式：

json复制{
  "code": 200,
  "message": "success",
  "data": {...}
}

5.2 跨域与安全配置

SpringBoot跨域配置：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("*")
            .allowedHeaders("*");
    }
}

安全配置要点：

使用Spring Security实现认证授权
JWT令牌实现无状态认证
密码加密存储
CSRF防护

6. 部署与运维

6.1 后端部署

推荐部署方案：

打包SpringBoot应用：

bash复制mvn clean package

使用Docker容器化部署：

dockerfile复制FROM openjdk:17-jdk-slim
COPY target/online-store-0.0.1-SNAPSHOT.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

6.2 前端部署

Vue项目构建与部署：

生产环境构建：

bash复制npm run build

Nginx配置示例：

nginx复制server {
    listen 80;
    server_name yourdomain.com;
    
    location / {
        root /path/to/dist;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://backend:8080;
    }
}