- 博客(137)
- 收藏
- 关注
RSS订阅原创 【react】使用antd Table渲染数据遇到的报错问题
这里是因为在JavaScript中，数字0在布尔上下文中被视为false，所以在三元表达式中 text?${text}次 : “- -” 中，当 text 是 0 的时候，这个条件会评估为 false，然后返回 “- -”。可以使用严格相等运算符 === 来检查 text 是否为 null 或 undefined，而不是依赖于 text 的布尔值。简单的render渲染，text数据后端返回0，页面展示的–，而不是0次；
2025-01-15 11:24:41
460
1
原创 【Vue3中使用crypto-js】crypto-js加密解密用法
在上述示例中，通过CryptoJS.lib.WordArray.random(16)生成了一个 16 字节的随机iv，然后在CryptoJS.AES.encrypt方法中传入iv参数，指定了加密模式为CBC（Cipher Block Chaining，密码块链接模式），这种模式下需要使用iv。将明文分成固定长度的块，每个块独立使用密钥进行加密，相同的明文块会生成相同的密文块，加密和解密过程相对简单，易于实现，加密速度快。由于相同明文块加密结果相同，容易受到已知明文攻击，安全性较低。KEY：定义的加密密钥。
2025-01-09 19:28:47
4135
原创 【react-pdf】实现在线pdf加载——翻页加载和下拉滚动加载
不同的点也就是在这里对当前的numpages页进行了遍历。numPages是总页数，设置唯一标识key，也可以用index。这里是我的一个简单使用，详解可看点击上方查看react-pdf插件地址的一些其他用法；file可以是 URL、base64 内容、Uint8Array 等；
2025-01-07 14:03:34
711
原创 使用antd的table表格自定义表头加样式
在项目开发中遇到一个这样的需求，要给table表格的上层去加一个样式，1-12月上定义样式。其实也就是表头分组children，然后去单独更改title加样式；【记录自己开发中遇到的问题~】并且这里还有一个问题，给当前月份字段进行颜色区分；详细用法其实可以看Antd Table的表头分组用法以下附上源码【仅测试】：附上css样式：效果图：
2024-12-08 15:18:59
684
原创 【react-router】react-router v6 路由基本配置
如果你只使用 lazy 而不使用 Suspense，React 会在组件加载完成之前抛出一个错误，导致应用崩溃。suspense的字面意思就是悬而不决，用在平时开发中，就可以理解为还没有完成的事，你不知道啥时候完成。不过，为了处理懒加载组件的加载状态，通常推荐一起使用它们。如果你只使用 Suspense 而不使用 lazy，Suspense 将不会有任何效果，因为它需要与懒加载组件一起工作。通常情况下，建议将 Suspense 和 lazy 一起使用，以确保在组件加载过程中提供良好的用户体验。
2024-11-25 16:42:54
1173
1
转载 window下安装并使用nvm
为了确保彻底删除node在看看你的node安装目录中还有没有node文件夹，有的话一起删除。如果你已经安装了node，那么你需要先卸载node（不然安装nvm可能会失败），如果你没有安装那直接跳过这一步到下一步。1.在安装nvm的时候没有卸载node，导致使用nvm安装完之后，node和npm都不可用。再去看看你的环境变量有没有node相关的，有的话也一起删除了。3.全局安装完npm的时候，需要关掉终端窗口重新打开，才能装得上cnpm。4.选择nvm的安装文件夹时，注意文件夹名不要出现中文和空格。
2024-10-14 17:22:36
451
原创 【Git】git 如何在切换分支时不丢弃本地修改
当我们需要切换分支修改代码时，在切换分支之前有一些尚未提交的本地修改时，Git会默认拒绝切换，并提示我们先提交或者丢弃这些修改。git 中提供了一个命令 git stash，很方便的就可以完成，我们对当前的更改进行暂存，先保存本地修改。的作用是将 git stash 栈中最后一个版本取出来，==git stash apply stash@{0} ==的作用是可以指定栈中的一个版本。但如果使用git stash pop有冲突的时候，如何撤销呢？，即可将当前分支状态恢复。
2024-08-25 10:17:46
729
1
原创 【vue项目开发遇到的问题】：vue.runtime.esm.js:1887 TypeError: dateStr.match is not a function
但是这里有一点需要注意如果不加value-format，时间会回显1970，此时其实就是数据类型的问题，日期选择器接受的数据都是string类型，而我们拿到的值是number类型，我们需要给它加一个String()方法来处理。因为我是在当前的el-table表格中去使用的，是用row去v-model绑定值得，需要知道每一行。所以我在这里用的watch监听，去进行更改。看网上有博主分享原因是因为页面有rules。不能和value-fomatter共存。需要删掉value-fomatter；
2023-12-29 14:10:16
1760
1
原创 【react项目开发遇到的问题记录】：The above error occurred in the ＜Route.Provider＞ component:
Suspense 目前在 react 中一般配合 lazy 使用，当有一些组件需要动态加载(例如各种插件)时可以利用 lazy 方法来完成。
2023-12-28 17:44:12
2253
原创 npm WARN read-shrinkwrap This version of npm is compatible with loockfileVersion@1, but package-lock
但是可能会出现报错，原因是npm版本太高、和当前的node版本是不兼容不匹配的，因为这个命令是直接升级npm最高版本。（本人是不太推荐使用这个命令的）（因为版本太高还是需要使用降级命令进行降级）但可能会遇到运行成功之后，再次执行n -v 会出现’“bash”’ 不是内部或外部命令，也不是可运行的程序或批处理文件。意思是借助n模块去更新node版本，但是会出现报错信息。此时需要检查我们当前的node版本和npm版本号。可以执行当前的命令去升级npm版本。此时可以强制安装一下就ok了。
2023-12-28 11:30:19
6268
原创 【vue】vue中使用lodash的debounce防抖函数
假如我们设置了一个等待时间 3 秒的函数，在这 3 秒内如果遇到函数调用请求就重新计时 3 秒，直至新的 3 秒内没有函数调用请求，此时执行函数，不然就以此类推重新计时。在上述示例中，debounce函数延迟了searchDebounced方法的执行，1000毫秒内如果有新的输入，将重新计时，直到没有新的输入后触发将要调用的搜索方法xxxx进行实际的搜索操作。在我们项目中可以通过使用防抖函数，节省资源并提高用户体验，避免在频繁触发的事件中重复执行操作。在需要用到的地方进行引用。
2023-12-27 13:50:12
2579
原创 【vue项目开发遇到的问题】在vue3中引入图片报错 Uncaught (in promise) ReferenceError: require is not defined
因为require是webpack提供的一种加载能力，但是如果项目是用vite搭建的,就需要使用new URL(url, import.meta.url).href的格式引入图片。如下图所示：直接import引用该图片路径。
2023-12-25 16:37:49
7759
2
原创 【vue3】下载Vue3项目报错： UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token ‘??=‘
发下问题时nodejs版本不兼容的问题，那么解决方案就是升级node版本再运行就解决了！
2023-12-22 15:59:51
1474
原创 【Git】git提交代码报错Git: husky ＞ pre-commit
这个问题是因为当你在终端输入git commit -m “XXX”,提交代码的时候,pre-commit(客户端)钩子，它会在Git键入提交信息前运行做代码风格检查。进入项目的.git文件夹(文件夹默认隐藏,可先设置显示或者命令ls查找),再进入hooks文件夹,删除pre-commit文件,重新git commit -m ‘xxx’ git push即可。在提交代码commit时，加上参数 --no-verify, 可以忽略pre-commit代码校验的钩子 ，绕过eslint的检查了。
2023-12-11 17:33:51
4179
原创 彻底了解 npm、cnpm、pnpm 、yarn几种包管理工具
pnpm 是包管理工具的一个后起之秀，主要优点在于快速的、节省磁盘空间，如果你的包在一个项目中已经下载了，其它项目再用到这个包就不需要再次下载，而是通过软链接的方式关联。npm 是 Node.js 自带的包管理器，平时通过 npm install 命令来安装各种 npm 包（比如：npm install vue-router ），就是通过这个包管理器来安装的。pnpm 的下载源使用的是 npm ，所以如果要绑定镜像源，按照 npm 的方式处理就可以了。
2023-09-04 14:06:14
467
原创 【Git】git克隆github代码报错fatal: unable to access ‘克隆仓库地址/‘: SSL certificate problem：xxxxxx解决方案
这样就可以绕过 SSL 证书检查，成功克隆仓库。请注意，这种做法将不会验证服务器的真实性，因此建议仅在受信任的网络中使用。发生这样的错误是因为 Git 无法验证 GitHub 的 SSL 证书。这可能是由于本地的证书问题或网络问题导致的。--------此方法亲测有效，不知是否适合大家。（马赛克部分是自己所要克隆的代码地址）
2023-08-14 20:36:13
1085
原创 Vue中的scoped实现原理？
在vue文件中的style标签上，有一个特殊的属性：scope。当一个style标签拥有scoped属性时，它的css样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
2023-07-24 15:15:10
425
原创 js面试题整理
尾递归是指一个函数在调用自身之后不再执行任何其他操作，而是将返回值直接传递给函数调用的上级，从而避免了新的调用栈帧的创建。换句话说，尾递归是指递归调用发生在函数的最后一个语句中，从而使得函数调用不需要保存多个调用栈帧，而只需一个即可。
2023-07-19 09:39:25
336
原创 深拷贝浅拷贝有什么区别？怎么实现深拷贝？
深拷贝就是开辟一个新的栈，两个对象的属性完全相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。从上图发现，浅拷贝和深拷贝都创建出一个新对象，但在复制对象属性的时候，行为就不一样。如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址。浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝。但是这种方式存在弊端，会忽略undefined、symbol和函数。
2023-07-18 16:36:25
163
原创 Vue3 和 React 的区别
Vue 3和 React是市面上目前非常受欢迎的两个前端框架。它们都采用了组件化的开发模式，使得开发者可以将复杂的应用拆分为多个小组件进行开发，从而提高了代码的可维护性和重用性。虽然Vue 3和React都拥有各自的优点，但它们也存在着一些不同之处。
2023-06-19 15:14:34
2925
1
原创 MD5加密是什么以及md5加密解密的原理是什么？以及它的优缺点？MD5有哪些用途？
MD5算法的原理是将输入的消息分成512位的数据块，每个数据块再分成16个32位的小块，然后通过一系列的位运算和非线性函数，对每个小块进行处理，最终得到一个128位的哈希值。由于MD5算法的设计，即使输入的消息只有微小的变化，也会导致输出的哈希值发生巨大的变化，因此可以用来验证数据的完整性和真实性。容易被暴力破解：由于MD5算法的哈希值长度固定，且MD5算法的计算速度很快，因此可以通过暴力破解的方式找到与原数据相同的哈希值，从而破解原数据。压缩性：任意长度的数据，算出的MD5值长度都是固定的。
2023-05-27 09:51:43
6558
原创 vue+react项目相关面试题【未完成】
animation和traslation都是可以做出动画效果的，但是transition主要是做一些简单的过渡效果，而animation可以做复杂的动画效果，在语法上有非常大的区别。animation是动画属性，它的实现是不需要触发事件的，设定好时间之后可以自己执行，且可以循环一个动画(设置多个关键帧)。translation是过渡属性，强调的是过渡，它的实现需要触发一个事件(比如鼠标移动上去，焦点，点击等)才执行动画，过渡只有一组关键帧。
2023-05-27 08:56:39
658
原创 微信小程序的基本使用以及安装教程
安装微信开发者工具链接根据自己的操作系统下载对应的安装包进行安装微信公众平台登录链接注册小程序帐号教程ps：如果是没有注册过的，就点击立即注册按钮，选择要注册的小程序，一步步的进行操作，如果是已经注册过的，就微信扫一扫，选择该微信下的公众平台帐号进行登录。ps：没有注册过的，按照步骤一步步填写信息即可。
2023-05-25 10:28:44
2305
原创 Webpack和Vite的区别？
总的来说，Vite更适合开发阶段，可以提高开发效率，而Webpack则更适合生产环境，可以进行更复杂的打包和优化。
2023-05-23 09:52:16
899
原创 Vue3相关知识点笔记（持续更新中。。。。）
作用: 定义一个响应式的数据语法:创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。JS中操作数据：xxx.value备注：接收的数据可以是：基本类型、也可以是对象类型。基本类型的数据：响应式依然是靠的get与set完成的。对象类型的数据：内部“ 求助 ”了Vue3.0中的一个新函数——reactive函数。
2023-05-18 21:40:08
436
原创 什么是Pinia？以及它的使用方式？以及和Vuex的区别是什么？
Pinia其实就是Vuex5，就是Vuex第五个版本后就叫Pinia了。Pinia是一个用于vue的状态管理库，类似于vuex，是vue的另一种状态管理工具。
2023-05-17 14:48:22
937
原创 前端面试题记录
防抖：在用户多次触发事件，当用户停止触发事件，将事件执行一次。等待一段时间。节流：在用户多次触发事件，会在多次触发的过程中，间隔执行事件。按照一定的频率执行。函数执行后返回结果是一个内部函数，并被外部变量所引用，如果内部函数持有被执行函数作用域的变量，即形成了闭包。可以在内部函数访问到外部函数作用域。使用闭包，一可以读取函数中的变量，二可以将函数中的变量存储在内存中，保护变量不被污染。因为闭包会把函数中的变量存储在内存中，会对内存有消耗，所以不能滥用闭包，否则会影响网页性能，造成内存泄漏。
2023-05-11 20:44:42
474
原创 对infer的了解及应用场景？
Infer是Facebook公司的一个开源的静态分析工具。Infer 可以分析 Objective-C， Java 或者 C代码，用于发现潜在的问题和错误。它可以自动推断代码中的类型和错误，并提供有关如何修复这些问题的建议。其作用类似于sonar和fortify。Infer更倾向于发现代码中的空指针异常、资源泄露以及内存泄漏的问题。
2023-05-07 10:12:12
301
原创 preload和prefetch了解吗？它是什么？使用它的好处是什么？
preload是一种技术，用于在页面加载之前预加载资源，例如图片、CSS、JavaScript等，以提高页面加载速度和性能。通过预加载，浏览器可以在页面加载时立即获取这些资源，而不必等到需要它们时再去下载。这可以减少页面加载时间和延迟，并提高用户体验。preload可以通过HTML标签、JavaScript代码或HTTP头文件来实现。这个指令可以在 中使用，比如。这不要与浏览器预加载混淆，浏览器预加载只预先加载在HTML中声明的资源。
2023-05-07 10:06:30
1579
原创 script 标签中，async 和 defer 两个属性有什么用途和区别？
script标签用于加载脚本与执行脚本，直接使用script脚本时，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。比如现在大家习惯于在页面中引用各种第三方脚本，但如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。针对上述情况，script标签提供了两种方式来解决问题，就是加入属性以及：此布尔属性被设置为向浏览器指示脚本在文档被解析后执行。：设置此布尔属性，以指示浏览器如果可能的话，应异步执行脚本。
2023-05-07 10:00:11
757
原创 Canvas和SVG有什么区别？
Canvas和SVG都是用于绘制图形的Web技术。SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。
2023-05-07 09:29:35
597
原创 ES5、ES6和ES2015有什么区别?
是ECMScript的第六个版本，也成为ES2015，发布于2015年，引入了许多新的语言特性和语法糖。指的是ECMScript的第五个版本，发布于2009年，是目前最广泛使用的JavaScript版本。是ES6的官方名称，但是由于ES6引入了太多的新特性，因此人们通常使用ES2015来指代ES6。总的来说，ES6引入了许多新的特性和语法糖，使得JavaScript的编程体验更加现代化和高效。新的默认参数和剩余参数语法，使得函数的定义和调用更加灵活。新的模块化系统，使得代码的组织和管理更加容易。
2023-05-07 09:22:49
2197
原创 如何判断object是数组类型（是否是数组）？
在前端面试中，我们经常会被问道，如何判断一个对象是不是数组类型，下面就这一点展开详细的描述，并总结一下共有几种方法。
2023-04-27 14:29:13
1512
原创 css3特性中的transform：translateZ(0)有什么作用？
定义 3D 转换，只是用 Z 轴的值。Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
2023-04-27 14:17:46
1684
原创 微信小程序面试题【1-4】
WXML提供两种文件引用方式import和include。WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件事件系统，可以构建出页面的结构。数据绑定：--wxml-->// page.jsPage({data: {})列表渲染 ：--wxml-->// page.jsPage({data: {})条件渲染：--wxml-->// page.jsPage({data: {})模板：--wxml-->
2023-04-27 09:03:32
203
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人