- 博客(134)
- 收藏
- 关注
RSS订阅原创 LocalStorage的坑
前端代码在全局前置守卫里时会检查中是否存在字典数据。如果不存在，则会请求一次接口，并将获取到的字典数据存入。如果存在，后续所有页面的字典数据值都直接从里面获取。我猜测这样做的原因是：字典数据变动频率极低，通过这种方式可以减少对字典接口的请求次数，避免资源浪费。从代码逻辑上看，这确实是一个合理的设计。然而，当业务需求发生变化时，问题就出现了。如果前端不手动删除中的字典数据，哪怕关闭了浏览器，页面上展示的依然是旧数据，无法更新。为了解决这一隐患，我总结了几种可行的解决方案。
2025-04-03 09:58:16
536
原创 前端开发小技巧 - 【CSS】- 表单控件的 placeholder 如何控制换行显示？
【代码】前端开发小技巧 - 【CSS】- 表单控件的 placeholder 如何控制换行显示？
2025-03-28 15:26:15
303
原创 关于考试监听切屏的三种方式
在数字化考试中，防作弊是一项重要任务，而防切屏技术是确保考试公正性的关键措施之一。pageshow和pagehide事件、窗口焦点变化监听（和），以及全屏模式，并分析各自的利弊，并结合具体的代码实现，来展示如何在Web应用中融入这些技术。
2025-03-21 15:17:01
389
原创 微信小程序wx.request接口报错(errno: 600001, errMsg: “request:fail -2:net::ERR_FAILED“)
【代码】微信小程序wx.request接口报错(errno: 600001, errMsg: “request:fail -2:net::ERR_FAILED“)
2025-03-13 17:01:09
685
原创 Vue的scoped原理
我之前不知道这个知识点的时候，被这个坑了一把，不知道为啥自己组件的样式被改了，当时找了半天才看到是父组件改的，所以我之后定义组件根节点的class名字的时候，尽量定义成一个独一无二的，免得无意中被父组件的同名类名的样式污染了。的根节点上既有自己声明scoped后的属性选择器，又有父级的声明scoped后的属性选择器，所以在父组件中，就可以修改子组件根节点的样式了。在实际开发中，我们常常需要在父组件修改子组件的样式，比如在用三方组件库的时候，组件库里的样式往往不能100%满足我们的需求，这时候就要用到。
2025-03-05 16:34:19
744
原创 浅浅认识一下js中的闭包
内存泄漏：闭包可以长时间保留变量，闭包写得越多，闭包占据的调用栈越多，导致调用栈的可用空间就会越小，因为JavaScript的垃圾回收机制不会回收仍然被引用的变量。封装私有变量：闭包可以用来创建模块化的代码，保护变量不被外部代码访问，同时提供公共接口来与这些变量交互，放置全局变量污染。数据持久化：闭包可以保持函数执行之间的状态，即使函数在不同时间点被调用，它仍然可以访问上次调用时的变量值。回调函数：在异步操作中，闭包经常用作回调函数，以便在异步操作完成后可以访问调用时的作用域中的变量。函数作用域中的变量。
2025-03-05 16:27:34
833
原创 vue3入门教程：teleport
总之，Teleport是Vue 3中一个非常实用的组件，它提供了一种灵活的方式来处理需要脱离常规文档流的UI组件。通过Teleport，你可以将模态框或弹窗的内容渲染到body元素中，从而确保它们能够覆盖在整个页面之上。你可以将通知组件渲染到一个固定的位置，而不受页面其他部分布局的影响。在使用Teleport时，要确保传送的内容对于所有用户都是可访问和可用的，特别是对于那些依赖屏幕阅读器等辅助技术的用户。通过v-if指令控制传送内容的显示和隐藏，可以确保在不需要时不会渲染多余的内容。
2025-03-02 17:29:59
387
原创 JS正则表达式：常用正则手册/RegExp/正则积累
函数接收两个参数，第一个参数是匹配到的字符串，第二个参数是匹配到的子串中的第一个括号里的内容。函数接收两个参数，第一个参数是匹配到的字符串，第二个参数是匹配到的子串中的第一个括号里的内容。正则表达式 /-([a-z])/g 匹配符合烤串命名风格的字符串中的 - 后面的小写字母，并将其替换为对应的大写字母。在这个例子中，我们使用匿名函数来处理匹配到的字符串，将匹配到的小写字母转换为对应的大写字母，并返回。在这个例子中，我们使用匿名函数来处理匹配到的字符串，将匹配到的小写字母转换为对应的大写字母，并返回。
2025-02-21 14:16:51
1045
原创 div 元素失去焦点时的触发方法
但是，会有一个问题，由于添加了‘tabindex’属性，当你点击div元素的时候，div元素周围会有一个蓝色的焦点轮廓，需要去掉的话，直接在div元素上加上’outline: none’ 的样式就可以了。Element.closest() 方法用来获取：匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。但是可以给 div 元素加上tabindex属性，也可以让div等元素有焦点，所以blur事件就有效了。使用这个判断，点击的元素，其父元素是否有我们的目标 div。有个两个div元素需要在。
2025-01-22 15:24:40
415
原创 getBoundingClientRect()
作用：用来获取元素的位置以及大小相关的信息。是DOM元素的一个方法，返回一个DOMRect对象，包含元素的大小及其相对于视口的位置。
2025-01-22 15:21:19
504
原创 vite.config.js常用配置
vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动： 快速的冷启动，不需要等待打包操作；即时的热模块更新，替换性能和模块数量的解耦让更新飞起；真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。vite项目中使用的不是vue.config.js,而是vite.config.js。
2025-01-22 15:14:54
345
原创 Js中的Object.entries()
通过 Object.entries 结合 filter 方法，筛选出满足特定条件的。使用 map 方法对对象属性值进行转换，然后重新构建对象。对象的属性默认是可枚举的，意味着它们可以在。用于将对象的可枚举属性转换为一个数组。该数组包含对象自身的可枚举属性的。使用 reduce 方法结合。对对象进行复杂的数据处理。
2025-01-05 14:04:50
633
原创 浅谈vite之import.meta
例如，import.meta.glob('./modules/*.js') 可以匹配当前目录下以 .js 结尾的所有模块。import.meta.glob() 方法接受一个模式字符串作为参数，并返回一个Promise，该Promise 析为一个对象，该对象包含匹配该模式的所有模块的键值对。import.meta.env.DEV: {boolean}应用是否在开发中运行(总是与import.meta.env.PROD相反)import.meta.env.MODE: {string}应用程序运行的模式。
2025-01-05 13:52:44
1012
原创 fromData使用详解
介绍把属性和属性值进行数组结合，高效传输FormData的主要用途有两个：1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。2、异步上传文件（想了解为什么常用formData传输文件的原因，请移步常用Formdata对象来上传图片的原因）
2025-01-03 15:40:05
626
原创 NodeJS中使用Socket.IO
Socket.IO 是一个库，可以在客户端和服务器之间实现低延迟双向和基于事件的通信。它建立在WebSocket协议之上，并提供额外的保证，例如回退到 HTTP 长轮询或自动重新连接。
2024-12-10 21:27:10
767
原创 Vue3页面内跳转锚点-scrollIntoView（）
scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。// 等同于element.scrollIntoView(true)//布尔参数。接受布尔值主要还是为了兼容不支持平滑滚动（老版）的浏览器//对象参数alignToTop当传入参数true时，相当于{behavior: 'auto', block: 'start', inline: 'nearest'}
2024-12-10 21:22:37
651
原创 new FileReader()
是用于在客户端（浏览器）中异步读取文件内容的 JavaScript 内置对象。它提供了一种将文件内容读取到内存中以供处理的方式。还可以用于读取其他类型的文件，如图像、音频、视频等，具体的使用方式会因文件类型而有所不同。事件处理程序，当文件读取完成时，该处理程序将被调用，允许你访问读取的文件内容。选择文件和读取：使用文件输入框等方式让用户选择文件，然后通过调用。事件处理程序被调用，然后将读取到的文件内容显示在页面上的。对象来读取不同类型的文件，例如文本文件、图像文件等。在这个示例中，当用户选择一个文件后，
2024-12-10 21:20:08
523
原创 Node.js path 模块详解
一、path 模块概述1. 模块介绍path 模块是 Node.js 的核心模块之一，主要用于操作和处理文件路径。无论是在开发服务器应用，还是处理文件上传、下载等任务时，路径操作都是非常常见的需求。path 模块提供了一系列便捷的方法来简化这些任务。2. 模块引入方式由于 path 是 Node.js 的核心模块，不需要额外安装，直接使用 require 语句即可引入。
2024-12-05 15:07:05
1261
原创 git提交到远程仓库如何撤回?
命令创建一个新的“反向”提交，该提交会撤销指定的提交更改。例如，如果你想要撤销哈希值为。查看提交历史，找到你想要撤回的那个提交的哈希值（commit hash）。请注意，如果你的项目有其他协作者，在推送你的更改之前，最好先与他们沟通。首先，确保你的本地仓库是最新状态。这将创建一个新的提交，它将撤销。git提交到远程仓库如何撤回?来更新你的本地仓库。
2024-11-25 23:12:30
314
原创 前端 vue 如何区分开发环境
文件是默认的环境变量文件，不论何种环境，这里设置的变量都会被加载。在Vue项目中，通常通过环境变量来区分不同的开发环境。文件来实现，Vue CLI 3+版本支持这种方式。文件，用于设置本地特有的环境变量。文件，用于设置开发环境的环境变量。文件，用于设置生产环境的环境变量。会根据不同的环境加载相应的文件。文件，用于设置所有的环境变量。在代码中，你可以通过。
2024-11-22 16:14:53
453
原创 HTML5 视频 Vedio 标签详解
HTML5 引入了<video>标签，允许开发者在网页中直接嵌入视频文件，而不需要依赖第三方插件。本文将全面介绍<video>标签的各种属性，并通过实例代码其用法。
2024-11-22 09:59:07
1736
原创 css3D变换用法
文章目录 CSS3D变换详解及代码案例 一、CSS3D变换的基本概念 二、3D变换的开启与景深设置 三、代码案例 CSS3D变换详解及代码案例CSS3D变换是CSS3中引入的一种强大功能，它允许开发者在网页上创建三维空间中的动画和交互效果。通过CSS3D变换，你可以实现元素的3D位移、旋转、缩放和倾斜，从而创建出更加生动和立体的用户体验。本文将详细介绍CSS3D变换的用法，并通过代码案例进行详细说明。一、CSS3D变换的基本概念 3D
2024-11-17 22:27:14
482
原创 el-tree文字显示不全的解决办法
因为element ui官方el-tree文档里没有给节点插入title标签的说明，于是我打开源码在其对应节点的span标签强制写上title="node.name"之类的并没有任何用处。因为我用element ui的el-tree组件，span的外层样式默认为display: flex;直到看到自定义节点内容，虽然官方举例用来插入和删除节点，但是我可以把点击事件变成悬浮事件显示节点文本全内容啊。如果.span-ellipsis样式设置无效，可能需要加上display: block;
2024-10-25 16:59:32
383
原创 Vue2的依赖注入(跨级通信)基本使用
的数据默认不是响应式的，祖先级别组件修改数据，其他使用到这个数据的组件不会同步。我点击按钮使祖先组件的num值+1，只有祖先组件的num值变了。
2024-10-18 18:07:21
824
1
原创 前端接口报500如何解决 | 发生的原因以及处理步骤
接口500，通常指的是服务器（Internal Server Error），是中的一个标准状态码。当服务器遇到无法处理的错误时，会返回这个状态码。这种错误可能涉及到服务器配置、服务器上的应用程序、服务器资源、数据库、网络连接等多种原因。
2024-10-13 12:36:41
2442
1
原创 前端如何实现图片伪防盗链，保护页面图片
前端在实现图片防盗链方面，主要通过动态生成 Token、设置图片加载控制（如禁用右键菜单和添加水印）以及与服务器端防盗链机制配合来保护图片资源。虽然真正的防盗链逻辑通常是在服务器端实现，但前端可以采取这些措施来增强保护效果。结合前端和后端的策略，可以有效地防止未经授权的图片访问和盗用。
2024-09-27 10:20:31
786
原创 前端的五种排序算法
在前端开发中，对数据进行排序是一项基本且常见的任务。掌握排序算法不仅可以帮助我们更有效地处理数据，还能提升代码的执行效率。冒泡排序、选择排序、插入排序、快速排序和归并排序。通过理解这些算法的原理和逻辑，我们可以更好地选择合适的排序方法来优化应用性能。1.冒泡排序冒泡排序是一种简单的排序算法，它重复地遍历待排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。遍历数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。比较相邻的两个元素，如果第一个比第二个大，就交换它们两个；
2024-09-21 16:24:11
1056
原创 前端实现检索文本高亮实现
使用搜索引擎时的搜索结果高亮，搜索文本在查询出来的结果内高亮显示，这种在全文检索应该很常见在前端实现搜索并展示文字高亮的功能，可以通过以下步骤进行：1、 获取搜索关键词：首先，你需要获取用户输入的搜索关键词。这可以通过表单输入、输入框或其他交互方式来实现。2、 遍历文本内容：将需要进行搜索的文本内容获取到，并进行遍历。这可以是一个字符串、HTML元素的文本内容或其他文本源。3、 高亮匹配的关键词：在遍历过程中，对于每个文本片段，判断是否包含搜索关键词。如果包含，可以使用HTML标签或CSS。
2024-09-16 11:45:42
786
原创 Vue3+vite中使用import.meta.glob
/ 数组写法同时获取指定文件夹下面的所有文件。我们已经知道 "*"是代表所有文件 "**"是代表所有文件夹 它们是指目录下的所有而并不是单个文件或文件夹 当我们指定某一个目录那么他就是获取指定目录下的所有文件。
2024-09-06 17:39:02
894
原创 NVM安装使用
安装node.js 之后会自动开始安装 npm 安装npm的时候需要翻墙，如果没有翻墙会导致npm安装失败， 可以通过修改setting文件，使用淘宝的镜像。也就是需要先指定node的版本，node以及npm命令才能够使用， 此时执行 nvm ls 可以看到当前使用的版本。这是因为是新安装nvm，还没有安装node，所以提示系统没有安装任何版本。nvm -h 就可以看到nvm的所有命令了，都有相应的解释。安装nvm之前要先卸载，安装的所有node.js版本。我们执行nvm ls可以看到我们安装的版本。
2024-08-20 22:11:18
415
原创 JS 删除数组元素（ 5种方法 ）
语法注意事项pop()方法会直接修改原数组，减少数组长度。它返回被删除的最后一个元素。代码示例// 输出: 3// 输出: [1, 2]splice()适合删除任意位置的元素，且可以一次删除多个。pop()和shift()分别用于删除末尾和头部的单个元素。使用delete操作符会导致数组中出现undefined值，而非真正缩小数组大小。调整length属性可快速截断数组，但请确保了解其对数组影响的特殊性。
2024-08-16 22:36:01
2312
原创 JS操作SVG
可缩放矢量图形（SVG）是一种基于XML的标记语言，用于描述二维矢量图形。与传统的像素图像不同，SVG图像在放大时不会失真，这使得它非常适合用于网页图形设计。在本文中，我们将探讨如何使用JavaScript与SVG交互，实现动态的图形效果。SVG基础SVG图像可以直接嵌入HTML文档中，成为DOM的一部分，这样就可以使用JavaScript和CSS来操作它们。在上面的代码中，<circle>元素用于绘制一个圆形，cx和cy属性定义了圆心的坐标，r属性定义了圆的半径，stroke和fill。
2024-08-11 13:12:40
729
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人