自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

qq_920189602的博客

每个牛B人物背后都有段苦逼的岁月,只有像SB一样的坚持,终将牛B,学无止境,吸百家之精华

  • 博客(38)
  • 资源 (2)
  • 问答 (9)
  • 收藏
  • 关注

原创 前端数组去重,子元素是一个对象,根据子对象某个字段去重

【代码】前端数组去重,子元素是一个对象,根据子对象某个字段去重。

2022-12-29 22:08:30 13

原创 常用checkbox多选、单选、全选、并打印所选中id

【代码】常用checkbox多选、单选、全选、并打印所选中id。

2022-12-27 15:30:44 42

原创 基于vue原生js实现轮播图,中间大两边小,循环轮播,突破element中的走马灯最多放三个的限制。以显示轮播5个为例,可以添加多个图片进行循环。显示多少个由自己决定

5、单数据超过5条时,每一次切换图片下标时,都更新数据,这里需要两个数组数据,一个数组(A)存放5个,用户页面的显示。另一个数组(B)数据则是当前一共有多少张图片。3、点击右边小图标或者点击下一张时,每个图片当前位置下标加一,当加到下标超过数组数据长度时,下标重置0开始,循环(点击左边相反)2、点击两边某个图片要是显示在中间时,当前的图片位置与中间位置进行互换。4、每换一次下标,最中间的图片都要放大,总之按照自己需求,添加变化样式。1、初始化的时候,给当前五个图片设置固定的样式(中间图片大,两边小)

2022-11-04 23:24:24 424

原创 使用element-ui中的el-radio时,如何修改为正方形勾选

直接上代码:css使用的是scss快速编写。

2022-08-23 17:08:20 851 2

原创 vue自定义实现动态轮播

不理解,不懂的,欢迎留言。

2022-08-17 17:33:45 265

原创 前端vue中如何让界面进行刷新一次,相当于点击左上角刷新按钮一次

使用到方法有两种,一个是window.location.reload()方法和路由router.go(0)方法,但是直接在vue界面调用的话会进行刷新死循环,

2022-08-04 14:17:07 4170

原创 手机号码11位以及格式验证规则

包括了电信、移动、广电号段的手机号码11位以及格式验证规则

2022-07-07 23:33:51 2249

原创 element-ui如何使用el-cascader进行省市区的选择

element-ui如何使用el-cascader进行省市区的选择

2022-07-07 23:28:01 1519 2

原创 js实现,点击侧边导航栏,可以平缓的跳到界面指定位置,同时当界面某个元素在浏览器可视范围的时候,相应的导航栏也显示相应的样式

注:要下载安装好jquery和element-ui"element-ui": "^2.15.8""jquery": "^3.6.0"有时候在使用‘$’报错找不到,可以直接在组件内这样使用import $ from 'jquery'window.jQuery = $window.$ = $效果如下:html代码:<div> <div class="navBox"> <ul class="navigation"&gt..

2022-05-28 00:56:08 1150

原创 js如何实现鼠标进入到元素后,进度条从0%到100%动态移动

实现代码:html:<div id="box" @mouseover="overIn"> <p id="range"></p> <span id="percent"></span></div>css:#box { position: relative; margin: 100px auto; width: 300px; height: 2px; border-radius: 10..

2022-05-27 22:32:37 441

原创 判断一个元素是否在可视区域中

