- 博客(99)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 接口调不通的情况
最近，在做一个项目，对接evolink的api, 发现在他们线上的测试接口是OK的，但是在我本地进行调试时候一直提示 read econnreset。当你访问 https://dam.lkcoffee.com/ 时，被安全防护系统（可能是WAF、防火墙或安全网关）拦截了。基于我目前情况很明显是ip地址被限制了，让加下白名单就好了。IP地址被限制 - 你的公网IP可能被加入了黑名单。公司网络策略 - 如果你在公司网络，可能有内部限制。别怕，应该是你的ip地址被拦截了。通过curl 来测试就知道了。
2025-12-25 20:49:18
22
原创 解析百度分享链接，到自己服务器上
本文介绍了百度网盘文件转存到服务器的完整流程及关键技术点。核心内容包括：1）百度网盘转存的必要性（链接不稳定、权限控制、异步处理）；2）文件处理策略（大文件（≥1GB）先下载到服务器再分片上传，小文件直接流式传输）；3）失败处理机制（分片级重试、文件级重试、MD5校验）；4）相关数据库表设计（任务表、文件记录表）；5）分片上传和断点续传原理（将大文件分块处理，支持中断后继续传输）。系统采用多层容错机制确保数据传输的可靠性和完整性，同时通过企业账号管理实现稳定高效的批量文件处理。
2025-12-19 19:40:18
912
原创 SSO单点登录
文章摘要： 本文通过机场安检的类比，生动解释了SSO单点登录的工作原理。传统登录方式如同每个机场需要单独办理通行证，而SSO则类似使用身份证在所有机场通行。文章详细拆解了基于钉钉的SSO登录流程：1)用户点击登录按钮；2)系统生成认证URL；3)用户通过钉钉验证身份；4)获取临时code；5)系统用code换取token；6)获取用户信息；7)匹配或创建本地账号。整个过程采用"任务卡"、"取款码"等生活化比喻，配合代码片段说明关键环节，帮助读者理解复杂的认证流程。
2025-12-15 13:46:53
666
原创 企微网盘不支持通过分享的链接进行文件下载
链接：https://drive.weixin.qq.com/s?链接：https://drive.weixin.qq.com/s?官方API文档：https://developer.work.weixin.qq.com/document/path/95850。证实：向企业微信官方客服求证，能否解析企业微盘分享出来的链接，从而实现文件上传到服务器的功能。据上所述：企微微盘文件内容是不支持通过分享链接，解析出文件下载到服务器上的功能。1、分享链接访问分析：当访问分享链接时，解析浏览器发送的请求。
2025-12-12 17:12:50
696
原创 运营活动系统中很常见的问题
事务隔离不当：数据库隔离级别过低，导致脏读、不可重复读、幻读等并发问题。缺乏原子性：多步骤操作没有事务保护，部分成功部分失败导致数据不一致。组合使用：既保证数据正确性，又提供极致性能，支撑大规模并发场景。分布式锁：解决并发操作的原子性问题，防止重复投票和数据不一致。问题场景2：不可重复读 (READ COMMITTED)问题场景3：幻读 (REPEATABLE READ)问题场景2：并发操作导致的状态不一致。问题场景3：外部服务调用的原子性问题。解决方案2：使用乐观锁处理并发。使用乐观锁或悲观锁处理并发。
2025-10-27 11:28:00
364
原创 为何 React JSX 循环需要使用 key
旧 key=1 (‘Build a project’) vs 新 key=1 (‘Learn React’) -> 内容变了，更新文本，输入框实例被复用（现在它显示之前输入的 “test”！原本有一个列表[‘A’,‘B’,‘C’,‘D’],现在需要再原来的基础上在开头新增一个元素 变为 [‘E’,‘A’,‘B’,‘C’,‘D’]旧 key=0 (‘Learn React’) vs 新 key=0 (‘New Item’) -> 内容变了，更新文本，但输入框实例被复用。它们的 key 分别是 0 和 1。
2025-09-03 16:59:28
929
原创 React 类生命周期 和 React Hooks 比对
当我们使用各种框架开发程序时，当这个框架启动、程序刚运行时、各个页面之间的交互、数据渲染到页面上面、程序运行结束，应当会有个闭环的操作，而在这个环的起点和终点之间的各个节点，框架给给定一些特定函数供我们自行调用，方便我们执行一些操作，这便是生命周期。更新阶段：什么时候会执行更新阶段这一系列的钩子函数呢，那自然是我们在更新了state值的时候或者是接收到父组件props值的时。初始化阶段：也成组件挂载阶段，这个阶段会执行初次加载组件到第一次渲染到界面上的一系列钩子函数，用于初始化状态和绑定方法。
2025-08-28 16:04:36
604
原创 JSX本质是什么
作用：将JSX转化为React.createElement调用。1、创建虚拟DOM树：React根据组件创建完整的虚拟DOM树。这是一个普通的JavaScript对象，描述DOM的真实样式。1、render阶段：计算虚拟DOM差异（可中断，无副作用）创建节点：document.createElement()总结：React 的生命周期/Effect 执行顺序设计。添加子节点：parent.appendChild()更新节点：精细的 DOM 操作而非整体替换。2、副作用执行的正确时机。
2025-08-18 16:33:42
749
原创 useEffect 和 useLayoutEffect 执行时机
想知道useEffect 和 useLayoutEffect 执行时机，首先必须了解React 组件更新生命周期。因为同步执行会损害性能，所以react团队会建议默认使用useEffect，除非是需要同步任务执行。主要判断自己的副作用是否会导致布局的变化，如果是则用useLayout，否则用useEffect。浏览器绘制是什么：浏览器绘制是计算好的DOM结构和样式实际渲染到浏览器屏幕上的这个过程。使用 useLayoutEffect 的场景。会看到闪烁的例子，但使用了useEffect。
2025-08-15 16:06:04
478
原创 React.memo、useMemo 和 React.PureComponent的区别
React 性能优化工具对比：useMemo 与 React.memo useMemo 和 React.memo 是 React 中两种不同的性能优化工具，主要区别如下： 功能定位 useMemo：缓存计算结果（Hooks） React.memo：缓存组件渲染结果（高阶组件） 使用场景 useMemo：适用于组件内部复杂计算优化 React.memo：适用于避免子组件不必要重渲染 工作方式 useMemo：依赖项变化时重新计算 React.memo：props变化时重新渲染 优化粒度 useMemo：细粒度
2025-08-14 16:33:04
887
原创 React常见的Hooks
React Hooks 是 React 16.8 引入的特性，允许你在函数组件中使用状态和其他 React 特性。useCallback 会返回一个记忆化(memoized)的回调函数，只有当依赖项发生变化时才会重新创建函数。useMemo 是 React 提供的一个性能优化 Hook，用于缓存计算结果，避免在每次渲染时都进行高开销的计算。效果：当父组件状态更新时，Child 组件不会重新渲染，因为 onClick 的引用保持不变。1、避免子组件不必要的重新渲染。2、避免子组件不必要的渲染。
2025-08-13 16:40:33
753
原创 深入理解闭包，闭包又是什么
闭包是JavaScript中函数能够记住并访问其词法作用域的特性，即使函数在其词法作用域外执行。关键特征包括：函数嵌套、内部函数访问外部变量、外部函数变量在函数执行后仍可被访问。闭包使函数能"记住"定义时的作用域，并实时访问变量最新值，这在React Hooks和事件处理中尤为重要。典型例子包括计数器实现和延迟回调函数访问外部变量。理解闭包有助于避免内存泄漏等问题。
2025-08-12 17:11:09
424
原创 React中的Hook到底是个什么鬼
React Hooks是React 16.8引入的核心功能增强机制，使函数组件具备状态管理和生命周期等类组件特性。其核心设计包括：通过useState管理组件状态，useEffect处理副作用，以及基于调用顺序的稳定状态关联机制。Hooks采用闭包和链表结构实现，要求必须稳定调用顺序（不能条件或循环调用），以保证状态正确关联。相比类组件，Hooks提供了更简洁的代码组织和逻辑复用方式，如自定义Hook。典型应用包括状态管理、副作用处理、性能优化（useMemo/useCallback）等。Hooks的设计简
2025-08-12 16:42:10
1175
原创 React18 Transition特性详解
React的Transition机制通过区分任务优先级（紧急/非紧急）来优化用户体验，使界面在高负载场景下保持响应。核心功能包括：1）标记非紧急更新为可中断任务；2）自动处理并发任务优先级；3）与Suspense协同实现流畅加载。典型应用场景包括搜索输入、标签切换和大数据渲染。Vue3的Suspense采用插槽设计，支持任意异步逻辑和事件监听，与React的Suspense在API设计和处理范围上存在差异。两种框架都通过异步更新机制有效解决了界面卡顿问题。
2025-08-11 15:54:07
1171
原创 js中的设计模式
单例模式和工厂模式是前端开发中常用的设计模式。单例模式确保一个类只有一个实例，常用于全局状态管理（如Vuex/Pinia、Redux）和单例组件（如弹窗）。工厂模式则将对象创建和使用分离，通过工厂函数动态生成组件或高阶组件，提高代码复用性和可维护性。在Vue中可用于创建动态组件和插件，在React中则用于生成不同类型的按钮或封装带Loading功能的组件。这两种模式都能有效简化复杂对象的创建过程，实现逻辑复用。
2025-08-07 16:41:51
892
原创 js中的 slice、splice、split、substring、substr
这两个都是截取字符串长度的 第一个参数均表示开始截取的位置 第二个参数含义不一样。splice第二个参数是负数，表示要删除的项为空 返回一个空数组。splice第一个参数是负数，表示从倒数位置开始计算删除的位置。substring表示要截取到位置的索引，不包含最后的位置。slice第一个参数是负数，表示从倒数位置开始计算截取位置。slice第二个参数是负数，表示不截取 返回是一个空数组。substr第一个参数是负数，表示从倒数位置开始计算截取。splice第三个参数是负数，表示要插入的元素就是负数。
2025-08-06 14:20:56
468
原创 走进computed，了解computed的前世今生
在vue中 同步派生状态指的是基于现有响应式数据立即计算得出的新状态，这种计算是同步完成的，具有即时性和准确性，这是computed计算属性的核心设计理念。vue中的computed采用缓存机制主要是为了优化性能和保证一致性：当计算属性依赖性没有变化时，vue会直接返回上一次的计算结果，而不会重新计算。2、标记-清除机制：“脏”（dirty）状态标记：当依赖性发生变化时，标记属性为“dirty”. 下次访问时候再重新计算。2、响应式系统的设计基础：vue的响应式依赖追踪依赖同步访问。3、依赖收集的精准性。
2025-07-31 16:53:00
815
原创 如何理解js中的副作用
副作用这个词，听起来是模糊的，不可控制的，如果在I/O之间发生了一些我们不能控制、不可预估的事情，那么这个过程就会变的很复杂，测试过程也很复杂，整个程序就会一发不可控制，这样就违背了我们程序的原则。老话说的好，是药三分毒，吃了药最怕就是有副作用，假设我们感冒了，吃感冒药好了，但是发现自己秃了，这个秃顶了就是副作用。函数中的副作用：函数或者表达式在执行过程中对外部环境产生的可观察的变化，而不仅仅是一个返回值，简单来说，任何于外部环境产生交互的操作都可以被称之为副作用。于是就有了纯函数：没有任何副作用。
2025-07-29 16:58:58
736
原创 css 如何实现大屏4个占位 中屏2个 小屏幕1个
本文介绍了四种响应式布局的实现方法：1) Grid布局通过grid-template-columns定义不同断点下的列数；2) Flex布局使用flex-wrap和flex属性实现自适应；3) Grid结合CSS变量(--columns)简化代码；4) 多列布局(column-count)实现文本分栏显示。每种方法都通过媒体查询(@media)实现从移动端到超大屏幕的适配，包括单列(768px以下)、双列(768-992px)、三列(992-1200px)、四列(1200-1920px)和六列(1920px
2025-07-16 16:43:57
295
原创 orphans/widows/break-inside/hyphens
hyphens: 控制文本的连字符断字行为，特别适用于窄列布局或两端对齐文本。场景案例: 假设我们要打印一篇文章, 文章中包含很多段落.希望避免一下情况。无控制：前4行在第一栏，最后1行在第二栏顶部（形成orphan）break-inside: 控制元素内部是否允许分页或分栏断开。无控制：可能只有1-2行移动到下一栏（形成widow）有控制：足够行数保留在当前栏，或整个段落移动。有控制：整个5行段落移动到第二栏。
2025-07-16 16:10:25
279
原创 防抖与节流
1、窗口的调整：用户频繁调整窗口时候，会触发resize事件,防抖可以确保在调整结束后执行相关操作。防抖和节流都是优化高频触发事件的技术手段, 我们可以控制函数执行的效率,避免不必要的性能消耗。1、页面滚定：用户滚动会触发scroll事件，使用节流可以限制事件函数执行的频率。2、输入框联想：用户输入后，会触发keyup事件, 接口请求时在输入结束后。2、操作鼠标事件：鼠标mouseup、mousedown等事件。3、表单验证：用户在输入完成后，再进行表单验证。
2025-07-15 16:20:48
340
原创 第一次搭建数据库
本文详细介绍了MySQL数据库的安装配置全过程：(1)检查并卸载旧版本MySQL；(2)从官网下载安装包进行安装，包括选择版本、设置安装路径、配置基本参数；(3)设置root账户密码；(4)配置环境变量；(5)修改时区设置；(6)验证安装并创建新数据库。随后讲解了Node项目中如何连接MySQL数据库：安装mysql模块、配置数据库连接、编写查询接口。特别提示了MySQL 8与Navicat的兼容性问题，建议使用mysql2模块替代。全文包含具体操作步骤和关键配置截图，为首次搭建MySQL环境提供了完整指导
2025-07-10 17:09:46
1515
原创 双击重复请求的方法
3、在axios中请求中进行拦截 比如相同的地址 相同的参数 可以直接取消请求 在axios中CancelToken 可以取消重复请求。页面上使用v-preventReClick即可 但是要考虑定时器的问题。2、vue中 可以自定义一个属性指令。
2025-05-23 14:12:03
367
原创 常见攻击方式及防范措施
本文将介绍常见的前端安全攻击方式，并提供相应的防范措施。攻击方式：攻击者将目标网页放置在透明的iframe中，并在上面覆盖伪装成目标网页的恶意页面，用户看似在点击无害的页面，实际在点击恶意页面。2、使用 CSP（内容安全策略）：CSP 可以指定页面允许加载的资源来源，限制脚本的执行，从而减少 XSS 攻击的可能性。场景：你在柜台签收快递，但黑客在签字板上覆盖了一层透明的玻璃，你以为签收的是快递，实际是其他的操作。攻击方式：网页上的按钮被透明的iframe覆盖，你以为签收的是快递，实际是贷款合同。
2025-04-14 16:37:44
484
原创 Web Worker
Web Worker的作用，就是为了Javascript创造多线程环境，允许在主线程的进程上创建Web Worker进程，允许在主线程的基础上，将一些任务分给后者运行，在主线程运行的同时，Web Worker线程也可以单独运行，两个互不干扰，等到Web Worker线程运行完了之后，再将结果反馈给主线程，这样最大的好处就是分担了主线程的压力，使主线程运行的更加的流程。上面代码中，Worker 线程内部新建了10个 Worker 线程，并且依次向这10个 Worker 发送消息，告知了计算的起点和终点。
2025-04-10 16:33:18
623
原创 账户互通-单点登录
用户第一次登录会收到认证中心的两个 token，假设用户过了一段时间去登录子系统，原 token 过期了，子系统告诉这个 token 失效，此时用户会将 刷新 token 发给认证中心去验证，认证中心会返回一个新的 token 给到用户，用户再去访问子系统就可以正常访问了。当用户访问某一个子系统时候，会带上token，子系统是会自己进行认证的，具体认证方式也有很多，比如和认证中心交互密钥，子系统拿到密钥之后可以自行认证用户的token是否是认证中心颁发的，一旦认证成功就可以正常登录。
2025-03-24 11:29:14
516
原创 如何让你的历史提交变成一天干净的时间线
1、在使用git rebase 前需要保证服务区是干净的，如果服务区有变更的文件，变基是不会成功的，可以提交文件或者暂存文件是服务区保持干净。往往在我们自己开发时候，别人可能先把功能开发完了就push到远程了，所以我们任务开发完成以后，往往需要先pull下再推到远程。比如说我们在开发需求的时候，别人提交了代码，此时你再提交时候，需要先拉取别人的代码再能提交自己的代码。我们都知道git pull是从远程拉取分支的，估计很少人知道，在拉取分支的时候，还进行了合并操作。这样我们的分支看起来就会特别的凌乱。
2025-02-13 15:31:48
349
转载 减少样式计算的范围和复杂度
JavaScript通常用来改变页面的视觉效果。比如通过改变style样式或者通过计算后改变页面布局，比如搜索或排序数据。长时间运行的JavaScript可能是导致性能问题的常见原因，应该尽可能地减少它的影响。
2024-12-20 15:50:48
66
原创 压缩图片相关
为此，只要在需要文件内容的地方提供对象 URL 即可。有个折衷的方案，我们可以设置一个阈值，如果 png 图片的质量小于这个值，就还是压缩输出 png 格式，这样最差的输出结果不至于质量太大，在此基础上，如果压缩后图片大小 “不减反增”，我们就兜底处理输出源图片给用户。为了避免压缩图片变形，一般采用等比缩放，首先要计算出原始图片宽高比 aspectRatio，用户设置的高乘以 aspectRatio，得出等比缩放后的宽，若比用户设置宽的小，则用户设置的高为为基准缩放，否则以宽为基准缩放。
2024-12-12 09:39:11
936
原创 前端灰度发布
但是这里存在一个问题，每一个页面都需要去获取灰度规则，然后判断是否灰度，这个灰度请求将阻塞页面的，可能会造成较差的用户体验，所以我们可以考虑使用客户端的localStrage来存储这个用户是否为灰度用户，而不是每次请求资源时都发请求去判断是否为灰度用户，然后定期的更新localStrage内存储的值，取代大量的请求造成的体验问题。上面的代码中，有A，B两个版本的界面，用户请求的资源在返回之前先通过getRule获取灰度规则，确定了是否在白名单里，然后决定返回那一套模板内容。
2024-12-11 10:55:06
1128
原创 好用又有技巧的Javascript方法
) 操作符的功能类似于( . )链式操作符，不同之处在于，在引用为空(null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。当我意识到逗号(,)是一个独立的操作符时，我感到很惊讶，而且从来没有注意到它的存在。逻辑运算符（ || ）：对于一组操作数的逻辑或（||，逻辑析取）运算符，当且仅当其一个或多个操作数为真，其运算结果为真。||= 空赋值运算符 ：逻辑空赋值运算符 (x ||= y) 仅在 x条件为假的时候对其进行赋值，与或的供能差不多。
2024-11-22 16:10:46
414
原创 一行代码实现字符串模版替换
我们在实际项目开发中，经常会遇到字符串模版替换的问题，在最开始的时候，我们使用“+”号进行拼接替换的，但实际项目中的情况比这更加复杂，可能有很多变量需要拼接替换，如果都使用+号的话，不仅仅替换起来比较困难，还很容易出错，出错后，定位问题也比较困难，后续的维护更是困难重重，即便后面有了ES6模版字符串，但针对复杂的字符串模版替换依然满足不了需求，比如，在搜索文章中，我们需要根据关键字找到对应的文章，并且筛选出文章后，在文章中筛选的关键字进行标红处理。方法五：使用正则表达式中的非贪婪模式来实现。
2024-11-21 16:21:25
251
原创 更简单快捷的处理URL参数
例如这里url.protocol的返回值是’https:’，ftp.protocol的返回值是’ftp:‘。URL构造函数中传入的地址必须是绝对地址，非绝对地址就会报错，如果第一个参数是相对地址，那么后面的base必须有是觉得地址，若第一个是觉得地址，第二个可不传参。host：URL地址中host主机地址，包括协议端口号，这里url.host的返回值是’www.zhangxinxu.com:80’。ftp协议中比较常见。例如这里url.port的返回值是’80’，ftp.port的返回值是’‘。
2024-11-15 16:35:55
1846
原创 覆盖CSS样式，抛弃important吧
在定义修改样式的时候，我们经常需要修改样式去满足UI不同的样式，在绝大部分情况下，当我们使用后面的样式覆盖前面的样式不生效的时候，就会简单粗暴的使用important来提高它的绝对地位，不允许修改。但在实际开发中，比如我们引用了第三方库的样式，此时如果要对样式进行修改，以上方法提高样式优先级都不太可行。所以往往我们在覆盖样式时候，除了加id class等样式名以提高样式等级之外，在权重等级相同的时候，只能使用先后顺序来覆盖样式。我之前写的样式呢，谁把我的样式覆盖了，无语。
2024-11-14 16:37:41
615
原创 通俗易懂的正则表达式
正则表达式的英文是regular expression简称regex。正则表达式就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，并让计算机用这个规则去检索符合规则的文本。创建正则表达式1、利用RegExp new RegExp(‘expression’)2、双反斜杠 / expression /属性解释：1、g 匹配全局2、 i 忽略大小写元字符：元字符是正则表达式中的特殊字符，用于定义某种特定的匹配模式。
2024-11-12 15:16:39
1446
原创 JavaScript void 运算符
void是一个一元运算符，接受单个操作数，可以是任何类型，返回一个 undefined。void 在表达式的左边，void 右边的表达式可以是带括号形式（例如：void(0)），也可以是不带括号的形式（例如：void 0）。在一些箭头函数中，若此函数没有对应的返回值，可能会造成一些不可预估的问题，安全起见，对没有返回的函数，可以在前面加上void。在使用立即执行的函数表达式时，可以使用void运算符让js引擎吧一个function关键字识别成函数表达式而不是函数声明。立即调用的函数表达式。
2024-11-07 15:54:13
527
原创 link与@import区别
1、本质区别: link属于html标签,link不仅能加载CSS文件，还能定义RSS、rel连接属性等。5、操作dom: link 支持使用javascript改变样式 （document.styleSheets），后者不可。2、加载顺序：页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。3、兼容性：mport只在IE5以上才能识别，而link是HTML标签，无兼容问题。4、权重：link方式的样式的权重 高于@import的权重。
2024-11-07 13:55:21
530
原创 你对Blob和File对象了解多少
File是JS中代表文件的数据格式，它继承自Blob对象，包含文件的元数据（像文件名。4、stream() 该方法将 Blob 的数据作为一个 ReadableStream 返回，允许你以流的方式处理数据，适合处理大文件。Blob和Flie在文件上传和二进制的数据处理的场景中使用非常的广泛，Blob应用范围更加的广泛，File更专注于文件系统的交互。Flie是Blob的子类，除了用于Blob的所有属性和方法外，还拥有文件的元数据。Blob是纯粹的二进制数据，可以储存任何类型的数据，但不具有文件的元数据。
2024-11-06 16:32:05
625
原创 前端页面是如何渲染的
假设dom解析完成时候，遇到js，js中的代码又是对当前dom进行大量的操作，这样就会造成页面严重的重排和重绘，严重影响性能。布局和绘制：在render树上来运行布局来计算每个节点的几何体，在Render树上会展示有那些节点和样式，但不包括每个节点的尺寸和位置信息，布局就是用来确认所有节点的宽度、高度、坐标等位置信息。在实际项目开发中，无论是vue还是react开发，js占比是远远重于html和css的，处理的时间也会更长，所以会造成页面的卡顿阻塞，在js下载执行完之前，用户什么也看不到。
2024-11-05 16:38:52
1316
原创 数组对象常用方法合集
end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。还可以接受第二个参数，用来对每个元素进行处理，将处理后的值放入返回的数组。通过扩展运算符实现的是浅拷贝，修改了引用指向的值，会同步反映到新数组。将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。如果为负值，表示倒数。参数的逆运算，将一个数组转为用逗号分隔的参数序列。将两类对象转为真正的数组：类似数组的对象和可遍历。
2024-11-04 15:02:34
193
动画--太阳系行星公转
2022-04-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人