- 博客(216)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 MySQL 的乐观锁和悲观锁 & 死锁解决方案
假设冲突一定会发生，所以操作数据前先把锁拿到手，别的事务想动这条数据就得排队等着。MySQL 里用拿排他锁，用拿共享锁。拿到锁之后别的事务读写都会被阻塞，直到当前事务提交或回滚才释放。假设冲突很少发生，干脆不加锁，等到真正更新的时候再检查数据有没有被别人改过。通常用一个字段来实现，读的时候把 version 一起读出来，更新的时候在 WHERE 条件里带上这个 version，如果 version 变了说明被别人改过，更新影响 0 行，业务层自己决定是重试还是报错。
2026-04-30 10:44:55
363
原创 MySQL 中监控和优化慢 SQL & 索引小知识
有时候是统计信息不准，导致优化器算错账，明明该走索引却选了全表扫描。1）type：访问类型，ALL 是全表扫描，range 是范围扫描，ref 是等值匹配，index 是全索引扫描。拿到慢 SQL 后，用 EXPLAIN 分析执行计划，找出问题所在，再针对性优化。2）唯一索引：保证列值不重复，但允许有 NULL，可以有多个 NULL。4）联合索引：多列组合成一个索引，遵循最左前缀原则，列顺序很重要。2）key：实际用的索引名称，NULL 就是没用上索引。建了索引不代表查询就会用，用了索引也不代表查询就快。
2026-04-30 09:06:09
313
原创 如何实现网站一键切换主题的功能？
在 CSS 中定义一套基础变量，比如在 :root 选择器下设置默认主题色。:root {:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。
2026-04-28 15:26:05
194
原创 策略模式简介
策略模式是一种行为型设计模式，核心思想是把一系列算法封装成独立的类，让它们可以互相替换。用策略模式一拆，每个分支变成一个策略类，调用方想用哪个就注入哪个，干干净净。1)支付系统，微信、支付宝、银联、Apple Pay，每种支付方式一个策略。策略模式把每种促销拆成独立的类，各自演化互不影响，单元测试也能单独跑。策略模式把算法封装好了，但具体用哪个策略还得有人决定。3)Context上下文，持有策略接口引用，把实际工作委托给策略对象。2）促销活动，满减、打折、满赠、秒杀，不同促销规则用不同策略计算价格。
2026-04-25 15:28:01
278
原创 前端实现文件的断点续传，并确保大文件安全可靠上传
《大文件分片上传与断点续传实现方案》 摘要：本文介绍了前端实现大文件断点续传的核心方案。通过将文件切分为固定大小的分块（如2MB），配合唯一文件哈希标识，实现分块独立上传和进度追踪。关键技术包括：1）使用File.slice方法进行文件分片；2）为每个分片生成MD5校验值确保数据完整性；3）采用并发上传策略提升传输效率；4）利用localStorage记录上传状态实现断点续传；5）最终由服务端合并分片完成上传。方案支持HTTPS加密传输，并提供了异常处理和重试机制，有效解决了大文件上传的网络中断问题，相比传
2026-04-25 15:11:59
337
原创 vue3 组件通信 --- useAttrs()
因为 title 被 defineProps 接收了，所以这里 $attrs 已经没有了。useAttrs() 返回一个 Proxy 对象，内容为子组件标签身上的属性和方法。，该方法可以将父组件中子组件标签身上的。，且可以获取自定义事件。
2024-11-12 15:48:09
550
原创 springboot 上传文件失败：The temporary upload location
SpringBoot启动的时候会在/tmp目录下生成一个Tomcat.*的文件目录，用于"java.io.tmpdir"文件流操作，若长时间无人操作该上传功能，导致Linux系统自动删除了临时文件，所以导致上传报错。Linux下会自动清除tmp目录下10天没有使用过的文件。-Djava.io.tmpdir=自定义目录。
2024-08-21 11:33:26
1167
1
原创 storeToRefs解决pinia仓库解构赋值响应式丢失
hasLoaded: false, // 是否已加载// 路由权限}),actions: {},},},})
2024-08-09 15:33:15
1058
原创 MQTT协议使用总结
（QoS0）：消息发布完全依赖底层 TCP/IP 网络。这一级别可用于如下情况，环境传感器数据，丢失一次读记录无所谓，因为不久后还会有第二次发送。即是推送之后就完事了，至于对方有没有收到，收到是什么，数据有没有丢失，都不管。（QoS1）：确保消息到达，但消息重复可能会发生。即是你收到推送后，你还得返回一个puback给对方，告诉对方收到了，不然对方会以为你没收到，隔一段时间后重新给你推送，直到你给对方返回一个Puback为止。这一级别可用于如下情况，在计费系统中，消息重复或丢失会导致不正确的结果。
2024-06-04 10:17:26
599
原创 jenkins部署vue项目
安装插件 NodeJS、Publish Over SSH （下图为安装教程）这三个插件都这么安装。接下来添加凭证（这里我认为的是添加全局账号密码例如服务器账号、git账号密码）部署时候用。设置好 勾选自动安装然后应用=》保存（听说不要选择18版本的node）这里步骤是 把你的代码构建成文件并且压缩下一步应该发到你的服务器。下面源码管理的地方需要将你默认的分支换为${上面起的名称}部署指定分支（后面我会下载插件选择部署指定分支或标签）输入git地址并且选择配置好的git账号密码。
2024-02-04 09:49:18
884
原创 Vue组件分装之$attrs、$listener传递属性及事件
获取父组件所有插槽以及作用域插槽对应的参数#[name]="scopeData"这样，自定义按钮就能够直接响应父组件的事件，而不需要手动触发。使用v-on="$listeners"将父组件的事件监听器传递给自定义按钮。使用v-bind="$attrs"来将父组件的属性传递给自定义按钮。
2023-12-03 15:24:00
627
原创 JS严格模式（use strict）详解
严格模式是在 ECMAScript5（ES5）中引入的，在严格模式下，JavaScript 对语法的要求会更加严格，一些在正常模式下能够运行的代码，在严格模式下将不能运行。
2023-11-28 17:20:18
724
原创 使用nvm管理node多版本
来回安装肯定是很麻烦的，所以需要一个方法能够使电脑系统安装多个node版本，并且使用一句命令就能自由切换。nvm进行切换node，卸载node，更换当前电脑使用node版本。使用node工程，有时不同项目需要使用不同。win10环境使用nvm安装管理多版本。1.nvm安装，首先在官网下载。这两句到setting.txt。
2023-11-28 17:08:32
678
原创 vue项目本地开发构建速度优化 hard-source-webpack-plugin
有些项目因为项目需求点多、功能复杂、管理混乱、引入第三方插件/样式库过多、本身项目页面较多、文件较多等等原因，会导致项目体积变大、本地构建速度明显变慢，这时就需要对项目webpack进行一些设置来提高打包效率、加快打包时间。hard-source-webpack-plugin会进行文件的启动缓存，第一次启动之后，会给文件添加一次缓存，然后在第二次启动的时候，直接在本地缓存进行。缺点：每次修改配置项之后，需要项目重新启动的时候，这个时候是需要重新进行项目的热更新，跟没有配置一样。
2023-11-18 18:22:44
2003
原创 用volta管理不同项目node版本
volta是一个node.js的版本管理工具，你的电脑上安装了很多个node版本，volta可以让你在不同的项目中使用不同版本的node.js,并且可以切换node.js版本Volta会自动将安装的Node.js版本与该项目绑定，使得您在该项目中执行 node、npm、yarn等命令时，都会使用该项目指定的Node.js版本。
2023-11-11 16:01:30
2588
原创 vue的.sync修饰符用法及原理详解
利用EventBus，子组件触发事件，父组件响应事件并实现数据的更新，避免由子组件直接修改父组件传过来的内容。（如果子组件直接操作，vue会有警告提示）。v-on:update:word="wrd = $event" 则被简写为 :show.word。当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。
2023-10-30 11:29:40
944
原创 requestAnimationFrame详解
简单来说，requestAnimationFrame 就是约定在下一次浏览器刷新前执行的一个定时器。类似setTimeout。window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。1、什么是requestAnimationFrame。
2023-10-26 11:19:32
1862
原创 MutationObserver详解
所以 MutationObserver 相比 Mutation events 性能要更高。MutationObserver API 让我们能监听 DOM 树变化，该 API 设计用来替换掉在 DOM 3 事件规范中引入的 Mutation events。比如使用MutationObserver实现图片懒加载，监视img标签的visibilitychange事件，做出响。监听style或者class的变化做出响应，比如我之前的应用：监听antd的模态窗变化，做出后续操作。
2023-10-26 10:26:57
916
原创 clip-path图片裁剪
语法：clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit;stroke-box 使用笔触边界框（stroke bounding box）作为引用框。view-box 使用最近的 SVG 视口（viewport）作为引用框。阅读关于 initial。fill-box 使用对象边界框作为引用框。
2023-10-25 17:11:28
799
原创 getBoundingClientRect使用场景（table固定表头）
的需求，这时候需要给table设置一个固定的高度，可以使用添加一个元素通过getBoundingClientRect计算top的距离，然后获取浏览器可视范围高度，进行计算。使用场景：在使用框架进行开发是，经常会遇到需要给。下面以VUE为例，分装通用组件。
2023-10-18 14:03:07
506
原创 Form表单Input中按enter键自动提交的问题
按钮绑定回车事件后按回车表单执行js方法后表单自动提交刷新，先执行了js的方法后自动提交表单，使它相当于没有执行js方法，查阅资料得知在一个。，按回车键表单会自动提交，但是当表单中存在多个。时，按回车键不会执行任何操作，这是。
2023-10-17 17:32:03
3423
1
原创 小计-面试宝典
在app.vue 的created中监听beforeunload（页面刷新事件），首先在加载时，读取sessionStorage里的状态信息。此时用vuex.store的。：选择合适的客户端存储（sessionStorage），首次加载内容为空，local storage会保留上次的值需要清空。：因为store里的数据是保存在运行内存中的，所以刷新页面会重新加载vue实例，vuex中的数据会被重新赋值。方法，替换store的根状态。触发时将状态管理中的state存储到本地sessionStorage。
2023-10-16 17:05:02
51
原创 记录 UniApp开发中遇到的坑
inpu的cursor-spacing属性，可以设置键盘到输入框的距离。原因：picker带有动画，在滑动选择时，当动画结束后才会真正选中值。方案：使用其它插件，推荐：uni-data-picker。解决：使用scrollIntoView。
2023-10-16 16:52:12
693
原创 JS取消http请求
MLHttpRequest（以下简称XHR）是一个Web API接口，用于发送HTTP请求和接收HTTP响应。通过XHR发送的请求可以使用abort()方法中断。在中断请求时，该方法会将请求的状态置为abort，并会终止请求的发送和响应的接收。创建了一个AbortController对象，并将其signal属性传递给Fetch请求。在中断请求时，我们可以使用AbortController对象的abort()方法。
2023-10-16 16:20:48
1029
原创 css3自动吸附scroll-snap
我们希望可以一块一块的滚动，比如当前一个块滚出去了一部分并且后一个块滚进来一部分的时候，实现后一个块自动滚入或者前一个块回弹到初始位置这种效果，以前的时候用js需要写比较复杂的判断逻辑，后来有了一个css。scroll-snap-type指明了一个可以滚动的容器是否是scroll snap container , snap地是否严格() , 在哪个轴上实现snap效果。1、scroll-snap-type（吸附模式：添加到父元素中）snap这个方法，可以比较方便的实现想要的效果了，基本够用。
2023-10-16 15:32:58
1829
原创 Vue路由守卫有哪些，怎么设置，有哪些使用场景？
Vue 路由守卫是在 Vue Router 中提供的一种功能，它允许您在导航到某个路由前、路由变化时或导航离开某个路由时执行代码。
2023-10-14 18:26:54
481
原创 html资源提示符
正常dom解析 中遇到script标签 ，会暂停主线程 去下载js，拿到资源后，主线程再执行js。那么主线程在等待网络线程下载这个空闲很浪费解决方案： script标签增加属性 async defer。
2023-10-14 18:16:03
714
原创 浏览器渲染只之---回流、重绘
当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为回流。当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程就是。对于如何优化动画，我们知道，一般情况下，动画需要频繁的操作DOM，就就会导致页面的性能问题，我们可以将动画的。局部范围：对渲染树的某部分或者一个渲染对象进行重新布局。，将动画脱离文档流，这样他的回流就不会影响到页面了。全局范围：从根节点开始，对整个渲染树进行重新布局。回流比重绘的代价要更高。
2023-10-14 18:09:51
309
原创 前端面试宝典
第二章 HTML5面试题1.H5的新特性有哪些画布(Canvas) API 地理(Geolocation) API 音频、视频API(audio,video) localStorage和sessionStorage webworker和 websocket header,nav,footer,aside,article,section web worker是运行在浏览器后台的js程序，他不影响主程序的运行，是另开的一个js线程，可以用 这个线程执行复杂的数据操作，然后把操作结果通过po
2023-10-14 17:51:12
229
原创 Vue封装组件并发布到npm仓库
想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到，创建对应的公有组织（私有的要收费）到这里为止，我们的组件封建基本就完成了，当然组件封装成什么样得看自己得业务需求了，接下来我们就需要将组件进行打包了。这一步是封装组件中的重点，用到了Vue提供的一个公开方法：install。打包执行完成后我们项目目录下就会多出一个lib文件夹，存放的是打包后的文件。时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。
2023-10-14 17:09:45
1066
原创 git之分支代码合并
此处如果有冲突会给出提示哪个文件有冲突，修改冲突文件后再继续下面的步骤。5. 将master上合并的文件add和commit到自己的分支。推荐vs code插件：GitLens — Git supercharged，冲突不知如何解决时，可查看代码由谁提交。4. 合并master到自己的分支dev上。2. 将master更新的代码拉取到本地。6. 将自己分支dev上的代码提交到远程。7.查看合并后的状态（红色的代表有冲突）1. 切换到master主分支上。3. 再切换到自己的分支dev上。
2023-10-08 14:35:53
753
原创 vue 项目打包性能分析插件 webpack-bundle-analyzer
找到 package.json 在 build 后面加 --report。new BundleAnalyzerPlugin 参数配置说明。
2023-10-07 16:19:49
4261
原创 JavaScript实现跨标签页通信
是 H5 引入的 API，该方法允许来自不同源的脚本采用异步方式进行有效的通信，可以实现跨文本文档、多窗口、跨域消息传递，多用于窗口间数据通信，这也使它成为跨域通信的一种有效的解决方案。结合 window.addEventListener('storage', cb) 完成 A、B 标签页间通信。它允许同一来源的不同文档（在不同窗口、选项卡、框架或 iframe 中）之间进行通信。表示一个命名频道，给定。
2023-10-07 09:15:42
650
原创 前端每日小计
跨平台：虚拟DOM只有一份，不同平台（PC、小程序、APP）有不同的真实DOM，可以对比。进入项目根目录运行depcheck，查看Missing dependecies。添加git config core.ignorecase false配置。1，提升效率，不一定，大量静态的页面，虚拟DOM反问慢。框架设计：数据劫持，方便对比，准确定位变更区域。项目package.json中依赖确实，可用。
2023-09-12 09:22:17
645
原创 node-sass 安装失败解决办法
很多小伙伴在安装node-sass的时候都失败了，主要的原因是node版本和项目依赖的node-sass版本不匹配。node-sass依赖node版本，而sass则不需要。解决方案：卸载node-sass，安装sass，项目全局搜索/deep/, 把/deep/替换为::v-deep即可。
2023-07-02 21:07:21
6124
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人