夜空孤狼啸的博客

原创 项目常用函数封装总结

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

原创 html视差滚动效果

借助gsap效果去实现的，官网特效常用效果

原创 js实现图片放大镜功能，简单明了

js实现图片放大镜功能，简单明了，js图片放大镜 写购物项目的时候，需要放大图片，这里用js写了一个方法，鼠标悬浮的时候放大当前图片

原创 windows、mac、linux中node版本的切换(nvm管理工具)，解决项目兼容问题 node版本管理、国内npm源镜像切换

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

原创 axios封装以及详细用法axios请求拦截响应拦截请求重试请求终止 fetch请求

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

原创 v-scale-screen 原理

大屏项目中的适配屏幕大小缩放原理demo还原。v-scale-screen 原理。// 这里可以写个防抖。

原创 前端单行代码， 直接体现一个人的基础水平！！！

【代码】前端开发者能不能写单行代码， 直接体现一个人的基础水平！！！

原创 脚手架搭建项目package.json配置中依赖的版本问题

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

原创 前端webWorker 的介绍以及应用

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

原创 TypeScript 泛型工具类型

TypeScript 泛型工具类型在实际项目中的应用在TS中内置了一些常用的工具类型, 用来简化我们TS中的一些常见操作 这些泛型工具类型都是基于泛型实现的, 并且是内置的, 我们也可以直接在代码中使用。

原创 new Blob()实现不同类型的文件下载功能

在前端项目实际开发过程中，经常需要对各种各样的类型进行下载，因为我不是前端出生，就自己在网上学习最后使用到自己的项目当中，代码冗余等低级错误还请多多指导。我发现用 Blob 二进制进行文件下载的比较多，我就采用了这一方式。下面是一份 Blob 的配置关系对应表，在我们使用Blob做下载功能时 ，根据需要下载的文件类型修改 type 值进行下载即可。

原创 前端虚拟滚动列表 vue虚拟列表

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

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

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

原创 前端导出word文件的多种方式、前端导出excel文件

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

原创 Surely Vue Table表格css、js方法去除水印

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

原创 vue3、vue2以及非vue项目中拖拽改变dom结构以及数组顺序 vuedraggable

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

原创 12个强大的 JavaScript 动画库，可帮助你提升用户体验

作为开发人员，利用这些工具无疑将增强您的项目，并使其在竞争日益激烈的数字环境中脱颖而出。网络借鉴，如有侵权，联系我删除。

原创 vue预览pdf文件的几种方法

前端预览pdf的几种方法

原创 项目中使用iframe引入html 解决路由错乱问题以及父子组件传值调用方法

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

原创 linux（ubuntu）中crontab定时器命令详解 以及windows中定时器

crontab 是一个用于创建、编辑和管理用户的定时任务的命令，它可以让用户在指定的时间自动执行指定的命令或脚本。service cron status 查看服务运行状态service cron start 启动服务service cron stop 停止服务service cron restart 重启服务 每次设置完记得重启一下

原创 Git 配置多个 SSH-Key

一般不对遇到这种问题，除非想用ssh拉去代码，但是不同的项目有在不用的gitee账号上面存放。注意这里的 id_rsa 的权限要更改为600， chmod 600 /home/dell/.ssh/id_rsa。 注意第二个的 Host 是agitee.com。先用下面命令新建两个公钥（注意换名字）

原创 若依项目form表单过大报错Failed to execute ‘setItem’ on ‘Storage’: Setting the value of ‘sessionObj’ exceeded t

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

原创 前端项目常用函数封装(二)

前端项目常用的方法

原创 前端项目常用函数封装(一)

前端项目用常用的方法

原创 js自定义滑块

【代码】js自定义滑块。

原创 vue3 tab切换 动态组件

组件实例信息 如果你把组件实例放到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 收到一个组件，它被做成一个反

原创 Linux系统中sh脚本编写

我们在使用linux系统开发的过程中，经常会遇到一些重复的操作，想copy, push等等。这个时候我们就可以自己编写一个sh脚本，使用sh脚本操作这些重复的动作。直接 sh xx.sh脚本执行命令即可/bin/sh 和 #!/bin/bash 都是脚本文件的开头，用来指定脚本文件的解释器。其中 #!/bin/sh 指定的是 Bourne shell 解释器，而 #!/bin/bash 指定的是 Bash shell 解释器。

原创 echarts 画散点图， x周，y周在指定位置标志一下

【代码】echarts 画散点图， x周，y周在指定位置标志一下。

原创 axios封装以及详细用法axios请求拦截响应拦截请求重试请求终止

在前端项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。如果还对axios不了解的，可以移步axios文档。

原创 基于canvas实现的签名组件

【代码】基于canvas实现的签名组件。

原创 html中如何用vue语法，并使用UI组件库 ，html中引入vue+ant-design-vue或者vue+element-plus

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

原创 linux中安装nodejs，卸载nodejs，更新nodejs，git，linux中安装nginx并配置

卸载node清理掉自动安装的并且不需要软件包查看node相关的文件如果有文件需要手动删除文件删除该文件命令在此查看node -v 是未找到，说明你已经卸载掉了。

原创 js判断手指的上滑，下滑，左滑，右滑，事件监听 和 判断鼠标滚轮向上滚动滑轮向下滚动

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

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

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

原创 vite打包配置以及性能优化

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

原创 前端一键升级 package.json里面的依赖包管理

升级需谨慎。

原创 使用node搭建服务器，前端自己写接口，将vue或react打包后生成的dist目录在本地运行

使用node搭建服务器，前端自己写接口，将vue或react打包后生成的dist目录在本地运行。vue项目打包后生成的dist目录如果直接在本地打开index.html,在浏览器中会报错，无法运行起来。通常我是放到后端搭建的服务上面去运行，当时前端自己也可以是node，nuxt搭建服务器，写接口等等如果想在本地运行，我们可以借助node.js+express搭建一个服务器，将打包后的文件部署在服务器上，就可以运行起来了。

原创 windows永久关闭更新

win+r,输入regedit打开注册表。

原创 vue中全局状态存储 pinia和vuex对比 pinia比vuex更香 Pinia数据持久化及数据加密

原创 vue2、vue3生命周期详解以及对比

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