从0到1部署微服务商城：30分钟打通Spring Cloud+Vue全流程（附避坑指南）

【免费下载链接】shop-cloud-vue 由我独立研发的基于Spring Cloud微服务架构的商城项目，后端使用Spring Cloud、Nacos、OpenFeign、MyBatis、MySQL、Redis，前端基于Vue 3和Element UI，具备高可扩展性和高并发处理能力。 项目地址: https://gitcode.com/weixin_46699933/shop-cloud-vue

你是否遇到过这些痛点？

• 微服务架构搭建文档要么过于简略，要么充斥过时命令
• 前后端分离项目联调时，接口404与跨域问题反复横跳
• Nacos配置中心与Redis权限认证总是踩坑
• 好不容易跑通Demo，却不知道如何扩展业务模块

读完本文你将获得：

• 3套开箱即用的Docker Compose配置（开发/测试/生产）
• 15个核心接口的Postman测试用例（含文件上传/支付流程）
• 7个高频错误的解决方案（附日志排查命令）
• 完整的用户-商品-订单业务流程图（可直接用于需求分析）

技术栈全景图

环境准备清单（必看）

基础软件版本要求

软件	版本	作用说明	检查命令
JDK	17+	后端运行环境	java -version
Node.js	16.14.2+	前端构建工具	node -v
MySQL	8.0+	关系型数据库	mysql --version
Redis	6.2+	缓存/分布式锁	redis-cli info server
Docker	20.10+	容器化部署	docker --version
Nacos	2.2.0	服务注册与配置中心	curl http://localhost:8848

⚠️ 注意：MySQL需开启binlog，Redis需配置密码并启用持久化

网络端口占用情况

# 检查关键端口占用
netstat -tulpn | grep -E "8081|8848|3306|6379|5073|5074"

服务模块	端口	协议	用途说明
shop-gateway	8081	HTTP	API网关入口
Nacos	8848	HTTP	服务注册与配置中心
MySQL	3306	TCP	数据库服务
Redis	6379	TCP	缓存服务
shop-admin	5073	HTTP	管理后台前端
shop-web	5074	HTTP	商城前台前端

部署步骤（分阶段实施）

1. 基础服务启动（Docker一键部署）

# docker-compose.yml
version: '3.8'
services:
  mysql:
    image: mysql:8.0.32
    container_name: shop-mysql
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: root123
      MYSQL_DATABASE: shop-cloud
    volumes:
      - ./sql:/docker-entrypoint-initdb.d
      - mysql-data:/var/lib/mysql
    command: --default-authentication-plugin=mysql_native_password

  redis:
    image: redis:6.2.13
    container_name: shop-redis
    ports:
      - "6379:6379"
    command: redis-server --requirepass redis123 --appendonly yes
    volumes:
      - redis-data:/data

  nacos:
    image: nacos/nacos-server:v2.2.0
    container_name: shop-nacos
    ports:
      - "8848:8848"
    environment:
      - MODE=standalone
      - SPRING_DATASOURCE_PLATFORM=mysql
      - MYSQL_SERVICE_HOST=mysql
      - MYSQL_SERVICE_PORT=3306
      - MYSQL_SERVICE_USER=root
      - MYSQL_SERVICE_PASSWORD=root123
      - MYSQL_SERVICE_DB_NAME=nacos_config
    depends_on:
      - mysql

volumes:
  mysql-data:
  redis-data:

启动命令：

# 后台启动所有基础服务
docker-compose up -d

# 查看服务状态
docker-compose ps

2. 后端服务部署（分模块启动）

# 克隆代码仓库
git clone https://gitcode.com/weixin_46699933/shop-cloud-vue.git
cd shop-cloud-vue

# 编译后端代码
cd shop-cloud
mvn clean package -Dmaven.test.skip=true

# 启动网关服务
cd shop-gateway
nohup java -jar target/shop-gateway.jar --spring.profiles.active=dev &

# 启动用户服务
cd ../shop-modules/shop-modules-user
nohup java -jar target/shop-modules-user.jar --spring.profiles.active=dev &

# 启动商品服务
cd ../shop-modules-goods
nohup java -jar target/shop-modules-goods.jar --spring.profiles.active=dev &

# 启动订单服务
cd ../shop-modules-order
nohup java -jar target/shop-modules-order.jar --spring.profiles.active=dev &

✅ 验证服务注册：访问Nacos控制台 http://localhost:8848/nacos，查看服务列表是否全部健康

3. 前端项目构建

# 安装管理后台依赖
cd ../../shop-admin
npm install --registry=https://registry.npmmirror.com

# 启动开发服务器
npm run dev

# 另开终端，安装前台依赖
cd ../shop-web
npm install --registry=https://registry.npmmirror.com

# 启动前台开发服务器
npm run dev

此时可访问：

• 管理后台：http://localhost:5073
• 商城前台：http://localhost:5074

核心业务流程解析

用户认证流程

关键代码实现（JWT工具类）：

