自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

kirinlau的专栏

Minimalism

  • 博客(118)
  • 资源 (2)
  • 问答 (1)
  • 收藏
  • 关注

原创 ECMA Script6新特性(下)

ES6 引入了原生的模块化机制,允许开发者将代码分割成多个模块,提高代码的可维护性和复用性。展开语法可以将数组或类数组对象展开为单独的元素,常用于函数调用时传递参数。方法用于将一个或多个源对象的所有可枚举属性复制到目标对象,返回目标对象。剩余参数允许我们将一个不定数量的参数表示为一个数组。这些只是 ES6 引入的部分常用的新特性,另外一篇详见本博客的上一篇。ES6 引入了二进制和八进制字面量的表示方法,分别使用。语法在参数名前,可将剩余的参数收集到一个数组中。关键字可以导出模块中的变量、函数、类等,使用。

2025-03-11 16:15:00 1160

原创 ECMA Script6新特性(上)

ES6(ECMAScript 2015)引入了许多新特性,极大地提升了开发者的开发效率,使得代码的维护性和可读性也更高,提升了 JavaScript 的表达能力和开发效率,以下是一些主要的新特性:

2025-03-10 16:45:00 274

原创 一文彻底弄懂ES6中的Promise

ES6 中新引入了很多的特性,其中常用的有块级作用域箭头函数模板字符串解构赋值扩展运算符类和继承Promise对象,它们让 JavaScript 语言更加便捷和强大。尤其是Primse在项目的请求的异步处理中不可或缺,在于其是一个强大的处理异步操作的对象,它可以避免回调地狱,使异步代码的编写和维护更加清晰和高效。下面详细介绍Promise的常见 API 和用法,并给出相应的示例。

2025-03-06 20:15:00 462

原创 解决Trae无法登录的问题

App UnavailableUnfortunately,Trae is currently available in certain countries/regions. If we have any updates, we will promptly notify you via email. Also, please contact support at feedback@mail.trae.ai if you have any questions. Thank you for your under

2025-02-26 21:00:00 7847 9

原创 JavaScript中的symbol类型的意义和使用

JavaScript 中的Symbol类型是 ES6(ECMAScript 2015)引入的一种原始数据类型,它表示独一无二的值。下面详细介绍 Symbol 的意义和使用方法。

2025-02-21 19:00:00 239

原创 JavaScript中的Object.assign() api详解

Object.assign() 是 JavaScript 中的一个内置方法,用于将一个或多个源对象的所有可枚举属性复制到目标对象,并返回目标对象

2025-02-19 18:15:00 360

原创 JavaScript实现16进制随机色

函数生成随机数结合字符串操作来构建符合 16 进制颜色格式的字符串。掌握了这个方法,就可以在网页设计中轻松地实现各种动态颜色效果。函数三次,并将每次生成的随机颜色码打印到控制台。你可以多次运行这段代码,每次都会看到不同的随机颜色被输出。函数返回的颜色字符串直接用于 CSS 样式或 JavaScript 中操作 DOM 元素的样式。函数最终返回一个完整的 16 进制颜色字符串,例如。生成随机数,然后将其转换为 16 进制字符串。的函数,用于生成随机 16 进制颜色。字符和生成的 16 进制颜色码。

2025-02-11 13:54:23 306

原创 wangEditor富文本插件在vue项目中使用和媒体上传的实现

wangEditor是前端一个比较流行的简洁易用,功能强大的前端富文本编辑器,支持 JS Vue React,提供了很多丰富的功能,下面手把手教你实现wangWditor富文本插件在vue项目中配置,保存、图片上传等功能。无脑ctrl+c即可

2024-12-27 15:39:10 491

原创 vue3.0基于views批量实现动态路由的方法

vue基于views批量实现动态路由的方法

2024-12-16 19:15:00 300

原创 前端使用fontfaceobserver库实现字体设置

要使用FontFaceObserver来加载设置项目本地的字体,先确保字体文件位于项目中或者可以从服务端获取到,这样就可以使用FontFaceObserver来检测并加载这些字体下面写个伪代码的示例:首先引入字体资源,css配置字体。

2024-11-28 19:45:00 476

原创 Vue项目实现单点登录(SSO)的逻辑和基本流程

