100 lines
3.3 KiB
Markdown
100 lines
3.3 KiB
Markdown
# Kiến trúc WebClientTpos
|
|
|
|
Kiến trúc frontend cơ sở cho GoodGo Platform sử dụng Blazor WebAssembly với mô hình BFF.
|
|
|
|
## Tổng quan
|
|
|
|
Ứng dụng này triển khai mô hình **Backend for Frontend (BFF)** với YARP reverse proxy:
|
|
|
|
- **Client**: Blazor WebAssembly chạy trên trình duyệt
|
|
- **BFF**: ASP.NET Core server proxy yêu cầu đến microservices
|
|
- **Shared**: DTOs chung với validation (chia sẻ giữa Client/BFF)
|
|
|
|
## Sơ đồ Kiến trúc
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
subgraph Browser["🌐 Trình duyệt"]
|
|
C[Blazor WASM Client]
|
|
end
|
|
|
|
subgraph BFF["⚙️ Lớp BFF"]
|
|
Y[YARP Reverse Proxy]
|
|
SA[Tài nguyên tĩnh]
|
|
end
|
|
|
|
subgraph MS["🔧 Microservices"]
|
|
IAM[Dịch vụ IAM]
|
|
MER[Dịch vụ Merchant]
|
|
CAT[Dịch vụ Catalog]
|
|
ORD[Dịch vụ Order]
|
|
end
|
|
|
|
C -->|Tệp tĩnh| 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
|
|
```
|
|
|
|
## Cấu trúc Dự án
|
|
|
|
```
|
|
web-client-base-net/
|
|
├── src/
|
|
│ ├── WebClientTpos.Client/ # Blazor WebAssembly
|
|
│ │ ├── Layout/ # MainLayout, NavMenu
|
|
│ │ ├── Pages/ # Trang Razor
|
|
│ │ └── wwwroot/ # Tài nguyên tĩnh, CSS
|
|
│ ├── WebClientTpos.Server/ # BFF + YARP Proxy
|
|
│ │ ├── Program.cs # Cấu hình ứng dụng
|
|
│ │ └── yarp.json # Routes proxy
|
|
│ └── WebClientTpos.Shared/ # DTOs chung
|
|
│ └── DTOs/ # ProductDto, UserDto
|
|
└── docs/
|
|
```
|
|
|
|
## Shared DTOs
|
|
|
|
| DTO | Mục đích | Validation |
|
|
|-----|----------|------------|
|
|
| `ProductDto` | Dữ liệu sản phẩm | Tên (3-100 ký tự), Giá (0.01-1 tỷ) |
|
|
| `RegisterDto` | Đăng ký người dùng | Email, Mật khẩu (8+ ký tự, độ phức tạp) |
|
|
| `LoginDto` | Đăng nhập | Email, Mật khẩu |
|
|
| `ApiResponse<T>` | Wrapper response chuẩn | Success, Data, Error |
|
|
|
|
## YARP Routes
|
|
|
|
| Route | Dịch vụ đích | Cổng |
|
|
|-------|-------------|------|
|
|
| `/api/iam/**` | Dịch vụ IAM | 5101 |
|
|
| `/api/merchants/**` | Dịch vụ Merchant | 5102 |
|
|
| `/api/catalog/**` | Dịch vụ Catalog | 5103 |
|
|
| `/api/orders/**` | Dịch vụ Order | 5104 |
|
|
|
|
## Trang Blazor
|
|
|
|
| Trang | Route | Mô tả |
|
|
|-------|-------|-------|
|
|
| Home | `/` | Trang chủ |
|
|
| Products | `/products` | Quản lý sản phẩm |
|
|
| Auth | `/auth` | Đăng nhập/Đăng ký |
|
|
| Counter | `/counter` | Component demo |
|
|
| Weather | `/weather` | Demo fetch dữ liệu |
|
|
|
|
## Công nghệ chính
|
|
|
|
- **.NET 10** - Framework mới nhất
|
|
- **Blazor WebAssembly** - SPA phía client
|
|
- **YARP** - Reverse proxy cho microservices
|
|
- **Data Annotations** - Validation chia sẻ
|