SpringBoot+Vue+MySQL全栈商城系统开发实践-代码聚汇网

SpringBoot+Vue+MySQL全栈商城系统开发实践

闫令琪·2026-08-09·阅读 23 GEO检测（免费）

SpringBootVueMySQL

|难度：普通|阅读约 17 分钟

1. 项目概述：SpringBoot+Vue+MySQL全栈商城系统

这套"ONLY在线商城系统"是一个典型的现代化全栈电商解决方案，采用SpringBoot 2.7作为后端框架，Vue 3作为前端框架，MySQL 8.0作为数据存储。不同于简单的Demo项目，该系统实现了完整的电商业务闭环，包含商品管理、订单处理、支付对接、用户权限等核心模块，代码开箱即用且经过生产环境验证。

我在实际部署测试中发现，该系统特别适合以下场景：

中小型企业快速搭建自有电商平台
开发者学习现代全栈开发技术栈
传统电商系统向微服务架构过渡的参考实现

系统采用前后端分离架构，后端提供RESTful API接口，前端通过axios进行数据交互。这种架构使得移动端App或小程序可以复用同一套后端接口，大幅降低多端开发成本。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 环境准备与项目配置

2.1 基础环境要求

后端开发环境：

JDK 1.8+（推荐Amazon Corretto 11）
Maven 3.6.3+
MySQL 8.0（兼容5.7版本）
Redis 6.2（用于会话管理和缓存）

前端开发环境：

Node.js 16.14+
npm 8.5+ 或 yarn 1.22+
Vue CLI 5.0.8

重要提示：避免使用Node.js 18+版本，某些Vue2兼容性插件可能无法正常工作。实测Node 16.14.2 LTS版本最稳定。

2.2 数据库初始化

系统使用Flyway进行数据库版本管理，首次启动时会自动执行位于src/main/resources/db/migration的SQL脚本。需要提前创建空数据库（默认名only_mall），并在application.yml中配置连接信息：

yaml复制spring:
  datasource:
    url: jdbc:mysql://localhost:3306/only_mall?useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: yourpassword
    driver-class-name: com.mysql.cj.jdbc.Driver

2.3 前端依赖安装技巧

进入frontend目录后，推荐使用yarn安装依赖（比npm更快且更稳定）：

bash复制yarn config set registry https://registry.npm.taobao.org
yarn install

遇到node-sass编译错误时，可尝试：

bash复制yarn remove node-sass
yarn add sass

3. 系统架构与核心技术实现

3.1 后端SpringBoot关键设计

系统采用分层架构设计：

Controller层：处理HTTP请求，参数校验
Service层：业务逻辑实现
DAO层：MyBatis-Plus实现数据库操作
Config层：安全、缓存等配置

亮点功能实现：

商品SKU的多规格组合处理

java复制// 规格组合算法示例
public List<ProductSpecs> generateSpecCombinations(List<SpecGroup> groups) {
    return groups.stream()
        .reduce(new ArrayList<>(),
            (acc, group) -> acc.isEmpty() ? 
                group.getSpecs().stream()
                    .map(spec -> new ProductSpecs(spec))
                    .collect(Collectors.toList()) :
                acc.stream()
                    .flatMap(ps -> group.getSpecs().stream()
                        .map(spec -> new ProductSpecs(ps).combine(spec)))
                    .collect(Collectors.toList()),
            (list1, list2) -> {
                list1.addAll(list2);
                return list1;
            });
}

基于Spring Security的RBAC权限控制

java复制@PreAuthorize("hasRole('ADMIN') or #userId == authentication.principal.id")
public User getUserProfile(Long userId) {
    // 方法实现
}

3.2 前端Vue工程实践

前端采用Vue 3 Composition API编写，主要技术栈：

Vue Router 4：路由管理
Vuex 4：状态管理
Element Plus：UI组件库
Axios：HTTP客户端

性能优化措施：

路由懒加载

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

API请求封装示例

javascript复制const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 10000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

4. 核心业务模块解析

4.1 商品管理系统

商品模块采用SPU+SKU数据模型：

SPU（Standard Product Unit）：标准产品单元
SKU（Stock Keeping Unit）：库存量单位

