前端贾公子-CSDN博客

原创 JavaScript中 FileReader 对象详解

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。其中 File 对象可以是来自用户在一个 < input > 元素上选择文件后返回的 FileList 对象，也可以来自拖放操作生成的 DataTransfer 对象，还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile() 方法后返回结果。

2024-07-24 11:31:03 1208

原创 vue3大事件管理系统 === 个人中心项目实战

【代码】vue3大事件管理系统 === 个人中心项目实战。

2024-07-24 10:26:58 467

原创彻底理解前端 ==== 表单，FormData 对象

2024-07-23 11:04:27 716

原创解决错误：Do not access Object.prototype method ‘hasOwnProperty‘ from target object no-prototype-builtins

Object.create(null) 创建的对象是一个空对象，在该对象上没有继承 Object.prototype 原型链上的属性或者方法,例如：toString(), hasOwnProperty()等方法。Object.create(null)是一种常见的模式，用于创建将用作映射的对象。可以通过使用call()函数来调用不属于本身this对象的方法：Object.hasOwnProperty.call()调用 hasOwnProperty 报错：不要使用对象原型上的方法，因为原型的方法可能会被重写。

2024-07-23 10:02:37 192

原创如何在 JavaScript 中检查函数是否异步

检查非异步函数是否返回 Promise 的唯一方法是调用它。请注意，如果函数状态发生变化，则调用该函数可能不安全，例如写入数据库。检查该函数是否是异步的 – 然后它会返回 100% 的承诺时间。检查函数的返回值是否是具有属性的对象类型函数。

2024-07-23 09:09:42 877

原创详细讲解vue3 watch回调的触发时机

然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。同一个“tick”的意思是，Vue的内部机制会以最科学的计算规则将视图刷新请求合并成一个一个的"tick"，每个“tick”刷新一次视图，比如。Vue 的响应性系统会缓存副作用函数，并异步地刷新它们，这样可以避免同一个“tick”中多个状态改变导致的不必要的重复调用。这意味着如果你尝试在侦听器回调中访问所属组件的 DOM，那么 DOM 将处于更新前的状态。的所属组件的 DOM，你需要指明。

2024-07-22 18:53:41 1099

原创 vue3大事件管理系统 === 文章管理页面 - [element-plus 强化]

chatGPT prompt：封装一个函数，基于 axios，网络图片地址，转 file 对象，请注意：写中文注释。组件对外暴露一个方法 open, 基于 open 的参数，初始化表单数据，并判断区分是添加还是编辑。默认是英文的，由于这里不涉及切换，所以在 App.vue 中直接导入设置成中文即可，为了便于维护，直接拆分成一个小组件 ChannelSelect.vue。添加和编辑，可以共用一个抽屉，所以可以将抽屉封装成一个组件。如果是编辑操作，一打开抽屉，就需要发送请求，获取数据进行回显。

2024-07-21 21:32:54 636

原创重新安装依赖后，sass报警告Sass‘s behavior for declarations that appear after nested rules will be changing

今天拉取代码，重新执行pnpm i安装依赖后。发现终端出来了一堆的警告，& {}│。

2024-07-20 10:14:03 1587

原创 vue3大事件管理系统 === 首页 layout & 文章分类页面 -

组件对外暴露一个方法 open, 基于 open 的参数，初始化表单数据，并判断区分是添加还是编辑。需求：只有登录页，可以未授权的时候访问，其他所有页面，都需要先登录再访问。添加和编辑，可以共用一个弹层，所以可以将弹层封装成一个组件。el-container 右侧。el-aside 左侧。

2024-07-19 14:37:43 788

原创 vue3.0中重置reactive定义的数据，恢复为初始值

ref与reactive都是Vue3.0中新增的API，用于数据的处理。

2024-07-19 11:55:09 498

原创 vue开启eslint后一些⚠️警告处理记录

注意：在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。出现这个问题可能是在给组件命名的时候没有使用大驼峰和横线拼接单词，编译的时候会一直报错，而实际上是语法检测问题，每个人或者每个公司团队对语法标准设置不同，这个子组件接下来希望将其作为一个本地的 prop 数据来使用。②：如果这个 prop 以一种原始的值传入且需要进行转换。意外变更父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。

