阿磊的救兵-CSDN博客

原创 Http状态码其实是一个高冷女孩？

其实http可是一个高冷女孩呦~今天用一种好记的方式分享一下http状态码（100 - 599状态码全面讲解）。

2024-03-07 17:32:50 747

原创 vue3 vuedraggable常用拖拽标签组件+复选功能（组件封装使用）

今天封装（CV即用）了vue3常用的vuedraggable拖拽标签组件+复选功能，介绍了特性、属性、函数配置、事件、插槽、使用六个方面，让开发变得更加高效。

2024-02-23 11:57:27 4235

原创 vue3 vue-cropper实现图片裁剪+上传功能（组件封装使用）

【代码】vue3 vue-cropper实现图片裁剪+上传功能（组件封装使用）

2023-12-26 18:54:12 994

理解闭包的一个很重要的前置知识是作用域。所以如果你对作用域还不是很了解的话，建议看一下这篇文章《一文彻底搞懂作用域》什么是闭包闭包就是每次调用外层函数时，临时创建的函数作用域对象,因为内层函数作用域链中包含外层函数的作用域对象，且内层函数被外部使用，导致它一直保持着对父级作用域的引用，这个时候就形成了闭包。所以闭包通常是在函数嵌套中形成的。例如下面的代码，就形成了闭包：function foo (){ var name = 'snail' return function(){ c

2022-01-23 18:00:07 846

原创 el-form表单验证的一些方法总结

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。知识点根据文档说明，model为表单的数据对象，el-form通过model绑定数据。reles为表单验证规则对象，其中字段名要与model中的字段名一一对应el-form-item 容器，通过 label 绑定标签，prop属性设置为需要验证的字段名表单组件通过 v-model 绑定 model 中的数据表单校验相关属性hide-re

2022-01-23 17:43:49 7026

原创 el-tree 踩过最深的坑，没有之一。设置与上级严格关联、下级不严格关联，CV即用

先看需求重点：当你点击勾选复选框时候，若点击父节点，其上下子节点全部统一跟随父节点变化；若点击子节点，子节点部分勾选时父节点处于全选状态，子节点全部勾选时父节点选中，子节点全部不勾选时父节点还是选中状态。效果图是扒下来的，意思一样，实现效果一样（不会制作gif图 o(╥﹏╥)o）实现逻辑这个功能在官方文档上是没有直接呈现的，需要我们自己去对代码进行理解然后编写。首先要用到官方文档提供的方法与事件：第一步我们需要设置 check-strictly 属性，目的是为了打破父子相互关联的做法，

2022-01-12 17:29:19 1730

原创前端js获取文件名、后缀，截取文件名后缀、多个小数点完整文件后缀

工作中遇到了各种各样的获取文件名称文件后缀等等一些问题，这里做一个简单的记录获取文件名，不带后缀var fileName = "xxxxxx.tif"; var strFileName=fileName.replace(/(.*\/)*([^.]+).*/ig,"$2");获取文件后缀(1) var FileExt=file_path.replace(/.+\./,"");(2) var fileExtension = file_path.substring(file_

2022-01-08 17:18:32 6197

原创 ❤ 面试官最喜欢问的13种Vue修饰符 ❤ ♥♥ 建议收藏 ♥♥

文章目录前言1. Lazy2. Trim3. Number4. Stop5. Capture6. Self7. Once8. Prevent9. Native10. Left，Right，Middle11. Passive12. Sync13. KeyCode结束语前言大家好，我是阿磊，众所周知，修饰符是Vue的重要组成成分之一，利用好修饰符可以大大的提高开发效率，接下来给大家总结了一些面试官最喜欢问的13种Vue修饰符。1. Lazy Lazy 修饰符的作用是，改变输入框的值时value

2021-09-16 11:39:34 349

原创 JS原生方法（String篇、Promise篇）

在实际开发中，或许我们会使用很多JavaScript自带的方法，而且这些方法确实给我们带来了很多便利，大大提高了我们的代码小路，但是，有没有一瞬间，你想知道这些方法到底是怎么实现的呢？接下来我将用几篇博客来进行了解通过这篇文章可以学到什么呢？重新巩固各种方法的使用方式巩固基础，即便没有这些方法，也能靠基础语法去实现文章目录String篇SliceSubstrSubstringPromise篇AllRaceAllSettledAnyString篇Slice参数代表含义start：开始

2021-09-11 16:46:17 806

原创 JS原生方法（Object篇、Function篇）

在实际开发中，或许我们会使用很多JavaScript自带的方法，而且这些方法确实给我们带来了很多便利，大大提高了我们的代码小路，但是，有没有一瞬间，你想知道这些方法到底是怎么实现的呢？接下来我将用几篇博客来进行了解通过这篇文章可以学到什么呢？重新巩固对象与函数各种方法的使用方式巩固基础，即便没有这些方法，也能靠基础语法去实现文章目录定义一个测试对象[Object]EntriesFromEntriesKeysValuesInstanceOfIs函数[Function]CallApply定义一

2021-09-10 16:11:32 692

原创 JS原生方法（数组篇）

在实际开发中，或许我们会使用很多JavaScript自带的方法，而且这些方法确实给我们带来了很多便利，大大提高了我们的代码小路，但是，有没有一瞬间，你想知道这些方法到底是怎么实现的呢？接下来我将用几篇博客来进行了解通过这篇文章可以学到什么呢？重新巩固数组各种方法的使用方式巩固基础，即便没有这些方法，也能靠基础语法去实现文章目录定义一个测试数组ForEachMapFilterEverySomeReduceFindindexFindFillIncludesJoinFlat定义一个测试数组co

2021-09-04 15:36:54 862

原创 input file详细介绍、更改css样式、获取图片地址、彻底清空上传文件（建议收藏）

介绍input 全部类型input 框的类型到底有多少种呢，零零散散算下来有二十多种总述常用的并且能为大多数浏览器所识别的类型大概有：text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。另外还有一些类型：tel、email、url、datetime、search。这些类型部分浏览器不支持识别或校验。text

2021-09-02 16:03:16 17084

原创 Http 请求常见状态码报错（200/404/500）

为了更好地了解各个状态码代表的意思，做了一个总结，在实际的工作中，主要涉及到的还是200,404,500等。1. http状态码分为五大类：2. 100-199 信息性质状态码1XX的状态码不常用，这是HTTP/1.1引入的信息性状态码。目前已有的信息性状态码如下图：100状态码的目的是对这样的情况进行优化：http客户端应用程序有一个实体的主体部分要发送给服务器，但希望在发送之前查看一下服务器是否会接受这个实体，当要避免客户端发送给服务器一个无法处理或使用的大实体时，发送100状态码Expec

2021-08-22 14:13:20 6693

原创 Element Ui 级联选择器获取选中子节点的所有数据

第一次写这种需求，花了两个小时时间，为了这个第一次做一个记录，如有更好的方法可评论告知 [抱拳]这是要获取的数据，这是一个行业的选择，选中的结果是每一种行业的最后一级需求就是图中所表达的，选中最后一级数据进行渲染，并且拿到最后一级的除了Value与Label的其他值使用的是Element ui 中的级联选择器进行开发HTML代码使用options绑定我们的树形结构使用props属性配置所需要参数使用ref获取dom元素绑定change事件使用getCheckedNodes方法获取选中子节

2021-08-09 18:13:54 4190 4

原创判断文件后缀名，根据不同的后缀名渲染不同的文件

理想必须要人们去实现它，它不但需要决心和勇敢而且需要知识。——吴玉章今天写项目的时候，遇到一个有意思需求，也是第一次搞奋斗了三个小时完工，也算是记录一下第一次把，哈哈…项目需求是跟据后台传过来的数据，进行不同的页面渲染，听着是不是不难啊，但是后台传过来的数据有文件，有图片，有压缩包，而且还是个数组，一条记录里多个文件，这样一听是不是就觉的难了点，嘿嘿，给你们看一下需求：点击按钮，弹出Dialog，还在开发中所以不要纠结数据哈，数据都是随便写的图片要渲染轮播图方式，而且需要预览：文件渲染也要轮.

2021-06-28 20:00:00 682

原创 Element UI 表单校验切换单选按钮遇到的坑（已解决）

既然我已经踏上这条道路，那么，任何东西都不应妨碍我沿着这条路走下去。——康德最近在写项目的时候遇见了一个不是很难但是很绕的坑，本人也是在坑中躺了半天才从坑里跳出来。先来给大家说一下遇到的问题：对，你没看错，就是这么一个问题，让我躺坑好久（解决问题后崩溃了好一会）。点击不同的单选按钮使用表单中不同的字段，因为复用了同一个表单，所以出现了这个校验重复出现的问题，其实这个问题真的好简单，哈哈，解决完之后心态都不一样了。就像人们常说的对于未知的东西总是充满各种各样的想法，当明白了之后又觉得瞬间索然无味。.

2021-06-25 19:50:52 1638

原创 TypeScript 深入学习枚举类型

今天看到一句话特别好，分享给大家：立志是事业的大门，工作是登堂入室的旅程。——巴斯德枚举是 TypeScript 新增加的一种数据类型，这在其他很多语言中很常见，但是 JavaScript 却没有。使用枚举，我们可以给一些难以理解的常量赋予一组具有意义的直观的名字，使其更为直观，你可以理解枚举就是一个字典。枚举使用 enum 关键字定义，TypeScript 支持数字和字符串的枚举。1. 数字枚举我们先来通过数字枚举的简单例子，来看下枚举是做什么的：enum Status {// 这里你的TSL.

2021-06-23 19:33:07 1974

原创 TypeScript与JavaScript的区别和基础语法对比

做前端两年了，之前是一直使用JavaScript进行开发，时间长了发现现在的主流框架都已经开始向TypeScript方向靠拢了，正好公司也给了学习的机会，就把这几天的学习成果分享一下。TypeScript与JavaScript是目前项目开发中较为流行的两种脚本语言，我们已经知道TypeScript是JavaScript的一个超集，就是覆盖了 JavaScript 的所有元素，可以载入 JavaScript 代码运行，并扩展了 JavaScript 的语法。但是他们之间又有什么样的区别呢？我带你们了解一下。

2021-06-10 20:20:18 8384 3

原创 VUE交互式组件的封装（内有代码实现逻辑与完整代码）

这个组件封装很容易，难就难在了代码逻辑上，接下来带你了解一下这个组件的代码逻辑，写完之后发现好简单，哈哈…下图是代码实现的效果，鼠标悬停不同六宫格，左侧手机的两个div显示不同的信息代码分析：首先写两个div分左右两个盒子，居中显示，屏幕自适应。左侧盒子是贴了一张手机的backgroud（url），内置两个盒子，使用定位设置两个盒子位置右侧盒子使用定位的方式决定六宫格的位置，六宫格首先做了一个白色的background（url）,然后使用：hover事件更改背景图片与字体颜色。给循环体绑定@

2021-06-05 10:14:21 478

原创给element ui 的table中的每一行增加样式

需求现在做的项目是要求给表格中的前三位增加第一金牌第二银牌第三铜牌的一个需求思路跟据表格中每一行的索引来决定第一、第二、第三，然后分别给他对应的css样式效果第一步第二步第三步完整代码如下：html代码 <div> <el-table v-loading="loading" header-row-class-name="headerRow"

2021-05-12 14:39:31 1384

原创 ElementUI实现输入框只能输入正数 =＞＞

el-input中禁止输入负数与特殊符号（只能输入正整数以及小数点后两位，类似金额）最近在项目中改BUG的时候碰到了这个问题，需要输入金额，但是只能输入正整数小数点后两位，我这边使用的时利用正则来解决的问题，分享给大家方法一：利用正则表达式来规避掉负数因为这个输入框时输入金额的只能输入金额，所以我这边使用了 el-input-number 来限制只能输入数字，但是无法限制输入负数这个输入框又是表单的一部分，所以用上了form表单的 validate 事件来校验，以下是校验方法input框脱

2021-04-28 19:41:20 3876

原创 H5大转盘抽奖，概率可以控制，可直接使用

这个代码是随手写的简易代码，可供参考，功能都有，图片都是自己在网上随意找的，里面的逻辑各方面都有，写一个html页面demo可直接看效果效果废话不多说直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="author" content

2021-04-21 10:57:11 2603

原创解决error: failed to push some refs to ‘xxx(远程仓库)‘

今天把代码进行调整后，使用 git push origin test 向远程仓库测试分支推送时报了以下错误：原因是远程仓库中的文件和我们本地的仓库有差异，例如你的远程仓库有个文件Readme. md，但是本地仓库却没有，就可能会出现这种情况。我的就是远程仓库中有Readme. md文件，而本地仓库中没有该文件造成的。还有就是因为平时在协会中，用协会电脑开发，回到寝室后又会用自己的电脑开发，这可能也是导致这种问题的原因。这种情况有解决办法，就是将本地仓库直接干掉，然后重新从远程clone一个，但是这样显

2021-04-16 10:42:11 696 1

原创 VUE项目启动，报错This dependency was not found 遇到的坑与解决办法

我们的项目是合作共同开发，需要合并更新自己的代码今天在合并test分支上的最新代码，npm run 后遇到的问题如下第一种问题这个报错呢就是提示在./src/router/index.js 文件中找不到@/views/FinancialRecords/index.vue 这个文件系统把它当作了一个依赖让 npm install --save我的这个报错解决方法是如下图：原因是我合并的同事的代码，造成了路由的冗余第二种问题查看报错可以知道，这个报错为缺少依赖包，缺少的依赖项为：npm

2021-04-14 14:55:04 17311 1

原创 Dialog具名插槽slot的使用，更换多种title标题

平时写项目的时候难免会遇到不同功能相似的Dialog弹框，可是Dialog的title是一个字符串，怎样能再title中书写两个或多个标题呢？问题：如下图指示，他们两个使用了一个Dialog弹框，但需要不同的title标题平时我们写Dialog弹框的方法：这时title是一个字符串类型，这种情况我们没法写多种标题，这个问题的解决方法如下图我们可以使用element-ui自带的slot插槽来解决这个问题，我使用的是三元表达式来解决这个问题，找出两个Dialog弹框中数据的唯一值做判断。以上完美

2021-04-06 17:28:26 2146

原创 VUE项目移动端H5调用摄像头扫码

<template> <div> <div @click="moveToCameraAVG()" v-cloak> <div class="warm_title2">点击扫码</div> </div> </div></template><script type="text/ecmascript-6">export defa

2021-03-30 21:40:06 2811 6

原创 git合作开发的代码合与合并时的冲突解决

平时我们在合作开发中，难免会遇到很多代码合并引起的冲突，今天我们就来解决一下代码合并引起的冲突问题。场景开发人员A和B1、A拉取dev分支： git pull origin dev2、B拉取dev分支： git pull origin dev3、A在分支上开发功能上传到远程代码库，merge到远程dev分支上；A创建新的分支feature/mf: git checkout -b feature/mf;A开发完功能将分支上传到远程：git add . / git commit -m / g

2021-03-23 20:07:35 2191

原创前后端分离必备的接口规范！！！

1. 前言随着互联网的高速发展，前端页面的展示、交互体验越来越灵活、炫丽，响应体验也要求越来越高，后端服务的高并发、高可用、高性能、高扩展等特性的要求也愈加苛刻，从而导致前后端研发各自专注于自己擅长的领域深耕细作。然而带来的另一个问题：前后端的对接界面双方却关注甚少，没有任何接口约定规范情况下各自干各自的，导致我们在产品项目开发过程中，前后端的接口联调对接工作量占比在30%-50%左右，甚至会更高。往往前后端接口联调对接及系统间的联调对接都是整个产品项目研发的软肋。本文的主要初衷就是规范约定先行，尽量

2021-03-21 18:09:35 448

AC_Surprise的博客