Wang的博客

什么是webhookWebhook 是一个 API 概念，是微服务 API 的使用范式之一，也被成为反向 API，即前端不主动发送请求，完全由后端推送; GtiHub中就存在这种功能，通过创建一个GitHub的webhook可以实现项目的自动部署，issues的自动推送等功能; 如何创建GitHub的webhook首先我们要了解它的工作流程： sequenceDiagram Github Webhook ->> API Service: 发送POST请求，带有特殊Header，以及payload API Service ->> Shell: 子进程启动对应脚本 API Service ->> Github Webhook: 返回200状态码，及其他自定义信息 编写webhook接口 flowchart LR A[校验是否是github发送的请求] -->|是| B[执行构建脚本] A --> |不是| C[返回UNAUTHORIZED] 此处以nest.js创建的接口为例 12345678910111213141 ...

远程搜索下拉框封装首先要有需求，需求驱使才能让我们打工人创造业务组件 需求分析我们平时做一些管理系统之类的应用时都需要一些关联搜索的下拉选择，所以就需要我们写很多下拉相关的业务组件 方案选择思路呢，我暂时就想得到以下几套方案： 所有的远程搜索下拉框都写一个组件 封装一个组件作为通用组件，通过props传参实现不同的搜索 首先分析第一个方案，每个远程搜索都写一个独立的组件。 优点：很明显不用考虑别的就实现输入和输出就完事了； 缺点：就是会制造大量的重复代码，以及很多组件出来； 第二个方案就是封装一个通用组件，不同的搜索传不同参数。 优点： 一个组件支撑某些情况下更改起来会相对便捷 通过配置项实现不同的搜索下拉减少功能重复的组件 缺点： 编写起来需要考虑很多情况，很多奇怪的搜索可能照顾不到 需要的props可能会相对较多 实现思路首先考虑远程搜索组件需要用到的必要的属性(element-plus的二次封装，所以它需要的属性以下不在过多赘述，会进行透传的) 这种组件实际需要的核心属性只包含以下几种： props 说明 类型 默认值 是否必传 modelValu ...

