项目完成总结

完整的 Spring Cloud + Vue 日志测试系统已经创建完成！

📁 项目结构

spring-cloud-log-demo/
├── shop-recycle-common/              # 公共模块
│   ├── pom.xml
│   └── src/main/java/com/shop/recycle/common/
│       ├── interceptor/              # 日志拦截器
│       │   └── LoggingMdcInterceptor.java
│       ├── config/
│       │   └── WebConfig.java
│       └── dto/
│           └── Response.java
│
├── shop-recycle-gateway/             # API网关 (port 8080)
│   ├── pom.xml
│   ├── Dockerfile
│   ├── src/main/java/com/shop/recycle/gateway/
│   │   └── GatewayApplication.java
│   └── src/main/resources/
│       ├── application.yml           # 路由配置
│       └── logback-spring.xml        # 日志配置
│
├── shop-recycle-order-service/       # 订单服务 (port 8081)
│   ├── pom.xml
│   ├── Dockerfile
│   ├── src/main/java/com/shop/recycle/order/
│   │   ├── OrderServiceApplication.java
│   │   ├── controller/
│   │   │   └── OrderController.java
│   │   ├── service/
│   │   │   └── OrderService.java
│   │   └── dto/
│   │       ├── CreateOrderRequest.java
│   │       └── OrderResponse.java
│   └── src/main/resources/
│       ├── application.yml
│       └── logback-spring.xml
│
├── shop-recycle-payment-service/     # 支付服务 (port 8082)
│   ├── pom.xml
│   ├── Dockerfile
│   ├── src/main/java/com/shop/recycle/payment/
│   │   ├── PaymentServiceApplication.java
│   │   ├── controller/
│   │   │   └── PaymentController.java
│   │   ├── service/
│   │   │   └── PaymentService.java
│   │   └── dto/
│   │       ├── PaymentRequest.java
│   │       └── PaymentResponse.java
│   └── src/main/resources/
│       ├── application.yml
│       └── logback-spring.xml
│
├── shop-recycle-web/                 # Vue前端 (port 5173)
│   ├── package.json
│   ├── vite.config.js
│   ├── index.html
│   ├── public/
│   └── src/
│       ├── main.js
│       ├── App.vue                   # 主应用
│       ├── components/
│       │   ├── OrderComponent.vue    # 订单管理
│       │   └── PaymentComponent.vue  # 支付管理
│       └── api/
│           └── index.js              # API客户端
│
├── pom.xml                           # 顶层POM
├── docker-compose.yml                # Docker编排
├── start.sh                          # Linux/Mac启动脚本
├── start.ps1                         # Windows PowerShell启动脚本
├── README.md                         # 项目文档
├── QUICK_START.md                    # 快速开始指南
├── ARCHITECTURE.md                   # 架构设计文档
├── API.md                            # API文档
└── .gitignore                        # Git忽略配置

✨ 核心特性

✅ 1. 结构化JSON日志

每个请求都生成标准的JSON格式日志
包含 traceId、uri_group、event_class、duration 等关键字段
可直接被 Loki/ELK/Splunk 解析

✅ 2. 日志MDC自动注入 (零侵入)

LoggingMdcInterceptor 自动填充所有日志字段
业务代码无需修改
支持链路追踪

✅ 3. 三个微服务完整示例

API Gateway - 请求入口，自动路由
Order Service - 订单CRUD示例
Payment Service - 支付流程示例

✅ 4. Vue前端UI

可视化界面，一键生成测试流量
订单管理：创建、删除、查询订单
支付管理：支付、查询、退款
实时显示操作结果

✅ 5. 生产级配置

Logstash JSON encoder (标准日志格式)
异步日志处理 (AsyncAppender+1024队列)
Docker & Docker Compose支持
环境化配置 (local/docker/prod)

✅ 6. 完整文档

快速开始指南 (QUICK_START.md)
详细API文档 (API.md)
架构设计说明 (ARCHITECTURE.md)
README 项目文档

🚀 快速开始 (三种方式)

方式1: 一键启动脚本 (推荐-Windows)

cd spring-cloud-log-demo
.\start.ps1

脚本会自动启动所有服务并打开前端。

方式2: 一键启动脚本 (Linux/Mac)

cd spring-cloud-log-demo
chmod +x start.sh
./start.sh

方式3: 手动启动各服务

# Terminal 1: Gateway
cd spring-cloud-log-demo
mvn clean install
cd shop-recycle-gateway
mvn spring-boot:run

# Terminal 2: Order Service
cd spring-recycle-order-service
mvn spring-boot:run

# Terminal 3: Payment Service
cd spring-recycle-payment-service
mvn spring-boot:run

# Terminal 4: Frontend
cd shop-recycle-web
npm install && npm run dev

所有服务启动完成后，访问 http://localhost:5173

📊 生成的日志示例

订单创建日志

{
  "ts":"2024-02-06T10:30:45.123Z",
  "level":"INFO",
  "logger":"com.shop.recycle.order.service.OrderService",
  "msg":"订单已创建 orderId=ORD-A1B2C3D4",
  "traceId":"550e8400-e29b-41d4-a716-446655440000",
  "uri":"/api/order/create",
  "uri_group":"/order/*",
  "duration":"156",
  "userId":"user123",
  "event_class":"order",
  "error":"-",
  "status":"success",
  "thread":"http-nio-8081-exec-1",
  "app":"shop-recycle-order-service",
  "env":"local"
}

支付日志