2024-07-17 18:13:50 608

原创 vue中props传值，父组件向子组件传递对象可以直接修改的问题

3.上面简要分析了一下vue组件通信中，父组件传一个对象给子组件，子组件可以直接修改这个数据，并且可以影响父组件的问题，里面涉及到堆空间、栈空间等JavaScript数据类型以及浏览器底层原理的东西，感兴趣的话可以阅读一下相关知识点。从上图可以看到，对象类型是存放在堆空间的，在栈空间中只是保留了对象的引用地址，当 JavaScript 需要访问该数据的时候，是通过栈中的引用地址来访问的，所以，，其中的代码空间主要是存储可执行代码的，栈空间就是调用栈，是用来存储执行上下文的，堆空间是用来储存引用数据类型的。

2024-07-17 17:45:55 786

原创 vue调试工具没有Pinia模块解决办法

加载过一次不这样写也没关系了。

2024-07-17 10:11:17 173

原创 vue3大事件管理系统 === 登陆页面

PS: 每天账号会重置，如果被重置了，可以去注册页，注册一个新号。【进阶】再次输入密码需要自定义校验规则，和密码框值一致（可选）需求：封装注册api，进行注册，注册成功切换到登录。明确了路由规则，可以全部配完，也可以边写边配。需求：点击注册按钮，注册之前，需要先校验。登录的测试账号: shuaipeng。【需求说明】给输入框添加表单校验。【需求说明1】登录之前的预校验。登录测试密码: 123456。【需求】注册页面基本校验。

2024-07-16 15:02:16 833

原创 element ui中el-form-item的属性rules的用法

在使用Element UI的el-form组件进行表单验证时，如果同时在el-form上绑定了rules，并且在单独的上也绑定了rules，那么Element UI会将两者的规则合并使用。具体来说，对于同一个字段，如果el-form和都有对应的验证规则，那么上的规则会覆盖el-form上的规则。el-form的rules：这是表单级别的验证规则，适用于表单内所有字段。如果表单中的某个字段没有在el-form的rules中明确指定规则，那么它将不会进行验证。el-form-item的rules。

2024-07-16 11:10:04 1286

原创 vue3大事件管理系统 === 初始化项目

优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用。官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/- 现在：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一。一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用。**问题：**默认进行的是全量检查，耗时问题，历史问题。

2024-07-15 11:13:08 921

原创 husky 和 lint-staged 构建代码项目规范

Husky 是一个用于管理 Git 钩子的工具，它可以让你在提交代码前自动运行脚本，比如代码格式化、代码检查等。它通过在 Git 仓库的.husky目录下创建钩子脚本来实现这个功能。Husky使 Git hooks 变得简单是一个运行在 Git 钩子上的 Node.js 脚本，它允许你使用 npm 脚本对暂存区的文件进行 lint 检查。它通常与 Husky 结合使用，以确保每次提交的代码都符合代码质量标准。

2024-07-14 22:55:05 1022

原创前端文件导出设置responseType为blob时遇到的问题及解决

这时我们打印一下接口返回的数据类型，发现接口会返回一个blob类型的数据，并且blob中属性type是application/vnd.ms-excel，这就说明我们导出的文件类型是excel格式的。这篇文章主要给大家介绍了关于前端文件导出设置responseType为blob时遇到的问题及解决方法,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下。是一个 Web API，它允许网页读取用户选择的文件或Blob对象中的数据。它提供了几种读取文件的方法，例如。

2024-07-12 16:37:25 881

原创彻底搞懂前端跨域&解决方案

同源策略是浏览器为确保资源安全，而遵循的一种策略，该策略对访问资源进行了一些限制。。1源的组成部分2下面表格中，只有最后一行的两个源是同源。源 1源 2是否同源⛔非同源️⛔非同源⛔非同源✅同源︎3同源请求4非同源请求5总结:『所处源』与『目标源』不一致，就是『非同源』，又称『异源』或『跨域』

2024-07-12 11:03:09 1174

原创快速掌握 ==== js 正则表达式

