- 博客(104)
- 收藏
- 关注
RSS订阅原创 反向代理正向代理透明代理
从帮谁干活来看正向代理帮的是用户 解决用户没法直接访问目标服务器的问题反向代理帮的是服务器解决服务器压力不安全的问题透明代理帮的是网络管理者比如学校公司运营商 悄悄做过滤加速从用户知不知道来看正向代理你得主动配置肯定知道反向代理你只跟他打交道但不知道他是代理还是目标服务器透明代理你完全没感觉不知道它存在从隐藏身份来看正向代理隐藏用户的身份服务器不知道是你反向代理隐藏服务器的身份你不知道连的是哪台服务器透明代理啥身份都不隐藏只是默默干活。
2025-12-19 16:58:56
494
原创 Docker是什么？
Docker是干啥的？封装运行环境让程序到处都能跑为什么要用Docker？解决跨系统跨环境跨服务器的运行问题有什么优势？快轻稳定不挑环境。
2025-12-19 16:52:18
365
原创 HTTP 缓存机制详解：强缓存和协商缓存
HTTP 缓存是浏览器和服务器之间的一种机制，用于减少网络请求，提高页面加载速度，降低服务器压力。强缓存是指浏览器在缓存有效期内，直接从本地缓存读取资源，不会向服务器发送任何请求。协商缓存是指浏览器向服务器发送请求，服务器判断资源是否更新，如果未更新，返回 304 状态码，浏览器使用本地缓存。特性强缓存协商缓存网络请求❌ 无请求✅ 有请求（但响应体可能为空）响应速度⚡ 最快（0ms）🚀 快（需要网络往返）服务器压力✅ 无压力⚠️ 有压力（需要验证）数据新鲜度❌ 可能过期✅ 总是最新带宽消耗。
2025-11-05 14:40:44
981
原创 Vue 2 中 watch 监听数据的局限性和缺点
性能问题：深度监听会带来性能开销监听限制：无法监听数组索引、对象属性添加删除等灵活性不足：无法同时监听多个源、动态路径等资源管理：需要手动清理，容易造成内存泄漏调试困难：多个 watch 同时触发时难以追踪。
2025-11-05 11:45:35
709
原创 auto-tracking自动埋点插件
是一个 Vue 插件，用于自动为页面上的所有按钮添加埋点标识，无需手动在每个按钮上添加v-tracking指令或属性。
2025-11-03 16:18:18
830
原创 项目创建为私有Gitee仓库的完整步骤
HTTPS协议：https://gitee.com/yang_hai_long0000/yhlwebsite。访问官方仓库：https://gitee.com/y_project/RuoYi。注意URL大小写不一致：“YHLwebsite” vs “yhlwebsite”远程仓库可能不存在 master 分支（Gitee新仓库默认分支为 main）SSH协议：git@gitee.com/YHLwebsite.git。登录Gitee → 点击右上角「+」→「新建仓库」
2025-10-02 14:29:40
624
1
原创 前后端分离项目部署指南
第一步：准备阿里云服务器环境1.1 在阿里云服务器上安装必要软件1.2 配置防火墙第二步：数据库配置2.1 配置MySQL数据库2.2 导入数据库脚本第三步：构建后端项目3.1 在本地构建后端项目3.2 更新配置文件在部署前，我们需要更新配置文件以适配服务器环境：4.1 构建前端项目第五步：部署到服务器5.2 上传文件到服务器5.3 创建后端启动脚本5.4 启动后端服务第六步：配置Nginx6.1 配置Nginx6.2 测试并重启Nginx第七步：测试部署。
2025-09-29 10:49:09
738
原创 微前端 + Docker + Kubernetes 运作机制
想象一下，微前端就像是一个大房子，里面有很多小房间（微应用）。Docker就是把这些房间打包成独立的盒子，Kubernetes就是管理这些盒子的管家。
2025-08-12 15:52:12
701
原创 微前端基础概念
A: 微前端是一种架构风格，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品。Q: 微前端开发中常见的问题有哪些？Q: 什么是微前端？它的核心思想是什么？Q: 如何解决微前端应用之间的样式冲突？Q: 微前端有哪些主要的架构模式？Q: 微前端有哪些主要的实现技术？Q: 微前端开发有哪些最佳实践？Q: 微前端应用之间如何通信？Q: 微前端应用如何优化性能？Q: 微前端应用如何部署？Q: 如何测试微前端应用？
2025-08-12 15:16:35
647
原创 ＜form＞ + ＜iframe＞ 方式下载大文件的机制
使用 方式下载大文件的机制之所以稳定，核心在于其分块传输和浏览器沙箱隔离设计。以下是技术原理详解：分块传输协议iframe作为独立进程运行，崩溃不会影响主页面。下载过程由浏览器网络层直接管理，绕过JavaScript内存限制。**文件流处理**方案 内存占用 崩溃风险 超时控制 适用场景AJAX+Blob 需完整加载文件 高 依赖前端超时设置 <500MB文件表单+iframe 仅缓存当
2025-08-06 16:57:05
482
原创 axios封装对比
现axios封装Axios封装分析报告请求拦截器功能完善下载进度支持问题：没有统一的错误处理没有统一的成功响应格式处理没有网络错误、超时等特殊情况的处理2. 请求函数设计不合理问题：使用Promise包装axios，但只处理resolve，不处理reject错误处理不完整可能导致Promise永远pending3. 参数编码逻辑有缺陷问题：可能导致双重URL编码数组处理不完整没有处理null值3. 改进建议${
2025-07-31 18:54:29
609
原创 vue-i18n 优化
这些优化建议可以根据项目的实际需求选择性实施。建议按照优先级逐步实施，先解决最关键的问题，如性能优化和错误处理，然后再考虑其他优化点。
2025-05-12 09:32:41
830
原创 Promise并行期约
永远不拒绝返回的期约，而是会等所有输入期约全部落定后兑现，这个返回的期约解决为一个对象数组，其中每个对象都对应一个期约，且都有一个status属性，值为fulfilled或rejected。实际上比刚才描述的稍微更灵活一些，其输入数组可以包含期约对象和非期约值，如果这个数组的某个元素不是期约，那么它就会被当成一个已兑现期约的值，被原封不动地复制到输出数组中.接收一个期约对象的数组作为输入，返回一个期约，如果输入期约中的任意一个拒绝，返回的期约也将拒绝，否则，返回的期约会以每个输入期约兑现值的数组兑现.
2025-03-24 15:19:23
257
原创 JavaScript中的call方法相关知识点
thisArg 参数的选择：.call() 中的 thisArg 参数是可选的。方法用于调用函数，并接受一个参数列表，第一个参数指定函数内部的 this 指向，后续参数作为函数的参数传入。函数方法绑定：ES6 中的箭头函数可以在定义时绑定 this，避免了 .call() 或 .apply() 的使用需求。不同于 .apply()：.apply() 与 .call() 类似，区别在于参数传递方式不同。接受一个参数数组作为第二个参数，而 .call() 则接受一个参数列表。将函数作为目标对象的临时属性。
2025-02-23 18:37:28
349
原创 Vue3插槽 Slots
具名作用域插槽的工作方式也是类似的，插槽 props 可以作为 v-slot 指令的值被访问到：v-slot:name=“slotProps”。将这个概念拓展一下，可以想象的是，一些组件可能只包括了逻辑而不需要自己渲染内容，视图输出通过作用域插槽全权交给了消费者组件。插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域，这和 JavaScript 的词法作用域规则是一致的。实际上，这已经和作用域插槽的最终代码编译结果、以及手动编写渲染函数时使用作用域插槽的方式非常类似了。
2025-02-14 10:42:01
1157
原创 Vue3计算属性
想象一下我们有一个非常耗性能的计算属性 list，需要循环一个巨大的数组并做许多计算逻辑，并且可能也有其他计算属性依赖于 list。更重要的是，如果在模板中需要不止一次这样的计算，我们可不想将这样的代码在模板里重复好多遍。计算属性默认是只读的。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。
2025-02-10 14:22:01
577
原创 Vue3响应式基础
当你在模板中使用了一个 ref，然后改变了这个 ref 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。不同的是，Vue 能够拦截对响应式对象所有属性的访问和修改，以便进行依赖追踪和触发更新。是，与普通变量不同，你可以将 ref 传递给函数，同时保留对最新值和响应式连接的访问。只有代理对象是响应式的，更改原始对象不会触发更新。因此，使用 Vue 的响应式系统的最佳实践是仅使用你声明对象的代理版本。
2025-02-10 11:38:23
1017
原创 JavaScript面向对象
在编程的世界中，有一种思想是非常重要的，那就是——面向对象思想。掌握了这种思想，意味着你不再是一个编程菜鸟，已经开始朝着开发者的目标迈进。那么，到底什么是面向对象思想？说到这个可以给大家说说这个东西的由来。以前的编程，都是面向过程的。那么什么又是面向过程呢？以前在网上看到一个说法，觉得形容得很好，借用一下。大体如下：如果现在有个人叫你把大象放到冰箱里，我们使用面向过程如何做呢？我们可以分成以下几个步骤：把冰箱门打开。把大象放到冰箱里面。把冰箱门关上。然后我们依次调用这几个函数就行了。
2025-02-08 14:07:30
926
原创 网络-navigator.sendBeacon
总之，navigator.sendBeacon 是一个方便的浏览器 API，用于在页面卸载或关闭时发送异步请求，适用于发送统计数据、日志记录、表单提交等场景。
2025-02-07 09:31:09
1044
原创 前端数据上报方法方式
我们可以使用 sendBeacon 发送数据，这一方法既能保证数据可靠性，也不影响用户体验，如果浏览器不支持该方法，则可以降级使用同步的 ajax 发送数据。
2025-02-07 09:23:24
806
转载 JS中Boolean 的妙用
Boolean 作为 JavaScript 的一个内置构造函数，可以作为一个简单的类型转换工具，在ts中，借助Boolean可以将某个值转换为布尔类型，从而避免一些类型报错。其实，filter(Boolean)生效的原因非常简单，因为Boolean本身就是js中的一个构造函数，我们可以将它理解为下面的伪代码。在JavaScript中，所有的值都可以被隐式转换为布尔值，在这种转换中，值会被分类为“真值”或“假值”。显示转换是指通过明确的代码，主动江一中数据类型转换为另一种类型，这种方式通常是直观的，可控的。
2025-02-05 17:07:49
499
原创 如何禁止别人调试前端页面代码？
需要强调的是，尽管可以采取上述措施来增加调试的难度，但完全禁止别人调试前端页面代码是不可能的。禁止别人调试前端页面代码是一个相对复杂且不完全可靠的任务，因为前端代码最终需要在用户的浏览器中执行，而用户拥有对浏览器的完全控制权。在前端开发中，虽然无法彻底防止别人调试和查看前端页面的代码，但确实有一些方法可以增加调试的难度，提高安全性，虽然CSP不是直接用来防止调试的，但它可以增加页面的安全性，使调试者更难进行恶意操作。这可以增加调试的难度，因为调试者需要在代码执行时捕获这些动态注入的代码。
2025-01-15 15:51:52
573
原创 如何在浏览器中执行100万个任务，并保证页面不卡顿？
浏览器的JavaScript运行时基于时间循环机制，在每一个事件循环中，浏览器会处理任务队列中的任务，如果某个任务执行时间过长，就会阻塞后续的任务，导致页面卡顿，将大量任务拆分为多个批次，并使用setTimeout或requestAnimationFrame，我们可以在每一帧刷新间隔中分布任务，避免长时间的单一任务阻塞。如果任务非常密集且计算量大，考虑使用Web Workers，这是一中更强大的解决方案，它允许我们在浏览器的后台线程中运行JavaScript，从而避免阻塞主线程，保证页面的流畅相应。
2025-01-13 15:45:15
594
原创 this的指向问题
在JavaScript和Vue.js的上下文中，this的指向是由函数的调用方式决定的。理解this的指向对于编写正确的Vue组件和JavaScript代码至关重要。
2024-12-27 17:49:23
426
原创 git revert
是 Git 中的一个命令，用于创建一个，该提交会撤销（或“反转”）之前某个特定提交所做的更改。这个命令非常有用，因为它允许你在不改变项目历史的情况下，撤销某个提交的更改效果。git revert之后。
2024-12-27 16:52:06
1117
原创 void 0与undefined的区别
总结来说，虽然 void 0 和 undefined 在大多数情况下可以互换使用，但在需要明确返回 undefined 或避免潜在变量名冲突的情况下，使用 void 0 是更好的选择。在 JavaScript 中，void 0 和 undefined 都可以用来表示一个未定义的值，但它们在语法和语义上有细微的差别。表达式：void 0 是一个表达式，void 运算符会忽略其操作数并返回 undefined。类型：typeof void 0 也返回 “undefined”。
2024-12-23 16:21:25
568
原创 git stash 的文件如何找回
不过，这个方法相对复杂且不一定总是有效。如果你想要找回并应用某个stash的内容到当前工作目录，可以使用git stash apply命令，并指定stash的标识符。如果你想要在应用stash的同时删除它，可以使用git stash pop命令。如果你想查看某个特定stash的详细内容，可以使用git stash show命令，并指定stash的标识符（例如stash@{0}）。如果你确定已经成功找回了stash的内容，并且不再需要这个stash记录，可以使用git stash drop命令来删除它。
2024-12-19 17:22:23
2618
原创 nodemon禁止执行解决方法
你遇到的错误是因为 Windows PowerShell 的执行策略配置为禁止执行未签名的脚本。这是为了安全起见，防止恶意脚本的运行。通过修改执行策略，你应该能够解决当前遇到的问题。然而，始终要注意执行来自不可信来源的脚本时的安全风险。在开始菜单中搜索“PowerShell”，然后右键点击“Windows PowerShell”，选择“以管理员身份运行”。这将显示当前的执行策略，可能是 Restricted，这是阻止脚本运行的原因。请注意，这将再次阻止未签名的脚本运行。
2024-11-25 14:43:52
316
原创 echarts大量数据性能优化处理
这种方法能够很好展示部分区间的数据，但是缺点也很明显，很难看到全局的数据，而且要重复的请求和监听，这对于大屏来说无疑不太合适。这会确保所有的数据都有相同的被选择为样本的机会。折线图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率，默认关闭，也就是全部绘制不过滤数据点。数据过滤：数据中存在一些无关的信息或数据噪音，服务端对数据进行过滤，只需要保留有用的数据即可，剔除无效的数据。数据聚合：对于特别密集的数据点，使用聚合算法在源头对数据降采样，进行数据聚合，减少渲染的数据点数量。
2024-11-18 11:32:01
4601
原创 Git主干分支master开发优缺点
通常开发团队的成员1天至少一次地将代码提交到主干分支，在到达发布条件时，从主干拉出发布分支通常为（release），用于发布，若发现缺陷，直接在主干上修复，并根据需要cherry pick到对应版本的发布分支，然而，需要注意的是，主干分支开发也要求团队成员具备较高的责任感和自律性，以确保代码的质量和稳定性。：如果项目中大部分工作都是直接在主干上进行，且功能分支较少，那么使用主干分支开发是合理的。：在需要快速迭代和频繁发布的情况下，主干分支开发能够减少分支管理带来的开销，使得新功能能够更快地集成到产品中。
2024-11-16 14:39:30
763
原创 Vue2父子通讯
Vue 会在内部为 pageSize prop 添加一个更新监听器，当子组件更新这个 prop 的值时（通过触发一个形如 this.$emit(‘update:propName’, newValue) 的事件），父组件中的 pageSize 数据属性也会被更新为新的值。当子组件触发 update:pageSize 事件并传递一个新的值时，父组件中通过 .sync 修饰符绑定的 pageSize 数据属性会被更新为这个新的值。这样，父组件中的 pageSize 就会反映子组件中所做的更改。
2024-11-14 14:49:19
386
原创 JS类型检测
这种高阶函数的设计方式使得你可以轻松地创建其他类型的检测函数，例如。等，只需调用 isType 并传入相应的类型名称即可。特定类型检测函数 isBoolean。
2024-11-06 14:19:32
377
原创 HTML基础知识点
HTML语义化是指根据内容的结构和含义（内容语义化），选择合适的HTML标签（代码语义化），以更好地表达内容的意义和层次。通俗来讲，就是用正确的标签做正确的事情。语义化的优点SEO友好：语义化的标签让搜索引擎更容易理解网页内容，有利于搜索引擎优化提高可访问性：列如屏幕阅读器，可以通过语义化标签更好地理解和朗读网页内容，帮助视障用户浏览网页。内容组织：语义化标签有助于搜索引擎爬虫和其他自动化工具更好地抓取和索引页面内容，甚至生成目录。
2024-11-06 10:49:43
676
原创 sourceTree使用脚本一键push代码到gerrit
在gerrit,我们无法直接把代码push到对应的分支。需要把代码push到 HEAD:refs/for/branch,review通过后再submit到分支。所以无法直接使用sourceTree上的推送按钮来push代码。但是可以通过自定义操作和脚本来实现这一功能。需要说明的是参数那一栏选择上面编写好的脚本，一般放在项目根目录下。直接点击提交代码就可以把代码push上去了。配置sourceTree。保存后修改后缀名为sh。
2024-09-21 14:39:57
695
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人