在日常开发中,我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值(例如 100 px),从而实现一些常用的功能;话不多说,方法有很多种,这里使用的是:getBoundingClientRect()方法getBoundingClientRect()获取元素位置,这个方法没有参数getBoundingClientRect()用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。getBoundingClientRect()是DOM元素到浏览器可视范围的距离(不包含文档卷起

2022-05-27 19:46:51 775

原创 node中,如何手动实现触发垃圾回收机制

参考阮一峰ES6标准入门中的实例,手动实现node --expose-gc // --expose-gc 表示允许手动执行垃圾回收机制然后执行代码:// 手动执行一次垃圾回收保证内存数据准确> global.gc();undefined// 查看当前占用的内存,主要关心heapUsed字段,大小约为4.4MB> process.memoryUsage();{ rss: 21626880, heapTotal: 7585792, heapUsed: 4708.

2022-04-18 21:22:03 754

原创 js中,根据数组里面每个对象中某个共同字段进行分组分组。js对象数组重复值,值保留一个值的计算方法

完整代码:(将 id 相同的数据分在同一组) let dataArr = [ {id: 1, value: '值1'}, {id: 2, value: '值2'}, {id: 3, value: '值3'}, {id: 1, value: '值4'}, {id: 2, value: '值5'}, ]; function classify(arr){ let map = {}; let myArr = []; for(let i

2022-04-01 00:11:06 663

原创 防抖与节流

防抖:引用场景,比如我现在有一个input标签,然后我想在里面搜索个东西,0.5秒后给我打印到控制台,这个功能很简单,代码如下,首先我们得拿到这个input框,然后给它绑定一个oninput事件,这个事件是当我在框里面输入东西时就会触发,如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>&

2022-02-22 17:58:47 38

转载 HTTP 基础知识大图

送给前端er一份 HTTP 基础知识大图

2022-02-19 21:32:07 40

原创 vue2.0数据响应式原理

//视图更新function updateView(){ console.log("视图更新了")},//重新定义数组原型const oldArrayProperty = Array.prototype//创建新对象,原型指向 oldArrayProperty,再扩展新的方法不会影响原型const arrProto = Object.create(oldArrayProperty)['push','pop','shift','unshift','splice'].forEach(moth.

2022-02-18 22:15:51 551

原创 前端性能优化

大体 减少服务器请求数 1、将多个JS/CSS文件进行合并 2、图片不需要经常改动时,可使用CSS sprite 3、如果仅单个页面使用某个JS/CSS文件,可以直接将文件内容放于html页面中(若多个页面共用相同的JS/CSS文件,则不应要这么做,而应利用好浏览器的缓存功能) 加快资源访问速度 1、cdn 减少文件大小 1、将图片适当压缩(e.g TinyPNG) 2、压缩JS/CSS文件 提高代码执行效率

2022-02-17 08:56:24 125

原创 基于 webpack 5 搭建 Vue 脚手架

对于基本项目来说,基本的开发依赖有:webpack、webpack-cli、vue-loader、vue-template-compiler、sass-loader、sass、css-loader、style-loader、babel-loader、@babel/core、@babel/preset-envloader的作用是把代码中进行编译,转换。webpack-cli:这个cli提供了webpack的终端命令去调用webpack。vue-loader:把vue的代码转化成js代码,vue.loade

2022-02-15 16:25:06 1042

原创 自定义overflow产生的滚动条样式设置

2022-02-10 10:06:55 302

原创 Less学习后总结

1、less是一种动态样式语言,属于css预处理器的范畴,它拓展了css语言,增加了变量,Minxin,函数等特性,是css更易维护和拓展,它既可以在客户端上运行,也可以借助node.js在服务端运行。less的中文官网:http://lesscss.cn/ ,bootstrap中less教程:http://www.bootcss.com/p/lesscss/2、less编译工具koala官网:www.koala-app.com3、less中的注释1)以//开头的注释,不...

2022-02-05 23:55:57 308

原创 js处理文件名称和后缀名,分开获取。附件名出现多个点“.”符合时,如何兼容处理

我们在开发过程中,经常会遇到附件读取、下载、查看等操作,但是有些系统的接口需要区分是那种文件的类型才能下载、查看等操作,这个时候我们就要区分附件的类型,看它的后缀名是多少就能处理请求对应的接口,但是在处理过程中,常常会遇到一些截取兼容性的问题,比如a.png,可以直接用split('.')就解决,但是这种1.a.png,a.aa.jpg, aa.bb.cc.zip这种就不能只用split()去处理了,处理的方式很多,看自己的处理方式而已,下面分享下我处理的方法,不喜勿喷,直接上代码//返回值:fil.

2022-01-19 18:40:36 967

原创 js中,浏览器和node.js环境的事件循环Event Loop

1、浏览器中的事件循环一次弄懂Event Loop(彻底解决此类面试问题)浏览器中的事件循环链接为转载2、node环境的循环用实例题目来,直接上代码console.log('1');setTimeout(function() { console.log('2'); process.nextTick(function() { console.log('3'); }); new Promise(function(resolve) { console.lo

2021-12-23 10:31:32 51

原创 你不知道的JavaScript

慢慢沉淀...

2021-11-13 19:10:43 651

转载 Git教程

Git教程-廖雪峰的网站

2021-11-07 09:01:47 49

原创 在使用element-ui中的el-table组件时,怎么自定义合并表头和合并行

1、合并相同数据的行效果图如下,合并相同名称的行代码如下:data(){ return{ tabbleData:[{a:6},{a:12},{a:7},{b:6},{b:7},{c:44}] }}在el-table头中加入:span-method="arraySpanMethod",span-method:合并行或列的计算方法<el-table :data="tableData1" border ..

2021-11-06 00:19:36 1691

原创 天地图经常遇到的问题:1、怎么初始化地图。2、地图添加覆盖物后怎么不能进行拖拽。3、怎么把单位为米的坐标转换为WGS84坐标。

我上面这些坐标的单位是米,怎么把这些米为到位的坐标转换为WGS84坐标呢?他们之间的换算关系是多少呢

2021-11-02 10:56:43 1577 1

转载 Promise、async和await学习笔记

原文链接:Promise · 语雀视频: 2020最好理解的Promise教程_哔哩哔哩_bilibili视频作者: 杰哥课堂(B站)1.为什么需要Promise 需求: 通过AJAX请求id ,再根据id请求用户名.再根据用户名,再根据用户名获取email 回调地狱: 回调函数中嵌套回调。Promise解决了回调地狱2. Promise 的基本使用语法new Promise(( reslove, reject ) =>{})Promise.

2021-10-30 17:40:04 80

原创 webpack编译ES6代码

把es6代码转化为ES5代码,是为了让我们写的javascript代码程序能在低版本的浏览器正常运行,使用的是babel,使用步骤如下:1、安装跟balbe相关的三个依赖。安装npm install @babel/core @babel/preset-env babel-loade --save-dev2、安装完babel相关依赖后,要给babel创建一个配置文件,在根目录底下创建一个.babelrc文件3、.babelrc文件里面写入以下代码 { //预设:babel一系列.

2021-10-24 20:22:39 1983

原创 [Vue warn]: Error in render: “TypeError: data.reduce is not a function“found in报错详解

报这个错是因为赋值类型问题,我使用的是elementUI框架的el-table组件来开发的。<el-table :data="tableData">里面中的tableData接收的是一个数组,你不能给它一个对象或者其它类型的,不然就会报这个错误,这种报错在使用elementUI框架的表单<el-form :model="form">时也会常出现这种报错问题问题总结:出现这种错误很可能是在使用elementUI框架的el-table组件时,里面的:data="ta...

2021-10-21 17:59:36 2172

原创 前端怎么把px单位换成rem单位解决项目页面适配问题

使用案例简单明了说明怎么把px单位换成rem单位,达到适配使网页自适应,简要说明rpx、px、rem、em的区别

2021-10-20 23:54:39 5647 5

转载 js如何生成唯一标识符UUID

原文链接:js如何生成唯一标识符UUID百度百科中对uuid的解释UUID 是 通用唯一识别码(Universally Unique Identifier)的缩写,是一种软件建构的标准,亦为开放软件基金会组织在分布式计算环境领域的一部分。其目的,是让分布式系统中的所有元素,都能有唯一的辨识信息,而不需要通过中央控制端来做辨识信息的指定。如此一来,每个人都可以创建不与其它人冲突的UUID。在这样的情况下,就不需考虑数据库创建时的名称重复问题。目前最广泛应用的UUID,是微软公司的全局唯一标识符(GUID

2021-10-20 21:27:41 2614

原创 java中的继承,重写,多态,学习笔记

快捷键Ctrl+H可以查看当前类的继承关系super关键字注意点: 1、super调用父类的构造方法,必须在构造方法的第一个 2、super必须只能出现在子类的方法或者构造方法中! 3、super和this不能同时调用构造方法super和this的区别:代表的对象不同: this:本身调用者这个对象 super:只能在分类对象的应用前提: this:没用继承也可以使用...

2021-10-17 22:00:16 74

原创 max-width: 100%和width:100%的区别

比如我们要设置一个图片img { max-width: 100%;},img { width: 100%;},max-width:就是要保证图片最大显示为其自身的100%(即最大只可以显示为自身那么大)。此时,如果包含图片的元素(比如包含图片的body或div)比图片固有宽度小,图片会缩放占满最大可用空间。width:100%:要实现图片的自动缩放,也可以使用更通用的 width 属性。然而,这条规则会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下,图片会被无谓地拉伸。...

2021-10-13 00:47:21 1249 2

转载 判断JS数据类型常用的四种方法

判断JS数据类型的四种方法

2021-10-12 09:15:56 38

原创 HTTP中的请求头和响应头各字段属性解释及状态码

请求头(Request Header) 请求头 描述 Host 主机ip地址或域名 User-Agent 客户端相关信息,如果操作系统、浏览器等信息 Accept 指定客户瑞接收信息类型,如: image/jpg, text/html, application/json Accept-Charset 客户端接受的字符集,如Igb2312、1s0-8859-1 Accept -Encoding 可接受的内容编码,如gzip Accept ...

2021-10-11 00:05:03 789

原创 从输入URL到浏览器显示页面渲染完成,发生了什么?

1、DNS解析:将域名地址解析为ip地址浏览器DNS缓存 系统DNS缓存 路由器DNS缓存 网络运营商DNS缓存 递归搜索:blog.baidu.com 出错了 2、TCP连接:TCP三次握手第一次握手,由浏览器发起,告诉服务器我要发送请求了 第二次握手,由服务器发起,告诉浏览器我准备接受了,你赶紧发送吧 第三次握手,由浏览器发送,告诉服务器,我马上就发了,准备接受吧 3、发送请求请求报文: HTTP协议的通信内容 4、接受响应响应报文 5、渲染页面遇见HT

2021-10-10 01:10:31 83

原创 如何把自己写好的前端代码放到自己的服务器上面去运行,让被人可以远程访问,0基础的都可以学会部署自己的前端项目

跟着0基础前端代码部署到自己的服务器视频教程,提取码:wdn5。视频完全免费,将自己编写好的的网页、前端项目部署到服务器中,并能进行远程访问。注意:(1)远程服务器需要安装nginx软件,执行以下命令进行安装yum install epel-releaseyum install nginx(2)进入 /etc/nginx 目录,修改配置文件nginx.confcd /etc/nginxvim nginx.conf修改结果如下:user root;...

2021-10-08 22:10:27 2335 3

原创 天地图显示不全,只显示一部分或者一半

本人是第一次在项目开发中使用天地图,在使用天地图工程中,遇到很多问题,比如:地图第一次渲染的时候显示不全、添加覆盖物后地图只能进行缩放不能进行拖拽、添加覆盖物后中心点怎么确认、怎么把数据单位米转化为经纬度坐标数据等问题,不过这些提到的问题在开发中都一一解决了。不过这篇博文中我们要讲的问题是第一个“地图第一次渲染的时候显示不全”。这个问题浪费了我一个下午的时间,不过还好,还可以接受。网上找了几篇博主的文章,自己也试了他们的方法,可能是自己在参考的时候写错了(自己能力问题),...

2021-10-08 10:35:02 2507 18

axios二次封装,绝大多数公司的前端项目,都是以这种方式来管理项目的接口,已经调用接口的方法。有token

axios二次封装,绝大多数公司的前端项目,都是以这种方式来管理项目的接口,已经调用接口的方法。有token

2022-02-23

简洁型简历模板100套.zip

面试工作需要的模板简历,各种类型都有

2021-10-09

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除