码农键盘上的梦-CSDN博客

原创 javascript使用a标签实现文件下载

前端利用a标签实现文件（图片）下载，也就是教大家利用a标签或者是 window.open() 来实现下载功能。

2024-04-19 11:25:38 810

在 VS Code 中，庞大的插件市场提供了丰富多样的扩展功能，以增强编码体验和效率。：过多的插件可能导致 VS Code 的启动速度变慢，特别是在启动或打开大型项目时。每个插件都需要加载其自己的代码和资源，这可能会消耗更多的内存和处理器资源。：一些插件可能与其他插件或 VS Code 的某些功能发生冲突。这可能导致不稳定的行为、错误或功能失效。：大量的插件可能会增加 VS Code 的界面复杂性。每个插件都可能添加自己的命令、设置或视图，这可能会使界面变得混乱和难以管理。

2024-04-19 10:39:45 760

原创 React中Toast 库推荐

是一个为React应用打造的轻量级、高度可定制的通知库。它不仅易于使用，而且默认样式美观，能够为Web应用提供流畅的用户体验。可配置自定义操作，提示框持续时间，文本样式，图表样式等，提示框可带按键，与用户有更多的交互。的动画效果非常细腻，不仅有提示框本身的弹出效果，提示框左侧的icon也包含丰富的动画效果，让引入的项目看起来非常高级。是一个强大且易于上手的通知库，它可以帮助你快速地为React应用添加美观且实用的提示信息。提升现有应用的用户体验，都是一个值得考虑的选择。

2024-04-16 15:22:01 1229

原创在uni-app使用iconfont中的图标

1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号,2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:

2024-04-15 14:07:59 1019

原创前端实现复制粘贴功能

