- 博客(134)
- 收藏
- 关注
RSS订阅原创 前端数据可视化适配方案汇总
在日常开发过程中，我们经常会遇到大屏可视化这种需求，而选用技术方案的不同则会呈现出不同的效果。方案实现方式优点缺点vw vh1.按照设计稿的尺寸，将px按比例计算转为vw和vh1.可以动态计算图表的宽高，字体等，灵活性较高 2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况1.每个图表都需要单独做字体、间距、位移的适配，比较麻烦scale1.通过 scale 属性，根据屏幕大小，对图表进行整体的等比缩放1.代码量少，适配简单 2.一次处理后不需要在各个图表中再去单独适配。
2024-07-25 13:50:26
1221
原创 TCP/IP协议三次握手、四次挥手详解
由于首部可能含有可选项内容，因此TCP报头的长度是不确定的，报头不包含任何任选字段则长度为20字节，4位首部长度字段所能表示的最大值为1111，转化为10进制为15，15*32/8 = 60，故报头最大长度为60字节。每个连接方通常都在通信的第一个报文段（为建立连接而设置SYN标志为1的那个段）中指明这个选项，它表示本端所能接受的最大报文段的长度。）状态，等待服务器发送连接释放报文，服务器将最后的数据发送完毕后，就向客户端发送连接释放报文，服务器就进入了。主动打开连接的为客户端，被动打开连接的是服务器。
2024-07-11 15:49:59
899
原创 前端打包工具之npm、yarn、pnpm对比
NPM（Node Package Manager），作为默认的JavaScript应用包管理器，与Node.js一同安装，它是目前使用最广泛的包管理器，得益于其对大量包的强大支持。Yarn 是一个 JavaScript 的包管理器，它是由 Facebook、Google、Tilde 以及其他社区成员共同维护的开源项目。Yarn 在 NPM 的基础上进行了改进和增强，旨在提高依赖包的安装速度和可靠性。pnpm，即performant npm，高性能的npm。
2024-06-18 13:32:42
1043
原创 vue2中实现记住密码功能
在使用 Vue 2 和 Element UI 实现登录页面的记住密码功能时，为了安全起见，需要对密码进行加密处理。你可以使用加密库如 crypto-js 来对密码进行加密和解密。以下是完整的示例代码，展示了如何实现这个功能。
2024-06-17 10:53:19
476
原创 JavaScript中对象（Object）方法详解
Object.getPrototypeOf` 方法返回参数对象的原型。这是获取原型对象的标准方法。// 几种特殊对象的方法：// 空对象的原型是 Object.prototype// Object.prototype 的原型是 null// 函数的原型是 Function.prototype。
2024-05-11 13:42:05
850
1
原创 Object.assign详解
分析：从例子中可以看出，当我们修改目标对象的属性值时，源对象的name没有变化，但是grade.chi却被改变了（修改源对象的属性也是同理），因此我们可以看出Object.assign()拷贝的只是属性值，假设源对象的属性值是一个指向对象的引用，那么它也只拷贝那个引用值。1、Object.assign()方法的第一个参数是目标对象，后面的参数都是源对象，Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。这个对象的任何变化，都会反映到目标对象上面。
2024-04-11 09:53:48
3705
原创 解决el-table设置固定高度后，展示不同列时表格高度变小bug
究其原因可知是el-table列动态发生变化后，el-table__body-wrapper的高度变小了。在更新表格数据后对el-table进行重载。
2024-04-03 10:13:34
1107
原创 vue2中vue-print-nb实现打印功能
若打印时，末尾总是出现空白页，则存在定义了height:100%的元素，删除掉此样式即可 通常都是因为存在以下样式导致,通常被定义在全局样式文件中，或index.html中。您可以通过在需要隐藏的div上添加class=“no-print”，然后在打印样式中设置该类的display属性为none来实现隐藏。设置打印内容样式，不影响页面原有样式 以下内容为设置 element table 在打印时的样式，防止打印不全。在要进行分页的标签上，添加以下样式。或者 在需要分页的内容最后加上。
2024-03-28 10:26:36
1369
原创 ElementUI中的el-table表格实现动态添加一行、删除一行、清空所有行
ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行。
2024-03-27 17:43:55
3679
原创 彻底搞懂Vue3中 watch、watchEffect区别！
注意：使用同步语句创建的侦听器，会自动绑定到宿主组件实例上，并且会在宿主组件卸载时自动停止。使用异步回调创建一个侦听器，则不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。这个回调函数接受三个参数：新值、旧值，以及一个用于清理副作用的回调函数。是懒执行的：当数据源发生变化时，才会执行回调。注意：深层侦听需要遍历所有嵌套的属性，当数据结构庞大时，开销很大。的主要功能是相同的，都能响应式地执行回调函数。接受两个参数，第一个参数是数据发生变化时执行的回调函数，用法和。第二个参数是一个可选的对象，支持。
2024-02-28 10:10:48
1327
原创 JavaScript值类型和引用类型两道经典面试题
属性（此处不同人有不同理解，我暂时理解为属性名不是变量，没有开辟新的空间），此时才进行赋值运算，赋值从右往左，一次赋值，即把。首先，小试牛刀，请看第一道题。那么上述代码输出结果是多少呢？废话不多说，直接上答案。号运算符，此时先执行。
2023-12-16 20:23:36
262
原创 vue2通过权限控制tab标签显示和隐藏
在开发过程中，我们可能会遇到这样一个场景：根据不同权限对tab栏内容进行控制，这时候用自定义指令v-permission就达不到我们想要的效果，其是将当前节点的子元素进行移除，此时当前节点依然存在，如下图所示。这时候就需要利用v-if自定义控制，其思路实：v-if中执行一个函数，函数传入一个权限值。在函数中判断权限值是否属于权限菜单内，返回布尔类型值。<el-tab-pane label="负荷跟踪" name="first" v-permissions="['load_track']">
2023-11-28 15:08:49
1722
原创 vue3中引入svg矢量图
在项目开发过程中，我们经常会用到svg矢量图,而且我们使用svg以后，页面上加载的不再是图片资源，这对页面性能来说是个很大的提升，而且我们svg文件比img要小的很多，放在项目中几乎不占用资源。
2023-11-24 15:06:34
1073
原创 前端本地存储数据库IndexedDB
前端本地化存储算是一个老生常谈的话题了，我们对于存储量小：即使是web storage的存储量最大也只有 5M；存取不方便：存入的内容会经过序列化，当存入非字符串的时候，取值的时候需要通过反序列化。当我们的存储量比较大的时候，我们一定会想到我们的indexedDB，让我们在浏览器中也可以使用数据库这种形式来玩转本地化存储，然而indexedDB的使用是比较繁琐而复杂的，有一定的学习成本，但第三方库的出现，让我们轻松无负担的在浏览器中使用indexedDB。截止今天，在github的star已经。
2023-11-20 15:20:24
329
原创 vue实现无感刷新token
最近在做vue3管理系统项目的时候，涉及到登录token有效时间问题，能不能让token过期时间长一点，避免频繁进行登录。前端：后端，你能不能把token过期时间设置的长一点。后端：可以，但是那样做不安全，你可以用更好的方法。前端：什么方法?后端：给你刷新token的接口，定时去刷新token前端：好，让我思考一下需求当token过期的时候，刷新token,前端需要做到无感刷新token,即刷token时要做到用户无感知，避免频繁登录。
2023-11-13 15:07:00
651
原创 JavaScript开发技巧（上篇）
JavaScript中有很多速记技巧，可以缩短代码长度，减少冗余，提高代码的可读性和可维护性。本文将介绍提高效率的JS缩写技巧，帮助你告别写垃圾的生活，轻松写出优雅的代码！
2023-10-31 18:18:23
147
原创 解决Vue2封装组件含有echarts时多次调用出现id重复问题
封装组件中使用echarts时，多次调用导致id重复，出现页面不渲染、数据覆盖等问题。
2023-10-16 11:41:27
410
原创 一文彻底搞懂前端ES6模块化
在以前的JavaScript中是没有模块化概念的，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。如果要进行模块化操作，就需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化，于是才有了ES6模块化的诞生。为什么要有模块化，或者模块化的好处是什么呢？大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块间的相互调用。可以将一段复杂的程序拆解开来，方便维护可拓展。ES6模块化规范是浏览器端与服务端通用的模块化开发规范。
2023-10-13 16:40:09
169
原创 彻底弄懂js函数柯里化
函数柯里化(Currying)在JavaScript中总感觉属于一种不温不火的存在，甚至有些开发者在提起柯里化时，竟然会有点生疏不懂。其实不然，对于它们的概念可能在日常开发中不太提到，但是它们的思想和用法，却在前端开发中经常借鉴和使用，它可以帮助我们写出更加优雅、灵活的代码。本文将介绍柯里化概念、实现原理和应用场景，希望对大家能有所帮助！函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数的技术。
2023-09-26 17:41:44
238
原创 vue3中两个el-select下拉框选项相互影响
label: '1月' ,label: '2月' ,label: '3月' ,label: '4月' ,label: '5月' ,label: '6月' ,label: '7月' ,label: '8月' ,label: '9月' ,label: '10月' ,label: '11月' ,label: '12月' ,disabled: false, } , ] //把方法和数据返回出去 return {
2023-09-21 17:28:41
797
原创 vue3+vite3项目打包优化
Vue项目开发完毕后，对项目进行打包发布之前，必不可少的操作就是项目优化，这也是程序猿的加分项。跟随本文的脚步来看看如何对项目进行优化吧！
2023-09-20 10:21:27
2215
原创 vue3 + vite3 addRoute 实现权限管理系统
在权限系统开发中，根据后端返回的菜单列表动态添加路由是非常常见的需求，它可以实现根据用户权限动态加载可访问的页面。本篇文章我们将重点介绍动态添加路由的全过程。
2023-09-19 10:54:23
1041
原创 手把手搭建Vue3+Vite项目模板
本项目是一个基于Vite3搭建的Vue3项目模板，集成了TypeScriptESLintPrettierStylelintHuskyCommitlintpnpm包管理工具、Vue RouterPiniaSVG图标配置、SASSAxios等等。运行环境：VSCodeNode16+VSCodeTypeScript。注意：需要关闭Vetur插件。
2023-09-15 17:30:32
606
原创 vite和webpack的区别
Webpack和Vite是现代前端开发中非常重要的工具，有助于改善开发者的工作流程和提高生产力。从底层原理上来说，Vite是基于esbuild预构建依赖。而esbuild是采用go语言编写，因为go语言的操作是纳秒级别，而js是以毫秒计数，所以vite比用js编写的打包器快10-100倍。下面这篇博客将对比Webpack和Vite的区别，并探讨在什么样的项目中选择哪一个工具。综上所述，Vite和Webpack都是构建Web应用的工具，它们在开发模式、打包效率、插件生态、配置复杂度和热更新机制方面存在差异。
2023-09-14 22:31:22
1236
原创 vue3中使用viewerjs实现图片预览效果
viewer.js支持移动设备触摸事件支持响应式支持放大/缩小支持旋转（类似微博的图片旋转）支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式（可做屏保）支持缩略图支持标题显示支持多种自定义事件GitHub。
2023-09-06 15:07:27
1857
原创 js判断对象是否为空对象的方法总结
在面试或者开发过程中，我们经常会遇到这样一个问题——如何判断一个对象是否为空对象？下面让我们一起来总结一下吧！
2023-08-30 23:13:21
800
原创 详解vue3中ref和reactive用法和区别
ref和reactive是Vue3中用来实现数据响应式的API，一般情况下，ref定义基本数据类型，reactive定义引用数据类型。<template>})})const { data } = await getTableDataApi(queryParams) // 模拟接口获取表格数据</script>以我们常用的表格数据举例，可以看到，ref定义数组与定义基本数据类型没什么差别，接下来看看reactive<template>})})
2023-08-29 22:34:51
1233
原创 十分钟，带你了解 Vue3 的新写法
本文的目的，是为了让已经有 Vue2 开发经验的 人 ，快速掌握 Vue3 的写法。因此， 本篇假定你已经掌握 Vue 的核心内容 ，只为你介绍编写 Vue3 代码，需要了解的内容。好了，对于快速上手 Vue3 来说，以上内容基本已经足够了。这篇文章本身不能做到帮你理解所有 Vue3 的内容，但是能帮你快速掌握 Vue3 的写法。如果想做到对 Vue3 的整个内容心里有数，还需要你自己多看看 Vue3 的官方文档。
2023-08-23 10:46:44
152
原创 vue3父子组件相互调用方法详解
在vue3项目开发中，我们常常会遇到父子组件相互调用的场景，下面以setup语法糖格式详细聊聊父子组件那些事儿。
2023-08-20 21:46:58
2897
2
原创 vue3 基于element plus对el-pagination进行二次封装
在vue3项目中，如果每个列表页都敲一遍分页方法，显然是不合理的，那么，下面我将基于element plus对el-pagination进行二次封装，使用vue3语法糖格式，废话不多说，开干。
2023-08-20 20:29:55
1181
原创 vue3中hooks用法详解
hook是钩子的意思，看到“钩子”是不是就想到了钩子函数？事实上，hooks还真是函数的一种写法。vue3借鉴开发出了，所以也就意味着也能进行自定义封装hooks。vue3中的hooks就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能。其实hooks和vue2中的mixin有点类似，但是相对mixins而言，hooks更清楚复用功能代码的来源, 更清晰易懂。
2023-08-02 17:27:10
3960
原创 一次电路和二次电路的区别
目前，一次电路和二次电路的区别在当代的应用可谓是越来越广泛，一次电路和二次电路的区别是值得我们好好学习的，现在我们就深入了解一次电路和二次电路的区别一次电路和二次电路的区别 一次电路主电路也叫一次电路，它是从电源到负载输送电能时电流所经过的电路。一次电路中的各种电气设备叫一次设备，它们包括了各种开关、断路器、接触器、熔断器和用电设备；二次回路中的各设备叫二次设备，它们包括各种控制开关（如按钮等），继电器、接触器的线圈和辅助触点、信号灯、测量仪表等。
2023-08-02 09:28:46
1991
原创 ES6：Generator函数详解
从另一个角度看，也可以说 Generator 生成了一系列的值，这也就是其名称的来历(在英语中generator”这个词是“生成器”的意思)。上面的代码中，函数 f 如果是普通函数，在为变量 generator 赋值时就会执行。方法时，内部的指针就会从函数的头部或上一次停下来的地方开始执行，直到遇到下一个。方法等于该对象的遍历器对象生成函数，调用该函数会返回该对象的一个遍历器对象。函数运行的不同阶段从外部向内部注入不同的值，从而调整函数行为。上面的代码已经把回调函数改成了直线执行的形式，但是加入了大量。
2023-07-29 19:19:54
1051
原创 git远程一个分支对应本地两个分支推送
这样，两个本地分支都会被推送到远程仓库中的同一个远程分支。请确保在执行这些命令之前，你已经将对应的本地分支进行了合适的提交。
2023-07-27 10:12:53
573
原创 Vue实现柱状图横向自动滚动
原理：通过定时器修改Echarts的配置（options）达到我们想要的效果。此外，我们还需要了解Echarts中dataZoom这个组件，这个组件用于：用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。简单来说就是，在数据量多的时候，既能保持Echarts美观度，也能让用户自由查看所有数据。在dataZoom组件中有三种类型，在本次需求中，使用的是内置型数据区域缩放组件（dataZoomInside）。
2023-07-27 09:39:39
812
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人