- 博客(36)
- 收藏
- 关注
RSS订阅原创 用canvas绘图文字换行输入一段字符串,获取到字符串生成的图,
const image = generateImage("这是一个例子，这个字符串会被绘制到图片上，并根据长度进行换行。
2024-02-04 17:08:45
477
1
原创 vue项目中利用html-to-image插件将div盒子转化为base64图片,和鼠标滚轮控制图片缩放!!!
html-to-image 插件是一个能够将div盒子包括里面内容转化成png图片的插件,我个人在项目中遇到使用它的情况是在读取身份证信息之后,将获取到的数据,填入到自己写好的div盒子内,然后转化成图片放入到展示区域内. 这里只写一个简单的盒子,内部一段文字和一张图片(vue项目中)首先npm install html-to-image 出来的效果是这样的 转化的图片是base64格式,把这个赋值给图片的src就可以了,根据需求,设置img标签位置和大小
2023-08-20 15:10:09
1762
原创 用v-model控制el-dialog弹框
v-model是一个语法糖 等同于 :value="isShow" @input="isShow =$event.target.value"如果想要对el-dialog组件进行二次封装只是控制弹框显示和隐藏可以使用v-model进行数据绑定,代码量更少。element组件库中推荐用:visible.sync="dialogVisible"
2023-07-31 21:07:14
1060
原创 做请求结果缓存的代码!
我们在项目中经常会遇见一个请求结果多次使用的情况,一般如果请求次数不多,可以不做处理,例如登录就直接再次请求就可以了,但是如果服务器做了约束或者为了更好的性能,可以利用浏览器的强缓存机制,进行请求结果的缓存,缓存之后当再次发出请求时,直接从缓存中拿结果而不是再次请求!如何使用,直接,将请求的方法放入lazyFn()中,就可以了.这段代码主要达到一个优化性能的目的!希望对小伙伴们有用!例如我做一个登录缓存。
2023-07-23 21:29:27
118
原创 从创建一个vue3项目到跑起来!!
然后还有一些其他要注意的点,但是暂时没想到.主要集中在eslint上,有碰到报错的可以第一时间先看项目能不能跑,如果能跑,浏览器也没报错,说明肯定是eslint的设置有问题,去看看能不能配置强制忽略.最近在学习three.js准备用vue3搞一下试试.希望前端的小伙伴们保持学习的状态.进入这个页面就没问题了,然后我们有需要进入官网学习的.也可以点上面的小绿点.我在项目中接触的很少,所以不是很了解,不过有兴趣的小伙伴可以搜索学习一下.这个就是eslint的基本配置了,先查查能不能改.具体要看报错的问题.
2023-07-22 11:06:39
461
原创 什么是单点登录？
单点登录（Single Sign On），简称为 SSO，是目前比较流行的企业业务整合的解决方案之一SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统SSO 一般都需要一个独立的认证中心（passport），子系统的登录均得通过passport，子系统本身将不参与登录操作当一个系统成功登录以后，passport将会颁发一个令牌给各个子系统，子系统可以拿着令牌会获取各自的受保护资源，为了减少频繁认证，各个子系统在被passport。
2023-07-20 23:02:52
81
原创 websocket:心跳机制与断线重连
连接成功事件：当WebSocket连接成功建立时，onopen事件被触发，此时会执行指定的回调函数。socket.io 是一个基于 WebSocket 的 CS（客户端-服务端）的实时通信库，使用它可以在后端提供一个即时通讯服务，它提供的也有一个 JS 库，在前端可以去链接后端 socket.io 创建的服务。关闭连接事件：当WebSocket连接关闭时，onclose事件被触发，执行指定的回调函数。接收消息事件：当接收到服务器发送的消息时，onmessage事件被触发，执行指定的回调函数。
2023-07-19 12:08:45
351
原创 手撸js数组扁平化!!
至于原理, 数组concat方法可以合并两个简单数组效果和newArr = [...arr1, ...arr2] 一样。这是一个拥有三层数据的数组,现在我们要写一个js方法,参数为这个数组,输出结果为。其他的就是递归循环判断!
2023-07-18 22:16:40
61
原创 可视化大屏适配
需求: 适配几个固定的设备 要求在一个主屏上完美适配最贴合UI设计稿，其它少量的设备上，保证正常的浏览显示没有问题。注意 ：使用时请将 body 样式设置为 overflow: hidden;注：以 1920 * 1080 为标准尺寸比。用v-scale-screen包裹住所有标签。缩放方案：接入难度非常小 效果中上。
2023-07-18 19:59:28
83
原创 JS内存泄漏
谷歌浏览器主要是用标记清除，大概流程是给每一个变量添加一个标记，通过内部算法计算引用情况，当不使用的时候就会自动清除。（1）常见的声明了一个全局变量，但是又没有用上，那么就有点浪费内存了，（2）定时器没清除 （3）循环引用：A 对象里面有一个属性指向 B 对象，B 对象有一个属性指向 A 对象。进入环境的变量所占用的内存就不能释放，当变量离开环境时，则将其标记为“离开环境“垃圾回收程序运行的时候，会标记内存中存储的所有变量。然后，它会将所有在上下文中的变量，以及被在上下文中的变量引用的变量的标记去掉。
2023-07-18 12:22:10
142
原创 v-if和v-show的区别
v-show指令：元素始终被渲染到HTML，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置style=“display：none”的样，是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏 v-if指令：满足条件是会渲染到html中，不满足条件时是不会渲染到html中的，是通过操纵dom元素来进行切换显示。链接：https://juejin.cn/post/7255973942544154682。商业转载请联系作者获得授权，非商业转载请注明出处。
2023-07-16 15:22:15
66
原创 Vue2 和 Vue3 中的 v-model 的区别
v-model 是 Vue 中使用频率特别高的一个指令，而 Vue3 中的 v-model 有了很大的变化，本文将详细讲述一下 Vue2 和 Vue3 中的 v-model 的区别。
2023-07-15 21:29:10
1301
原创 == 和 ===区别，分别在什么情况使用
2.如果一个操作数是字符串，另一个操作数是数值，则尝试将字符串转换为数值，再比较是否相等。全等操作符由 3 个等于号（ === ）表示，只有两个操作数在不转换的前提下相等才返回。等于操作符（==）在比较中会先进行类型转换，再确定操作数是否相等。1.相等操作符（==）会做类型转换，再进行值的比较，全等运算符不会做类型转换。等于操作符用两个等于号（ == ）表示，如果操作数相等，则会返回。3.如果一个操作数是对象，另一个操作数不是，则调用对象的。简单类型与引用类型比较，对象转化成其原始类型的值，再比较。
2023-07-14 22:32:19
258
1
原创 引用数据类型和基本类型的区别
声明变量时不同的内存地址分配：简单类型的值存放在栈中，在栈中存放的是对应的值引用类型对应的值存储在堆中，在栈中存放的是指向堆内存的地址不同的类型数据导致赋值变量时的不同：简单类型赋值，是生成相同的值，两个对象对应不同的地址复杂类型赋值，是将保存对象的内存地址赋值给另一个变量。也就是两个变量指向堆内存中同一个对象。
2023-07-14 22:23:53
107
1
原创 CSS面试题个人总结
我知道的 C3 的新特性有很多，常见的如下:border-radius:圆角边框box-shadow:盒子阴影background-size:背景图片大小transition:过渡transform:转换(位移 旋转 缩放)animation:动画linear-gradient:线性渐变box-sizing:css3 盒子模型。
2023-07-14 22:10:14
56
1
原创 JS什么是闭包
一个作用域可以访问另一个函数内部的局部定量,或者说一个函数(子函数)访问另一个函数(父函数)中的变量,那么这个变量所在的函数我们称之为闭包函数.
2023-07-13 22:26:47
57
1
原创 JS深拷贝和浅拷贝
平常在写代码时经常会用到拷贝函数,谈到拷贝,我们要理解js数据储存位置,, 简单数据类型会储存在栈内存中, 复杂数据类型会存在堆内存中,当我们拷贝简单数据类型时,只用浅拷贝就可以获得一个数据相同但是,和原数据互不相干的新数据。
2023-07-11 17:32:21
193
1
原创 判断变量的数据类型
为了每个对象都能通过 Object.prototype.toString() 来检测，需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用，传递要检查的对象作为第一个参数，称为thisArg。为了保证兼容性，可以通过Object.prototype.toString方法，判断某个对象值属于哪种内置类型。这样可以看到使用Object.prototype.toString.call()的方式来判断一个变量的类型是最准确的方法。
2023-07-11 16:30:13
204
1
原创 手写防抖和节流,(附可导致内存泄漏的js代码)
在前端开发中，防抖（Debounce）和节流（Throttle）函数同样是常用的技术，用于处理频繁触发的事件。
2023-07-11 16:11:40
247
1
原创 CSS变量定制项目主题
root {a {vant组件库是采用cass变量设置主题色的,所以我们可以通过修改css变量更改vant组件的样式。
2023-07-11 10:49:48
238
1
原创 TS入门!(02)
即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种,(注意:这是TS的语法只有一根|, 不要与JS中的逻辑或|| 混淆)例如：从后端取回的商品数据中，一定有id，name, price，但是imgUrl是可选的。概念：接口的很多属性是可以进行类型复用的，使用 extends 实现接口继承,实现类型复用。数组中既有 number 类型，又有 string 类型，这个数组的类型应该如何写?概念：函数类型是指给函数添加类型注解，本质上就是给函数的。概念：将多个类型合并为一个类型对变量进行注解。
2023-07-07 21:54:43
242
1
原创 TS入门!!!!!(1)
TypeScript是具有类型语法的javascript，是一门强类型的编程语言。TypeScript是微软开发的开源编程语言，Type+ JavaScript（type是类型=> 在 JS 基础之上，为 JS 添加了类型支持），简称：TS。```// TS 代码// 变量age1是强类型的，有明确的类型。即： number（数值类型）age1 = '18' // 报错// javascript代码// 变量age2是弱类型的 无明确的类型age2 = '18' // 不报错。
2023-07-06 23:02:30
72
1
原创 HbuilderX 打开小程序 报错[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json
今天同事在做uniapp开发,用HbuilderX打开文件微信小程序开发工具里面报这个错误,我看了下csdn上前几个解答,感觉都有点问题,这个报错不就是打开路径错了吗,搞那么复杂干嘛,你看正常打开根目录是这样。但是你打开路径错了的话,会直接打开HbuilderX源文件,而不是转译之后的文件,那微信开发工具怎么可能读取出来,不报错才怪,最后选中这个mp-weixin这个文件夹.其实我们也可以点开看看,这个文件夹就是转译微信小程序之后的代码.然后打开就行了。这个时候要在导入的时候。
2023-06-27 19:36:07
2061
6
原创 用js判断一个字符串中出现最多的字符,统计这个字符出现的次数
工作中偶尔会用到的,有时候面试官也会出这种类似的题目,在遇到了不要慌,不难冷静思考一下,不过要记得的是字符串有一个chatAt()方法。//附带JavaScript 中的 String 类型的 charAt() 方法。// 用js判断一个字符串中出现最多的字符,统计这个字符出现的次数。//该方法接受一个参数，即想要获取的字符所在的索引值，从0开始计数。
2023-06-16 15:29:46
132
1
原创 vueX的简单应用(1)
VueX 是一个状态管理模式和库，它可以用于管理大型 Vue.js 应用程序中的状态。它基于中心化的 store，使应用程序中的所有组件可以访问同一个状态，同时提供了一些方法来修改状态。然后在应用程序中引入和使用该 store 对象，就可以在组件中访问和修改应用程序的状态了。它通过一个集中的 store 来管理应用程序中所有组件的状态，并提供了一些访问和修改状态的方法。以上是 VueX 的一个简单介绍和使用方法，只是简单应用了一下state 和mutations.下一章节会写关于另外几个组成部分的用法.
2023-05-22 23:14:19
47
2
原创 axios的get请求和post请求
Axios 实现了浏览器和 Node.js 中单一的 API，可以自动转换请求和响应数据，支持Promise API，拦截请求和响应，和取消请求。使用 Axios 可以方便的拦截请求、设置请求头、处理响应数据等，是一个功能强大、易使用的请求库。可以看到，`axios.get()` 方法会自动将参数拼装到请求 URL 中，发送请求并返回 Promise 对象。在这里，我们通过 `axios.post()` 方法向服务器发送了一个包含 `firstName` 和 `lastName` 数据的 POST 请求。
2023-05-22 23:07:51
1294
2
原创 二开常见人资项目!!!!小节1 递归转化树形结构
今天在一个二开的项目中遇到一个很常见的小功能, 把后端传过来组织架构之类平铺的数据,转化成树形结构!这个其实可和发给咱们数据的后端兄弟商量一下,看他能不能改一下数据,我们就可以直接拿过来用了. 当然如果他不同意,或许水平不行,他不会~那就只能咱们自己干了, 也不难.三个属性，它们分别表示节点的唯一标识、节点名称和节点的父节点标识。随便搞点假数据试验一下。你就会的到一个新数组。
2023-05-19 23:51:29
52
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人