随着技术的发展，我们有理由相信，未来会有更多简单、强大、兼容性更好的API出现。但在那之前，让我们拥抱，享受它带来的便利，同时也不忘那些曾经陪伴我们度过难关的老方法。毕竟，try {// 使用现代 API 尝试复制return;// 如果成功，直接返回// 降级方案// 尝试执行复制操作if (!success) {throw new Error('无法复制文本');// 清理console.error('复制失败:', err);

2024-03-13 16:20:07 636

原创前端入职配置新电脑！！！

而大公司大概率会在你入职的当月前后，组织近期刚入职的员工，进行新员工培训，帮助你理解包括但不限于企业文化/愿景/价值观、公司的组织架构、行政制度、财务制度等。认识新同事后，要主动与团队成员沟通交流，可简单了解团队的协作方式（代码管理工具、开发工具、编码规范等），而选择中午与团队成员一起吃午饭，是快速融入团队的最好时机。签署完劳动合同后，一般HR小姐姐会带你熟悉公司及周边环境，并介绍你认识团队成员，把你交付给直属领导（一般是面试你的）。提供了人性化的图形化界面，用起来更加简便，更加容易上手。

2024-03-13 11:29:01 3687 3

原创 axios的安装使用

大部分情况下，请求头都是固定的，只有少部分情况下，会需要一些特殊的请求头，这里将普适性的请求头作为基础配置。当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置。请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍。封装的同时，你需要和后端协商好一些约定，请求头，状态码，请求超时时间.......如果每个页面都发送类似的请求，都要写一堆的配置与错误处理，就显得过于繁琐了。请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问。

2024-03-05 09:20:15 1160

原创 10 个JavaScript技巧

无论你是刚刚开始学习还是已经实践使用中，我想，你都可以从中学习到一些新的知识，那么，我们现在开始吧。NaN是 JavaScript 中唯一不等于自身的值或者也可以使用全局函数 isNaN() 来检查一个变量是否为 NaN（非数字）。以上就是我今天想与你分享的10个JS技巧，希望你能从中学到一些新的知识，帮助你提升工作效率，享受更加美好的生活。可以使用scrollTo()方法滚动到页面上的特定位置。使用逻辑或运算符 (||) 为你的应用程序设置默认值。不使用临时变量交换 a 和 b 值的示例。

2024-03-04 14:25:13 374

原创 VueUse 安装使用

VueUse 是一个集成了常用的 Vue Composition API 的函数库，它提供了一系列的 hooks 和工具函数，帮助我们更方便地使用 Vue Composition API。在本文中，我将为你介绍如何安装和使用 VueUse。

2024-03-04 11:30:14 700

原创分享面试技巧

最希望知道的是求职者能否胜任工作，包括：最强的技能、最深入研究的知识领域、个性中最积极的部分、做过的。最成功的事，主要的成就等，这些都可以和学习无关，也可以和学习有关，但要突出积极的个性和做事的能力，说。回答提示：这个问题企业问的概率很大，通常不希望听到直接回答的缺点是什么等，如果求职者说自己小心眼、爱。给出一个具体的数字，这样表明你已经对当今的人才市场作了调查，知道像自己这样学历的雇员有什么样的价值。当然，说出其他一些你感兴趣的职位也是可以的，比如产品销售部经理，生产部经理等一些与你的专。

2024-03-01 11:25:11 450

原创 JavaScript 的10个好用的开发技巧

JavaScript 是前端开发中的必备语言。但是我发现很多同学对于 JavaScript 的技巧使用却并不熟悉。所以，今天咱们就来分享一下开发技巧，帮你更好地使用 JavaScript，提升开发效率！

2024-03-01 11:00:13 389

原创 React最常用的几个hook

用于在函数组件中添加状态管理。它返回一个数组，第一个元素是当前状态的值，第二个元素是更新状态的函数。在使用时，可以通过解构赋值来获取这两个值。

2024-02-27 17:19:18 663

原创 vue处理响应式数据，是Proxy性能好？还是defineProperty性能好？

首先，Proxy和defineProperty是两种不同的机制，用于实现JavaScript的元编程（metaprogramming）功能。defineProperty是ES5引入的一个特性，用于在一个对象上定义一个新的属性，或者修改一个已经存在的属性。它通过修改对象的属性描述符（property descriptor）来实现对属性的控制，例如可以定义属性是否可读写、是否可枚举、是否可配置等。

2024-02-27 09:37:14 1290 1

原创改变this指向之call、appay 和 bind

在JavaScript中，callapply和bind都是用来改变函数的执行上下文（即函数中的this关键字所指向的对象）的方法。

2024-02-26 14:38:03 572

原创 vue3 使用pina

1. 首先，确保您已经设置了 Pinia 并创建了状态存储模块（确保项目中已经集成Pina 状态管理库）。通过以上步骤，您就成功地在 Vue 3 项目中使用 Pinia 发送了异步请求。通过以上步骤，您就成功地在 Vue 3 项目中集成了 Pina 状态管理库。2. 在您的状态存储模块中添加 action 来处理异步请求。方法来触发异步请求，并将获取到的用户数据展示在页面上。4.在您的 Vue 应用程序入口文件中（通常是。2. 在您的 Vue 3 项目中，创建一个。来定义您的状态存储模块。

2024-02-26 09:56:21 760

原创在Vue 3中加载本地图片和其他静态资源

以上是几种加载本地图片和其他静态资源的方法，根据你的具体需求和项目配置选择适合的方法即可。首先，确保你已经安装了file-loader或url-loader插件。首先，确保你已经安装了file-loader或url-loader插件。如果图片和组件位于同一目录下，可以在模板中直接使用相对路径来引用本地图片和其他静态资源。如果你使用了Webpack等构建工具，也可以使用ES6的。例如，如果图片位于与组件相同的目录下，可以使用。函数将图片作为模块导入，然后在组件中使用它。目录下，然后使用绝对路径来引用它们。

2024-02-23 15:17:31 2756 1

原创在Vue3 + Vite项目中使用less

这样就完成了less的配置。在Vue3 + Vite项目中使用less，需要安装。首先，在项目根目录下执行以下命令安装。来指定使用less语法。标签中编写less样式。

2024-02-21 15:18:32 1088

原创 vue3+vite项目中显示SVG图片

总之，vite-plugin-svg-icons插件的作用是简化在Vue项目中使用SVG图标的过程，提供了更加灵活和方便的方式来管理和使用这些图标。vite-plugin-svg-icons是一个Vite插件，其作用是将SVG图标文件转换为Vue组件，以便在Vue项目中使用。兼容性：vite-plugin-svg-icons 支持多种类型的 SVG 图标，包括普通的 SVG 文件、Symbol 图标和图标字体等。该插件还提供了一些额外的功能，如自动按需引入图标、支持图标的自定义命名、支持指定图标大小等。

2024-02-21 14:09:58 529

原创 axios封装使用

进行请求的预处理和后处理：通过二次封装，可以在发送请求之前对请求进行一些预处理，如添加请求头、对请求参数进行处理等；大部分情况下，请求头都是固定的，只有少部分情况下，会需要一些特殊的请求头，这里将普适性的请求头作为基础配置。进行二次封装，通过二次封装axios，可以提高开发效率、减少重复代码、提供一致的接口风格，从而使开发更加便捷和可维护，让使用更为便利！封装的同时，你需要和后端协商好一些约定，请求头，状态码，请求超时时间.......请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问。

2024-02-21 11:15:34 921

原创 css中选择器的优先级

所以在上面的例子中，尽管之前可能有其他优先级更高的选择器设置了颜色，但加上。在上述代码中，如果有其他不那么具体的样式试图改变段落颜色，但该段落有ID且通过ID选择器设置了颜色，则最终颜色将是蓝色。如果两个选择器具有相同特指度（例如两个类选择器），则根据CSS文件或样式表加载顺序来确定（后来加载的样式通常会覆盖先前加载的同优先级样式）。但是，如果前面的例子中的任一更高优先级的选择器也作用于。当两个规则特指度相同时，最后定义的规则会覆盖之前的规则（就近原则）。元素的颜色被设置为红色，由于样式直接写在了元素的。

2024-02-21 08:42:56 1921

原创 vue-router 提供的几种导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。

2024-02-20 14:34:53 860

原创 JavaScript 中的双等号（==）和三等号（===）有何不同？何时使用它们？

在JavaScript中，双等号（==）和三等号（===）用于比较两个值是否相等。

2024-02-20 11:29:02 1417

原创 vue使用Nprogress进度条功能实现

以上是NProgress的一些常用配置和方法，你可以根据自己的需求进行配置和调用。详细的配置项和方法可以参考官方文档或相关的API文档。Progress是一个轻量级的加载进度条库，它提供了一些配置项和方法来自定义和控制进度条的行为。在路由跳转之前，开启进度条加载，在路由跳转之后，结束进度条的加载。此处进度条主要用于页面路由的跳转过程中，因此可以直接在。下图中的这种顶部进度条是非常常见的，在。NProgress可以通过npm安装。高级用法（具体实现）

2024-02-19 15:59:27 677

原创 vue基本理解

响应式布局是指网页布局能够根据不同的设备和屏幕尺寸自动调整，以适应不同的终端设备。响应式布局可以通过使用媒体查询、弹性盒子布局、百分比布局等方式来实现。提高用户体验：用户在不同设备上访问网页时，能够获得最佳的浏览体验。节约开发成本：只需要维护一个网站或应用程序，而不需要为不同的终端设备开发多个版本。提高网站的可访问性：响应式布局可以使网站在不同的设备上都能正常显示和使用。然而，响应式布局也有一些局限性，如需要对设计和布局进行细致的规划和调整，对性能要求较高的场景可能需要额外的优化等。

2024-02-02 11:05:54 1229

原创 Failed to execute ‘setRequestHeader‘ on ‘XMLHttpRequest‘: String contains non ISO-8859-1 code point.

未捕获（承诺中）TypeError:未能对“XMLHttpRequest”执行“setRequestHeader”：字符串包含非ISO-8859-1代码点。要解决问题就要对中文字符进行编码，到后台里再进行解码接收处理。在前端页面发送request请求到后台时，请求头即。

2024-02-01 14:35:32 934

原创 vue中父组件直接调用子组件方法（通过ref）

是子组件中定义的一个方法，你需要根据实际情况替换成子组件中真正的方法名。此外，需要确保子组件已经被完全渲染和挂载，才能正确地访问到子组件的实例。通过以上方式，父组件就可以直接调用子组件的方法了。请注意，父组件调用子组件方法的前提是子组件已经被渲染到页面上。在 Vue 3 中，父组件可以直接调用子组件的方法，可以通过。属性来引用子组件的实例，然后通过该实例调用子组件的方法。访问子组件，并直接调用子组件的方法。首先，在子组件中，需要将要调用的方法使用。首先，在父组件的模板中，给子组件添加一个。

2024-01-29 11:28:23 1406

原创浏览器报错：node_modules.com/.vite/deps/*** net::ERR_ABORTED%20504

node_modules/.vite/deps/ 目录是 Vite 打包应用时，用来存储预编译文件。如果在开发应用过程中，新引入一些外部依赖包，Vite 可能没有及时识别，并进行预编译。此时，应用就出现获取预编译文件内容的http请求报错。删除 node_modules/.vite/deps/ 目录，并重新启动应用。

2024-01-22 14:35:48 792

原创 Unhandled rejection MongoError: Unsupported OP_QUERY command: listIndexes. The client driver may req

研究了一番mongodb，通过官网（https://www.mongodb.com/try/download/community-kubernetes-operator ）在win10中安装了mongodb 6.0.5的版本,发现安装的mongodb版本太高，最后只能降低版本，选择了4.4.27（大家可根据自己的情况选择版本）最终结果是非常让人满意的的。

2024-01-18 16:22:33 593

原创 TypeScript中的interface和type有什么区别

在TypeScript中，interface和type是用于定义类型的两种主要方式，它们有一些相似之处，但也存在一些关键的区别。

2024-01-18 10:57:20 509

原创 Vue3在点击菜单切换路由时，将ElementPlus UI库中el-main组件的内容滚动恢复到顶部

在网上搜很多都是在route.js中的router.beforeEach中使用window.scrollTop(0,0) 或 window.scrollTo(0,0) 滚动，但是我使用无效，于是使用操作dom的方法，如下。在回调函数中处理路由变化的逻辑使其滚动到顶部。最后，在组件销毁前，我们使用。路由时，将页面滚动到顶部，布局如下，使用ui组件为element-plus。，这是一个响应式的路由对象。当路由发生变化时，回调函数将被调用，其中的。参数表示要切换到的路由对象，，当路由变化后滚动到顶部。

2024-01-17 18:13:59 692

原创 Vue3实现PDF文件预览（低版本浏览器兼容）

/ 这里必须使用异步去引用pdf文件，直接去import会报错，也不知道为什么// 此文件位于public/testPdf.pdf// // 仅加载第一页注释取消页码切换// 加载pdf所有页})// 加载pdf的某一页// 缩放比例1;// 获取窗口大小// 这里transform的六个参数，使用的是transform中的Matrix(矩阵)// 进行渲染resolve();});});});

2024-01-14 15:22:08 2536

转载前端出现率高的九种设计模式

说到设计模式，大家想到的就是六大原则，23种模式。这么多模式，并非都要记住，但作为前端开发，对于前端出现率高的设计模式还是有必要了解并掌握的，浅浅掌握9种模式后，整理了这份文章。那么，我们先了解六大原则

2024-01-12 08:47:46 59

原创 Pinia持久化存储插件 pinia-plugin-persist

这就是使用pinia-plugin-persist插件进行Pinia持久化存储的基本步骤。是一个Pinia持久化存储插件，用于将Pinia状态存储到本地持久化存储中，例如localStorage或sessionStorage。在你的代码中导入并使用pinia-plugin-persist。现在，你可以在你的应用程序中使用pinia来管理状态，并且pinia-plugin-persist会自动将状态持久化存储。首先，在你的项目中安装pinia和pinia-plugin-persist。中的状态持久化存储。

2024-01-08 16:52:46 2453

原创 8 个关于 Promise 的高级用途的技巧

在js项目中，promise的使用应该是必不可少的，但我发现在同事和面试官中，很多中级以上的前端仍然坚持promiseInst.then()、promiseInst.catch()、Promise等常规用法等等。如有雷同，纯属巧合。catch 函数是在 then 函数返回的处于拒绝状态的 Promise 上调用的，因此它的错误自然可以被捕获。

2024-01-03 15:59:12 872

原创 React中简单实现路由守卫（主要演示其原理）

下面简单实现React路由守卫功能

2023-12-15 10:18:19 732

原创 Vue3的watch函数中，第三个参数配置对象详细分析

这些是`watch`函数的第三个参数的一些常见配置选项。您可以根据需要选择适当的配置来满足您的需求。

2023-12-04 14:39:32 889

原创 Vue2生命周期、Vue3生命周期及其对比

Vue2生命周期、Vue3生命周期及其对比，总结： Vue2和Vue3钩子变化不大，beforeCreate 、created 两个钩子被setup()钩子来替代。

2023-12-01 15:03:37 1211

原创 Vue3 中几种独有的选择器深度选择器:deep()、插槽选择器:slotted()、全局选择器 :global()

在Vue中，除了常见的CSS选择器外，还有一些独有的选择器，这些选择器可以更方便地操作Vue组件。

2023-12-01 09:37:44 1429

原创 ElementPlus 上传文件依据后端返回对象中code是否为200，如果是200就提示上传成功，如果不是200，就打印后端返回对象中message字段，并在上传列表中清除该文件

在上传成功时，会弹出提示框提示上传成功；在上传失败时，会弹出提示框提示上传失败并打印后端返回的错误信息，并且在上传列表中清除该文件。为表示上传结果的状态码，200 表示上传成功；为上传结果的详细说明。

2023-11-30 16:48:19 497

原创 React自定义 Hook

自定义Hook是React 16.8版本中引入的新特性，让你在不编写class的情况下使用state以及其他的React特性。自定义Hook是一种自定义函数，它封装了React Hook的逻辑，并通过命名约定来使其可重用。自定义Hook可以用来解决组件之间共享的逻辑，例如处理表单的输入、状态管理、异步请求等。使用自定义Hook可以提高代码重用性和可读性，并让代码更易于测试和维护。自定义Hook的命名约定通常以"use"开头，例如"useForm"、"useFetch"等。通过自定义Hook，可以让你。

2023-11-27 09:28:34 1216

react架构.rar

空空如也