夜空孤狼啸的博客

WebSocket是一种用于在Web应用程序和服务器之间建立实时、双向通信的协议，通过单一TCP连接实现持久化数据传输。其优势包括实时性、双向通信和减少网络负载，但劣势在于需要浏览器和服务器支持、额外开销以及潜在的安全问题。WebSocket协议基于TCP，支持二进制和文本数据，通过握手协议建立连接，并保持开放状态以实时传递数据。WebSocket的生命周期包括连接建立、开放、关闭和关闭完成四个阶段，需处理连接关闭事件以确保应用稳定性。心跳机制用于检测客户端与服务器的连接状态，通过定时发送ping数据包确认

前端用input读取 .xlsx文件的内容项目中我用的ant-design-vue，不过用input一样的大同小异注意区分xlsx库和node-xlsx库的使用环境。

View Transitions API 提供了一种机制，可以在更新 DOM 内容的同时，轻松地创建不同 DOM 状态之间的动画过渡。同时还可以在单个步骤中更新 DOM 内容。

从零搭建vue3 + vite + ts 项目必备This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 SFCs, check out the script setup docs to learn more.安装项目规范npm install eslint --save-dev#oryarn add eslint --devnpx e

前端项目重新打包部署后，由于用户没及时更新页面，导致配置存的还是旧逻辑值，引发了线上问题；所以进行版本更新的通知功能就很有必要上马了。

luckyexcel 编辑预览excel文件支持后端传文件流预览编辑，也支持选择本地文件编辑预览

前端各种文本文件预览 文本编辑excel预览编辑 pdf预览word预览 excel下载pdf下载word下载各种文本文件预览（pdf, xlsx, docx, cpp, java, sql, py, vue, html, js, json, css, xml, rust, md, txt, log, fa, fasta, tsv, csv 等各种文本文件）其中 除pdf，xlsx，docx之外的文本还可以修改，xlsx想要修改看我另一篇博客【先空着这两天就补上去】

【代码】axios封装以及详细用法axios请求拦截响应拦截请求重试请求终止。

主版本（大版本） 必须 一般代表了项目的重大架构变更，如进行不兼容的API更改。此版本（次要版本） 必须 一般代表了一些功能的增加或变化，但没有架构的变化。增量版本（小版本） 必须 一般是一些小的bug修复，没有重大功能变化。预发布版本或版本编译信息 不必须 添加到最后，作为扩展。大版本.次要版本.小版本，如：1.0.0。

Web Workers 是在浏览器中运行 JavaScript 代码的一种机制，它们在主线程之外运行，可以在后台执行一些任务而不阻塞用户界面。Web Workers 使得在浏览器中执行多线程操作成为可能，这有助于提高性能和响应性。

前端虚拟滚动列表 vue虚拟列表。在大型的企业级项目中经常要渲染大量的数据，这种长列表是一个很普遍的场景，当列表内容越来越多就会导致页面滑动卡顿、白屏、数据渲染较慢的问题；大数据量列表性能优化，减少真实dom的渲染看图：绿色是显示区域，绿色和蓝色中间属于预加载：解决滚动闪屏问题；大致了解了流程在往下看；

前端将html导出pdf文件解决分页问题

前端导出word文件的多种方式、导出excel文件 纯前借助word模板端导出word文件 （推荐，前端借助word模板导出word，需要的依赖库：docxtemplater，pizzip，jszip-utils，file-saver，前端导出excel文件，需要的依赖库：node-xlsx，当让也可以借助xlsx库，这个看自己选择，只要实现客户想要的功能就行。

注意：需要相邻选择器标签的用clip属性去隐藏，其他的可隐藏的css属性都被定义为行内样式且权重最好，这也算是在找漏洞吧；推荐使用css，js要遍历所有div，增加性能损耗。在main.ts文件中全局引入。

vue.draggable.next 是一款vue3的拖拽插件,是vue.draggable升级版本，同样是基于Sortable.js实现的，你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景，本人在工作台和多选项卡环境下实践过，比自己实现的拖拽效果优雅多了，使用的方法也非常简单但和vue2版本的用法有一些vue语法上的区别，本文档将会列举全部的属性和事件。

前端预览pdf的几种方法

#微前端【代码】项目中使用firame引入html 解决路由错乱问题。在项目中使用firame引入html，引入的html中有路由跳转，当点击html页面中的路由跳转时，浏览器history会记录次路由，当在引入iframe返回上一级的页面中使用 router.go(-1)就会返回iframe中距离的路由，这样不符合逻辑解决方案如下：主要是由于浏览器history记录了iframe嵌入页面的路由信息，这个信息不论是iframe内的地址跳转，还是iframe src的切换，都会被记录，下面给出解决方案