正则表达式是用于匹配字符串中字符组合的模式。许多语言都支持正则表达式，在 JavaScript 中，正则表达式也是对象。就是用来匹配字符串的规则判断一个字符串中是否包含有某个字符或者某个字符串找出字符串’000000O0000000’中是否有大写字母 O判断用户输入的手机号是否合法。

2024-07-09 17:54:14 913

原创从0-1实现一个前端脚手架

脚手架本质就是一个工具，作用是能够让使用者专注于写代码，它可以让我们只用一个命令就生成一个已经配置好的项目，而不用我们再花时间去配置和安装相关依赖，可以在很大程度上提升我们的开发效率。比如我们常用的create-vue和就是脚手架，很多大厂也都有自己的脚手架。

2024-07-07 13:28:04 750

原创一文讲懂npm link

掌握npm link的两步流程是对任何Node.js开发者的工具集的一个有益补充。这个过程包括在依赖关系中运行npm link，以及在应用中运行npm link。在本地开发npm模块的时候，我们可以使用npm link命令，将npm 模块链接到对应的运行项目中去，方便地对模块进行调试和测试。但请注意，npm unlink是npm uninstall的别名 ❞。1.为依赖项创建全局软链npm link。一个符号链接，简称软链，是一个快捷方式，软链是指向本地的，并不会提交到git，这非常有利于我们的调试。

2024-07-01 11:20:51 441

原创基于Vue3 + Typescript 封装 Element-Plus 组件

了解最新的 Vue3 及相关技术 & 优势具备经典组件的设计与开发，提升架构思维和代码设计能力。

2024-06-28 09:42:32 738

原创 node 前端爬虫 + 可视化

可以把互联网比做成一张大网，爬虫就是在这张大网上不断爬取信息的程序。

2024-06-24 13:37:31 2028 4

原创 Node.js版Selenium WebDriver教程

在当今数字化时代，Web应用程序的质量和性能至关重要。为了确保这些应用的可靠性，自动化测试成为一种不可或缺的工具。Selenium，作为自动化测试领域的瑰宝，为我们提供了无限可能。本教程将深入介绍Selenium，以及如何结合Node.js发挥其最大潜力。

2024-06-23 10:09:45 1259

原创开发调试秘籍--前端Debugger实战

调试工具的面板有很多，先掌握做常用的4个元素(Element)控制台（Console）源代码（Sources）网络（Network）掌握Chrome调试工具的基本使用认识常见报错的种类能够在报错中提取关键信息能够通过调试工具、二分注释排除法，准确定位代码Bug位置。

2024-06-21 15:52:46 625

原创使用sendBeacon进行前端数据上报

这个方法主要用于满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload）文档之前向 Web 服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而，对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在unload事件处理器中产生的异步。过去，为了解决这个问题，统计和诊断代码通常要在发起一个同步来发送数据。创建一个<img>元素并设置src，大部分用户代理会延迟卸载（unload）文档以加载图像。创建一个几秒的 no-op 循环。

2024-06-21 09:54:15 885

原创前端监控实现（node+vue）

埋点是监控用户在我们应用上的一些动作表现，是不是经常感觉有些应用推荐的内容都是自己感兴趣的，这就是埋点这个“内鬼”在搞怪，比如你在淘宝上的某类型的鞋子的页面浏览了几分钟，那么就会有一个“张三在2022-7-16 15:30搜索了某款运动鞋并浏览了十分钟”的记录的上报，后台就可以根据这些上报的数据去分析用户的行为，并且制定之后推送或者产品的迭代优化等，对于产品后续的发展起着重要作用。也并不是万能的，它可以捕获语法，同步，异步的错误，但是对于promise错误以及网络错误还是无能为力，所以还需要。

2024-06-21 09:17:55 1181

原创 JavaScript中的自定义事件

我们不仅可以分配事件处理程序，还可以从 JavaScript 生成事件。自定义事件可用于创建“图形组件”。例如，我们自己的基于 JavaScript 的菜单的根元素可能会触发open（打开菜单），select（有一项被选中）等事件来告诉菜单发生了什么。另一个代码可能会监听事件，并观察菜单发生了什么。我们不仅可以生成出于自身目的而创建的全新事件，还可以生成例如click和mousedown等内建事件。这可能会有助于自动化测试。要从代码生成一个事件，我们首先需要创建一个事件对象。通用的。

