100 lines
3.1 KiB
Markdown
100 lines
3.1 KiB
Markdown
# WebClientBase Architecture
|
|
|
|
Base frontend architecture for GoodGo Platform using Blazor WebAssembly with BFF Pattern.
|
|
|
|
## Overview
|
|
|
|
This application implements the **Backend for Frontend (BFF)** pattern with YARP reverse proxy:
|
|
|
|
- **Client**: Blazor WebAssembly running in browser
|
|
- **BFF**: ASP.NET Core server proxying requests to microservices
|
|
- **Shared**: Common DTOs with validation (shared between Client/BFF)
|
|
|
|
## Architecture Diagram
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
subgraph Browser["🌐 Browser"]
|
|
C[Blazor WASM Client]
|
|
end
|
|
|
|
subgraph BFF["⚙️ BFF Layer"]
|
|
Y[YARP Reverse Proxy]
|
|
SA[Static Assets]
|
|
end
|
|
|
|
subgraph MS["🔧 Microservices"]
|
|
IAM[IAM Service]
|
|
MER[Merchant Service]
|
|
CAT[Catalog Service]
|
|
ORD[Order Service]
|
|
end
|
|
|
|
C -->|Static Files| SA
|
|
C -->|/api/*| Y
|
|
Y -->|/api/iam/**| IAM
|
|
Y -->|/api/merchants/**| MER
|
|
Y -->|/api/catalog/**| CAT
|
|
Y -->|/api/orders/**| ORD
|
|
|
|
style C fill:#3498DB,color:#ECF0F1,stroke:#2980B9,stroke-width:3px
|
|
style Y fill:#8E44AD,color:#ECF0F1,stroke:#7D3C98,stroke-width:2px
|
|
style SA fill:#34495E,color:#ECF0F1,stroke:#2C3E50,stroke-width:2px
|
|
style IAM fill:#27AE60,color:#ECF0F1,stroke:#229954,stroke-width:2px
|
|
style MER fill:#27AE60,color:#ECF0F1,stroke:#229954,stroke-width:2px
|
|
style CAT fill:#27AE60,color:#ECF0F1,stroke:#229954,stroke-width:2px
|
|
style ORD fill:#27AE60,color:#ECF0F1,stroke:#229954,stroke-width:2px
|
|
```
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
web-client-base-net/
|
|
├── src/
|
|
│ ├── WebClientBase.Client/ # Blazor WebAssembly
|
|
│ │ ├── Layout/ # MainLayout, NavMenu
|
|
│ │ ├── Pages/ # Razor pages
|
|
│ │ └── wwwroot/ # Static assets, CSS
|
|
│ ├── WebClientBase.Server/ # BFF + YARP Proxy
|
|
│ │ ├── Program.cs # App configuration
|
|
│ │ └── yarp.json # Proxy routes
|
|
│ └── WebClientBase.Shared/ # Shared DTOs
|
|
│ └── DTOs/ # ProductDto, UserDto
|
|
└── docs/
|
|
```
|
|
|
|
## Shared DTOs
|
|
|
|
| DTO | Purpose | Validation |
|
|
|-----|---------|------------|
|
|
| `ProductDto` | Product data | Name (3-100 chars), Price (0.01-1B) |
|
|
| `RegisterDto` | User registration | Email, Password (8+ chars, complexity) |
|
|
| `LoginDto` | User login | Email, Password |
|
|
| `ApiResponse<T>` | Standard response wrapper | Success, Data, Error |
|
|
|
|
## YARP Routes
|
|
|
|
| Route | Target Service | Port |
|
|
|-------|---------------|------|
|
|
| `/api/iam/**` | IAM Service | 5101 |
|
|
| `/api/merchants/**` | Merchant Service | 5102 |
|
|
| `/api/catalog/**` | Catalog Service | 5103 |
|
|
| `/api/orders/**` | Order Service | 5104 |
|
|
|
|
## Blazor Pages
|
|
|
|
| Page | Route | Description |
|
|
|------|-------|-------------|
|
|
| Home | `/` | Landing page |
|
|
| Products | `/products` | Product management |
|
|
| Auth | `/auth` | Login/Register |
|
|
| Counter | `/counter` | Demo component |
|
|
| Weather | `/weather` | Demo data fetch |
|
|
|
|
## Key Technologies
|
|
|
|
- **.NET 10** - Latest framework
|
|
- **Blazor WebAssembly** - Client-side SPA
|
|
- **YARP** - Reverse proxy for microservices
|
|
- **Data Annotations** - Shared validation
|