大致的思路就是1.判断权限2.获取用户登录信息 3.获取http请求状态4.直接访问或去登录5.保存当前页并去登录页6.登录后保存用户信息并跳转回访问页面

2024-07-19 19:30:00 2773

原创 关于JSON.parse()使用报 Unterminated string in JSON的问题

JSON.parse()报错:SyntaxError: Unterminated string in JSON.url解析报错: Uncaught URIError: URI malformed at decodeURIComponent ()

2024-07-11 21:00:00 2842

原创 基于antdesign封装一个react的上传组件

项目中遇到了一个上传的需求,看了一下已有的代码很粗糙,而且是直接引用andt的组件,体验不太好,自己使用FormData对象封装了一个上传组件,仅供参考。

2024-07-09 20:30:00 466

原创 replaceAll is not a function 详解

在chrome 浏览器中使用 replaceAll 报这个错误,是因为chrome 版本过低, 在chrome 85 以上版本才支持

2024-06-11 13:24:04 1880

原创 react组件中的this

上面的代码中,在构造函数中可以用 this 读取到 function 声明的方法,因为构造函数是在组件实例的上下文中执行的。因此,当事件触发时,handleClick 中的 this 指向的是全局对象(在非严格模式下)或者 undefined(在严格模式下),而不是 MyComponent 的实例。简而言之,this.handleClick 是组件实例上的一个方法,而在构造函数中绑定 this 是为了确保在方法内部 this 指向组件实例,即使在它作为回调函数被传递给其他组件或方法时也是如此。

2024-06-04 21:30:00 636 1

原创 前端将DOM元素导出为图片

前端工作中经常会用到把一些元素导出,比如表格,正好项目有遇到导出为excel和导出为图片,就都封装实现了一下,以供其他需求的开发者使用:

2024-06-03 22:15:00 663

原创 vue-router之路由钩子函数应用解析

组件在创建时会触发created,但是每次进入路由时都会触发beforeRouteEnter,所以,当一个页面使用了keep-alive进行了缓存时,离开这个页面后再次进入时,不会再触发created,但是会触发beforeRouteEnter,这时候就可以使用路由钩子进行处理了。beforeEach的钩子函数,它是一个全局的before 钩子函数,beforeEach在每次每一个路由改变的时候都得执行一遍。这就是vue-router钩子函数的基础应用,当然还有很多其他的应用角度。

2024-01-17 19:45:00 3031

原创 nodejs中响应头写在createServer中和使用server实例监听‘request‘的区别和应用场景

如果你需要根据每个请求动态设置响应头,那么使用事件监听器的方式更为适合。如果你需要设置一些固定的响应头,那么直接在回调函数中设置可能更为简单。这个方法接受一个回调函数作为参数,该回调函数会在每次HTTP请求到达时被调用。在这个回调函数中,你可以处理请求并设置响应头。还有一种也是每次HTTP请求到达时被调用,也可以在回调函数中对请求和响应做出相应的处理。这种方式允许你在事件处理器中动态地设置响应头,可以根据请求的内容来决定响应头的值。这种方式比较简单,通常用于设置固定的响应头。在这个例子中,我们使用。

2024-01-11 19:29:28 750

原创 web安全之XSS攻击原理及防范

攻击者通过操纵DOM结构,诱导浏览器执行恶意脚本,这种攻击也是我们比较常见,也是比较隐蔽的,因为攻击者不需要在服务器端插入恶意脚本。:反射型XSS攻击是一种非持久性的攻击,它发生在恶意脚本从服务器端反射到客户端的过程中,通常涉及到用户通过点击一个链接或访问一个页面时,服务器端未经充分验证和转义的输入被直接输出到HTML中。:又称为持久性xss,这种攻击一般在第三方欺诈网站上,恶意脚本存储于服务器端,如数据库、消息论坛等,当用户请求一个包含恶意脚本的页面时,服务器将恶意脚本发送给用户,执行攻击。

2024-01-10 16:26:22 1338

原创 scss下解决父组件中使用::v-deep修改样式穿透到子组件的问题

