11 2023 档案
摘要:流量治理的原理 —— 容错策略 —— 故障转移、快速失败、安全失败、沉默失败、故障恢复并行调用、广播调用 在分布式系统架构中,容错机制是一个至关重要的组成部分。由于分布式系统的本质是不可靠的,一个大的服务集群中可能会发生各种“意外情况”,例如程序崩溃、节点宕机、网络中断等。为了应对这些意外情况,我们
阅读全文
摘要:流量治理的原理 —— 故障注入 一、故障注入的概念 流量治理 的原理中的故障注入是一种重要的技术手段,用于评估和提升系统的可靠性。其基本原理是在系统正常运行时,人为地引入一些故障,以测试系统的健壮性和容错能力。通过这种方式,我们可以发现并解决系统中可能存在的问题,从而确保系统在真实环境中能够稳定运行
阅读全文
摘要:流量治理的原理 —— 服务熔断 一、服务熔断的概念 在分布式系统架构中,高可用三大利器之一服务熔断是一个重要的概念,是用于提高分布式系统的韧性和可靠性的重要手段。 1.1、服务熔断的定义 服务熔断:是一种控制服务访问速率的机制,用于防止系统过载和故障扩散。当某个服务出现故障、延迟过高或者达到预设的阈
阅读全文
摘要:流量治理的原理 —— 负载均衡 一、负载均衡的概念 百度百科:https://baike.baidu.com/item/%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1/932451?fr=ge_ala 负载均衡概念过于基础,可以参考百度百科的介绍 二、微服务场景的负载均衡
阅读全文
摘要:流量治理的原理 —— 概念和原理 一、流量治理是什么? https://cloud.tencent.com/developer/article/2185478 流量治理:顾名思义流量治理就是针对流量就行治理,这里面有两个关键字,流量和治理。 流量从位置来看通常分为南北向流量和东西向流量。 这两个概念
阅读全文
摘要:一个简单的例子 首先登录统一身份认证服务:https://console.huaweicloud.com/iam。获取 Access Key ID 和 Secret Access Key。 创建一个新文件,名称叫 main.tf(tf 是 Terraform,Terraform 代码大部分是 .tf
阅读全文
摘要:如何安装 Terraform 一、Operating System https://developer.hashicorp.com/terraform/install Manual installation: [root@JumperServer:~] # git clone https://git
阅读全文
摘要:为什么使用 Terraform 一、什么是基础设施即代码? https://aws.amazon.com/cn/what-is/iac/ 亚马逊 Amazon Web Services(AWS)最早提出了基础设施即代码(Infrastructure as Code,简称IaC)的概念。基础设施即代码
阅读全文
摘要:Istio 的主要组件 https://github.com/istio/istio#introduction Istio 主要由控制面组件和数据面组件组成。 Istio 当前最新版:(https://github.com/istio/istio/releases/download/1.20.0/i
阅读全文
摘要:Istio 架构 https://istio.io/latest/docs/ops/deployment/architecture/ Istio 服务网格在逻辑上分为数据平面和控制平面。 The data plane is composed of a set of intelligent proxi
阅读全文
摘要:服务治理的形态 通常认为,服务治理的演变至少经过了以下三种形态。 一、第1种形态:治理逻辑和业务代码耦合 在微服务化的过程中,服务拆分后,基本的业务连通都成了问题。如下图 服务调用方的微服务怎么找到对端的服务实例?怎么选择一个对端实例发出请求,等等,都需要业务开发者写代码来实现。 这种方式简单,对外
阅读全文
摘要:Istio 能做什么? 下面通过一个天气预报应用展示 Istio 的服务访问形式。其中有两个服务:forecast 和 recommendation。forecast 由 Node.js 开发而成,recommendation 由 Java 开发而成。这两个服务之间通过最简单的服务名进行调用,在代码
阅读全文
摘要:Istio中的概念介绍 一、流量管理 https://istio.io/latest/docs/concepts/traffic-management/ Istio’s traffic routing rules let you easily control the flow of traffic
阅读全文
摘要:项目搭建 一、环境准备 软件名称 软件版本 node v20.9.0 npm 10.1.0 Windows 10 专业版 22H2 vue 3.3.4 vue/cli 5.0.8 vue-router 4.2.5 vite 4.4.11 vitest 0.34.6 pinia 2.1.7 vue-t
阅读全文
摘要:定义Store Store 是用defineStore()定义的,它的第一个参数要求是一个独一无二的名字: import { defineStore } from 'pinia' // 你可以对 `defineStore()` 的返回值进行任意命名,但最好使用 store 的名字,同时以 `use`
阅读全文
摘要:Pinia —— Store 是什么? https://pinia.vuejs.org/zh/getting-started.html#what-is-a-store 一、Store 是什么? Store (如 Pinia) 是一个保存状态和业务逻辑的实体,它并不与你的组件树绑定。换句话说,它承载着
阅读全文
摘要:安装 Pinia 用你喜欢的包管理器安装 pinia: yarn add pinia # 或者使用 npm npm install pinia 安装结束。
阅读全文
摘要:介绍 Pinia https://pinia.vuejs.org/zh/introduction.html 一、简介 https://pinia.vuejs.org/zh/introduction.html#introduction Pinia 起始于 2019 年 11 月左右的一次实验,其目的是
阅读全文
摘要:Vuex 4.x —— Getter https://vuex.vuejs.org/zh/guide/getters.html 有时候我们需要从store中的state中派生出一些状态,例如对列表进行过滤并计数: computed: { doneTodosCount () { return this
阅读全文
摘要:Vuex 4.x —— state https://vuex.vuejs.org/zh/guide/state.html 一、单一状态树 https://vuex.vuejs.org/zh/guide/state.html#单一状态树 Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层
阅读全文
摘要:Vuex 4.x https://vuex.vuejs.org/zh/ 一、Vue是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 1.1、什么是 "状态管理模式"? 状态管理模
阅读全文
摘要:provide、inject、mixins、extends 一、provide 用于提供可以被后代组件注入的值。 interface ComponentOptions { provide?: object | ((this: ComponentPublicInstance) => object) }
阅读全文
摘要:异步组件 一、基本用法 在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件。Vue 提供了defineAsyncComponent方法来实现此功能: import { defineAsyncComponent } from 'vue' const AsyncComp =
阅读全文
摘要:动态组件 一、App.vue <template> <ul> <!-- 使用ul标签替代了错误的url标签,用于展示列表 --> <li v-for='(item, index) in tabList' :key='index' @click="() => { currentComponent.co
阅读全文
摘要:Teleport <Teleport>是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。 一、基本用法 https://cn.vuejs.org/guide/built-ins/teleport.html#basic-usage 有时我们可能会遇到这样的场
阅读全文
摘要:Element Plus 组件库 一、Element Plus 基于 Vue 3,面向设计师和开发者的组件库。 二、完整导入 https://element-plus.org/zh-CN/guide/quickstart.html#完整引入 如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方
阅读全文
摘要:插槽 一、匿名插槽 App.vue: <script setup> import A from './FancyButton.vue' </script> <template> <A> 这是 XXXX 数据 </A> </template> FancyButton.vue: <template> <
阅读全文
摘要:兄弟组件之间的传值 一、第一种方案 A组件-->父组件-->B组件 1.1、A组件 <template> <div> <h1>A组件</h1> <button @click="changeA">按钮</button> </div> </template> <script setup lang='ts
阅读全文
摘要:组件传值方式1 —— props / $emit(父子传值 ) 一、父传子 1.1、父组件通过 props 传递数据 在父组件中,创建了一个名为List的子组件实例,并通过:msg="msg"语法将父组件的msg数据传递给子组件。这里的msg是一个响应式引用(使用ref创建),初始值为'这是父传过去
阅读全文
摘要:Vue2、Vue3代码风格 一、导入方式 Vue2 使用require导入方式,例如: var Vue = require('vue') Vue3 支持 ES6 的 import 方法,例如: import { createApp } from 'vue' 二、组件定义 Vue2 使用Vue.com
阅读全文
摘要:Vite 解决 @ 问题 在Vue3和Vite中,@符号通常用于别名,指向src目录。这是Vue CLI项目的默认设置,但在Vite项目中,你需要手动配置这个别名。 在Vite中,你可以在vite.config.js文件中配置别名。这是一个配置示例: import { fileURLToPath,
阅读全文
摘要:基于 Vite 搭建 Vue3 项目 一、为什么选 Vite https://www.vitejs.net/ 在浏览器支持 ES 模块之前,JavaScript 并没有提供的原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因:使用工具抓取、处理并将我们的源码模块串联
阅读全文
摘要:路由 Vue Router 是 Vue.js 官方的路由管理器,它和 Vue.js 深度集成,用于构建单页面应用。Vue.js 单页面应用是基于路由和组件映射的,路由用于配置访问路径,将组件(components)映射到路由路径(routes)。 一、路由模式 Vue Router 常用的两种模式是
阅读全文