Vue SchedulerVue中的Scheduler(任务调度系统)，主要责任就是收集Vue在程序执行过程中产生的Jobs(任务)，让每个Job按照固定的顺序执行，避免资源的浪费和程序中的循环依赖导致的死循环。 Vue Scheduler中的核心分为以下几个部分： 任务队列(queue、pendingPostFlushCbs、activePostFlushCbs) 任务入队程序(queueJob， queuePostFlushCb) 任务执行状态(isFlushing、isFlushPending) 当前正在执行的任务Promise(currentFlushPromise) 任务执行程序(flushJobs、flushPostFlushCbs、flushPreFlushCbs) 任务优先级调配程序(comparator) 源码位置：packages/runtime-core/src/scheduler.ts 任务队列在Vue Scheduler中的所有任务分为pre、普通任务、post三种显式优先级，以及根据id进行排序的隐式优先级(主要用作将父组件任务前置，确保组件的任务链 ...

基于element select多分组多级下拉筛选封装实现效果 具体需求 这是个多选下拉组件 组件内包含有分组（分组不可点击） 分组下有二级分类 点击一级分类，选中该分类下所有二级分类 乍一看是挺容易的需求，正当我也以为如此时，转折发生了 难点出现下拉框的源数据结构事例如下： 1234567891011121314151617181920212223242526272829303132333435363738394041424344[ { 'code': 10, 'desc': '分组1', 'children': [ { 'code': 1010, 'desc': '类型一级', 'sub_type': [ { 'code': 1020, &# ...

Vue源码分析-CreateApp官网解释创建一个应用实例 类型 1function createApp(rootComponent: Component, rootProps?: object): App 详细信息 第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props。 示例 可以直接内联根组件： 12345import { createApp } from 'vue'const app = createApp({ /* root component options */}) 也可以使用从别处导入的组件： 1234import { createApp } from 'vue'import App from './App.vue'const app = createApp(App) 源码位置 packages/runtime-core/src/apiCreateApp.ts 函数名 createAppAPI mini-vue中的实现（简化版 ...

为什么选择vite借用vite官网的介绍https://cn.vitejs.dev/guide/why.html#the-problems本人更换vite主要就是两个原因： webpack dev环境启动太慢了，公司项目启动平均要一分半钟； webpack build需要的内存较大，公司项目平均2.3G内存； 初步准备 如果不想要webpack和vite共存，那么我建议直接新建一个文件夹。 我所用的项目为vue2.7项目（所以我会讲我用到的vue2.x的包，3.x的建议直接yarn create vite my-vue-app –template vue）。 更换过程 首先 npm init 创建package.json， 已有项目直接复制过来就好 安装必要的npm包，vite, @vitejs/plugin-vue2(vue3.x安装@vitejs/plugin-vue)，项目中需要的其他包根据自己的需要添加，以上为vite运行必须的包 1npm i vite @vitejs/plugin-vue2 -D 新建vite.config.js文件 1234567891011121 ...

队列的概念​ 队列是遵循FIFO（First In First Out，先进先出，也称为先来先服务）原则的一组有序的项。意如其名，就像排队一样，从尾部添加，从顶部移除，新添的元素必须排在队列的末尾。 123456789flowchart LR subgraph a[队列] q[...]-->3-->2 end subgraph b[执行] q1[1] end 2-->q1 创建队列1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950class Queue { items: Array<any> constructor() { this.items = [] } /** * 入队 * 向队列尾部添加一个（或多个）新的项 * @param el */ enqueue(el): void { if (el instanceof Ar ...

画图库123456789101112131415161718192021222324252627282930/** * 手写板 * @constructor * @param width 手写板宽度 * @param height 手写板高度 * @param lineW 线粗 * @param lineColor 线颜色 * @param bgColor 手写板颜色 * @param El canvas节点Dom元素 * @param historyLength 历史记录条数 * @method dataUrl 获取base64编码 * @param mime 文件类型 * @method dataURLtoBlob 获取blob文件 * @param dataUrl base64编码 * @param filename 文件名 * @method dataURLtoFile 获取file文件 * @param dataUrl base64编码 * @param f ...

栈的概念​ 栈是一种遵从后进先出（LIFO）原则的有序集合。新添加的或待删除的元素都保存在栈的末尾，称作栈顶，另一端就叫栈底。在栈里，新元素都靠近栈顶，旧元素都接近栈底。 ​ 栈作为一种数据结构，是一种只能在一端进行插入和删除操作的特殊线性表。它按照后进先出的原则存储数据，先进入的数据被压入栈底，最后的数据在栈顶，需要读数据的时候从栈顶开始弹出数据（最后一个数据被第一个读出来）。栈具有记忆作用，对栈的插入与删除操作中，不需要改变栈底指针。 ​ 通俗来讲，栈就好像一个箱子，我们放东西时从箱子顶部放入(入栈)，而最先放入的东西会被压到箱子底(栈底)，顺序放入依次从箱子底往上排，最后的东西在箱子口(栈顶)，需要拿东西的时候从箱子顶部依次拿(出栈)， ​ 如图所示 栈的创建在原生JS对象中并没有栈这个结构的定义，所以要使用栈就要先创造它。。。 我们先声明一个栈的类，这里使用数组去存储栈内的元素 123456class Stack { items constructor() { this.items = [] }} 栈的数据结构需要 ...

Git第一次提交代码到仓库12345678910# 初始化git仓库$ git init # 添加当前目录的所有文件到暂存区$ git add .# 提交暂存区到仓库并填写注释$ git commit -m '注释'# 添加远程仓库$ git remote add origin git仓库远程地址# 将本地仓库推送到远程$ git push -u origin master Git拉取/检出分支1234567# 第一次克隆远程仓库$ git init$ git clone 远程仓库地址# 检出远程分支到本地$ git checkout -b 本地分支名 origin/远程分支名# 基于commit提交创建分支$ git checkout -b 新分支 hash值 Git新建分支123456789101112# 创建本地新分支$ git branch 新分支名# 切换本地新分支$ git checkout 新分支名# 创建并切换到新分支$ git checkout -b 新分支名# push到远程分支$ git push origin 新分支名:新分支名# 检 ...