开发中经常会用到深度选择器来修改第三方组件库等子组件的样式,这时候就用到样式穿透(style Penetration)而使用/deep/修改时报SassError: expected selector. 原因是sass不支持这个选择器。使用中发现了一个问题,就是当在父组件使用了v-deep修改自身组件或者第三方组件样式时,会影响到子组件中的样式,样式穿透的方式有:>>>、 /deep/、::v-deep这三种。使用>>>修改无效,原因是scss等预处理器却无法解析>>>第三种,使用::v-deep,

2023-10-30 17:24:27 3240

原创 Vue项目使用svg之svg-sprite-loader详细使用

项目中为了体验好、性能优、资源丰富等原因经常会用svg这种矢量图,但是svg不能直接像image标签一样直接使用,这就需要前端的同学自己处理了。当然你你也可以在main中引入并注册svg组件,我是为了方便维护把功能抽到了icon文件下面了。那这么好的东西怎么在前端vue项目中使用呢?组件属性的icon-file-name的值就是svg文件的名字。好的,就可以方便的使用svg了。

2023-10-17 16:55:57 1659

原创 关于echarts鼠标悬浮位置不准确的问题

当我们在为了适配一些小屏幕笔记本为了优化显示效果进行屏幕缩放后,会做一些适配性处理,比如使用transform的scale处理,亦或者使用devicePixelRatio处理自动化处理缩放,但是有时候会在项目中有echarts图表的时候会导致echarts图表上悬浮位置不准确。如何解决这个问题呢,那是因为开发者直接放大了body,如果只在body添加zoom缩放页面,会导致echarts图表的悬浮位置不准确, 故在echars外部容器添加zoom,在使用图表的父组件也同步放大即可。

2023-07-07 16:00:00 1685 2

原创 关于Vue项目下页面自适应pc端不同分辨率尺寸的方法

翻译过来就是在package.json文件中,存在一个叫做peerDependencies(对等依赖关系)的对象,它包含了项目里需要的所有的包或则用户正在下载的版本号相同的所有的包(意思就是对等依赖关系指定我们的包与某个特定版本的npm包兼容);对等依赖关系最好的例子就是React,一个声明式的创建用户界面的JS库。前面我有一篇博客说的是用动态监听body的zoom然后自己设置,或者是window.devicePixelRatio和reansform的scale来处理笔记本等小屏幕的缩放兼容。

2023-07-07 11:14:09 5099

原创 关于echarts图表文本位置修改

实际开发中,我们会经常遇到echarts图表的文本label被旁边的柱子或者其他的压住,又或者我们想调整文本位置时怎么做呢?

2023-07-06 20:45:31 1938

原创 前端适配笔记本缩放125%,150%导致页面错乱问题

window.screen.availHeight > 1000 说明缩放选择的是100%,否则是125%、150%, 还有使用媒体查询的,直接拷贝过去试了一下一点用没有,但是我说明一下,这个肯定是一种解决方式,只是我仔细去研究,其他的同理,用了一下没有效果,由于前端在开发时使用的都是标准ui设计图,基本都是按照所以1920*1080, 而小屏幕笔记本由于分辨率高,所以导致的显示元素变小,因此很多笔记本的默认显示都是放大125%或者150%。我用的是vue,所以我把它加在了app.vue下的。

2023-07-04 15:43:35 7368 1

原创 vue中解决scss下::v-deep影响到子组件的问题

开发中经常会用到深度选择器来修改第三方组件库等子组件的样式,这时候就用到样式穿透(style Penetration)使用中发现了一个问题,就是当在父组件使用了v-deep修改样式时,会影响到子组件,修改为/deep/报。常用的有>>>、 /deep/、::v-deep。改为 >>>可以解决这个问题。

2023-05-18 16:32:27 1461

原创 vue实现基于elementui的全屏图片自定义预览

到elementUI看了一下,发现el-image是有这个功能的,而且支持旋转、放大缩小,原图,鼠标滚动,列表预览等基础功能,但是是基于小图点击预览大图的,官方api也没有提供触发预览的事件,所以手动实现了它的预览调用功能

2023-05-10 10:54:13 2010 1

原创 Vue基础知识

关于vue的基础知识

2023-05-09 14:03:26 917

原创 HTML5中关于解决video标签禁止右键和下载视频的办法

html5中的video标签类型的预览,由于原生的video标签添加了controls属性后,右下角的 …点击后 会出现‘下载’ ,‘播放速度’,‘画中画’ 的功能选项,但是由于有只读权限的问题,需要关闭掉‘下载功能