若依项目，富文本上传报错：Failed to execute ‘setItem’ on ‘Storage’: Setting the value of ‘sessionObj’ exceeded the quota.

前端项目常用的方法

前端项目用常用的方法

组件实例信息 如果你把组件实例放到Reactive Vue会给你一个警告：Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. Vue 收到一个组件，它被做成一个反

html中如何用vue语法，并使用UI组件库 ，html中引入vue+ant-design-vue或者vue+element-plus，本次项目中，需要引入github中别人写好的插件，插件比较大，没有方法直接在自己项目中，把别人的项目打包合并生成html（类似于前端项目打包生成的 dist ），修改这里面的html，这种情况要么用原生js写或者jquery还相对快一些，那为什么不直接用vue语法呢？哈哈哈，下面就教你怎么写。这里用antDesignVue4.0直接上代码，

/ touchcancel: //系统取消touch事件的时候触发，这个好像比较少用。console.log(wheelDelta + ‘滑轮向上滚动’);console.log(wheelDelta + ‘滑轮向下滚动’);// touchmove: //手指在屏幕上滑动式触发。// touchstart: //手指放到屏幕上时触发。// touchend: //手指离开屏幕时触发。//火狐使用DOMMouseScroll绑定。//其他浏览器直接绑定滚动事件。

vite4+vue3+electron23.3+ts桌面应用bs端开发 打包windows、linux、max三个系统的安装包。

首先该安装的插件，你要安装一下吧这三个是最近本的，其他优化的插件下面会介绍到vite.config.ts文件中。

                       

div class="child">child组件--{{num}}下面借用官网的一张图介绍vue3 的生命周期，应该会更加详细把。销毁 ---- 在元素被销毁之前立即执行。更新 ---- 当响应数据被修改时执行。挂载 ---- DOM被挂载时执行。创建 ---- 在组建创建时执行。eg:可以运行一下查看执行顺序。'app组件创建前''app组件创建后''app组件挂载前''app组件挂载后''app组件更新前''app组件更新后''app组件销毁前''app组件销毁后'

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。我们已经介绍了两种在 Vue 中重用代码的方式：组件和组合式函数。组件是主要的构建模块，而组合式函数则侧重于有状态的逻辑。另一方面，自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。

注意安装animate.css版本，我这里用的v4.1.1 ，animate__animated是基类必须使用的(因为安装的animate版本是4.x，使用时要注意对应的所有类名都以animate__开头，并且还要配合animate__animated一起使用！在main.ts文件中引入。

vue3语法详解（setup()、＜script setup＞）

【代码】vue3图片懒加载借助插件vue3-lazy。

"html2canvas": "^1.4.1",//jspdf和html2canvas导出pdf文件 "jspdf": "^2.5.1",//jspdf和html2canvas导出pdf文件 "html-to-image": "^1.6.2", //将dom节点下载成png图片 "moment": "^2.29.1", // 时间格式化处理 "node-scp": "^0.0.22", // 局域网内使用scp命令复制文件（支持账号密码） "node-xlsx": "

前端写ip地址框输入

Highcharts 写 venn图 （韦恩图），以及解决项目中venn的报错Highcharts 写 venn图 鼠标悬浮效果以及点击事件

Ant Design vue 组件 button自定义

思路：用fs.readdir得到当前文件夹的所有子文件和子文件夹，再用fs.stat里面的 isFile()和isDirectory() 去判断文件还是文件夹，注意是方法，然后去做相应的操作。上传文件夹，下面是主要代码，直接复制是不能用的。

3. ref通过Object.defineProperty()的get和set来实现响应式（数据劫持）4. reactive通过Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据6. ref定义数据：操作数据需要 .value ,读取数据时模板中直接读取不需要 .value7. reactive 定义的数据： 操作数据和读取数据均不需要 .value。

前端导出png图片和各种文件的下载

在工作中，我们可能同时在进行2个或者多个不同的项目开发，每个项目的需求不同，进而不同项目必须依赖不同版本的NodeJS运行环境，这种情况下，对于维护多个版本的node将会是一件非常麻烦的事情，nvm就是为解决这个问题而产生的，他可以方便的在同一台设备上进行多个node版本之间切换。 无须卸载现有版本，可同时安装不同的版本，有使用项目需要在linux，mac、windows三个系统中运行，所以三个系统最好都安装nvm

监听localstorage的变化多数组取交集判断两个数组是否有相同元素 返回相同元素（数组）判断hex颜色值是深色还是浅色随机生成深浅样色js判断是手机端还是移动端使用UA判断使用媒体查询判断fetch直接读文件内容，解决乱码问题前端导出文件将表格导出xlsx文件将表格导出 txt fasta fa csv tsv等文本文件js将二维数组转为 txt tsv csv fasta fa 等文本文件将字符串下载保存为 txt fasta fa csv tsv等文本文件下载文件文件