public class JwtUtils {
    // 从令牌中获取用户ID
    public static String getUserId(String token) {
        Claims claims = parseToken(token);
        return getValue(claims, SecurityConstants.DETAILS_USER_ID);
    }
    
    // 生成令牌
    public static String createToken(Map<String, Object> claims) {
        return Jwts.builder()
                .setClaims(claims)
                .signWith(SignatureAlgorithm.HS512, Constants.SECRET)
                .compact();
    }
    
    // 验证令牌
    public static boolean validateToken(String token) {
        Claims claims = parseToken(token);
        if (claims == null) {
            return false;
        }
        // 检查令牌是否过期
        return !claims.getExpiration().before(new Date());
    }
}

商品下单流程

订单创建核心代码：

@Transactional(rollbackFor = Exception.class)
public R<?> add(List<SysOrder> items, Boolean useIntegrals, String point) {
    Long userId = SecurityUtils.getUserId();
    // 积分处理逻辑
    if (useIntegrals) {
        SysUser sysUser = new SysUser();
        sysUser.setUserId(userId);
        BigDecimal bigDecimal = new BigDecimal(point);
        sysUser.setIntegral(sysUser.getIntegral().subtract(bigDecimal));
        apiUserService.updateIntegral(sysUser);
    }
    
    for (SysOrder item : items) {
        // 减库存操作
        R<?> editAddrNun = apiGoodsService.editAddrNun(
            item.getPid().toString(), 
            item.getAttr(), 
            item.getNum()
        );
        if (editAddrNun.getCode() == 200) {
            // 删除购物车
            apiCartService.delById(item.getCid().longValue());
            // 创建订单
            item.setNumbers("DD-" + UUID.randomUUID().toString().replaceAll("-", ""));
            item.setStatus("0"); // 待支付状态
            orderService.save(item);
        }
    }
    return R.ok();
}

数据库设计与初始化

核心表结构关系

初始化SQL执行

# 执行数据库脚本
mysql -uroot -proot123 shop-cloud < shop-cloud/statis/sql/shop-cloud.sql

# 验证数据插入
mysql -uroot -proot123 -e "SELECT COUNT(*) FROM sys_user;" shop-cloud
# 预期输出：1（默认管理员账号）

默认管理员账号：

• 用户名：admin
• 密码：123456
• 角色：超级管理员

常见问题解决方案

后端服务启动失败

1. Nacos连接超时

   # 检查Nacos是否正常启动
   docker logs shop-nacos | grep -i error
   # 检查应用配置
   cat shop-cloud/shop-gateway/src/main/resources/application-dev.yml | grep nacos
   

2. 数据库连接失败

   # 正确配置示例
   spring:
     datasource:
       url: jdbc:mysql://localhost:3306/shop-cloud?useUnicode=true&characterEncoding=utf8&useSSL=false
       username: root
       password: root123
       driver-class-name: com.mysql.cj.jdbc.Driver
   

前端跨域问题

// vite.config.js 配置
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081', // 网关地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

订单创建失败

检查商品库存SQL：

-- 查询商品库存
SELECT id, name, attr FROM sys_goods WHERE id = ?;

-- 检查库存扣减逻辑
UPDATE sys_goods 
SET attr = JSON_REPLACE(attr, '$.num', JSON_EXTRACT(attr, '$.num') - ?)
WHERE id = ? AND JSON_EXTRACT(attr, '$.num') >= ?;

项目扩展指南

新增业务模块步骤

1. 创建Maven模块（如shop-modules-coupon）
2. 定义Feign接口（shop-api-coupon）
3. 实现业务逻辑（Controller/Service/Mapper）
4. 配置Nacos服务名和端口
5. 编写前端页面（对应shop-admin或shop-web）

性能优化建议

1. 数据库层面
   • 为高频查询添加索引（用户ID、订单号等）
   • 大表分区（按时间分区订单表）
2. 缓存策略
   • 商品详情页缓存（Redis + 本地缓存）
   • 用户购物车缓存（Redis Hash）
3. 接口优化
   • 列表接口实现分页和字段过滤
   • 使用异步处理订单状态更新

结语与资源获取

通过本文的指导，你已经掌握了shop-cloud-vue项目的完整部署流程和核心业务逻辑。作为一个基于Spring Cloud和Vue的微服务商城系统，该项目不仅适合学习微服务架构，也可作为实际项目的基础进行二次开发。

项目资源包：

• 完整SQL脚本
• Docker Compose配置
• Postman接口文档
• 开发工具配置（IDEA/Vscode）

🌟 如果你觉得本项目有帮助，请点赞收藏并关注作者，后续将推出更多微服务实战教程！

【免费下载链接】shop-cloud-vue 由我独立研发的基于Spring Cloud微服务架构的商城项目，后端使用Spring Cloud、Nacos、OpenFeign、MyBatis、MySQL、Redis，前端基于Vue 3和Element UI，具备高可扩展性和高并发处理能力。 项目地址: https://gitcode.com/weixin_46699933/shop-cloud-vue