自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

YUSIR 完美CODING世界

// 平常勤积累,用时才不慌!!!

  • 博客(387)
  • 收藏
  • 关注

原创 答应我不要问TCP三次握手四次挥手

衍生头疼问题如下。请画出三次握手和四次挥手的示意图 为什么连接的时候是三次握手? 什么是半连接队列? ISN(Initial Sequence Number)是固定的吗? 三次握手过程中可以携带数据吗? 如果第三次握手丢失了,客户端服务端会如何处理? SYN攻击是什么? 挥手为什么需要四次? 四次挥手释放连接时,等待2MSL的意义?1. 三次握手三次握手(Three-way Handshake)其实就是指建立一个TCP连接时,需要客户端和服务器总共发送3个包。进行三次握手的主要作用

2020-09-17 01:05:40 122

原创 ant design vue Tree组件叶子节点横向排列

3、通过className定位到叶子节点,将所有叶子节点的display 改成 inline-flex。antdesignvue的树形组件要实现组件叶子节点横向排列有点坑,没有 配置属性,需要自己想办法。看tree组件的dom结构,父元素flex竖向布局,子项不论节点层级都在同一层!我的实现思路核心还是通过给叶子节点绑定类名,通过类名来覆盖原始的样式。给不同层级的节点绑定className,然后覆盖原有样式,比如边距等。难点在于想直接把其中某一些节点,横向布局排列。2、给叶子节点绑定className。

2024-01-11 15:00:37 528

原创 Element Plus阻止 el-dropdown、el-switch等冒泡事件

问题点:组件中遇到事件冒泡问题了,el-checkbox 中 @change事件要求阻止冒泡,如下代码中要求点击checkbox时不调用li标签的show方法。在el-checkbox 中用 @change.stop 发现不起作用,报错,没有相关方法,坑死。给元素包一层父元素,父元素上使用@click.stop,阻止事件冒泡。最近做vue3项目,使用Element Plus,又遇到坑了!使用vue3的事件修饰符报错。其他el组件也一样处理。

2023-10-13 10:00:18 1102

原创 VUE3项目element-plus的icons全局引入和按需引入的打包比较

最近又搞vue3项目了,不太情愿的使用element-plus,看到官网上使用icon只有全局循环注册所有icon的配置,很奇怪,不会增大包体积么,简单测试下.新建两个项目都是全局引入element-plus(懒得设置按需导入,官网有简单)

2023-09-20 11:43:15 416

原创 React18TS项目:配置react-css-modules,使用styleName

看@dr.pogodin/babel-plugin-react-css-modules官方文档。对于裸 Webpack,请参见webpack css-loader的 modules 的选项。2.配置@dr.pogodin/babel-plugin-react-css-modules。不使用babel-plugin-react-css-modules。需要引入@types/react-css-modules。我自己项目手写的webpack.base.js中使用。1.能启用css modules。

2023-08-16 17:16:05 1021

原创 Function component is not a function declaration. eslint(react/function-component-definition)报错原因

此规则旨在为函数组件强制实施一致的函数类型。默认情况下,它更喜欢命名组件的函数声明和未命名组件的函数表达式。此规则将选项对象作为第二个参数,其中可以指定组件的首选函数类型。选项对象的第一个属性可以是。如果存在多个类型参数,或者只有一个受约束的类型参数,则类型参数不会产生语法冲突。它告诉你,这个规则它期望将组件声明为函数声明。JavaScript 中有一个无法修复的模式。或包含其中任何一个的数组,并且作为。或包含其中任何一个的数组,并且具有。如果您对一致类型的函数组件不感兴趣。

2023-08-15 13:50:58 848

原创 js(node)机考题-HJ3.明明的随机数

明明生成了N个1到500之间的随机整数。请你删去其中重复的数字,即相同的数字只保留一个,把其余相同的数去掉,然后再把这些数从小到大排序,按照排好的顺序输出。

2023-07-20 19:39:00 119

原创 JS笔试题-使用方法链的计算器