数据库设计关键表：

sql复制CREATE TABLE `pms_product` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(64) NOT NULL COMMENT '商品名称',
  `sub_title` varchar(255) DEFAULT NULL COMMENT '副标题',
  `price` decimal(10,2) DEFAULT NULL COMMENT '价格',
  `stock` int DEFAULT '0' COMMENT '库存',
  `status` int DEFAULT '1' COMMENT '状态：0-下架 1-上架',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `pms_sku` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `product_id` bigint NOT NULL COMMENT '商品ID',
  `specs_json` json DEFAULT NULL COMMENT '规格JSON',
  `price` decimal(10,2) NOT NULL COMMENT 'SKU价格',
  `stock` int NOT NULL COMMENT '库存',
  PRIMARY KEY (`id`),
  KEY `idx_product_id` (`product_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

4.2 订单处理流程

订单状态机设计：

待支付（PENDING）
已支付（PAID）
已发货（SHIPPED）
已完成（COMPLETED）
已取消（CANCELLED）
已退款（REFUNDED）

分布式事务处理：
使用本地消息表+定时任务实现最终一致性：

java复制@Transactional
public void createOrder(OrderDTO orderDTO) {
    // 1. 创建订单主表
    Order order = convertToOrder(orderDTO);
    orderMapper.insert(order);
    
    // 2. 扣减库存（通过Feign调用库存服务）
    reduceStock(orderDTO.getItems());
    
    // 3. 记录事务消息
    TransactionMessage message = new TransactionMessage();
    message.setBusinessId(order.getId());
    message.setContent(JSON.toJSONString(order));
    message.setStatus(MessageStatus.PENDING);
    transactionMessageMapper.insert(message);
    
    // 4. 定时任务会扫描未完成的消息进行补偿
}

5. 部署与运维实践

5.1 生产环境部署建议

后端部署方案：

使用Docker容器化部署

dockerfile复制FROM amazoncorretto:11
COPY target/only-mall.jar /app.jar
EXPOSE 8080
ENTRYPOINT ["java","-jar","/app.jar"]

JVM参数优化（4核8G服务器示例）：

bash复制java -jar -Xms4096m -Xmx4096m -XX:MaxMetaspaceSize=512m \
-XX:+UseG1GC -XX:MaxGCPauseMillis=200 \
-Dspring.profiles.active=prod app.jar

5.2 常见问题排查指南

前端跨域问题解决方案：

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

MySQL性能优化建议：

为常用查询字段添加索引
大表考虑分库分表
配置合理的连接池参数（建议HikariCP）

yaml复制spring:
  datasource:
    hikari:
      maximum-pool-size: 20
      minimum-idle: 5
      idle-timeout: 30000
      max-lifetime: 1800000

6. 二次开发与扩展建议

6.1 功能扩展方向

支付渠道集成：

支付宝沙箱环境对接
微信支付Native API
PayPal国际支付

营销功能增强：

优惠券系统
拼团活动
秒杀功能实现

6.2 微服务改造方案

当系统规模扩大时，可考虑拆分为：

用户服务（account-service）
商品服务（product-service）
订单服务（order-service）
支付服务（payment-service）

使用Spring Cloud Alibaba组件：

Nacos：服务注册与发现
Sentinel：流量控制
Seata：分布式事务

改造示例（商品服务Feign客户端）：

java复制@FeignClient(name = "product-service", path = "/api/product")
public interface ProductFeignClient {
    @GetMapping("/{id}")
    Result<ProductVO> getProductById(@PathVariable Long id);
    
    @PostMapping("/reduce-stock")
    Result<Boolean> reduceStock(@RequestBody List<CartItemDTO> items);
}

这套商城系统在实际使用中表现出良好的稳定性和扩展性。根据我的实施经验，有几点特别值得注意：

商品图片建议使用OSS存储而非本地存储
敏感操作（如订单删除）需要添加操作日志
定期检查数据库慢查询日志并优化
前端打包时注意配置正确的publicPath
支付回调接口要做好幂等性处理

系统虽然开箱即用，但建议根据实际业务需求调整权限模型和商品分类结构。对于高并发场景，还需要引入Redis缓存热点数据和分布式锁机制。