- 博客(25)
- 收藏
- 关注
RSS订阅原创 前端大文件分片上传实现详解 (Vue3 + TypeScript)
分片上传的核心思想是将“大文件”分割成多个“小文件块”（Chunk），逐个或并发上传至服务器。服务器接收到所有分片后，将其合并还原为原始文件。大文件分片上传是前端开发中处理大体积文件（如视频、大压缩包）上传的标准解决方案。准确且高效地计算文件 MD5 是实现秒传的基础。该部分涵盖了切片循环、分片校验（Check）、构建表单（FormData）及请求发送。以下是结合了 UI 交互、上传进度反馈、日志记录及异常处理的 Vue3 组件完整实现。等显著优势，能够极大提升上传的稳定性和用户体验。
2025-12-22 00:50:06
395
原创 浏览器原理
稳定性：一个 Tab 崩了，不会导致整个浏览器崩。安全性：渲染进程运行在沙箱中，限制了读写系统文件的权限。流畅性：JS 阻塞渲染进程时，不会影响 Browser 进程的 UI 响应（如切换 Tab）。Reflow (重排)：修改了几何属性（宽/高）。触发。最贵。Repaint (重绘)：修改了颜色/背景。触发。次之。Composite (合成)：修改transform或opacity。只触发 Composite。原理：不占用主线程，直接在合成线程操作图块。即使 JS 卡死，动画依然流畅。
2025-12-14 22:51:11
485
原创 【无标题】
将表单接口抽离到单独的类型文件中，可以在组件、Store 和 API 层之间共享，避免重复定义。newPassword: string // 确认密码// ...组件拆分是前端工程化中的重要一环。不要等到组件变得不可维护时才想到重构。在开发初期，保持良好的组件设计思维，遵循单一职责原则（SRP），能让我们的代码库保持长久的生命力。
2025-12-07 22:05:59
671
原创 【无标题】
本质：用 JS 的计算量（算位置）换取 DOM 的渲染量（少节点）。适用：长列表、无限滚动、聊天记录、大量数据表格。忙碌：由于接口接踵而至，但是数据确实前提没有协商过的，所以组件一直在变更，同时逻辑也不是很好写，所以这一周实在没学什么新东西，一直在改改改修修修，不过这周计划将虚拟列表正式学习一下，项目中会用到。开心：团建吃了好吃的，看了疯狂动物城全程无槽点都给我去看。
2025-11-30 22:10:17
226
原创 手把手教你搞定 Vue + Element Plus 注册：从逻辑流程到进阶校验
在开发后台管理系统时，登录和注册是最基础的功能。很多新手容易陷入“写一堆if-else判断输入框是否为空”的泥潭中。利用用户体验友好：实时提示错误（如格式不对）。代码整洁：告别冗余的逻辑判断。数据安全：在发送请求前拦截非法数据。确认密码必须等于密码），我们需要编写validator函数。场景演示：校验“确认密码”// 1. 定义校验函数callback(new Error('请再次输入密码'))// 核心逻辑：对比两次输入callback(new Error('两次输入密码不一致!'))
2025-11-23 11:43:18
34
原创 周博客---一周总结
首先，拆解页面的时候，观察相似结构的组件，区分它们之间的共同特性和差别，共同特性我们可以使用公共类来实现样式效果，而对于差别，要进行分类，如果是所展示数据不同，那么可以使用props接收数据并进行展示；如果是所展示的内部样式不同，那么可以使用动态样式。Vue官方文档，绑定HTML class章节中第一小节绑定对象中写到我们可以给:class//借鉴该示例。
2025-11-16 16:59:51
849
原创 JS高级概念小总结
我们可以使用let来定义变量i，let定义的变量是有块级作用域的，意味着，for循环每循环一次就会，就会为i创建一个单独的块级作用域，而setTimeou中产生的闭包会捕获并记住其所在作用域的变量，setTimeout中捕获到了不同的i值进行打印，而打印出来的自然是1 2 3 4 5 6.这里没有严格按照定义的原因是，通俗来讲，函数作为闭包的载体，是可以看得见，调用的着的东西，词法环境是较为抽象的，所以一般我们会通俗的称这个函数为闭包。闭包里的函数就相当这个宇航员，我们一看到它就知道，哦，有闭包产生了。
2025-10-19 10:16:48
560
原创 事件循环（浏览器）
一个宏任务执行开始。执行过程中，遇到宏任务API就往宏任务队列尾部放，遇到微任务API就往微任务队列尾部放。这个宏任务执行结束。立刻检查微任务队列，把它清空执行完所有微任务如果在清空过程中又产生了新的微任务，也要在这一步立马清空。然后再去看宏任务队列，取下一个宏任务（回到第1步）。
2025-10-13 10:45:11
734
原创 9.22--9.28学习周报
本周我没有学习新的知识，而是对前端的“三件套”（HTML, CSS, JavaScript）进行了一次全面的复习。在这次复习的过程中，我不仅巩固了基础，更重要的是对“如何学”这件事，产生了全新的感悟。本周复习的重点放在了JavaScript上，它是赋予网页生命的关键。以下是我对本周复习的核心知识点进行的梳理和总结。
2025-09-29 11:07:36
556
原创 Vue3核心语法2之路由与组件通信
子组件通过emit触发事件，父组件通过@事件名监听，并执行对应回调函数。注意区分好：原生事件、自定义事件。原生事件：事件名是特定的（clickmosueenter等等）事件对象$event: 是包含事件相关信息的对象（pageXpageYtargetkeyCode自定义事件：事件名是任意名称事件对象: 是调用时所提供的数据，可以是任意类型！！！子组件emit(‘sendData’, ‘我是子组件的数据’) // 触发事件并传值</script><template>
2025-07-26 18:17:46
1040
原创 vue2 超详细系统学习笔记
一套用于构建用户界面的渐进式JavaScript框架Vue可以自底向上逐层的应用简单应用：只需一个轻量小巧的核心库复杂应用：可以引入各式各样的Vue插件1.采用组件化模式，提高代码复用率、且让代码更好维护2.声明式编码，让编码人员无需直接操作DOM,提高开发效率。3.使用虚拟DOM+优秀的Dff算法，尽量复用DOM节点。4.学习Vue之前要掌握的JavaScript基础知识？ES6语法规范ES6模块化包管理器原型、原型链数组常用方法axiospromise教程 为 入门教程api 为 各种属性方法
2025-07-19 09:55:30
1196
原创 nodejs-----会话控制
所谓会话控制就是对会话进行控制HTTP是一种无状态的协议，它没有办法区分多次的请求是否来自于同一个客户端，无法区分用户而产品中又大量存在的这样的需求，所以我们需要通过会话控制来解决该问题cookiesessiontokenJWT(JSON Web Token)是目前最流行的跨域认证解决方案，可用于基于token的身份验证JWT使token的生成与校验更规范我们可以使用jsonwebtoken包来操作token//导入 jwt//创建(生成) token。
2025-05-17 16:45:47
796
原创 nodejs------api接口
接口的英文单词是API(Application Program Interface),所以有时也称之为API接口。一般情况下接口都是由前端工程师调用的，但有时后端工程师也会调用接口，比如短信接口，支付接口等。json-server本身是一个JS编写的工具包，可以快速搭建RESTful API服务。简单理解：一个接口就是服务中的一个路由规则，根据请求响应结果。，与编程语言(Java,Go等)中的接口语法不同。只需将渲染的页面 变为相应的返回请求格式的信息。用户的不同的错误需要有不同的弹框来进行一个提醒。
2025-05-17 16:41:58
465
原创 nodejs----mongDB
MongoDB是一个基于分布式文件存储的数据库，官方地址 https:lwww.mongodb.comlMongoose是一个对象文档模型库，官网http:/www.mongoosejs.net/
2025-05-17 16:39:45
979
原创 express框架
express是一个基于Node.js平台的极简、灵活的WEB应用开发框架，官方网址：https:/www.expressjs.com.cn/简单来说，express是一个封装好的工具包，封装了很多功能，便于我们开发WEB应用(HTTP服务）中间件(Middleware)本质是一个回调函数中间件函数可以像路由回调一样访问请求对象(request),响应对象(response)
2025-04-05 18:13:09
915
原创 包管理工具
1.1 包是什么『包』英文单词是package，代表了一组特定功能的源码集合1.2 包管理工具管理『包』的应用软件，可以对「包」进行下载安装更新删除上传等操作借助包管理工具，可以快速开发项目，提升开发效率包管理工具是一个通用的概念，很多编程语言都有包管理工具，所以掌握好包管理工具非常重要1.3 常用的包管理工具下面列举了前端常用的包管理工具npmyarncnpmnpm的介绍与安装npm全称，翻译为中文意思是『Node的包管理工具』
2025-04-05 18:08:54
1483
原创 Nodejs------模块化
将一个复杂的程序文件依据一定规则（规范）拆分成多个文件的过程称之为模块化其中拆分出的每个文件就是一个模块，模块的内部数据是私有的，不过模块可以暴露内部数据以便其他模块使用编码时是按照模块一个一个编码的，整个项目就是一个模块化的项目这里我们介绍一下require导入自定义模块的基本流程1.将相对路径转为绝对路径，定位目标文件2.缓存检测3.读取目标文件代码4.包裹为一个函数并执行（自执行函数），通过arguments.callee.toString（）查看自执行函数5．缓存模块的值。
2025-04-05 18:03:28
204
原创 Node.js---fs（FileSystem）
rename() 异步的 同步的为renameSync(oldPath,newPath)fs模块是node.js中的内置模块，可以实现与硬盘的交互例如文件的创建、删除、重命名、移动，还有文件内容的。Path (要删除文件的路径) callback（回调函数）绝对路径‘全局变量’保存的是：所在文件的所在目录的绝对路径。本质思路 是 先读取文件 然后写入另一个文件。2 流式操作 创建读取流对象直接创建。读取，以及文件夹的相关操作。
2025-03-29 16:17:08
1547
原创 buffer
而存储的数据其实都是二进制的 因为计算机本质上只处理二进制。buffer 打印出来的数据都显示16进制 这是nodejs的规定。Bufr是一个类似于数组的对象，用于表示固定长度的字节序列。Buffer本质是一段内存空间，专门用来处理三进制数据。2.Buffer性能较好，可以直接对计算机内存进行操作。3.每个元素的大小为1字节(byte)1.Buffer大小固定且无法调整。
2025-03-29 16:10:25
218
原创 02-axios
其中包含 GET请求 POST请求 PUT请求 delete请求axios的默认配置就是为了简化代码的对不同按钮做的点击事件中的axios中有大量重复简单的代码可以使用默认配置来统一设置axios创建实例对象发送请求一样是为了简化代码而存在的试想你要在一段代码中像两个不同的端口发送请求这个时候你要是使用axios的默认配置 你也只能配置一个接口的而有了创建实例对象的话就可以给不同的请求设置不同的默认设置axios拦截器请求时就开始检查，响应时个性化处理1 请求拦截器 谁后创建 谁先执
2025-03-29 16:02:12
445
原创 03-ajax
在 IE 浏览器中，为了防止 AJAX 请求的结果被缓存，可以在请求的 URL 后面添加一个唯一的参数，例如时间戳或随机数。这样，每次请求的 URL 都是唯一的，浏览器就不会从缓存中获取结果，而是重新发送请求到服务器。当readyState==4且状态为200时，表示响应已经就绪，可以理解为请求完成且成功。该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。方法用于执行 GET 请求，并获取服务器返回的数据。
2025-03-22 01:44:39
764
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人