- 博客(143)
- 收藏
- 关注
RSS订阅原创 CSS“多列布局”
CSS多列布局允许我们将内容分成多个垂直列，使页面布局更加灵活和多样化。多列布局的主要属性包括 、 和 ，这些属性可以单独或结合使用，以实现所需的列布局效果。
2025-06-11 14:55:28
672
原创 Grid 布局学习一
Grid 布局相关的属性以及值众多，需要记忆的不少，建议可以跟 demo 一起结合起来，边敲代码边理解，再利用一些空闲时间记忆一下。笔者会在介绍每个属性的时候，做个小 demo 演示，建议大家可以自己修改看看效果加深记忆Grid 布局属性可以分为两大类，一类是容器属性，一类是项目属性。我们先来看容器属性。
2025-06-06 11:08:24
839
原创 HTTP常见的请求头有哪些？都有什么作用？在 Web 应用中使用这些请求头？
通过上述示例，你可以看到如何在前端和后端使用常见的 HTTP 请求头。这些请求头在实际应用中非常有用，可以帮助你更好地控制请求和响应的行为，提高应用的性能和安全性。希望这些示例对你有所帮助！
2025-06-02 12:13:13
752
原创 JavaScript fetch() 方法
请求并加载网页中的信息。请求可以是返回 JSON 或 XML 格式数据的任何 API。此方法返回一个承诺。它返回一个承诺，无论它是否已解决。返回数据的格式可以是 JSON 或 XML。如果没有选项，Fetch 将始终充当获取请求。它可以是对象数组，也可以是单个对象。JavaScript 中的。
2025-05-25 22:02:21
181
原创 CSS实现文本自动平衡text-wrap: balance
并单独站在新行上，破坏了视觉效果，看起来很奇怪。当然，有老式的 手动换行或将内容分成不同部分。属性，浏览器将自动计算单词数并将它们平均分配到两行——非常适合页面标题、卡片标题、我们都知道那些标题，最后一个。、模态框和FAQ等。
2025-05-16 09:35:46
424
原创 如何解决按钮重复点击
这些问题如果处理不当，轻则影响用户体验，重则可能造成数据错误。然后封装一个通用的 Button 组件。我们可以封装一个自定义 Hook。
2025-05-09 16:37:24
207
原创 使用 `node-captcha` 实现验证码功能指南
是一个用于 Node.js 环境下生成验证码图片的轻量级库。它允许开发者轻松地创建自定义的、随机数字或字母组成的验证码，以增强网站的安全性，防止自动化脚本的恶意攻击。该库通过提供简单的 API 接口，使得集成到现有的Web应用程序中变得简单快捷。
2025-04-30 21:17:06
187
原创 Vue3利用crypto-js的AES对数据加密以及Nodejs解密
尝试对进行网络传输的某些数据进行加密，防止敏感信息在数据传输过程中被恶意拦截或窃取。选择了crypto-js这个库，跟随大部队的脚步吧..
2025-04-13 22:53:05
320
原创 LocalStorage的坑
前端代码在全局前置守卫里时会检查中是否存在字典数据。如果不存在，则会请求一次接口，并将获取到的字典数据存入。如果存在，后续所有页面的字典数据值都直接从里面获取。我猜测这样做的原因是：字典数据变动频率极低，通过这种方式可以减少对字典接口的请求次数，避免资源浪费。从代码逻辑上看，这确实是一个合理的设计。然而，当业务需求发生变化时，问题就出现了。如果前端不手动删除中的字典数据，哪怕关闭了浏览器，页面上展示的依然是旧数据，无法更新。为了解决这一隐患，我总结了几种可行的解决方案。
2025-04-03 09:58:16
680
原创 前端开发小技巧 - 【CSS】- 表单控件的 placeholder 如何控制换行显示？
【代码】前端开发小技巧 - 【CSS】- 表单控件的 placeholder 如何控制换行显示？
2025-03-28 15:26:15
400
原创 关于考试监听切屏的三种方式
在数字化考试中，防作弊是一项重要任务，而防切屏技术是确保考试公正性的关键措施之一。pageshow和pagehide事件、窗口焦点变化监听（和），以及全屏模式，并分析各自的利弊，并结合具体的代码实现，来展示如何在Web应用中融入这些技术。
2025-03-21 15:17:01
773
原创 微信小程序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
979
原创 Vue的scoped原理
我之前不知道这个知识点的时候，被这个坑了一把，不知道为啥自己组件的样式被改了，当时找了半天才看到是父组件改的，所以我之后定义组件根节点的class名字的时候，尽量定义成一个独一无二的，免得无意中被父组件的同名类名的样式污染了。的根节点上既有自己声明scoped后的属性选择器，又有父级的声明scoped后的属性选择器，所以在父组件中，就可以修改子组件根节点的样式了。在实际开发中，我们常常需要在父组件修改子组件的样式，比如在用三方组件库的时候，组件库里的样式往往不能100%满足我们的需求，这时候就要用到。
2025-03-05 16:34:19
803
原创 浅浅认识一下js中的闭包
内存泄漏：闭包可以长时间保留变量，闭包写得越多，闭包占据的调用栈越多，导致调用栈的可用空间就会越小，因为JavaScript的垃圾回收机制不会回收仍然被引用的变量。封装私有变量：闭包可以用来创建模块化的代码，保护变量不被外部代码访问，同时提供公共接口来与这些变量交互，放置全局变量污染。数据持久化：闭包可以保持函数执行之间的状态，即使函数在不同时间点被调用，它仍然可以访问上次调用时的变量值。回调函数：在异步操作中，闭包经常用作回调函数，以便在异步操作完成后可以访问调用时的作用域中的变量。函数作用域中的变量。
2025-03-05 16:27:34
847
原创 vue3入门教程：teleport
总之，Teleport是Vue 3中一个非常实用的组件，它提供了一种灵活的方式来处理需要脱离常规文档流的UI组件。通过Teleport，你可以将模态框或弹窗的内容渲染到body元素中，从而确保它们能够覆盖在整个页面之上。你可以将通知组件渲染到一个固定的位置，而不受页面其他部分布局的影响。在使用Teleport时，要确保传送的内容对于所有用户都是可访问和可用的，特别是对于那些依赖屏幕阅读器等辅助技术的用户。通过v-if指令控制传送内容的显示和隐藏，可以确保在不需要时不会渲染多余的内容。
2025-03-02 17:29:59
415
原创 JS正则表达式：常用正则手册/RegExp/正则积累
函数接收两个参数，第一个参数是匹配到的字符串，第二个参数是匹配到的子串中的第一个括号里的内容。函数接收两个参数，第一个参数是匹配到的字符串，第二个参数是匹配到的子串中的第一个括号里的内容。正则表达式 /-([a-z])/g 匹配符合烤串命名风格的字符串中的 - 后面的小写字母，并将其替换为对应的大写字母。在这个例子中，我们使用匿名函数来处理匹配到的字符串，将匹配到的小写字母转换为对应的大写字母，并返回。在这个例子中，我们使用匿名函数来处理匹配到的字符串，将匹配到的小写字母转换为对应的大写字母，并返回。
2025-02-21 14:16:51
1374
原创 div 元素失去焦点时的触发方法
但是，会有一个问题，由于添加了‘tabindex’属性，当你点击div元素的时候，div元素周围会有一个蓝色的焦点轮廓，需要去掉的话，直接在div元素上加上’outline: none’ 的样式就可以了。Element.closest() 方法用来获取：匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。但是可以给 div 元素加上tabindex属性，也可以让div等元素有焦点，所以blur事件就有效了。使用这个判断，点击的元素，其父元素是否有我们的目标 div。有个两个div元素需要在。
2025-01-22 15:24:40
509
原创 getBoundingClientRect()
作用：用来获取元素的位置以及大小相关的信息。是DOM元素的一个方法，返回一个DOMRect对象，包含元素的大小及其相对于视口的位置。
2025-01-22 15:21:19
540
原创 vite.config.js常用配置
vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动： 快速的冷启动，不需要等待打包操作；即时的热模块更新，替换性能和模块数量的解耦让更新飞起；真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。vite项目中使用的不是vue.config.js,而是vite.config.js。
2025-01-22 15:14:54
401
原创 Js中的Object.entries() 和 Object.fromEntries()
通过 Object.entries 结合 filter 方法，筛选出满足特定条件的。使用 map 方法对对象属性值进行转换，然后重新构建对象。对象的属性默认是可枚举的，意味着它们可以在。用于将对象的可枚举属性转换为一个数组。该数组包含对象自身的可枚举属性的。使用 reduce 方法结合。对对象进行复杂的数据处理。
2025-01-05 14:04:50
764
原创 浅谈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
1146
原创 fromData使用详解
介绍把属性和属性值进行数组结合，高效传输FormData的主要用途有两个：1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。2、异步上传文件（想了解为什么常用formData传输文件的原因，请移步常用Formdata对象来上传图片的原因）
2025-01-03 15:40:05
749
原创 NodeJS中使用Socket.IO
Socket.IO 是一个库，可以在客户端和服务器之间实现低延迟双向和基于事件的通信。它建立在WebSocket协议之上，并提供额外的保证，例如回退到 HTTP 长轮询或自动重新连接。
2024-12-10 21:27:10
941
原创 Vue3页面内跳转锚点-scrollIntoView（）
scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。// 等同于element.scrollIntoView(true)//布尔参数。接受布尔值主要还是为了兼容不支持平滑滚动（老版）的浏览器//对象参数alignToTop当传入参数true时，相当于{behavior: 'auto', block: 'start', inline: 'nearest'}
2024-12-10 21:22:37
759
原创 new FileReader()
是用于在客户端（浏览器）中异步读取文件内容的 JavaScript 内置对象。它提供了一种将文件内容读取到内存中以供处理的方式。还可以用于读取其他类型的文件，如图像、音频、视频等，具体的使用方式会因文件类型而有所不同。事件处理程序，当文件读取完成时，该处理程序将被调用，允许你访问读取的文件内容。选择文件和读取：使用文件输入框等方式让用户选择文件，然后通过调用。事件处理程序被调用，然后将读取到的文件内容显示在页面上的。对象来读取不同类型的文件，例如文本文件、图像文件等。在这个示例中，当用户选择一个文件后，
2024-12-10 21:20:08
774
原创 Node.js path 模块详解
一、path 模块概述1. 模块介绍path 模块是 Node.js 的核心模块之一，主要用于操作和处理文件路径。无论是在开发服务器应用，还是处理文件上传、下载等任务时，路径操作都是非常常见的需求。path 模块提供了一系列便捷的方法来简化这些任务。2. 模块引入方式由于 path 是 Node.js 的核心模块，不需要额外安装，直接使用 require 语句即可引入。
2024-12-05 15:07:05
1365
原创 git提交到远程仓库如何撤回?
命令创建一个新的“反向”提交，该提交会撤销指定的提交更改。例如，如果你想要撤销哈希值为。查看提交历史，找到你想要撤回的那个提交的哈希值（commit hash）。请注意，如果你的项目有其他协作者，在推送你的更改之前，最好先与他们沟通。首先，确保你的本地仓库是最新状态。这将创建一个新的提交，它将撤销。git提交到远程仓库如何撤回?来更新你的本地仓库。
2024-11-25 23:12:30
340
原创 前端 vue 如何区分开发环境
文件是默认的环境变量文件，不论何种环境，这里设置的变量都会被加载。在Vue项目中，通常通过环境变量来区分不同的开发环境。文件来实现，Vue CLI 3+版本支持这种方式。文件，用于设置本地特有的环境变量。文件，用于设置开发环境的环境变量。文件，用于设置生产环境的环境变量。会根据不同的环境加载相应的文件。文件，用于设置所有的环境变量。在代码中，你可以通过。
2024-11-22 16:14:53
479
原创 HTML5 视频 Vedio 标签详解
HTML5 引入了<video>标签，允许开发者在网页中直接嵌入视频文件，而不需要依赖第三方插件。本文将全面介绍<video>标签的各种属性，并通过实例代码其用法。
2024-11-22 09:59:07
1845
原创 css3D变换用法
文章目录 CSS3D变换详解及代码案例 一、CSS3D变换的基本概念 二、3D变换的开启与景深设置 三、代码案例 CSS3D变换详解及代码案例CSS3D变换是CSS3中引入的一种强大功能，它允许开发者在网页上创建三维空间中的动画和交互效果。通过CSS3D变换，你可以实现元素的3D位移、旋转、缩放和倾斜，从而创建出更加生动和立体的用户体验。本文将详细介绍CSS3D变换的用法，并通过代码案例进行详细说明。一、CSS3D变换的基本概念 3D
2024-11-17 22:27:14
532
原创 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
453
原创 Vue2的依赖注入(跨级通信)基本使用
的数据默认不是响应式的，祖先级别组件修改数据，其他使用到这个数据的组件不会同步。我点击按钮使祖先组件的num值+1，只有祖先组件的num值变了。
2024-10-18 18:07:21
873
1
原创 前端接口报500如何解决 | 发生的原因以及处理步骤
接口500，通常指的是服务器（Internal Server Error），是中的一个标准状态码。当服务器遇到无法处理的错误时，会返回这个状态码。这种错误可能涉及到服务器配置、服务器上的应用程序、服务器资源、数据库、网络连接等多种原因。
2024-10-13 12:36:41
2565
1
原创 前端如何实现图片伪防盗链，保护页面图片
前端在实现图片防盗链方面，主要通过动态生成 Token、设置图片加载控制（如禁用右键菜单和添加水印）以及与服务器端防盗链机制配合来保护图片资源。虽然真正的防盗链逻辑通常是在服务器端实现，但前端可以采取这些措施来增强保护效果。结合前端和后端的策略，可以有效地防止未经授权的图片访问和盗用。
2024-09-27 10:20:31
889
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人