将 result 除以给定的数字 value ,并返回更新后的 Calculator 对象。- 计算 result 的幂,指数为给定的数字 value ,并返回更新后的 Calculator 对象。- 将给定的数字 value 与 result 相加,并返回更新后的 Calculator 对象。- 从 result 中减去给定的数字 value ,并返回更新后的 Calculator 对象。- 将 result 乘以给定的数字 value ,并返回更新后的 Calculator 对象。

2023-07-19 22:32:18 66

原创 你懂什么是闭包吗-看场景学懂闭包

在函数执行完后,作用域会被清理,内存会被回收,但由于闭包函数是建立在函数内部的子函数,外部函数执行完后,作用域链会被销毁,但他的活动对象并不会被销毁,因为子函数的作用域链仍有对他的引用。通过使用闭包,可以创建一个接收部分参数的函数,并返回一个闭包,该闭包接收剩余的参数,从而实现函数柯里化。此外,闭包还可以解决回调函数中的作用域问题,确保回调函数能够访问正确的变量。创建私有变量和方法:使用闭包可以创建具有私有状态的对象,通过将变量和函数包装在闭包内部,可以隐藏它们对外部的可见性,实现数据的封装和信息隐藏。

2023-06-08 00:45:53 187

原创 Echarts的dataset设置dimensions别名

【代码】Echarts的dataset设置dimensions别名。

2023-06-08 00:24:32 351

原创 git代码回滚是使用reset还是revert

时光不能回退,Git却允许我们改变历史。【注:HEAD是指向当前版本的指针,HEAD^表示上个版本,HEAD^^表示上上个版本】如果修改到的文件比较少,我们可以不通过命令回滚的方式,手动删除之前的修改,再进行提交。

2023-05-24 16:13:00 1484

原创 AMIS低代码填坑(一):API之trackExpression追踪多个数据

自动刷新主要通过跟踪 api 的 url 属性来完成的,如果 url 中了使用了某个变量,而这个变量发生变化则会触发自动刷新。也就说这个 url 地址,既能控制 api 请求的 query 参数,同时又起到跟踪变量重新刷新接口的作用。这个设定大部分情况下都是合理的,但是有时候想要跟踪 url 参数以外的变量就做不到了。之前的版本,配置的 api 默认就会具备自动刷新功能,除非显式的配置。这就实现了监听两个数据 a和c 变化再更新。文档只有监听一个的例子。遇到的场景需要追踪多个数据变化再更新。

2023-04-13 16:35:35 358

原创 no matching host key type found. Their offer: ssh-rsa,ssh-dss fatal: Could not read from remote...

查看自己是开发者权限,重置一遍公钥再添加也不行,去网上找方法,介绍这种情况的原因就是新的ssh客户端不支持ssh-rsa算法,要修改本地配置重新使用ssh-rsa算法。具体做法:到当前用户目录下的.ssh文件中创建config文件(config没有后缀),使用记事本打开添加如下。windows电脑重装环境,gitlab配置ssh,生成公钥。把公钥添加到gitlab,clone代码时拉不下来,报错。config 文件添加内容。

2023-04-06 15:53:54 84

原创 心血来潮写一个React的九宫格抽奖组件

概率数组法:将所有奖品的概率存入一个数组中,然后生成一个随机数,根据随机数的值在概率数组中查找对应的奖品。权重随机法:将所有奖品按照权重分配一个区间,然后生成一个随机数,根据随机数落在哪个区间来确定中奖的奖品。区间法:将所有奖品的概率转化为区间,然后生成一个0到1之间的随机数,在对应的区间内查找对应的奖品。突然想写个react的九宫格抽奖组件,就浅尝一下。0.5秒随机点亮奖项,按提供的奖品数组抽奖几率来决定最终中奖;这些方法都可以根据具体的需求来选择适合的方法。

2023-03-28 23:42:24 368

原创 二分查找算法

二分查找的概念在于,定义一个数组arr,找到当前数组中点middle,如果要查找的值小于当前middle索引对应的值,则将缩小范围,继续求缩小范围的middle值,接着继续比较,不断缩小范围,最后找到该值;的数组,而原生的indexOf则适合。二分查找法是速度较快的搜索算法。查到一个有序数组中,某一项的索引。二分查找适合顺序存储,随机存储并且数据量不大。

