自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(68)
  • 收藏
  • 关注

原创 如何手动实现form表单的校验

首先介绍一下我的技术栈,使用的是React+Antd,在进行开发的时候,使用到了Antd中的form表单来进行校验数据是否进行了填写,如图所示,除了当我输入以后又清空输入框内容后需要校验输入框不能为空以外,还需要在当我点击保存的时候也需要对表单进行校验,前者可以通过表单自带的功能进行校验,后者则需要我们手动进行实现。我们可以使用Form.useForm创建表单数据域进行控制,然后在表单失焦和修改的时候监听到input框对应的值,并且进行保存,最后在接口调用之前进行表单的数据的校验即可。

2025-03-17 11:11:41 171

原创 获取URL字段的方法

在前端开发过程中,获取链接上的参数是非常常见的场景,那么获取参数的方法都有哪些呢,接下来介绍两种比较常见的获取URL中字段的方法。在使用三方库之前,我们需要先进行安装,然后在项目中进行引入,再将相关的参数解构出来使用即可。

2025-03-11 21:06:12 125

原创 如何实现一个拖拽功能

如图所示,有一个开场推荐问题盒子,下方是一个可以添加五条问题的列表。最下边是一个输入框,当问题数量不足五个时,他就出现在下方,添加过的问题获取焦点后也可以进行修改。每一项前方有一个拖拽按钮,后方有一个删除按钮,在这里添加完的问题需要出现在右边的预览调试部分,功能介绍完毕,接下来看那看如何实现的吧。

2025-03-11 20:52:45 276

原创 如何使用 CSS 实现黑色遮罩效果

最近在工作中遇见了一个需求,鼠标经过盒子出现黑色遮罩,遮罩中有相关的编辑按钮,点击以后,进行图片上传并且展示,由于当时没有思路,思考了好久,所以在完成开发后进行总结,使用的技术栈是React+less+Antd,过程和解答过程都在下边了。

2025-03-11 20:08:06 495

原创 Window使用SSH拉取代码

生成之后我们可以查看对应的私钥内容,即id_rsa,这个不要泄露,之后打开git bash,进入ssh文件夹,输入输入以下命令可以查看对应的公钥和私钥,之后就可以获取到一串字符串,将其复制,然后去github。在github上拉取代码的时候,我们可以看到有以下几个选项供我们选择,在使用SSH拉取代码的时候,需要我们进行密钥的配置。使用SSH的形式拉取代码的时候,我们首先应该检查本地是否存在SSH密钥,如果没有,我们需要先生成一个。接下来按照步骤一步一步走下去即可,我这边已经生成好了,如图。

2025-01-05 19:36:49 204

原创 css布局

display是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值,这与元素的类型有关。对于大多数元素它们的默认值通常是block或inline。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

2024-12-08 17:13:13 680

原创 React拆分组件中的传值问题

React中拆分组件后常用的值传递方法

2024-11-24 17:39:21 384

原创 React中Redux的基本用法

本文介绍了Redux的基本用法

2024-11-17 19:01:51 1183

原创 React中常用的钩子

在当今,React的钩子写法已经逐渐成为了一种主流开发模式,本文将介绍几种在React中常用的钩子。

2024-11-17 18:06:16 1236

原创 解决在Vue3中使用monaco-editor创建多个实例的导致页面卡死的问题

最近在项目中使用到了monaco-editor来实现相关的业务功能,按照官方使用方法进行了相关操作,但是在使用的时候,总是会导致创建多个编辑器实例,导致页面卡死的情况,下面来看看怎么处理这种情况吧,先说一下我使用的技术栈,主要是以Vue3为主的技术。但是在使用的过程中发现每次进入页面总会重复创建相关的编辑器实例,导致编辑器除首次进入外正常显示数据,在之后页面切换后再进入会导致编辑器没有数据,经过查询资料,发现问题如下。除此以外,我们还需要在组件卸载时,清空对应的编辑器实例,以减少不必要的性能浪费。

2024-10-22 22:08:56 644 1

原创 Vue3动态组件原来是这样

在Vue3中,动态组件简单来说就是根据不同的条件进行不同组件的渲染,可以联想一下在前端中常用到的动态样式。

2024-10-19 16:04:55 360