{
  "ts":"2024-02-06T10:30:46.234Z",
  "level":"INFO",
  "logger":"com.shop.recycle.payment.service.PaymentService",
  "msg":"订单支付成功 paymentId=PAY-X1Y2Z3W4, orderId=ORD-A1B2C3D4, amount=99.99",
  "traceId":"550e8400-e29b-41d4-a716-446655440000",
  "uri":"/api/payment/pay",
  "uri_group":"/payment/*",
  "duration":"234",
  "event_class":"payment",
  "status":"success",
  "app":"shop-recycle-payment-service",
  "env":"local"
}

🎯 测试场景

基础流程

打开前端 http://localhost:5173
创建订单 (输入用户ID、金额、描述)
支付订单 (使用创建的订单ID)
查看后端日志

错误场景

❌ 创建负价格订单 → 看到 client_error 日志
❌ 删除已支付订单 → 看到 server_error 日志
❌ 支付失败 (30% 概率) → 重试支付，看到错误恢复

高频操作

循环创建订单
批量支付
观察 duration 和 throughput 变化

📈 日志监控接入

接入Loki (日志聚合)

# docker-compose.yml中添加
loki:
  image: grafana/loki:latest
  ports:
    - "3100:3100"

接入Prometheus (指标收集)

# actuator/prometheus 已内置支持
# 在docker-compose中添加Prometheus
prometheus:
  image: prom/prometheus:latest
  volumes:
    - ./prometheus.yml:/etc/prometheus/prometheus.yml

接入Grafana (可视化)

# docker-compose中添加Grafana
grafana:
  image: grafana/grafana:latest
  ports:
    - "3000:3000"
  # Add Loki as datasource: http://loki:3100

🔍 日志查询示例 (Loki)

# 所有订单相关请求
{app="shop-recycle-order-service", event_class="order"}

# 错误请求
{status="error"}

# 特定用户的请求
{userId="user123"}

# 按URI分组统计请求数
sum(rate({json="json"}[5m])) by (uri_group)

# P95延迟
quantile_over_time(0.95,
  {app="shop-recycle-order-service"} | json | unwrap duration_ms [5m]
) by (uri_group)

📚 文档导览

QUICK_START.md - 5分钟快速上手
API.md - 完整API文档和cURL示例
ARCHITECTURE.md - 系统架构深度讲解
README.md - 项目完整说明

🔧 开发指南

添加新的API端点

在Controller中添加方法
在Service中实现业务逻辑
日志会自动被拦截器处理
MDC字段自动填充

示例:

@PostMapping("/order/cancel/{orderId}")
public Response<?> cancelOrder(@PathVariable String orderId) {
    try {
        orderService.cancelOrder(orderId);
        return Response.success();
    } catch (Exception e) {
        return Response.error(e.getMessage());
    }
}

自定义日志字段

在业务代码中添加自定义MDC字段：

MDC.put("custom_field", "value");
// 会自动显示在JSON日志中

修改日志格式

编辑 logback-spring.xml 中的pattern部分：

<pattern>
{
  "ts":"%d{...}",
  "level":"%level",
  ...
  "custom_field":"%X{custom_field:-}"
}
</pattern>

✅ 验证清单

启动前检查:

JDK 1.8+ 已安装
Maven 3.6+ 已安装
Node.js 14+ 已安装
npm 已安装
没有服务占用 8080, 8081, 8082, 5173 端口

启动后检查:

Gateway: http://localhost:8080 可访问
Order Service: http://localhost:8081/api/order 可访问
Payment Service: http://localhost:8082/api/payment 可访问
Frontend: http://localhost:5173 可访问
创建订单成功
支付订单成功 (或正确显示失败)
后端Terminal显示JSON格式日志

🆘 常见问题

Q: 为什么支付总是失败?

A: Payment Service有30%的失败率用于测试。多次尝试即可成功。

Q: 日志为什么没有出现?

A: 检查 logback-spring.xml 是否正确加载，查看Terminal有没有启动报错。

Q: 端口被占用怎么办?

A: 修改 application.yml 中的 server.port 配置，或kill占用端口的进程。

Q: 前端无法连接后端?

A: 检查所有后端服务都启动成功，查看浏览器控制台 F12 看有没有CORS错误。

🎓 学习价值

这个项目演示了:

Spring Cloud 微服务架构 - Gateway + Service
日志最佳实践 - MDC + JSON + 异步处理
链路追踪设计 - traceId 贯穿整个链路
可观测性 - 结构化日志 + 指标 + 链路
前后端分离 - Vue + RESTful API
零侵入日志 - 拦截器注入，业务代码不改动
生产就绪 - Docker + Config + Error Handling

📦 部署选项

本地开发

mvn clean install
mvn spring-boot:run (各服务)
npm run dev (前端)

Docker 容器

docker-compose up -d
# 访问 http://localhost:5173

Kubernetes

# 使用 Dockerfile 构建镜像
docker build -t order-service:1.0 shop-recycle-order-service
# 推送到镜像仓库
# kubectl apply -f k8s-manifests/

🚦 下一步建议

集成真实日志系统
- 部署 Loki + Grafana
- 配置 Vector agent 采集日志
添加链路追踪
- 集成 Jaeger 或 Zipkin
- 支持 X-B3-TraceId 头
扩展业务功能
- 添加库存服务
- 添加用户服务
- 实现真实的数据库
完善测试
- 单元测试
- 集成测试
- 性能测试
生产部署
- CI/CD 流水线
- 蓝绿部署
- 灾备方案

现在你已经拥有一个完整的、生产级别的日志测试系统！ 🎉

开始使用: .\start.ps1 (Windows) 或 ./start.sh (Linux/Mac)

有问题? 查看 QUICK_START.md 或 ARCHITECTURE.md

COMPLETION_SUMMARY.md 11 KB 文件歷史 原始文件