- 博客(289)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 【vscode源码】如何编译运行vscode及过程中问题解决
在成功编译并运行VSCode后，开发者可以根据自己的需求对VSCode进行二次开发或自定义修改。修改主题：你可以根据需要修改VSCode的界面主题、字体或颜色等样式。添加插件：你可以开发自己的VSCode插件，并将其集成到你的本地版本中。调试功能：如果你需要调试某些功能，可以通过VSCode自带的调试工具进行调试。本文详细介绍了如何编译和运行VSCode源码的步骤，并总结了在过程中可能遇到的常见问题以及解决方法。希望通过这些内容，能够帮助开发者更顺利地进行VSCode源码的编译和二次开发。
2025-02-07 12:08:19
540
原创 实现酷炫粒子背景效果
本文详细介绍了如何使用 particles.vue3 实现动态粒子背景效果，包含安装步骤、配置参数详解以及常见问题的解决方法
2025-01-22 11:19:40
884
2
原创 如何在 Three.js 地球飞线中间生成卡片
数学公式：利用lon2xyz()将经纬度转换到三维坐标，再结合简单的求出中点，最后归一化到球面半径，从而得到“球面中点”。使用 Sprite 做卡片html2canvas 把 DOM 转成截图；Sprite；设置。可选的交互可以一直显示卡片，也可以悬停时显示；如果要做更多复杂的交互，可以配合事件库或手动管理Raycaster。上述就是在球面飞线中点生成卡片的思路与完整步骤。新手可以直接复制示例代码并替换自己的数据和文本，就能快速跑出一个带有三维地球飞线与卡片标注的场景。
2024-12-27 18:00:10
674
6
原创 【Three.js】实现天空盒效果
天空盒（Skybox）是 3D 场景中常见的技术，用于模拟环境的背景，如天空、星空、城市、山脉等。它能增强场景的沉浸感，同时对性能友好。天空盒通常是一个虚拟的无穷远盒子。如果需要一个近距离观察的效果，可以创建一个立方体网格作为天空盒。
2024-11-18 19:41:48
1447
2
原创 如何使用 SM4 加密算法保护敏感数据并实现数据解密
在前端开发中，保护用户的敏感信息尤为重要，特别是在处理用户的认证、交易等敏感操作时。在日常开发中，我们常使用 HTTPS 保证传输的安全性，但对于部分数据还需进一步加密，确保在传输过程中的安全。本文将详细介绍如何在前端项目中使用 SM4 加密算法保护敏感数据，并结合 Axios 实现数据在传输中的加密与解密。SM4 是中国国家密码管理局设计的一种对称加密算法。作为国密算法之一，它具有较高的安全性，主要用于保障敏感数据的传输安全。对称加密：即加密和解密使用相同的密钥，密钥需要在通信双方之间安全地共享。
2024-10-25 16:55:30
1337
2
原创 如何在 Three.js 中实现护罩之间的飞线效果
在这篇博客中，我们详细介绍了如何在Three.js中实现护罩与护罩之间的飞线效果。创建护罩：通过随机位置生成护罩，并确保它们不会重叠。生成飞线：使用贝塞尔曲线和自定义着色器，创建动态飞线效果。动画控制：通过动画循环更新uTime，让飞线看起来更加流畅炫酷。
2024-10-18 16:55:31
1072
2
原创 如何在 Three.js 场景中创建可点击展开的标签
在这篇文章中，我们展示了如何使用 Three.js 的为 3D 场景中的对象添加 2D 标签，并实现点击显示或隐藏详细信息的交互效果。这个功能可以应用于各种 3D 数据可视化场景中，为用户提供直观的交互体验。ps:最近的项目使用three.js的地方很多，且拓展了很多功能，我会将一个个的功能点拆分出来。因为之前查找相关博客发现很多都是整个一起的，对于只想要其中一部分而言会增加很多不必要的时间成本，所以我会将功能点拆解出来。想了解更多关于three.js的文章可以看我的three专栏。
2024-09-27 16:40:15
1055
2
原创 封装一个 Vue 3 流程线可视化组件
动态渲染：根据传入的数据，组件可以自动生成节点和箭头。风险等级样式：不同的节点根据风险等级（1-3）呈现不同的视觉效果。炫酷的动画效果：节点和箭头自带动画效果，适合用于大屏可视化项目。灵活的数据传递：通过组件的props传递数据，支持动态更新。接下来，我将带你一步步实现这个组件，并展示如何在项目中使用。通过将这个流程线组件封装成一个独立的 Vue 3 组件，你可以在不同项目中轻松复用它，并根据需求动态更新显示的数据。组件不仅支持动态渲染，还具备动画效果和风险等级区分，特别适合用于大屏数据可视化展示。
2024-09-11 15:04:06
1036
5
原创 【Three.js】控制生成多个护罩(防御罩、金钟罩、护盾)及标签效果
本次实现我们依然依赖 Three.js。位置生成与检测：生成多个护罩的位置，并确保它们之间保持一定的距离，不会重叠。Three.js 场景管理：在场景中添加多个护罩，并保持其动画效果。通过以上步骤，我们成功生成了多个不重叠的护罩，并为每个护罩添加了动态效果。护罩之间保持一定的距离，并且在生成时防止重叠。你可以通过修改护罩的颜色、位置和动画参数来调整效果。在接下来的博客中，我们将探讨如何进一步增强这些护罩的视觉效果，比如添加更多炫酷的飞线特效或是让护罩在受到攻击时产生更具冲击力的视觉反馈。
2024-09-10 14:14:34
1030
2
原创 【Three.js】实现护罩(防御罩、金钟罩、护盾)效果
在这篇博客中，我们将使用 Three.js 从零开始生成一个护罩效果。护罩将使用自定义的 Shader 材质，带有动画效果，最终呈现一个视觉上酷炫的护罩。此篇文章的重点将放在如何生成一个3D护罩，其它功能将在之后的博客中讨论,后续会有很多酷炫的效果~。Three.js: 一个强大的 3D 图形库，简化了 WebGL 的使用。Shader: 我们将用到 GLSL（OpenGL 着色语言）编写自定义着色器，为护罩增添独特的效果，比如渐变、透明度和动态变化。
2024-09-07 15:31:35
1047
2
原创 【可视化】封装滚动菜单列表组件
滚动菜单列表组件是一个适用于大屏可视化项目的自定义组件。它支持自定义表格头部、多种数据格式、自动滚动显示数据，并具有高度的灵活性和可配置性。无论是单列数据还是多列数据，都可以通过简单配置快速展示，并且支持自定义样式以匹配不同的视觉风格。
2024-08-20 08:30:00
725
4
原创 如何发布自己的NPM包详细步骤
在前端开发中，将自己编写的 Vue 组件或插件打包并发布到 NPM 上，不仅可以方便自己在其他项目中复用，还能分享给更多的开发者使用。本文将从 NPM 注册、登录与发布流程，及如何通过 Vue CLI 打包插件的角度详细介绍如何发布 Vue 插件。通过以上步骤，你可以成功将 Vue 组件打包并发布到 NPM 上。本文详细介绍了从 NPM 注册、登录、发布，到通过 Vue CLI 配置和打包插件的完整流程。希望通过这篇文章，你能够更好地理解 Vue 插件的发布流程，并能够在实际项目中灵活应用。
2024-08-19 15:27:16
2582
2
原创 系统大小写及Git大小写规则造成的问题
文件名的大小写敏感性是一个常常被忽略但却至关重要的问题，特别是在跨平台开发中。通过理解不同文件系统的行为，规范文件命名，使用工具检测问题，以及合理配置 Git，我们可以有效避免因大小写问题导致的代码错误。
2024-08-01 17:45:32
1164
7
原创 iframe 和父窗口之间的通信——postMessage
是一种允许来自不同源的窗口安全地进行通信的方法。使用此 API，可以指定消息的接收者和发送的数据，确保仅预期的接收者可以接收和处理这些数据。data：要发送的数据。：定义哪些窗口能接收消息的 URI（如果设置为 “*”，则任何窗口都可以接收消息，但这种做法不安全）。
2024-07-31 17:57:41
1245
2
原创 前端打包部署后源码安全问题总结
前端安全是开发现代Web应用时必须考虑的重要方面。通过实施上述策略，可以有效地减少源码泄露的风险，保护敏感数据和用户隐私。这些措施需要开发团队的持续努力和对安全实践的坚持。希望本文能帮助你提升应用的安全性，为用户提供一个安全可靠的在线体验。
2024-07-16 23:03:58
1599
2
原创 前端实现对本地文件的IO操作
在网页中，前端已经可以读取本地文件系统，对本地的文件进行IO读写，甚至可以制作一个简单的VScode编辑器。这篇文章以渐进式方式实现此功能，文末附上所有代码
2024-06-19 18:25:20
1104
6
原创 实时监听 localStorage 变化的实现方法
设置并触发自定义事件监听自定义事件});alert(id);// 手动触发自定义事件groupID。
2024-06-18 18:32:10
1491
4
原创 less-loader的less转成CSS的底层原理
创建或修改文件，配置webpack使用我们自定义的output: {},module: {rules: [use: ['style-loader', // 将 CSS 插入到 DOM 中'css-loader', // 解析 CSSpath.resolve(__dirname, 'less-loader.js'), // 使用自定义 less-loader],},],},通过详细解析。
2024-06-17 14:24:04
1096
2
原创 加载大量图片优化方案
图片压缩通过减少图片文件的大小来提高加载速度。通过压缩图片，页面加载所需的带宽减少，从而提高了加载速度。这样可以显著减少初始页面加载时间，因为只加载当前视口内的图片。通过结合以上优化技术，你可以显著提高图片加载的性能，提供更好的用户体验。使用现代格式可以进一步减少图片文件大小，提高加载速度。用户请求图片时，会从距离最近的服务器获取，从而提高加载速度，并减少服务器的负担。瀑布流布局将图片分布在不同的列中，随着用户滚动页面，逐步加载新的图片。预加载关键图片可以确保这些图片在页面加载时立即可用，提升用户体验。
2024-05-30 21:00:00
1936
3
原创 docker-compose教程（安装，使用, 快速入门）
由于容器本身是无状态、临时的，当容器被删除时，所有保存在容器文件系统中的数据也会丢失。卷是独立于容器的，可以挂载到容器内部的特定路径，这样即使容器停止或删除，卷中的数据也仍然存在。容器是一种轻量级、可执行的独立软件包，它将软件运行所需的代码、运行时、系统工具、库和设置打包在一起。容器与虚拟机类似，但更加轻量，因为它们不需要额外运行一个完整的操作系统，而是直接在宿主的操作系统上运行，共享内核。当不再需要运行服务时，可以使用以下命令停止所有服务并移除容器，同时保留数据卷和网络配置，以便下次可以快速启动。
2024-05-14 12:45:00
6745
8
原创 Docker安装、使用及常用命令
Docker是一种开源的容器化技术，允许开发者将应用及其运行环境打包在一个轻量级、可移植的容器中。Docker使用Dockerfile来自动化构建容器环境，使用Docker镜像来实现应用的快速部署和复制。Docker是一个功能强大的容器管理工具，它提供了一系列的命令来帮助开发者管理容器的生命周期。要在您的系统上运行Docker容器，首先必须确保已经安装了Docker。这些命令构成了Docker的基础，能够帮助用户进行日常的容器管理和操作。Docker容器的部署迅速且容易扩展，支持自动化的伸缩。
2024-05-13 21:21:31
1125
5
原创 【2024中高级向】22道前端面试题附答案
多端开发的核心原理涉及代码的复用、适配不同平台的界面和功能、以及确保在所有目标设备上提供良好的用户体验。的主要用途是作为对象的属性键，这些属性是唯一的，可以防止属性名的冲突。Webpack plugin 可以在打包流程的不同阶段接入，执行更复杂的任务。是 ES6 引入的一个功能强大的特性，允许你定义一个对象的各种操作的自定义行为（如属性查找、赋值、枚举等）。在多端项目中，持续集成（CI）和持续部署（CD）可以帮助自动化测试和发布过程，确保在所有支持的平台上都能及时更新应用，并保持应用的质量和稳定性。
2024-04-24 23:50:29
2708
14
原创 React中子传父的方式及原理
应用大小和复杂度：小型应用可能只需useState或useReducer，而大型应用可能更适合使用Redux或MobX。团队熟悉度：选择团队成员熟悉的技术可以加快开发速度和降低学习成本。特定需求：如需要时间旅行调试、中间件或特殊的响应式需求等。
2024-04-16 12:06:31
2267
6
原创 富文本编辑器的下载安装使用
在众多的富文本编辑器中，因其易用性、灵活性以及对Vue框架友好的特性而受到开发者的青睐。它基于Quill编辑器，Quill是一款现代的WYSIWYG（所见即所得）编辑器，具有跨浏览器兼容性和可扩展性。而富文本编辑器的数据格式一般是HTML：控制台打印类似以下：安装。可以通过npm或yarn完成：在项目中配置安装完成后，你需要在Vue项目中配置。有两种方式可以做到这一点：全局配置或局部配置。在或文件中，引入并注册作为全局组件：局部配置：在单个Vue组件中，你可以如下配置：创建一个基本的富文本
2024-04-09 18:02:23
675
6
原创 如何实现无感刷新(附前后端实现)？
登录时，我们验证用户凭证，并且如果认证成功，我们就生成Access Token和Refresh Token，然后将Refresh Token保存到数据库。在无感刷新流程中，我们验证提供的Refresh Token是否存在于数据库中，并且是否有效，然后发放新的Access Token。如果Refresh Token仍然有效，认证服务器则发放一个新的Access Token给客户端，并且可能会同时发放一个新的Refresh Token。在前端实现中，我们需要确保存储Token的方法是安全的。
2024-04-08 16:58:14
1854
4
原创 什么是性能优化？如何性能优化？
在一个复杂的申请表格页面，DCL是表单结构准备就绪的时刻，用户准备开始填写。：用户正在阅读一个精彩的文章，如果文中的图片或广告突然加载并导致内容跳动，这就产生了布局偏移。：优化服务器响应时间，使用CDN，确保CSS和JavaScript尽可能快地加载，以便用户能够迅速看到第一帧画面。：优化图像大小和格式，对关键的CSS进行内联处理，以及推迟非关键JavaScript的加载，都可以加快FCP。：优化JavaScript执行，分割代码以按需加载，利用浏览器的预加载能力，并减少主线程上的工作量。
2024-04-07 18:06:03
1557
2
原创 【2024最新】vue3的基本使用(超详细)
Vue 3是下一代前端框架，用最新技术提升网站速度和开发体验。它引入组合式API，让代码更灵活、易于管理。同时，优化的响应式系统和更好的TypeScript整合，确保了应用运行更流畅，开发更高效。通过创新特性如`Teleport`和`Suspense`，Vue 3让用户界面更快加载、更动态，无论项目大小，都能轻松应对。简单说，Vue 3让前端开发更前沿、更有趣。
2024-04-02 17:59:26
17258
10
原创 Vue2如何监听数组的变化？（附相关面试题）
众所周知，vue2的响应式无法监听数组，那么它是怎么实现数组响应式的？为什么不能直接修改数组的length？为什么不能通过arr[0] = 123的方式修改数组？
2024-03-20 12:23:23
4407
2
原创 如何将本地开发完成后的数据库文件迁移到服务器中
将本地开发完成后的数据库文件迁移到服务器中的数据库是一个常见的操作，尤其是在项目部署阶段。这个过程大致可以分为导出（备份）本地数据库、传输文件到服务器、以及导入数据库到服务器数据库中三个步骤。这里我将以 MySQL 和 MongoDB 为例来说明这个过程
2024-03-13 17:41:40
1194
11
原创 centos7服务器环境配置详细教程（nginx、node、MongoDB、MySQL）
CentOS 7（以及大多数Linux发行版）遵循文件系统层次标准（FHS），这意味着文件和目录遵循特定的结构和命名规范。
2024-03-12 18:07:42
1470
2
原创 基于Node.js 和 FFmpeg构建自动化脚本用来转码视频
可以自动监控目录并转码视频的Node.js脚本（可一键复制代码，粘贴即用）。这个脚本可以根据你的特定需求进一步定制和扩展，例如添加更多的转码选项、处理更多视频格式、或者在转码完成后发送通知等。这只是展示了FFmpeg和Node.js在视频处理自动化方面强大功能的冰山一角
2024-03-11 13:09:37
1774
9
原创 FFmpeg教程（干货快速上手）
FFmpeg是一款免费、开源的跨平台多媒体处理工具，它支持几乎所有的视频格式和编码标准。FFmpeg包含了一系列的子项目和工具，如ffmpeg命令行工具用于转码和处理视频和音频文件，ffplay用于播放多媒体内容，而ffprobe则用于分析多媒体流的信息。
2024-03-08 22:16:23
5526
7
原创 【性能优化】前端实际项目中的缓存应用
本篇博客从浏览器缓存、CDN缓存，到服务端缓存，再到实际工作场景。我们将一一解析这些技术背后的原理，希望你能从中获得启发。
2024-03-07 22:34:55
1765
4
原创 【2024】nvm的简介、安装、使用
NVM，即Node Version Manager，是一个命令行工具，允许用户在同一台计算机上安装和管理多个Node.js版本。通过NVM，开发者可以轻松切换项目所需的Node.js版本，极大地提高了开发效率和环境的灵活性。
2024-03-04 22:21:40
1807
7
原创 Vue3 Hooks函数使用及封装思想
在Vue 3中，Hooks函数不是Vue官方专门定义的一个API，而是社区中根据React Hooks的概念借鉴而来的一种编程模式。简单来说，Hooks函数是一种利用Vue 3的Composition API来封装和复用逻辑的方法。
2024-02-28 23:06:19
1919
4
原创 【2024】TCP、UDP和 HTTP 的区别是？
本文深入探讨了HTTP和TCP协议的基本概念、工作原理及它们在网络通信中的关键作用。通过比较，我们明确了TCP作为传输层协议，提供可靠的、面向连接的数据传输服务，而HTTP则作为应用层协议，专门用于Web浏览器和服务器之间的通信。
2024-02-26 23:01:02
2981
10
原创 Nuxt.js核心知识详解
1.Nuxt.js 服务器端的完整渲染（SSR）流程2.在 Nuxt.js 中使用 `asyncData` 和 `fetch` 方法进行数据获取与在普通 Vue 应用中直接使用 Axios 进行数据请求的区别3.如果我不使用asyncData发起请求，而是使用正常的axios发请求就没有服务端的渲染效果了，也就和普通的vue项目一样了4.示例：使用 `asyncData` 方法，将涉及从前端发起请求到服务器端获取数据，最后在页面上渲染数据的完整步骤…
2024-01-18 20:16:09
1438
4
node.js+express框架+通用的express框架模版+适合做二次开发
2024-01-15
node+vue全栈入门项目 百分百可运行
2022-03-22
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人