- 博客(89)
- 收藏
- 关注
原创 CSS兄弟选择器:+与~的差异解析
CSS选择器对比:相邻兄弟(+)与通用兄弟(~) 相邻兄弟选择器(+)仅选择紧邻的下一个兄弟元素,要求元素紧密相连;而通用兄弟选择器(~)选择指定元素之后的所有兄弟元素,允许中间有其他元素间隔。相邻兄弟选择器适用于特定位置的样式控制,通用兄弟选择器则适合批量设置样式。示例代码通过不同背景色和边框直观展示了两种选择器的差异和应用场景。
2025-09-29 14:08:25
759
原创 UniApp键盘监听全攻略
UniApp键盘监听实现指南 本文介绍了在UniApp中监听键盘高度变化的完整解决方案,适用于聊天、评论等需要输入交互的场景。核心是通过@keyboardheightchange事件监听键盘状态变化,动态调整页面布局。关键点包括:必须设置adjust-position="false"禁用自动调整,使用flex布局实现页面结构,通过计算属性动态计算底部内边距,并添加防抖函数优化性能。代码提供了完整的模板、脚本和样式实现,兼容微信小程序、App等多平台,并包含过渡动画优化用户体验。
2025-09-28 10:10:51
785
原创 UniApp ConnectSocket连接websocket
useSocket WebSocket 封装 Hook 使用说明 该文档介绍了基于 Vue 3 Composition API 的 WebSocket 封装 Hook,专为 UniApp 项目设计。项目包含 Node.js 服务端和 UniApp 客户端两个仓库。 核心功能包括: 自动连接管理 自动重连机制 心跳检测 消息管理 状态监控 错误处理 文档提供了完整的安装指南、基本使用示例和 API 参考,包含连接配置、消息发送、状态监控等核心功能的实现代码,帮助开发者快速集成 WebSocket 实时通信功能
2025-09-25 11:18:39
1038
原创 Vue3中使用高德地图进行定位
文章摘要:本文介绍了高德地图组件的封装实现,基于@amap/amap-jsapi-loader库开发。主要内容包括:1) 使用示例展示组件在表单中的集成方式,支持双向绑定经纬度和地址;2) GDMap组件核心实现,包含地图容器、搜索框和位置提示功能;3) 关键功能如地图初始化、标记点管理、坐标转换等,通过AMap API实现地图交互和位置搜索。组件支持自定义宽高和禁用状态,适用于需要地图选点的业务场景。
2025-08-27 14:35:29
340
原创 axios无感刷新token
本文展示了一个前端Token管理方案,包含以下核心功能:1) 通过axios拦截器自动处理请求和响应;2) 实现Token获取、验证和刷新机制;3) 采用队列处理并发请求时的Token刷新问题。后端提供三个接口:获取初始Token、受保护资源访问和Token刷新,Token有效期为10秒。当Token过期时,前端会自动触发刷新流程,避免重复刷新请求,确保用户体验。该方案适用于需要身份验证的前后端分离应用,有效解决了Token过期和并发请求的问题。
2025-07-07 17:27:53
711
原创 Vue3封装动态Form表单
本文介绍了两种在Vue3中优化表单开发的方法:1)使用FormBuilder组件封装表单逻辑,通过props传递配置;2)结合hooks实现更灵活的渲染。主要特点包括: 通过componentMap映射UI组件,减少重复代码 支持动态隐藏字段(isHidden) 提供两种使用方式:组件直接引用和hooks渲染函数 内置表单验证功能 支持响应式布局配置(span) 核心代码展示了如何将表单配置抽离为fields数组,通过v-for动态渲染表单元素,实现了表单开发的模块化和可维护性提升。
2025-07-04 16:20:00
1178
原创 纯HTML中使用shadowRoot自定义组件
/ 创建影子 DOM(open 模式)/* 全局样式 */// 触发自定义事件。// 注册自定义元素。// 监听自定义事件。
2025-07-02 16:57:05
943
原创 js消除异步函数的传染性
摘要:消除异步函数的传染性 本文探讨了异步函数(async/await)的传染性问题及其解决方案。异步函数会破坏纯函数的特性,导致调用链上的函数都必须变为异步。通过重写fetch/axios请求方法并引入缓存机制,可以实现异步函数的"消除"。具体方法包括:1)保存原始方法;2)创建缓存状态管理系统;3)重写请求方法实现缓存逻辑;4)通过try-catch捕获Promise异常;5)最终恢复原始方法。这种技术在不污染纯函数的前提下,有效解决了异步传染性问题,适用于fetch和axios等多
2025-06-12 14:39:25
1226
原创 vue3+vite+ts中如何动态使用import.meta.env中的变量
不想在使用import.meta.env的时候,还去找到变量文件去看。这个时候在vue文件中使用的时候,就会有变量提示。
2024-11-11 16:15:57
701
原创 windows中使用Jenkins打包,部署vue项目完整操作流程
在Jenkins已经安装的基础上,可以开始下面的教程。网上有许多安装教程,简单罗列几个。
2024-07-19 14:44:07
1199
原创 tinymce上传图片或者其他文件等等
tinymce默认使用英文,如果需要中文化,需要去官网下载指定的zh_CN.js文件然后放到langs文件夹下面。为了方便我这边直接创建了一个vue文件,可以理解为vue组件,直接把源码放进去。需要注意的是tinymce不同版本的上传图片可能略微有些不同,请注意分辨。缺点: 需要申请特定apikey,类似于百度,高德地图;tips: tinymce在vue中常用的有两种方式。缺点: 需要自己手动的封装组件,灵活性高。优点: 不需要申请特定的apikey。预览,两种图片上传的方式有一些不同。
2024-02-29 14:25:02
2079
4
原创 Vue+Nodejs+Express+Minio 实现本地图片上传
默认账号密码minioadmin和minioadmin,点击9000端口的这个链接,即可访问客户端。nodejs连接Minio,简易服务进行图片上传,比较简单,直接上代码。安装完成之后,可以将minio配置成环境变量方便使用。都要下载可以自定义安装目录。配置了环境变量启动命令式。
2023-07-31 17:23:12
2708
2
原创 不同的html中,加载公共的文件
tips:例如有两个html文件,main.html,index.html,每个html文件都需要引入很多公共的资源文件,难道我需要多个复制吗>,不需要只需要如下操作。
2023-03-23 09:00:16
282
原创 web worker的基本使用案例
spak-md5.js由于代码太长,这边提供下载链接。大致的使用方法如上,如果想更详细的了解的话,请转至。代码按照顺序分别如下。
2023-03-10 17:29:10
846
原创 mysql简单的修改my.ini文件跳过输入密码进入mysql
找到mysql安装目录下面的my.ini文件然后打开笔记本进行,找到[mysql] 在下面添加上用户名和密码然后保存修改即可,无须关闭mysql服务
2022-04-16 17:20:10
1792
原创 仿京东的商城图片放大功能
1.源代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &l
2022-04-07 09:19:21
292
原创 JavaScript中关于数字计算精度丢失问题的处理
/** * @description 适用加法和减法,如果是加法就传正数,如果是减法就传负值 * @return {*} 返回值 * @param { Number } n1 数字1 * @param { Number } n2 数字2 */export function addAndSubtract(n1, n2) { let r1, r2, m try { r1 = n1.toString().split('.')[1].length } catch (e) {
2022-03-07 14:21:35
684
原创 使用原生table 书写复杂人事档案表格
<template> <div style="margin: 0 auto"> <table> <tr> <td colspan="24" style="font-size: 24px;font-weight: bold"> 人事档案 </td> </tr> <tr> <td colspan=
2022-03-03 11:06:13
471
原创 vue使用vue-amap 高德地图进行选点和搜索
vue使用vue-amap进行地图点的搜索和点击选点npm install vue-amap --save //下载npm 包在main.js主文件中进行引用import VueAMap from "vue-amap";Vue.use(VueAMap);VueAMap.initAMapApiLoader({ key: "XXXXXXXXXXXXXXXXXX",//高德开放平台申请的key值 plugin: [ "AMap.Autocomplete", //输入提示插.
2022-01-17 09:00:51
5980
10
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