2023-02-26 20:55:32 136

原创 什么是虚拟DOM?

这还仅仅是两层嵌套,实际开发中dom结构往往要复杂的多,因此react中我们常常推荐直接使用jsx文件定义业务逻辑以及html片段。的结构,而React.createElement。接收后生成的数据,其实才是真正意义上的虚拟。方法一定不会陌生,它用于创建。那么到这里,我们搞清楚了虚拟。其实只是一个包含了标签类型。说到底,这个就是传递给。究竟是什么,所谓虚拟。

2023-02-07 22:13:36 4285

原创 vite配置CDN和文件压缩

例子,vue3导入element-plus。同时记得开启nginx 压缩算法的功能。3.更改element-plus导入。vite 还可以打包时对文件进行压缩。1.加载compression插件。1.加载插件cdn-import。

2023-01-31 23:06:16 3098 2

原创 为什么transform动画性能更优的根本原因

而修改dom的几何信息例如height,动画中的left移动等,动画中每一帧都对布局有影响从而浏览器会重新计算生成布局树再分层,生成绘制指令再分块,再光栅化,然后交给GPU重新渲染。但是Transform则不会影响,浏览器只需要一次生成这个元素的位图,并在动画开始的时候将它提交给GPU去处理。之后,浏览器不需要再做任何布局、 绘制以及提交位图的操作。ball1的动画使用transform左移100px, ball2的动画使用left左移100px。

2023-01-02 16:51:51 375

原创 Emmet 使用 lorem 快捷生成随机文本填充html页面

在编程中,我们也可以使用Lorem ipsum来填充页面,测试显示效果。主要是通过编辑器中自带的 Emmet 插件,识别以 lorem 开头的短语,生成指定格式的内容。loremN,其中 N 是一个数字,代表有 N 个词语(注意不是字符串长度为 N )// lorem10。loremN*M,填充 M 行内容,每行 N 个词语// lorem10*4。lorem*N,其中 N 是一个数字,代表有 N 行// lorem*3。结合两者,填充指定行数且指定词语数量的内容。新建指定数量词语的句子。

2023-01-02 00:44:45 756

原创 浏览器里console是异步的

浏览器里console是异步的

2022-12-21 00:27:58 484

原创 react之react-spring动效库

react-spring动效库的使用样例

2022-12-11 15:31:15 504

原创 AntD中Form的input正则校验:不能输入空格

Input不能输入空格正则校验

2022-11-22 16:53:33 2860

原创 React Icons

流行库的所有icon的集合库

2022-11-16 23:24:24 1168

原创 react-on-screen:检查视口中是否有React组件

react-on-screen:检查视口中是否有React组件,超简单

2022-10-03 18:24:04 576

转载 This beta version of Typora is expired, please download and install a newer version. 解决方案

typora过期打不开

2022-06-19 11:20:36 15620 25

原创 useEffect中使用异步函数

useEffect是不能直接用 async await 语法糖的

2022-06-18 20:52:01 1033

原创 JS两个对象数组过滤掉相同的对象

JS两个对象数组过滤掉相同的对象

2022-06-06 22:22:53 1537

原创 Vue3 eslint 编译器宏和 defineProps,defineEmits,no-undef 规则警告