2023-03-21 15:07:30 5470

原创 在线音视频测试地址

开发了一个内部的文件管理系统,需要用到音视频预览功能。

2023-03-10 13:45:43 748

原创 修改elementui中分页组件el-pagination的样式

elementui组件el-pagination分页组件 背景色修改

2023-02-22 17:22:21 5651 2

原创 vue根据环境动态打包BASE_API

项目需要在不同环境下运行,如开发,测试,生产等,但是每个环境下请求的服务地址不是确定的, 为了避免频繁切换请求的地址以及相关的配置容易出错的问题,新的vue-cli脚手架没有直接提供配置选项,怎么办呢?属性了,因为它变成了一个全局的变量,可以在任何地方使用,它会根据环境自动去赋值baseURL了。分别为.env.development,.env.test,.env.production。就像下面这种,就是.env文件只需要声明环境,不需要配置。首先我们在根目录新建3个文件,一、建立.env系列文件。

2023-02-17 20:30:00 3973

原创 vue项目开发解决 Error: error:0308010C:digital envelope routines::unsupported

vue项目开发解决node版本太高导致的错误 Error: error:0308010C:digital envelope routines::unsupported

2023-02-07 16:33:23 302

原创 echarts gallery最新地址

自从echarts托管给Apache后,好多人发现原来官网上的社区不见了,echarts gallery里面的图表数据展示完善, 可用性很高, 现在找到提供给有需求的开发者。

2022-11-29 15:49:08 6430

原创 Vue组件通信之bus详解

vue最主要的两大特性就是响应式和组件化,组件化项目少不了组件之间的通讯,那么组件之间到底有几种通信方式呢。今天着重讲一下另外一种事件中转bus,非常简单快捷,不需要走其他中转或者提交事件,只需要触发和监听即可,也是我之前项目中用到比较多的一种,尤其是多组件依赖某一个小的组件的数据时,比如单页面上方有个radio-group,事件触发后需要其他组件同步更新数据时, 尤为好用,

2022-11-28 23:15:00 3255

原创 echarts中实现自定义legend数据

直接使用echarts中属性的格式器formatter就可以解决了,因为formatter是一个标准的function,可以在其中对数据进行一些操作,最后返回想要展现的数据即可

2022-11-28 19:49:48 5862

原创 基于vue封装一个echarts通用组件

随着项目越来越多的交互和展示, 图表类的看板也在项目中应用的越来越多, echarts作为一款优秀并开源的产品,在项目中也大规模的应用,尤其是边缘计算和大数据可视化的项目中,随处都能见它的身影,本文记录封装一个基础的echarts图表组件

2022-11-28 17:32:15 1593

原创 vue的mixin混入在项目开发中的使用

vue也提供了mixin数据混入,本质其实还是单独抽出一部分数据或者钩子、方法等,然后在有需要的组件页面中直接混入,此时当前组件便拥有了该混入的功能。

2022-11-28 16:40:32 449

原创 基于chromium内核的history栈检测canGoBack和canGoForward

基于浏览器历史栈判断是否可以“前进”和“后退”

2022-10-30 01:15:00 518

原创 关于防抖和节流在前端开发中的应用

防抖和节流都是为了优化用户的高频操作导致的问题

2022-09-29 23:45:00 916

web/小程序/公众号等代码加固工具

H5/小程序/公众号代码加固工具 环境搭建与使用说明 (压缩包内有完整的使用教程和加固等级的分析等) 一、 硬件要求 windows系统或macos系统或linux系统的主机一台,最低配置要求:双核CPU、4G内存。 二、 使用流程 1. 解压jsenc.zip到指定目录 2. 打开命令行窗口进入解压后的jsenc目录(只能在此目录下执行加固命令) 3. 备份需要加固的目录或者文件 4. 开始执行加固命令,传入目录或文件路径(不能包含中文)即可 5. 待命令执行完成后,即表示加固完成。 (压缩包内有完整的使用教程和加固等级的分析等)

2022-02-21

尤雨溪-Vite 对下一代前端工具的思考.pdf

尤雨溪对新的前端构建工具Vite的介绍

2021-09-09

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除