2024-06-20 13:16:51 1012

原创使用 postMessage + iframe 实现跨域通信

一般来说，一个窗口可以获得对另一个窗口的引用(例如，通过targetWindow=window.opener)，然后使用targetWindow.postMessage()在其上派发MessageEvent。通常情况下，不同页面上的脚本允许彼此访问，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“同源策略”）。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。表示任何目标窗口都可接收，为安全起见，请一定要明确提定接收方的URI。时事件被多次触发，而使用。

2024-06-12 18:06:45 767

原创 vue3 + node 实现大文件上传

在日常开发中，文件上传是常见的操作之一。文件上传技术使得用户可以方便地将本地文件上传到Web服务器上，这在许多场景下都是必需的，比如网盘上传、头像上传等。上传时间比较久中间一旦出错就需要重新上传一般服务端会对文件的大小进行限制这两个问题会导致上传时候的用户体验是很不好的，针对存在的这些问题，我们可以通过分片上传来解决，这节课我们就在学习下什么是切片上传，以及怎么实现切片上传。分片上传的原理就像是把一个大蛋糕切成小块一样。

2024-06-06 18:04:33 958

原创 nginx --- 反向代理｜负载均衡｜动静分离

Nginx 作为一款优秀的反向代理服务器，可以通过不同的负载均衡算法来解决请求量过大情况下的服务器资源分配问题。较为常见的负载均衡算法有轮询、加权轮询、IP 哈希等等，可分别应对不同的请求场景在Web开发中，通常来说，动态资源其实就是指那些后台资源，而静态资源就是指HTML，JavaScript，CSS，img等文件。动静分离，说白了，就是将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用服务器的请求。

2024-06-05 11:00:37 1104

原创 Docker-Compose & 发布和部署

镜像仓库用来存储我们 build 出来的“安装包”，Docker 官方提供了一个镜像库，里面包含了大量镜像，基本各种软件所需依赖都有，要什么直接上去搜索。我们也可以把自己 build 出来的镜像上传到 docker 提供的镜像库中，方便传播。当然你也可以搭建自己的私有镜像库，或者使用国内各种大厂提供的镜像托管服务，例如：阿里云、腾讯云容器中的数据，如果没有用挂载目录，删除容器后就会丢失数据。前面我们已经讲解了如何挂载目录如果你是用bind mount。

2024-06-02 16:48:49 706

原创 Docker 目录挂载 & 多容器通信

这节我们把前面的 Web 项目增加一个 Redis 依赖，多跑一个 Redis 容器，演示如何多容器之间的通信。要想多容器之间互通，从 Web 容器访问 Redis 容器，我们只需要把他们放到同个网络中就可以了。因为挂载后，容器里的代码就会替换为你本机的代码了，如果你代码目录没有。项目往往都不是独立运行的，需要数据库、缓存这些东西配合运作。，你需要安装一下才能执行上面的命令。停止/启动指定 id 的容器。目录，你需要在代码目录执行下。方式，只需要一个名字。删除指定 id 的容器。查看当前运行中的容器。

2024-06-02 16:03:40 814

原创 Docker 制作自己的镜像

如果你写 Dockerfile 时经常遇到一些运行错误，依赖错误等，你可以直接运行一个依赖的底，然后进入终端进行配置环境，成功后再把做过的步骤命令写道 Dockerfile 文件中，这样编写调试会快很多。，跑起来后进入容器终端配置依赖的软件，然后尝试跑起来自己的软件，最后把所有做过的步骤写入到 Dockerfile 就好了。这是一个 Nodejs + Koa2 写的 Web 项目，提供了简单的两个演示页面。掌握好这个技巧，你的 Dockerfile 文件编写起来就非常的得心应手了。查看当前运行中的容器。

2024-06-02 10:21:29 422

微信小程序请求拦截器 ，响应拦截器

微信小程序 - wx.request网络请求封装

空空如也

微信小程序请求拦截器，响应拦截器