原创 ERROR in ./src/components/datePicker/index.less (./node_modules/css-loader/dist/cjs.js!./node_module

报错信息如下:报错原因是项目中less-loader版本过高导致,将其降低到5.0即可,注意安装的时候将项目中的package-lock.json文件夹删除。

2024-07-22 17:17:36 343

原创 D:\MySQL\bin>net start mysql MySQL 服务正在启动 . MySQL 服务无法启动。 服务没有报告任何错误。 请键入 NET HELPMSG 3534 以获得更多的帮

我出现这个问题的原因是因为端口被占用了,只需要杀死占用端口的进程即可。首先输入以下命令查看当前各个端,可以看到我对应的是29920。可以看到是被占用的了,所以接下来只需要将其关掉即可。当我想启动MySQl的时候,出现了如下的报错。然后继续输入以下命令。

2024-07-22 17:16:28 670

原创 Vue 模版编译原理

在新老虚拟DOM首尾各添加一个指针,每次对比这四个指针对应的节点,如果老的首节点或者尾节点能和新的首节点或者尾节点匹配上,将老的对应的节点直接移动到新的对应的节点位置,如果没有匹配到就继续在老的虚拟DOM中寻找,如果没有就直接建立新的,然后移动新老节点的头部,直到新虚拟DOM中的首尾相遇,如果这时候老的虚拟DOM中还有节点,则直接删除。虚拟DOM可以用来描述真实DOM的JS数据结构,是一个树状结构,每个节点所对应的dom元素,都保存了dom元素的标签名、属性和子节点等信息。

2024-03-27 20:30:33 425

原创 前端工程化的理解

介绍了我所理解的前端工程师

2024-03-21 09:25:49 496

原创 Vue3组件通信的方式

Vue3间组件通信方式

2024-03-11 08:36:45 304

原创 如何使用阿里云OSS进行前端直传以及分片上传

在使用阿里云OSS进行前端直传时,首先我们需要去阿里云官网注册自己的存储桶,然后申请相关的accessKeyId和accessKeySecret,然后新建一个桶,为这个桶命名以及选择对应的地区。然后可以根据自己的业务,封装对应的组件,以下是根据我自己的项目,所封装的上传组件,所用的是React技术栈。

2024-02-20 22:05:12 1650 2

原创 使用Mobx时,在组件使用时数据类型为Proxy

在使用Mobx状态管理库时,在仓库中引用接口然后获取到的数据,打印出来都是正常的,但是在组件中引入仓库实例后,发现数据类型变成了Proxy类型。当你访问或修改被观察对象的属性时,实际上是通过 Proxy 对象来实现的,这样 MobX 就能够监听到这些操作并触发相应的响应式更新。这样做的目的是为了实现观察对象的属性访问和修改的拦截,以便在属性发生变化时能够自动追踪和响应。MobX 使用 Proxy 对象来拦截对被观察对象的属性的访问和修改操作。那么我们怎么将数据转换为我们可以正常使用的类型呢?

2024-02-05 21:13:05 515

原创 如何实现钉钉实现扫码登录

为实验室做的钉钉智能机器人后台管理系统,最近在使用 React+TS 技术进行重构,重构时,取消了原本的账号密码登录,扫码登录与账号密码登录的目的都是为了获取用户Token,只不过是过程不一样,取而代之的便是扫码登录,具体如何实现扫码登录功能前的配置相关,可以参考官方文档。,前端这边需要拿到这个字段中的信息,发给后端,然后后端返回该用户对应的Token,扫码登录的结果便已经达到,当然这个字段的值是临时的,只会在短时间内有效。的请求头中,需要携带相关的Token,如下是我的二次封装的。

2024-02-03 17:59:09 922

原创 使用mongodb数据库时报错[nodemon] app crashed - waiting for file changes before starting...

原因是当前mongodb数据库不再支持回调函数的写法,可以改为promise写法。在使用该代码片段读取数据库信息时候,报错。然后就可以正常运行了。

2024-01-16 21:13:26 716

原创 JS的异步与程序性能相关问题

实际上,JS程序总是至少分为两个块:第一块现在运行;下一块将来运行,以响应某个事件。尽管程序是一块一块执行的,但是所有这些块共享对程序作用域和状态的访问,所以对状态的修改都是在之前累积的修改之上进行的。一旦有事件需要运行,事件循环就会运行,直到队列清空。事件循环的每一轮称为一个tick。用户交互、IO 和定时器会向事件队列中加入事件。任意时刻,一次只能从队列中处理一个事件。执行事件的时候,可能直接或间接地引发一个或多个后续事件。

2024-01-05 22:05:15 1259

原创 JS的语法

详细介绍了JS的相关语法和运算符的规则

2023-12-07 20:00:30 472

原创 JS中的类型转换

本章介绍了 JavaScript 的数据类型之间的转换,即强制类型转换:包括显式和隐式。强制类型转换常常为人诟病,但实际上很多时候它们是非常有用的。作为有使命感的JavaScript 开发人员,我们有必要深入了解强制类型转换,这样就能取其精华,去其糟粕。显式强制类型转换明确告诉我们哪里发生了类型转换,有助于提高代码可读性和可维护性。隐式强制类型转换则没有那么明显,是其他操作的副作用。感觉上好像是显式强制类型转换的反面,实际上隐式强制类型转换也有助于提高代码的可读性。

2023-11-30 22:22:44 1185

原创 JS的原生函数

JavaScript 为基本数据类型值提供了封装对象,称为原生函数(如 String、Number、Boolean等)。它们为基本数据类型值提供了该子类型所特有的方法和属性(如:String#trim() 和Array#concat(…))。对于简单标量基本类型值,比如 “abc”,如果要访问它的 length 属性或 String.prototype方法,JavaScript 引擎会自动对该值进行封装(即用相应类型的封装对象来包装它)来实现对这些属性和方法的访问。

2023-11-30 22:21:29 1701

原创 JS中的类型与值

JS有 七 种 内 置 类 型:null、undefined、boolean、number、string、object 和symbol,可以使用 typeof 运算符来查看。变量没有类型,但它们持有的值有类型。类型定义了值的行为特征。很 多 开 发 人 员 将 undefined 和 undeclared 混 为 一 谈, 但 在JS中 它 们 是 两 码 事。undefined 是值的一种。undeclared 则表示变量还没有被声明过。

2023-11-30 22:20:54 931

原创 ES6中的类

class 很好地伪装成 JavaScript 中类和继承设计模式的解决方案,但是它实际上起到了反作用:它隐藏了许多问题并且带来了更多更细小但是危险的问题。class 加深了过去 20 年中对于 JavaScript 中“类”的误解,在某些方面,它产生的问题比解决的多,而且让本来优雅简洁的 [[Prototype]] 机制变得非常别扭。

2023-11-30 22:20:13 1131

原创 JS设计模式 — 行为委托

在软件架构中你可以选择是否使用类和继承设计模式。大多数开发者理所当然地认为类是唯一(合适)的代码组织方式,但是本章中我们看到了另一种更少见但是更强大的设计模式:行为委托。行为委托认为对象之间是兄弟关系,互相委托,而不是父类和子类的关系。JavaScript 的[[Prototype]] 机制本质上就是行为委托机制。也就是说,我们可以选择在 JavaScript 中努力实现类机制,也可以拥抱更自然的 [[Prototype]] 委托机制。

2023-11-30 22:19:15 704

原创 深入了解原型与原型链

如果要访问对象中并不存在的一个属性,[[Get]] 操作就会查找对象内部[[Prototype]] 关联的对象。这个关联关系实际上定义了一条“原型链”(有点像嵌套的作用域链),在查找属性时会对它进行遍历。所有普通对象都有内置的 Object.prototype,指向原型链的顶端(比如说全局作用域),如果在原型链中找不到指定的属性就会停止。toString()、valueOf() 和其他一些通用的功能都存在于 Object.prototype 对象上,因此语言中所有的对象都可以使用它们。

2023-11-20 23:15:34 429

原创 了解JS中的混个对象“类”

详细介绍了JS中的混合对象“类”,实际上JS中并不存在类

2023-11-15 23:06:44 255

原创 详解JS中的对象

详细介绍了在JS中对象的相关属性,从语法、类型以及类的属性的各种操作和类的各种遍历,都有详细的介绍

2023-11-12 20:44:28 1029

原创 深入理解JS中的this

本文详细介绍了在JS中this的几种作用,参考书目《你不知道的JavaScript》

2023-11-05 21:51:27 283

原创 深入理解作用域与闭包

本文详细介绍了JavaScript中作用域与闭包的的原理,参考书目《你不知道的JavaScript》

2023-11-01 23:32:15 244

原创 前端高性能渲染 — 虚拟列表

实现简单的虚拟列表

2023-09-02 11:01:59 870 1

原创 在Vue3中实现ECharts

一看就知道怎么在Vue3中使用echarts

2023-08-30 21:04:19 224

原创 app crashed - waiting for file changes before starting...

出现这个错误基本上都是自己编码的问题。

2023-08-17 10:01:14 326

原创 Vue3报错 getActivePinia()“ was called but there was no active Pinia. Did you forget to install pinia?

我是通过router跳转过来的,因此需要在局部引用即可。Vue3在组件中引入仓库并且实例化时,报有如下报错。

2023-08-17 09:33:26 160

原创 Vue3报错target must be an object

需要注意的是下图中标出的地方需要和后端所需要的字段相同,如果不同,修改第二段代码中params参数后的参数即可(形参都改)原因是请求数据的时候,需要带对象向后端请求数据。将以上写法改为下边的即可。

2023-08-16 22:06:56 1775

原创 钉钉机器人使用方法

在这里复制后,截取等号以后的字符串即可,之后去到后台登录自己的账号(自己手机号,密码为123456),登录成功后,添加自己的机器人即可。首先找到你想要添加的群聊,之后按照如下图步骤添加即可。

2023-07-29 10:41:25 480

原创 Vue3给输入框绑定监听事件

这样就可以对输入框进行实时监听,并完成相应的逻辑。

2023-07-27 11:28:28 3483 1

原创 Vue2项目搭建以及部署

最近给团队开发了一个钉钉机器人后台管理系统,主要负责前端的项目搭建、登录和其中一部分模块的开发,最近刚刚结束,写一篇总结来记录一下项目中的配置,用到的技术栈为Vue2。每个人新建项目的习惯不一样,我通常情况下习惯新建一个文件夹,然后在VsCode中打开,在VsCode中打开终端输入命令。之前在刚刚开始做的时候写过一篇有关VueRouter的配置文章,链接如下。,之后根据提示选择自己需要的技术栈,最终完成最开始的项目搭建。根据自己项目需求进行开发,开发完成后,进行代码打包。

2023-07-26 17:02:00 595

空空如也

空空如也

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

TA关注的人

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