From d7df7ec67677ff95f2d316edf6a1a6e023be6f43 Mon Sep 17 00:00:00 2001
From: hello <stacks@outlook.com>
Date: Thu, 11 Apr 2024 16:38:53 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E8=AF=AD=E8=A8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 notes/helloshop/api-Yarp.ReverseProxy.md | 60 ++++++++++++++++++++++++
 notes/helloshop/design.md                | 58 +++++++++++++++++++++++
 2 files changed, 118 insertions(+)
 create mode 100644 notes/helloshop/api-Yarp.ReverseProxy.md
 create mode 100644 notes/helloshop/design.md

diff --git a/notes/helloshop/api-Yarp.ReverseProxy.md b/notes/helloshop/api-Yarp.ReverseProxy.md
new file mode 100644
index 0000000..198eb61
--- /dev/null
+++ b/notes/helloshop/api-Yarp.ReverseProxy.md
@@ -0,0 +1,60 @@
+# 网关和
+
+## 构建和设计 API 网关
+
+API 网关是一个服务器，它是客户端和后端服务之间的中介。它接收来自客户端的请求，然后将这些请求转发到后端服务。API 网关还可以执行其他任务，例如身份验证、监视、负载平衡、缓存、请求分析和日志记录。流程图如下：
+
+## BFF 模式聚合多个服务
+
+API 网关可以聚合多个服务，基于 BFF（后端用于前端）模式，当客户端请求数据时，API 网关可以调用多个服务来获取数据，然后将数据聚合到一个响应中返回给客户端，以减少客户端与后端服务之间的通信次数，从而提高性能。
+
+## 常见的 API 网关
+
+Nginx、Envoy、Ocelot、Yarp、Zuul、Kong、Traefik、Tyk、Ambassador、Gloo、AWS API Gateway、Azure API Management、Google Cloud Endpoints、Apigee、MuleSoft Anypoint API Gateway、WSO2 API Manager、TIBCO Mashery、3scale API Management、Akana、CA API Gateway、Dell Boomi、DreamFactory、IBM API Connect、Mashape、Mashery、MuleSoft Anypoint Platform、OpenLegacy、Oracle API Platform Cloud Service、Repre。
+
+## 基于.NET 的开源 API 网关
+
+Ocelot 和 Yarp 是一个基于.NET 的开源 API 网关，它可以用于构建和设计微服务架构中的 API 网关。Yarp 提供了很多功能，例如路由、负载平衡、认证、授权、限流、熔断、重试、缓存、请求转发、请求重写、请求日志、响应缓存、响应压缩、响应缓存、响应重写、响应日志、监视、跟踪、跨域、安全、性能、可扩展性、可配置性、可管理性、可监视性、可测试性、可部署性、可维护性、可扩展性、可升级。
+
+[Github 开源仓库](https://github.com/microsoft/reverse-proxy)
+
+[官方参考文档](https://microsoft.github.io/reverse-proxy)
+
+## 使用 Yarp 构建和设计 API 网关
+
+```shell
+dotnet add package Yarp.ReverseProxy
+```
+
+## 使用 Aspire 服务发现
+```shell
+dotnet add package Microsoft.Extensions.ServiceDiscovery.Yarp
+```
+
+## 使用配置文件配置 Yarp
+
+```json
+{
+  "ReverseProxy": {
+    "Clusters": {
+      "cluster1": {
+        "Destinations": {
+          "destination1": {
+            "Address": "https://localhost:5001"
+          }
+        }
+      }
+    },
+    "Routes": [
+      {
+        "RouteId": "route1",
+        "ClusterId": "cluster1",
+        "Match": {
+          "Host": "localhost",
+          "Path": "/api"
+        }
+      }
+    ]
+  }
+}
+```
\ No newline at end of file
diff --git a/notes/helloshop/design.md b/notes/helloshop/design.md
new file mode 100644
index 0000000..dc4dfaa
--- /dev/null
+++ b/notes/helloshop/design.md
@@ -0,0 +1,58 @@
+# 用户界面和设计语言
+
+## 用户体验
+
+用户体验（User Experience，简称 UX）是用户在使用产品时的感受，是一个综合性的概念，包括用户对产品的感知、情感、态度、情绪等。用户体验设计（User Experience Design，简称 UXD）是一种以用户为中心的设计方法，目的是提高用户满意度，提高用户对产品的认知和使用。
+
+## 常见的设计语言 
+
+Google Material Design、Microsoft Fluent Design System、Alibaba Ant Desig ...
+
+## Material Design
+
+### 设计语言
+
+https://material.io/design
+
+
+### 组件库
+
+https://github.com/MudBlazor/MudBlazor
+
+https://github.com/MudBlazor/
+
+
+## Fluent Design System
+
+### 设计语言
+
+https://www.microsoft.com/design/fluent
+
+### 组件库
+
+https://github.com/ant-design-blazor/ant-design-blazor
+
+## Ant Design
+
+### 设计语言
+
+https://ant.design
+
+### 组件库
+
+https://github.com/ant-design-blazor/ant-design-blazor
+
+## 商业组件库
+
+https://github.com/radzenhq/radzen-blazor
+
+
+## 原型工具
+
+MasterGo 和 Figma 是两个常用的原型工具，可以用来设计和制作用户界面原型，提供了丰富的组件库和交互效果，可以帮助设计师快速制作用户界面原型。
+
+
+## 互补色
+
+互补色是指在色彩环中相对位置相反的两种颜色，当两种互补色放在一起时，会产生强烈的对比效果，使得两种颜色更加突出。互补色的组合通常会产生视觉冲击，因此在设计中需要谨慎使用，浏览器开发者工具监测对比度，以确保用户体验。
+