- 博客(665)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 前端性能平台选型
本文分析了主流前端性能监控工具的优缺点及应用场景。Grafana、Kibana、PowerBI等可视化平台各有特色，Grafana扩展性强但配置复杂，Kibana与Elasticsearch深度集成但处理关系型数据较弱。Lighthouse、NewRelic等采集工具中，Lighthouse免费易用但测试环境单一，NewRelic功能全面但成本较高。针对不同规模项目，推荐了三种技术方案：小型项目可采用Prometheus+Grafana低成本方案；中型项目建议Flink+InfluxDB+ClickHous
2025-09-04 09:04:45
731
原创 https 协议与 wss 协议有什么不同
HTTPS与WSS的核心区别在于应用场景和通信模式：HTTPS是安全的单向请求-响应协议，用于网页数据传输；WSS是安全的双向全双工协议，支持实时通信。HTTPS适用于网页加载、表单提交等传统场景，而WSS专为聊天、直播等实时交互设计。二者虽然都使用TLS加密层，但底层协议不同，HTTPS基于HTTP，WSS基于WebSocket。关键区别在于WSS允许服务器主动推送数据，实现真正的实时通信，而HTTP轮询只能模拟实时效果。两者是互补关系而非替代关系，根据具体需求选择使用。
2025-09-03 14:34:36
744
原创 ESLint 中与 Prettier 规则 与 editorconfig优先级
ESLint、Prettier和EditorConfig在格式化规则上存在优先级差异：Prettier强制格式化优先级最高，会覆盖其他配置；ESLint通过eslint-config-prettier应禁用与Prettier冲突的格式规则；EditorConfig仅作为编辑器基础配置。最佳实践是保持三者核心规则（如缩进、换行符）一致，明确分工：Prettier主导格式化，ESLint专注代码质量检查，EditorConfig提供编辑器基础约定。
2025-09-03 14:06:53
295
原创 滚动菜单定位到对应的位置
该代码实现了一个带有导航菜单的页面布局，用户点击菜单项时页面会平滑滚动到对应的内容区域。导航菜单固定在页面左侧，包含多个项目，每个项目对应一个内容区域。当用户滚动页面时，当前可见的内容区域对应的菜单项会高亮显示。代码使用了Vue.js框架，通过v-for指令动态生成菜单和内容区域，并通过scrollTo方法实现平滑滚动。样式部分使用SCSS编写，确保导航菜单的视觉效果和交互体验。整体设计简洁，功能清晰，适用于需要分块展示内容的场景。
2025-05-12 19:58:58
222
原创 vue 中监听页面尺寸变化就调用函数
事件来监听窗口大小变化，但这种方式在 Vue 项目中有一些局限性，因为如果在多个地方都这样使用，后赋值的会覆盖前面的，容易导致一些不可预期的问题。事件监听器的问题，并且更符合现代 JavaScript 开发习惯，在 Vue 项目中也是更常用的方式。虽然可以直接使用原生的。
2024-11-14 14:38:12
772
原创 判断一个值收否在maxAmount 与min之间，并返回该条数据
数组的定义，这个值应该匹配第二个对象{ maxAmount: 99999999, min: 10000000 }输入一个值判断如果该值在maxAmount 与min之间，在返回该条数据。如果输入的值不匹配任何规则，控制台则会输出“没有找到匹配的规则”。如果找到了这样的对象，函数就会返回它；函数来查找匹配的规则。根据line_kedu_rules。在这个实现中，findMatchingRule。函数会遍历line_kedu_rules。在示例使用中，我们输入了一个值。且小于等于maxAmount。
2024-10-24 16:23:41
408
原创 将 el-date-picker获取的时间数据转换成时间戳
在Vue.js中使用Element UI的组件时，你可以获取用户选择的日期并将其转换为时间戳。通常返回的是一个Date对象或一个格式化后的字符串（取决于你如何配置它）。下面是一个示例，展示了如何将获取的时间数据转换为时间戳。首先，确保你已经安装了Element UI并在Vue项目中进行了引入。
2024-10-24 16:17:21
1532
原创 判断PDF与图片是否可以预览
在JavaScript中，可以使用Image对象来判断一个图片URL是否可以访问。如果图片可以被加载，那么load事件会被触发；如果图片无法访问，error事件会被触发。在这个例子中，checkImageAccessibility函数接收一个图片URL和一个回调函数。Image对象的src属性被设置为这个URL，然后监听load和error事件。当图片加载成功或失败时，相应的处理函数会被调用，并且回调函数会被执行，传递一个布尔值表示图片是否可以访问。
2024-09-09 15:41:13
527
原创 图片和PDF展示预览、并支持下载
第三步：编写FilePreview实现图片和PDF预览组件。展示图片和PDF类型，并且点击图片或者PDF可以预览。第二步：编写downloadcard组件。第一步：遍历所有的图片和PDF列表。
2024-06-05 11:56:10
631
原创 Element UI上传图片和PDF，支持预览，并支持复制黏贴上传
这里主要需要再header中设置 'Content-Type': 'multipart/form-data' 还有依赖的Token等字段内容。如上图，使用Element UI的el-upload组件，并且预览的时候可以展示图片和PDF格式文件；再次基础上，我们对上面代码进行改造，添加监听past事件。发现图片已经上传到组件中了。
2024-06-05 11:00:05
1443
原创 Element UI上传图片和PDF，支持预览
如上图，使用Element UI的el-upload组件，并且预览的时候可以展示图片和PDF格式文件；
2024-06-05 10:33:06
2520
1原创 前端工程化，前端监控，工作流，部署，性能
创建项目的时候，配置下ESlintstylelintprettiercommitlint等;ESLint 是一个静态代码检查工具，用于在 JavaScript 代码中识别和报告模式。它的目标是提供一个插件化的 JavaScript 代码质量工具。在前端开发过程中，ESLint 能够帮助开发者发现代码中的错误、不符合规范的地方，从而提高代码质量。.eslintrcStylelint 是一个强大的、现代化的 CSS/SCSS/Less 检查工具，可以帮助开发者遵循一致的代码风格和最佳实践。
2024-05-11 15:46:40
825
原创 如何利用AI提高内容生产效率?
在业务开发中会遇到各种个样的问题，怎么才能快速的提高开发效率是每一个人将要面对的；那在现今的AI时代，如何可以使用AI提高内容生成效率这个就是我们现在要讨论的话题；AI在内容生成方面已经展现出了巨大的潜力，可以帮助我们显著提高内容生产的效率。以下是一些具体的方法：AI文章生成器：基于用户输入的关键词或主题，AI文章生成器可以快速生成符合要求的文章。这些生成器通常基于大量的语料库进行训练，能够模仿人类写作风格，生成通顺、连贯的文章。
2024-05-11 11:55:16
653
原创 element UI 设置type=“textarea“ 禁止输入框缩放
时，默认情况下，用户可以通过拖动输入框的右下角来调整其大小。如果您想禁止这种缩放行为，您需要使用 CSS 来覆盖默认的浏览器行为。时，默认情况下，用户可以通过拖动输入框的右下角来调整其大小。如果您想禁止这种缩放行为，需要使用 CSS 来覆盖默认的浏览器行为。：如果您在单文件组件中使用 Vue，并希望仅在该组件中应用此样式，可以使用 scoped CSS。确保这个 CSS 规则在 Element UI 的样式之后加载，以确保它可以正确地覆盖默认样式。注意上图，第一张是可以缩放的，第二章不能缩放的。
2024-04-10 19:54:30
2810
原创 制作一个评价卡片
这里定义一个MOCK数组对象，改变数据对象的值，可以使用一个新数据更新数据，然后在赋值给原来的数据。这里主要是因为VUE在对象类型赋值的时候，无法响应更新底层的数据；
2024-04-10 14:48:30
383
原创 使用VS Code Counter统计代码量
项目需要统计每个文件有多少行，有多少行注释，多少行空白；1、在应用中心搜索 VS Code Counter 安装。3、输入Counter。选择对应项目开始计算。
2024-03-21 11:39:47
2153
原创 MAC iterm 显示git分支名
要在Mac上的iTerm中显示Git分支名，您需要使用一个名为“Oh My Zsh”的插件。Oh My Zsh是一个流行的Zsh框架，它提供了许多有用的功能和插件，包括在终端中显示Git分支名。4、更新iTerm设置：打开iTerm的设置，并确保在“Text”选项卡下选择了“Use system font”选项。2、启用Oh My Zsh插件：在Oh My Zsh插件列表中找到“git”插件，并将其启用。现在，您应该能够在iTerm终端中看到当前活跃的Git分支名。如果您尚未安装这些工具，请先进行安装。
2024-01-15 16:57:57
1858
原创 mac下配置git自定义快捷命令
编辑文件 vim .zshrc 按i进入编辑模式，加入 source ~/.bash_profile 后，esc，再输入 :wq 保存退出。在 ~/.bash_profile 中配置环境变量, 可是每次重启终端后配置的不生效。需要重新执行 : source ~/.bash_profile后，才会生效。1、自己是在bash中配置的环境变量，而当前系统使用的是shell。最后输入命令 source ~/.zshrc 刷新刚刚的配置。输出是/bin/zsh，说明使用的是zsh。终端输入：echo $SHELL。
2024-01-15 14:07:43
1487
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人