- 博客(275)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 前端打包部署后源码安全问题总结
前端安全是开发现代Web应用时必须考虑的重要方面。通过实施上述策略，可以有效地减少源码泄露的风险，保护敏感数据和用户隐私。这些措施需要开发团队的持续努力和对安全实践的坚持。希望本文能帮助你提升应用的安全性，为用户提供一个安全可靠的在线体验。
2024-07-16 23:03:58
864
2
原创 前端实现对本地文件的IO操作
在网页中，前端已经可以读取本地文件系统，对本地的文件进行IO读写，甚至可以制作一个简单的VScode编辑器。这篇文章以渐进式方式实现此功能，文末附上所有代码
2024-06-19 18:25:20
586
6
原创 实时监听 localStorage 变化的实现方法
设置并触发自定义事件监听自定义事件});alert(id);// 手动触发自定义事件groupID。
2024-06-18 18:32:10
492
3
原创 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
737
2
原创 加载大量图片优化方案
图片压缩通过减少图片文件的大小来提高加载速度。通过压缩图片，页面加载所需的带宽减少，从而提高了加载速度。这样可以显著减少初始页面加载时间，因为只加载当前视口内的图片。通过结合以上优化技术，你可以显著提高图片加载的性能，提供更好的用户体验。使用现代格式可以进一步减少图片文件大小，提高加载速度。用户请求图片时，会从距离最近的服务器获取，从而提高加载速度，并减少服务器的负担。瀑布流布局将图片分布在不同的列中，随着用户滚动页面，逐步加载新的图片。预加载关键图片可以确保这些图片在页面加载时立即可用，提升用户体验。
2024-05-30 21:00:00
1558
3
原创 docker-compose教程（安装，使用, 快速入门）
由于容器本身是无状态、临时的，当容器被删除时，所有保存在容器文件系统中的数据也会丢失。卷是独立于容器的，可以挂载到容器内部的特定路径，这样即使容器停止或删除，卷中的数据也仍然存在。容器是一种轻量级、可执行的独立软件包，它将软件运行所需的代码、运行时、系统工具、库和设置打包在一起。容器与虚拟机类似，但更加轻量，因为它们不需要额外运行一个完整的操作系统，而是直接在宿主的操作系统上运行，共享内核。当不再需要运行服务时，可以使用以下命令停止所有服务并移除容器，同时保留数据卷和网络配置，以便下次可以快速启动。
2024-05-14 12:45:00
1892
8
原创 Docker安装、使用及常用命令
Docker是一种开源的容器化技术，允许开发者将应用及其运行环境打包在一个轻量级、可移植的容器中。Docker使用Dockerfile来自动化构建容器环境，使用Docker镜像来实现应用的快速部署和复制。Docker是一个功能强大的容器管理工具，它提供了一系列的命令来帮助开发者管理容器的生命周期。要在您的系统上运行Docker容器，首先必须确保已经安装了Docker。这些命令构成了Docker的基础，能够帮助用户进行日常的容器管理和操作。Docker容器的部署迅速且容易扩展，支持自动化的伸缩。
2024-05-13 21:21:31
852
5
原创 【2024中高级向】22道前端面试题附答案
多端开发的核心原理涉及代码的复用、适配不同平台的界面和功能、以及确保在所有目标设备上提供良好的用户体验。的主要用途是作为对象的属性键，这些属性是唯一的，可以防止属性名的冲突。Webpack plugin 可以在打包流程的不同阶段接入，执行更复杂的任务。是 ES6 引入的一个功能强大的特性，允许你定义一个对象的各种操作的自定义行为（如属性查找、赋值、枚举等）。在多端项目中，持续集成（CI）和持续部署（CD）可以帮助自动化测试和发布过程，确保在所有支持的平台上都能及时更新应用，并保持应用的质量和稳定性。
2024-04-24 23:50:29
1664
14
原创 React中子传父的方式及原理
应用大小和复杂度：小型应用可能只需useState或useReducer，而大型应用可能更适合使用Redux或MobX。团队熟悉度：选择团队成员熟悉的技术可以加快开发速度和降低学习成本。特定需求：如需要时间旅行调试、中间件或特殊的响应式需求等。
2024-04-16 12:06:31
1646
6
原创 富文本编辑器的下载安装使用
在众多的富文本编辑器中，因其易用性、灵活性以及对Vue框架友好的特性而受到开发者的青睐。它基于Quill编辑器，Quill是一款现代的WYSIWYG（所见即所得）编辑器，具有跨浏览器兼容性和可扩展性。而富文本编辑器的数据格式一般是HTML：控制台打印类似以下：安装。可以通过npm或yarn完成：在项目中配置安装完成后，你需要在Vue项目中配置。有两种方式可以做到这一点：全局配置或局部配置。在或文件中，引入并注册作为全局组件：局部配置：在单个Vue组件中，你可以如下配置：创建一个基本的富文本
2024-04-09 18:02:23
471
6
原创 如何实现无感刷新(附前后端实现)？
登录时，我们验证用户凭证，并且如果认证成功，我们就生成Access Token和Refresh Token，然后将Refresh Token保存到数据库。在无感刷新流程中，我们验证提供的Refresh Token是否存在于数据库中，并且是否有效，然后发放新的Access Token。如果Refresh Token仍然有效，认证服务器则发放一个新的Access Token给客户端，并且可能会同时发放一个新的Refresh Token。在前端实现中，我们需要确保存储Token的方法是安全的。
2024-04-08 16:58:14
1444
4
原创 什么是性能优化？如何性能优化？
在一个复杂的申请表格页面，DCL是表单结构准备就绪的时刻，用户准备开始填写。：用户正在阅读一个精彩的文章，如果文中的图片或广告突然加载并导致内容跳动，这就产生了布局偏移。：优化服务器响应时间，使用CDN，确保CSS和JavaScript尽可能快地加载，以便用户能够迅速看到第一帧画面。：优化图像大小和格式，对关键的CSS进行内联处理，以及推迟非关键JavaScript的加载，都可以加快FCP。：优化JavaScript执行，分割代码以按需加载，利用浏览器的预加载能力，并减少主线程上的工作量。
2024-04-07 18:06:03
1322
2
原创 【2024最新】vue3的基本使用(超详细)
Vue 3是下一代前端框架，用最新技术提升网站速度和开发体验。它引入组合式API，让代码更灵活、易于管理。同时，优化的响应式系统和更好的TypeScript整合，确保了应用运行更流畅，开发更高效。通过创新特性如`Teleport`和`Suspense`，Vue 3让用户界面更快加载、更动态，无论项目大小，都能轻松应对。简单说，Vue 3让前端开发更前沿、更有趣。
2024-04-02 17:59:26
2876
7
原创 Vue2如何监听数组的变化？（附相关面试题）
众所周知，vue2的响应式无法监听数组，那么它是怎么实现数组响应式的？为什么不能直接修改数组的length？为什么不能通过arr[0] = 123的方式修改数组？
2024-03-20 12:23:23
2730
2
原创 如何将本地开发完成后的数据库文件迁移到服务器中
将本地开发完成后的数据库文件迁移到服务器中的数据库是一个常见的操作，尤其是在项目部署阶段。这个过程大致可以分为导出（备份）本地数据库、传输文件到服务器、以及导入数据库到服务器数据库中三个步骤。这里我将以 MySQL 和 MongoDB 为例来说明这个过程
2024-03-13 17:41:40
786
11
原创 centos7服务器环境配置详细教程（nginx、node、MongoDB、MySQL）
CentOS 7（以及大多数Linux发行版）遵循文件系统层次标准（FHS），这意味着文件和目录遵循特定的结构和命名规范。
2024-03-12 18:07:42
1252
2
原创 基于Node.js 和 FFmpeg构建自动化脚本用来转码视频
可以自动监控目录并转码视频的Node.js脚本（可一键复制代码，粘贴即用）。这个脚本可以根据你的特定需求进一步定制和扩展，例如添加更多的转码选项、处理更多视频格式、或者在转码完成后发送通知等。这只是展示了FFmpeg和Node.js在视频处理自动化方面强大功能的冰山一角
2024-03-11 13:09:37
1487
9
原创 FFmpeg教程（干货快速上手）
FFmpeg是一款免费、开源的跨平台多媒体处理工具，它支持几乎所有的视频格式和编码标准。FFmpeg包含了一系列的子项目和工具，如ffmpeg命令行工具用于转码和处理视频和音频文件，ffplay用于播放多媒体内容，而ffprobe则用于分析多媒体流的信息。
2024-03-08 22:16:23
3734
7
原创 【性能优化】前端实际项目中的缓存应用
本篇博客从浏览器缓存、CDN缓存，到服务端缓存，再到实际工作场景。我们将一一解析这些技术背后的原理，希望你能从中获得启发。
2024-03-07 22:34:55
1501
4
原创 【2024】nvm的简介、安装、使用
NVM，即Node Version Manager，是一个命令行工具，允许用户在同一台计算机上安装和管理多个Node.js版本。通过NVM，开发者可以轻松切换项目所需的Node.js版本，极大地提高了开发效率和环境的灵活性。
2024-03-04 22:21:40
1387
6
原创 Vue3 Hooks函数使用及封装思想
在Vue 3中，Hooks函数不是Vue官方专门定义的一个API，而是社区中根据React Hooks的概念借鉴而来的一种编程模式。简单来说，Hooks函数是一种利用Vue 3的Composition API来封装和复用逻辑的方法。
2024-02-28 23:06:19
1498
4
原创 【2024】TCP、UDP和 HTTP 的区别是？
本文深入探讨了HTTP和TCP协议的基本概念、工作原理及它们在网络通信中的关键作用。通过比较，我们明确了TCP作为传输层协议，提供可靠的、面向连接的数据传输服务，而HTTP则作为应用层协议，专门用于Web浏览器和服务器之间的通信。
2024-02-26 23:01:02
2230
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
1209
4
原创 Express框架使用全流程
对于平时不怎么使用node.js开发的我，每次要开发时还得搭建非常麻烦，所以我就自己搭建了一个项目，对于这个项目，我的要求只有一个，那就是拿来就能用，直接就可以使用它进行日常开发，所以就有了这篇博客。
2024-01-16 14:16:38
1199
15
原创 前端性能优化之按需分割代码块
Vue 的动态 import 和 React 的 React.lazy 是框架层面的特性，用于标记哪些代码应该被懒加载。Webpack（或其他构建工具）的作用是在构建过程中识别这些动态导入，并据此将应用程序拆分成多个较小的包。这个过程称为“代码分割”。
2024-01-09 23:50:14
782
9
原创 一文带你了解vite核心原理
重点讲述了vite的核心原理（ESM）,并以一个vue文件的变化为例子，完整的说明vite和浏览器的工作步骤。
2024-01-08 18:04:33
1294
3
原创 深入浅出：理解 JavaScript 中的 Promise.all()
在 JavaScript 中，Promise 就像是一个承诺，表示将来会得到一个结果。Promise.all() 可以同时处理很多这样的承诺（即任务）。只有当所有的承诺都兑现时，Promise.all() 才会告诉你结果是什么。但如果其中一个承诺破裂了（即任务失败了），Promise.all() 也会立刻告诉你。
2024-01-03 17:26:51
1161
13
原创 async/await与Promise的区别？
Promise: 是一种代表了某个异步操作最终完成（或失败）及其结果值的对象。async/await: 是基于Promise的语法糖，它允许我们以更同步的方式编写异步代码。
2024-01-02 22:33:41
725
3
原创 前端如何设置模板参数
最近接到一个需求，在一个类似chatGpt的聊天工具中，要在对话框中设置模板，后端提供了很多模板参数，然后要求将后端返回的特殊字符转成按钮，编辑完成后在相应的位置拼接成字符串。当然，还进一步拓展了其功能，比如可以上传文件，解析出来后和其他字符拼接。在点击发送后，页面上就是如此拼接后的字符串。
2023-12-13 16:33:26
941
18
原创 vue项目如何防范XSS攻击？
介绍了实际工作中渲染数据时遇到XSS攻击时的防范措施，以及解决方案。还有XSS攻击的原理、途径以及如何防范
2023-11-16 13:54:21
1859
14
原创 【vue】虚拟dom的原理是什么?手写实现虚拟dom !
本文围绕什么是虚拟DOM,以及如何创建虚拟DOM、如何使用虚拟dom渲染到页面上，并引申出vue的diff算法、双端比较、key属性等其他内容
2023-11-13 22:46:14
749
11
原创 【vue3】Pinia是什么？实现原理？手写Pinia!
本文围绕pinia的核心功能及核心原理进行，以及如何手写一个简易版pinia的具体代码以及编写思路。
2023-11-10 15:49:02
1056
5
原创 javascript中的new原理及实现
本文介绍new的功能，用法，补充介绍了不加new也同样创建对象的方式，分析了new的原理，最后模拟了new的实现。学习本文内容需要你了解js中对象，原型链,call,bind,arguments的用法。
2023-11-06 23:17:56
1993
17
原创 【Java-16】动态代理的使用方法及原理实现
目标了解什么是动态代理路径动态代理概述动态代理在上面静态代理的例子中，代理类(SongZhe)是自己定义好的，在程序运行之前就已经编译完成然而动态代理中，代理类是在程序运行时利用反射机制动态创建的，这种代理方式被成为动态代理在实际开发过程中动态代理是通过JDK提供的Proxy类在程序运行时，运用反射机制动态创建而成大白话：静态代理需要自己写代理类、动态代理不用自己写代理类。
2023-08-09 22:00:00
841
9
node.js+express框架+通用的express框架模版+适合做二次开发
2024-01-15
node+vue全栈入门项目 百分百可运行
2022-03-22
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人