工作经验总结
文章平均质量分 70
记录平时项目的点滴成长
接着奏乐接着舞。
冥鸿天际尘事分付一轻芒
展开
-
【可视化】封装滚动菜单列表组件
滚动菜单列表组件是一个适用于大屏可视化项目的自定义组件。它支持自定义表格头部、多种数据格式、自动滚动显示数据,并具有高度的灵活性和可配置性。无论是单列数据还是多列数据,都可以通过简单配置快速展示,并且支持自定义样式以匹配不同的视觉风格。原创 2024-08-20 08:30:00 · 560 阅读 · 3 评论 -
如何发布自己的NPM包详细步骤
在前端开发中,将自己编写的 Vue 组件或插件打包并发布到 NPM 上,不仅可以方便自己在其他项目中复用,还能分享给更多的开发者使用。本文将从 NPM 注册、登录与发布流程,及如何通过 Vue CLI 打包插件的角度详细介绍如何发布 Vue 插件。通过以上步骤,你可以成功将 Vue 组件打包并发布到 NPM 上。本文详细介绍了从 NPM 注册、登录、发布,到通过 Vue CLI 配置和打包插件的完整流程。希望通过这篇文章,你能够更好地理解 Vue 插件的发布流程,并能够在实际项目中灵活应用。原创 2024-08-19 15:27:16 · 1283 阅读 · 1 评论 -
iframe 和父窗口之间的通信——postMessage
是一种允许来自不同源的窗口安全地进行通信的方法。使用此 API,可以指定消息的接收者和发送的数据,确保仅预期的接收者可以接收和处理这些数据。data:要发送的数据。:定义哪些窗口能接收消息的 URI(如果设置为 “*”,则任何窗口都可以接收消息,但这种做法不安全)。原创 2024-07-31 17:57:41 · 817 阅读 · 1 评论 -
前端实现对本地文件的IO操作
在网页中,前端已经可以读取本地文件系统,对本地的文件进行IO读写,甚至可以制作一个简单的VScode编辑器。这篇文章以渐进式方式实现此功能,文末附上所有代码原创 2024-06-19 18:25:20 · 803 阅读 · 6 评论 -
实时监听 localStorage 变化的实现方法
设置并触发自定义事件监听自定义事件});alert(id);// 手动触发自定义事件groupID。原创 2024-06-18 18:32:10 · 914 阅读 · 3 评论 -
加载大量图片优化方案
图片压缩通过减少图片文件的大小来提高加载速度。通过压缩图片,页面加载所需的带宽减少,从而提高了加载速度。这样可以显著减少初始页面加载时间,因为只加载当前视口内的图片。通过结合以上优化技术,你可以显著提高图片加载的性能,提供更好的用户体验。使用现代格式可以进一步减少图片文件大小,提高加载速度。用户请求图片时,会从距离最近的服务器获取,从而提高加载速度,并减少服务器的负担。瀑布流布局将图片分布在不同的列中,随着用户滚动页面,逐步加载新的图片。预加载关键图片可以确保这些图片在页面加载时立即可用,提升用户体验。原创 2024-05-30 21:00:00 · 1698 阅读 · 3 评论 -
centos7服务器环境配置详细教程(nginx、node、MongoDB、MySQL)
CentOS 7(以及大多数Linux发行版)遵循文件系统层次标准(FHS),这意味着文件和目录遵循特定的结构和命名规范。原创 2024-03-12 18:07:42 · 1346 阅读 · 2 评论 -
基于Node.js 和 FFmpeg构建自动化脚本用来转码视频
可以自动监控目录并转码视频的Node.js脚本(可一键复制代码,粘贴即用)。这个脚本可以根据你的特定需求进一步定制和扩展,例如添加更多的转码选项、处理更多视频格式、或者在转码完成后发送通知等。这只是展示了FFmpeg和Node.js在视频处理自动化方面强大功能的冰山一角原创 2024-03-11 13:09:37 · 1596 阅读 · 9 评论 -
FFmpeg教程(干货快速上手)
FFmpeg是一款免费、开源的跨平台多媒体处理工具,它支持几乎所有的视频格式和编码标准。FFmpeg包含了一系列的子项目和工具,如ffmpeg命令行工具用于转码和处理视频和音频文件,ffplay用于播放多媒体内容,而ffprobe则用于分析多媒体流的信息。原创 2024-03-08 22:16:23 · 4648 阅读 · 7 评论 -
【性能优化】前端实际项目中的缓存应用
本篇博客从浏览器缓存、CDN缓存,到服务端缓存,再到实际工作场景。我们将一一解析这些技术背后的原理,希望你能从中获得启发。原创 2024-03-07 22:34:55 · 1619 阅读 · 4 评论 -
【2024】nvm的简介、安装、使用
NVM,即Node Version Manager,是一个命令行工具,允许用户在同一台计算机上安装和管理多个Node.js版本。通过NVM,开发者可以轻松切换项目所需的Node.js版本,极大地提高了开发效率和环境的灵活性。原创 2024-03-04 22:21:40 · 1504 阅读 · 6 评论 -
前端如何设置模板参数
最近接到一个需求,在一个类似chatGpt的聊天工具中,要在对话框中设置模板,后端提供了很多模板参数,然后要求将后端返回的特殊字符转成按钮,编辑完成后在相应的位置拼接成字符串。当然,还进一步拓展了其功能,比如可以上传文件,解析出来后和其他字符拼接。在点击发送后,页面上就是如此拼接后的字符串。原创 2023-12-13 16:33:26 · 1042 阅读 · 18 评论 -
vue项目如何防范XSS攻击?
介绍了实际工作中渲染数据时遇到XSS攻击时的防范措施,以及解决方案。还有XSS攻击的原理、途径以及如何防范原创 2023-11-16 13:54:21 · 2042 阅读 · 14 评论 -
2023年10月工作经验及问题整理总结
主要记录平时工作中的一些问题及解决方式整理,本文主要是前端方面问题。原创 2023-10-16 12:18:39 · 831 阅读 · 13 评论 -
实现表格表头自定义编辑、一键导入、增加列
可以对表格区域任意位置进行编辑,增加、删除,支持一键导入,一键生成表格原创 2023-09-22 11:54:34 · 1173 阅读 · 11 评论 -
前端:你不知道的async await
你是否知道async是什么?作用是什么?await是什么执行逻辑是怎样的?await下面的代码是什么样的执行顺序?原创 2023-02-24 07:30:00 · 5073 阅读 · 13 评论 -
promise静态方法及相关练习
promise的静态方法相对简单,这篇文章做个总结,以便漏补缺总结如下:1. Promise.all/Promise.anyPromise.allSettled/Promise.race都是接受数组,数组里面是promise2.. Promise.all 接收的promise数组只要有一个失败那么整个就是失败进入cantch错误状态,可以打印错误信息3.Promise.any可以看成all的反义方法,它会打印最先成功的promise,如果全部失败,则会进入catch可以打印失败原因4.Promis原创 2023-02-23 21:15:42 · 1637 阅读 · 3 评论 -
【前端】浏览器的渲染流程(完整)
本文主要包含以下内容:• 浏览器渲染整体流程• 解析 HTML• 样式计算• 布局• 分层• 生成绘制指令• 分块• 光栅化• 绘制• 常见面试题原创 2023-02-20 22:37:37 · 7877 阅读 · 11 评论 -
[封装组件]分别使用react、vue、原生JS完成自动移动的小球
本篇文章的主要目的是,通过手写一个自动移动的小球,然后以组件的形式,抽离出去实现随机生成一群小球,然后分别使用react 、 vue 、 原生JS去实现,体会组件封装的设计模式及好处。原创 2023-02-13 10:27:40 · 1324 阅读 · 18 评论 -
【Webpack】深入浅出 Plugin(插件) 原理
本篇文章主要写了 webpack 中的 plugin 原理。包括是什么,怎么使用,如何自定义等。它能够帮助大家提升对 plugin 的认识,同时学习到了原理,将来大家也能够在社区中做出贡献。原创 2023-02-06 21:54:18 · 1811 阅读 · 15 评论 -
【copy零距离】网页复制限制的实现以及如何破解?
你是否遇到过下面的情况:我就单纯的想复制,结果又是让我登录又是开会员,作为一个复制粘贴工程师(并不),叔叔可忍,婶婶不可忍?下面会解析不让复制如何实现的,以及如何破解原创 2022-12-29 18:20:24 · 1828 阅读 · 24 评论 -
如何使用depcheck检查依赖?
你是否遇到过以下问题:项目在别人哪里运行的好好地,拿到自己这边就跑不起来了…去一家新公司,用新电脑运行项目各种报错…明明这个项目在公司电脑上运行正常,用我自己的电脑运行就各种错误,运行不起来?原创 2022-12-26 15:04:07 · 2275 阅读 · 4 评论 -
将整个网站变为黑白色
只需2行代码让自己的网站变成灰色(黑白),附兼容性写法原创 2022-12-01 17:50:39 · 5894 阅读 · 11 评论 -
10月工作经验总结
主要记录平时工作中的一些问题及解决方式整理,本文主要是前端方面问题。原创 2022-10-24 11:49:33 · 3625 阅读 · 4 评论 -
three.js实现酷炫散点模型
暂时就想到这些,three.js的使用不想正经写代码,他是有着固定的结构,只需修修改改即可。由于文件大小限制,仅能展示少部分特效,本文中共7中变换,如球体,立方体,管道,波浪,反重力,重力等效果。网上找到three.js源码,放到public目录下,在index.html中引入。项目需求是基于数据库分析出来的离散相关性的散点图,主要是为了追求良好的展示效果。使用了three.js编写的。至此,完成,如果需要three.js源码的可以留言邮箱。将文章末尾的实现以上功能的源码放入项目中(任意位置)原创 2022-10-14 18:08:13 · 4921 阅读 · 5 评论 -
vue导出并定制PDF样式
需求是将项目中的一些图标或数据以PDF的格式下载下来,并且要求样式好看,且格式按照需求调整。原创 2022-10-11 21:22:41 · 2553 阅读 · 3 评论 -
【组件封装】监听localStorage的变化
由于在平时开发中,经常或不经常的用到一些功能或插件或函数,回头找起来还挺麻烦,我的想法是我直接将他们全部的封装成一个个的组件,做到“”拿来即用“”且该组件必须经过测试确实可用才行,于是我新创建了一个vue项目,基于"vue": "^2.6.14",用它来测试组件是否正常,因为我vue2/3 ,react hooks 之类的都在用,这里就以vue2作为基础了,后续我的想法是多做几个版本。原创 2022-09-08 00:21:22 · 3652 阅读 · 2 评论 -
Electron在Linux下打包那些事
我是用的是electron-builder打包工具,要在linux下打包成amd64架构的APPimage文件,以及arm64架构的APPimage文件。ps:appimage是linux下的标准可执行文件,当然你也可以选择其他格式比如deb,但是我感觉还是APPimage比较好,我后续是要在基于linux系统的国产操作系统UOS(统信)下安装,只需要将APPimage文件打包为deb安装包即可。原创 2022-09-05 13:40:03 · 9193 阅读 · 12 评论 -
前端可视化大屏设置全屏模式方法
相当于手动按F11的效果。经典的应用场景是制作可视化大屏或者全屏展示类的页面。因为现在写的是vue项目,所以稍后以vue为例子。注意一个点,样式设置为绝对定位之类的,意思是别让他占位置影响布局。第五步,生命周期中调用,达到一进入就自动全屏。第四步,页面的结构里面找个位置粘贴以下代码。附上一个设置返回功能的写法,以供参考。第二步,在你需要使用的页面中引入。第三步,复制下面的函数。...原创 2022-08-15 23:00:20 · 5736 阅读 · 7 评论 -
解决http请求下无法开启麦克风问题
目录 1.场景2.解决方法第一步,浏览器访问chrome://flags/#unsafely-treat-insecure-origin-as-secure 第二步,将该选项设置为Enabled第三步,在输入框中输入需要访问的地址,多个地址使用逗号隔开 第四步,点击右下角弹出的Relaunch按钮 3.总结版 1.浏览器访问chrome://flags/#unsafely-treat-insecure-origin-as-secure 2.将该选项设置为Enabled 3.在输入框中输入需要原创 2022-08-15 08:30:00 · 8300 阅读 · 3 评论 -
react项目导出数据doc格式及其他格式方法
我的思路是这样的,我会根据需求将需要导出的数据,在项目中找个地方以table、th表格标签的形式写,然后设置display:none,目的是不让多出来的结构影响到原本的页面,然后绑定ref,然后再通过模板字符串的形式,渲染出来。第二步,通过模板字符串生成数据,需要注意的是,如果不以table标签书写,下载后的doc文件很乱,html则没事,所以还是尽量用table标签去写。代码中的最后几行是下载功能,个人感觉是挺万金油的,可以根据需要下载为任意类型的文件。第一步,准备数据,隐藏标签,绑定ref。...原创 2022-08-14 20:55:03 · 2712 阅读 · 5 评论 -
前端加密、解密
像这种功能,不必追求底层怎么实现,以我而言,最好是2分钟做完加密最好,结果今天被“百度”来的坑了一把,加密还正常,解密直接成了空白字符。简直误人子弟。于是我翻了翻以前项目写的,在现有的项目里运行成功并完成功能,特此整理。......原创 2022-08-11 22:28:22 · 4467 阅读 · 1 评论 -
vue使用Echarts设置数据无效问题记录
vue使用Echarts设置数据无效问题记录。原创 2022-08-08 22:35:16 · 2627 阅读 · 1 评论 -
前端通过Blob或File文件获取二进制数据
按理说,咱前端使用二进制的场景主要是文件以二进制格式的数据上传到后端,或者将后端返回的二进制数据文件下载并解析成文件,关于以上两种场景,可以看我之前的文章。前端上传文件保存到变量中_接着奏乐接着舞。的博客-CSDN博客一般情况下,都是给后端一个File文件就完事了,但是有时候后端就非要二进制数据流。这篇文章主要是写如何将Blob文件或者File文件转成二进制数据,并且将数据转换成后端需要的,最后加密发给后端。...原创 2022-08-04 23:49:35 · 5103 阅读 · 2 评论 -
前端如何通过代码模拟用户操作以及puppeteer的使用
经过一段时间的尝试后,我写下这篇文章,先说结论。前端是通过获取DOM元素后,执行如点击,获取焦点,设置滚动条高度等操作,总体而言,大部分场景够用,但是和其他爬虫或者类似按键精灵的软件是没法比的。核心差距在于,我们不能通过获取页面坐标,让鼠标主动去点击,也就是说js是被动的,它是通过监听用户的一系列操作去执行某些事,而不是我们通过代码去主动的做事。那么,对于前端模拟用户操作,我有三板斧,下文会详细说明。接下来我要好好介绍一下,puppeteer。为什么我要写它呢?...原创 2022-07-30 00:21:38 · 3637 阅读 · 1 评论 -
前端各种分辨率问题总结
第一种是纯使用px单位,没有做适配的项目如果你是这个类型,那么这篇文章看对了,待会我会说以下这种类型的项目做适配的额完美方法。第二种是做大屏适配的,即无滚动条但要跟随屏幕大小自适应的这种类型的项目在这篇文章种也可获得较为完美的解决方式第三种是使用rem适配的,但是项目有问题的使用此方法带来的问题是,当在低分辨率的情况下,字体会变大一些,或者项目整体看起来好像有些微变化,反正看着和设计图不太像。...原创 2022-07-23 09:45:00 · 4907 阅读 · 1 评论 -
前端可视化大屏适配方案
使用Css3 transform: scale动态的放大或者缩小页面大小,最大的优点在于不会变形,包括使用rem适配造成的对于不同分辨率下肉眼可见的页面不协调问题,而这个方法共2步,使用很简单。原创 2022-07-22 14:07:35 · 9596 阅读 · 19 评论 -
qian‘kun微服务配置vue3.2+ts+vite子应用教程
写这篇文章是因为截至今日,乾坤微前端对于vue3和vite的支持还不够,加上网上乱七八糟的文章太多,误人子弟。还有一点,vue3.2+ts+vite应该是截至今日前端最新的技术栈了。这篇文章,只讲怎么配置子应用vue3+vite+ts,对于还不清楚从0开始配置的请看昨天写的我上一篇文章为什么要用微前端?如何使用乾坤微前端?https。......原创 2022-07-21 15:06:03 · 5422 阅读 · 6 评论 -
为什么要用微前端?如何使用乾坤微前端?
比如说我,现在的项目用的是vue2+ElementUI,使用了乾坤微前端后,可视化大屏用的是vue3.2+TS+vite,然后还有一个页面用的是reactHooks+ts,这样一个项目我就用了三套技术栈,对于提升技术很有帮助。子项目的样式有些错乱,检查后发现子项目的font-size继承了父项目的font-size,而父项目用了rem适配,处理的点是body和html的样式中设置font-size的值,解决了。注意下这里和官网的配置不一样,这里很容易报错,按照我这个来就行。这一步,90%概率会遇到。....原创 2022-07-19 22:39:01 · 3788 阅读 · 8 评论 -
React项目经验总结
目录1、报错 xxx.map is not a function2、如何将后端返回的二进制流转换为base64格式的展示?3、下载4、父组件如何把值传给子组件?子组件又如何接收?5、父组件如何获取子组件所有的state里面定义的值?6、antd+react 之layout左侧菜单点击时加背景色--高亮(适用于每一个项目) 错误原因:因为后端数据还没收到,数组是空的,而map方法不会对空数组检测,结果报错解决:拓展: 如果对象是数组,返回的是true,否则false 语法:xxx指的是:后端返回的图片的原创 2022-07-12 22:40:11 · 4418 阅读 · 2 评论