.eslintrc.js修改定义全局globalsmodule.exports = { globals: { defineProps: 'readonly', defineEmits: 'readonly', defineExpose: 'readonly', withDefaults: 'readonly' }, env: { browser: true, es2021: true }, extends: ['plugin:vu

2022-05-03 18:17:18 1544 1

原创 vue3 eslint The template root requires exactly one element问题

vue项目中手动引入eslintnpm install eslint --save-deveslint初始化npx eslint --init 运行时npm run lint 简单语法问题--fix会自动修复但是vue3项目出现只能有一个根节点的问题原因在于eslintrc.js里extends中plugin:vue/essential的问题看eslint-plugin-vue官网发现User Guide | eslint-plugin-vue...

2022-05-03 18:16:04 330

原创 React Antd Upload自定义上传customRequest

单独的上传图片接口要传参,action方式不太适合,需要使用自定义上传customRequest覆盖公司代码不可弄,就发一个可用的demo例子import React, { useState } from "react";import { render } from "react-dom";import "antd/dist/antd.css";import axios from "axios";import "./style.css";import { Uplo...

2022-03-22 22:49:32 3712

原创 AntD 可编辑行表格

本地数据代码模板自用,官网例子改改// 编辑行的自定义表格import React, { useState } from "react";import { Table, Input, InputNumber, Popconfirm, Form, Typography, Divider,} from "antd";interface Item { key: string; name: string; age: number; address: str

2022-03-13 20:15:47 2494

原创 AntD 官网样例 InputRef报错原因

在官网可编辑表格typescript样例里const inputRef = useRef<InputRef>(null);InputRef项目报错原因是ant design的版本问题!antd 4.19版本重写了input 可通过InputRef来使用input组件的ref

2022-03-13 15:41:52 3011

原创 dayjs也可回显AntD DatePicker的值

遇到的问题:react 使用AntD 表单里有多个RangePicker,查看修改时要回显值。antd的DatePicker需要的是moment对象。但是项目里引的是dayjs库解决方式:方式一:直接多引moment.js库,字符串转moment对象 moment('2022-02')方式二:不甘心引两个时间格式化的库,dayjs('2022-02') 字符串转dayjs对象也能回显DatePicker...

2022-03-01 11:32:30 1472

原创 React AntD 表格查看修改时默认选中几行数据

hook定义selectedRowKeysconst [selectedRowKeys, setSelectedRowKeys] = useState([]);const [selectedRowsState, setSelectedRows] = useState([]);初始化时利用setSelectedRowKeys给selectedRowKeys塞值,时行数据的rowKey的数组。设置table属性rowSelection <Table rowKey

2022-03-01 11:14:56 539

原创 [Vue warn]: You are using the runtime-only build of Vue 牵扯到Vue runtime-compiler与runtime-only区别

[Vue warn]:You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.1. Vue的编译渲染过程template --> ast --> render函数 --> VDo.

2022-02-24 23:03:48 458

原创 .slice(0)

高手代码里看到.slice(0),查了下这样写的好处:1.对原数组进行深拷贝,这样进行一系列操作的时候就不影响原数组了;2.将类数组对象转化为真正的数组对象:var anchorArray = [].slice.call(document.getElementsByTagName(‘a’), 0);//用[]这原生数组提供的slice方法,将document.getElementsB...

2022-02-13 18:46:18 794 2

原创 ngrx学习笔记

什么是ngrxngrx是Angular基于Rxjs的状态管理,保存了Redux的核心概念,并使用RxJs扩展的Redux实现。使用Observable来简化监听事件和订阅等操作。在看这篇文章之前,已经假设你已了解rxjs和redux。有条件的话请查看官方文档进行学习理解。所需包ng add方式,会自动生成所需文件并在app.module.ts中导入,直接启动项目即可,不报错ng add @ngrx/storeng add @ngrx/store-devtoolsng add @ng.

2022-02-13 15:27:23 1887

原创 koa后端允许跨域

举个例子<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &

2022-02-07 22:38:07 707

原创 koa洋葱模型

Koa 和 Express 都会使用到中间件Express的中间件是顺序执行,从第一个中间件执行到最后一个中间件,发出响应如上图Koa是从第一个中间件开始执行,遇到 next 进入下一个中间件,一直执行到最后一个中间件,在逆序,执行上一个中间件 next 之后的代码,一直到第一个中间件执行结束才发出响应如上图见代码const Koa = require('koa2');const app = new Koa();const port = 9000;app.use(asy..

2022-02-07 21:48:34 266

原创 vue3 v-model变化

概览就变化内容而言,此部分属于高阶内容:非兼容:用于自定义组件时,v-model的prop 和事件默认名称已更改: prop:value->modelValue; event:input->update:modelValue; 非兼容:v-bind的.sync修饰符和组件的model选项已移除,可用v-model作为代替; 新增:现在可以在同一个组件上使用多个v-model进行双向绑定; 新增:现在可以自定义v-model修饰符。在 V...

2022-01-29 16:32:34 882

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除