南极一块修炼千年的大冰块-优快云博客

原创《前端工具系列》最好用的git可视化工具——SourceTree

这是大冰块2021年第9篇原创文章，和大冰块一起在前端领域努力吧！！！????写在前面今天来聊聊git可视化工具SourceTree的使用，主要是因为git操作是我们在项目中频繁用到了，频繁用到就注定会遇到各种棘手小问题，比如代码的合并，冲突，版本回退等。敲命令时无论老手新手都小心翼翼，稍有不慎就会出错，在大型项目里如果代码版本控制出错的话，代价是很大的，可能这个月的奖金就没了。当然现在很多用编辑器都自带git管理工具，如VSCode，IDEA等都集成了自己的git管理工具，不过就我个人的使用习惯

2021-01-17 11:51:39 4831 1

原创《看完就懂系列》答应我，看完就开始用Symbol好吗？

这是大冰块2021年第8篇原创文章，和大冰块一起在前端领域努力吧！！！????写在前面每到周五公司就格外的忙，测试忙着提bug，产品忙着改需求，UI忙着发挥她的像素眼，尤其是下班前的一阵子，大家彷佛充满了干劲，颇有种再干他五百年的气势。就像一天的活都堆到傍晚，一周的活也都堆到周五，一言不合就加班。更惨的是加班回家还要哄女朋友睡觉，大冰块日更的大业差点被毁于一旦。终于把女朋友哄睡着了，大冰块悄悄爬起床找个简单又冷门的题材再更它一篇。很久很久之前，大冰块面试的时候，面试官问我js的数据类型，我想这还

2021-01-16 14:19:58 710 1

原创《看完就懂系列》谈谈数据埋点的原理与实现

这是大冰块2021年第7篇原创文章，和大冰块一起在前端领域努力吧！！！????写在前面之前公司接了个做广告的业务，甲方财大气粗，沟通也特别顺利。刚开始的时候，大家都摩拳擦掌兴致满满，觉得这个项目奖金一定会翻一番。于是第一版赶得很急，上线之后，点击率与转化率却一直不温不火。眼瞅着到嘴的项目奖金要飞走，leader说如果运维的小伙伴能根据具体原因快速定位，还怕点击率和转化率不“噌噌噌”的上涨吗？所以第二版先做个数据埋点吧~那么什么是数据埋点呢？数据的原理是什么？数据埋点又该如何实现呢？什么是数据埋点

2021-01-14 15:42:34 1630

原创《看完就懂系列》Ajax是不是凭一己之力造就了整个前端的生态圈？

这是大冰块2021年第6篇原创文章，和大冰块一起在前端领域努力吧！！！????写在前面前几天，有小伙伴面试的时候被面试官问：谈谈Ajax的原理~ 他说回答得不太好。我想，Ajax有什么原理？不就是发请求拿数据渲染页面吗？抱着怀疑即是寻求真理的想法，我重新梳理了一遍Ajax的发展过程。发现Ajax简直是凭一己之力造就了整个前端生态圈啊，如果没有Ajax技术，今天的我可能就是一个java程序员了，然后写着jsp的页面~这么说吧：没有Ajax，就没有前端处理渲染数据的可能，没有局部刷新，没有动态渲染，没

2021-01-13 14:59:28 236

原创《看完就懂系列》项目中的权限管理复杂吗？

这是大冰块2021年第5篇原创文章，和大冰块一起在前端领域努力吧！！！????写在前面还记得在我入门没多久的时候，第一次接触公司中大型项目的时候，项目权限这块把我搞的很懵。大概是我的逻辑思维不够强大，猛然接触新的思维方式老是转不过弯来。不过功夫不负有心人，靠着前辈的指导和自己一点点摸索，总算对权限的整体流程（前端方面）有了一个基本的掌握。如今回首再看，前端方面的权限管理其实没什么难度，就像一把钥匙开一把锁，只要把一一对应的逻辑关系做好就可以了。因为思路是相似的，所以实现的代码都是大同小异，因此本

2021-01-12 16:07:05 276 2

原创《看完就懂系列》天哪！搞懂节流与防抖竟简单如斯~

这是大冰块2021年第4篇原创文章，和大冰块一起在前端领域努力吧！！！????写在前面今天来谈一谈节流与防抖，这是一个老生常谈的概念，实际应用也特别多，面试中经常会问到。可还是有很多初学者不明白，搞不懂两者之间的区别，或者两者的概念与实际应用中的差别（比如我刚接触的时候就是搞不明白这两个绕来绕去的概念）。其实明白之后就豁然开朗，觉得很简单了。所以今天我们来谈一下这个节流与防抖，争取给它重新谈出花样来????。防抖篇★防抖小故事小熊早上去找小虎玩，到了小虎家门口，小熊准备一直摁门铃吵醒小虎，所以小

2021-01-11 14:43:18 184

原创《JS玩算法系列》海王的鱼塘

这是大冰块2021年第3篇原创文章，和大冰块一起在前端领域努力吧！！！写在前面不知为什么，感觉2020年面试过程中算法题突然流行了起来，不论你是前端后端还是架构师，面试前都得先来两道算法题热热身。如果你很干脆的回答不会，hr小姐姐就会吃惊地问你：什么？身为一个前端程序员竟然不会算法？？？语气口吻就好比你的亲戚问你：不会吧不会吧！身为一个程序员不会修电脑？？？让你心跳加速脸红娇喘羞愧难当…为了避免这种尴尬的情况出现，今天趁着*领导不在*阳光正好，我们一起来摸一条某大厂中等算法题的大鱼试试看，想.

2021-01-07 16:30:06 467 1

原创《看完就懂系列》15个方法教你玩转字符串

这是大冰块2021年第2篇原创文章，和大冰块一起在前端领域努力吧！！！作为JavaScript基础数据类型，字符串具有一些很强大的方法，在平时的工作中用到的地方也特别的多，很多时候因为不熟悉某个字符串的方法，往往走了很多弯路，所以大冰块整理了15个常用又高效的字符串方法，来一起看看这15个提升工作效率的方法吧！1.字符串去除首尾空格 —— trim()说明：去除字符串两边的空白。需求场景：用户搜索前去除输入的首尾空格。用法： string.trim()例子：let str = " .

2021-01-06 16:26:53 279 2

原创《看完就懂系列》字符串截取方法substr() 、 slice() 和 substring()之间的区别和用法

字符串截取和拼接是字符串最我们最常用也是最易错的方法。主要原因是 substr() 和 slice() 和 substring()的区别看起来很乱，有很多小伙伴还不太明白。所以今天大冰块牺牲了摸鱼时间，重新整理了一遍关于这三个截取字符串方法之间的区别。首先来归纳总结一下三个方法的传参：substr()：参数一（必须）：一个整数，要开始截取字符的下标，如为负则代表从尾部开始截取。参数二（可选）：一个整数，要截取字符的数量。如果省略该参数，则默认为string.length，即当前字符串的长度。

2021-01-05 17:39:55 1514

原创 void 0 有什么意义？undefined竟然是可变的？

1，void 后需要跟表达式，表达式中的语句会全部执行。例如：void console.log("哈哈哈") // 控制台打印“哈哈哈”void alert("嘻嘻嘻") // 浏览器弹出“嘻嘻嘻”void 1+2 // 返回值是NAN，为什么呢？？？// 这是因为1+2外面没有加()，默认从左到右执行，void 1为undefined，undefined+2为NANvoid (1+2) // 返回值是undefined2，void返回值永远是undefined。例如：let a = v

2021-01-04 17:30:04 273

原创 video标签未自动播放，autoplay无效，video不能自动播放的原因分析

复习一下video标签重要的属性吧~src 要播放的视频的 URL。autoplay 如果出现该属性，则视频在就绪后马上播放。controls 如果出现该属性，则向用户显示控件，比如播放按钮，进度条等。height 设置视频播放器的高度。width 设置视频播放器的宽度。autoplay 如果出现该属性，则视频在就绪后马上播放。 controls 如果出现该属性，则向用户显示控件，比如播放按钮,进度条等。loop 如果出现该属性，视频播放结束会再次播放，即循环播放。muted 静音播放。

2020-12-18 20:16:47 5722

原创解决：NODE_ENV 不是内部或外部命令，也不是可运行的程序，或者批处理文件

1 环境win10+powershell2 问题package.json文件里要执行npm 的 script如下：(脚本的内容不需要关注，需要关注的是它的写法。）"scripts": { "dev": "NODE_ENV=dev webpack-dev-server --config ./build/webpack.dev.js" }报错如下：NODE_ENV 不是内部或外部命令，也不是可运行的程序，或者批处理文件事实上，这条脚本合并为两条命令执行，即NODE_ENV

2020-12-17 15:38:50 1284

原创 vue自定义全局过滤器filter

原理步骤如下：将filter方法暴露出来挂载在vue实例上直接使用对应的操作为：在公共方法文件夹utils内新建filters.js文件在main.js中对filters中暴露的方法进行挂在vue中在项目任意页面直接使用以时间过滤为例，代码如下：filters.js// 此文件为公共的全局过滤器// 时间戳格式化过滤器，传参如下：// value：时间戳，string，number均可// num：返回样式，默认1（1：2020/12/16）（2：2020-12-16 1

2020-12-16 16:12:56 440 2

原创 react学习之路与优秀教程&视频介绍

入职新公司直接被接手了一个react新项目,对react几乎可以说是一窍不通的我,还是硬着头皮咬着牙迎难而上了.项目的技术栈是react+umi+dva+ant design pro v4,涉及的概念还是很多的,初看官方demo项目时一脸懵逼,很多方法函数不知道从何而来,是何作用,组件的调用错综复杂,层层嵌套,官方文档初看时也觉得晦涩难懂,一度陷入怀疑自己的境地.不过皇天不负有心人,经过很长时间的摸索与筛选,我找到了很多优秀的教程,通过这些教程,总算对react有了一定的认识与了解,并且能写出点东西啦!

2020-12-01 15:17:34 272

原创无法加载文件 C:\Users\sundear\AppData\Roaming\npm\dva.ps1,因为在此系统禁止运行脚本

安装dva脚手架之后,想要查看dva版本,结果PowerShell提示:无法加载文件 C:\Users\sundear\AppData\Roaming\npm\dva.ps1,因为在此系统禁止运行脚本这是因为Windows PowerShell不允许该脚本运行,这时候我们需要在管理员账户下进行允许脚本运行的设置:以win10为例打开管理员身份运行的PowerShell之后,输入:set-ExecutionPolicy RemoteSigned这段命令作用是:更改"脚本的执行防护"我们需

2020-11-27 14:00:55 435

原创还在为js计算精度缺失迷茫？简单粗暴教你一招！

大多数语言在处理浮点数的时候都会遇到精度问题，但是在JS里似乎特别严重，比如：console.log(1.1-0.5);结果居然是0.6000000000000001，当然加减乘除之类的都会有这个问题。那这是js的错误吗？当然不是，你的电脑做着正确的二进制浮点运算，但问题是你输入的是十进制的数，电脑以二进制运算，这两者并不是总是转化那么好的，有时候会得到正确的结果，但有时候就不那么幸运了。alert(0.7+0.1);//输出0.7999999999999999alert(0.6+0.2);//

2020-11-25 13:41:18 374

原创 JavaScript中为什么“null==0“为false?? “null＞=0“为true???

JavaScript中为什么"null==0"为false而"null>=0"为truenull > 0 // null 尝试抄转型为number , 则为0 . 所以结果为 false,null >= 0 // null 尝试转为number ,则为0 , 结果为 true.null == 0 // null在设计上，在此处不尝试转型. 所以结果为false.关系运算符知和相等运算符并不是一个类别的.关系运算符，在设计上总是需要运算元道尝试转为一个numbe

2020-11-23 16:40:50 2387 2

原创 elementui上传照片超出指定张数之后，隐藏上传框

el-upload里面绑定一个占位class：:class="{hide:hideUpload}"data里面初始值：hideUpload: false,onChange里面（添加文件、上传成功和上传失败时都会被调用的那个）：this.hideUpload = fileList.length >= this.limitCount;handleRemove里面（删除文件被调用的那个）：this.hideUpload = fileList.length >= this.limit

2020-11-23 16:36:53 1731

原创 axios发送post请求500

const params = new URLSearchParams();params.append('couponNo', couponNo);axios.post('/order/addThirdAnniversaryCoupon.action',params).then((res) => { console.log(res)}).catch((error) => { console.log(error)});

2020-11-22 23:00:38 2786

原创 vue 在css 引入背景图background: url（艾特assets/img/bg.png) 报错

vue 在css 引入背景图background: url(@assets/img/bg.png) 报错 Cannot find module ‘./@assets/img/bg.png’把background: url(@assets/img/bg.png) 改为background: url(~@assets/img/bg.png)

2020-11-22 22:48:18 11758 7

原创 vue+elementui地址三级联动，附代码及中国省市区地址json文件

没什么难的东西，也没有复杂的逻辑，但是重新写可能费时间，贴出代码给大家工作中参考（复制粘贴）一下吧。template代码<el-form-item label="选择地址" label-width="100px" prop="province"> <section class="address-select-list"> <el-select class="adress-select" v-model="formAddressData.province"

2020-11-10 12:06:30 2921 1

原创 el-diolog自定义样式的问题

2020-10-16 16:54:25 300

原创 elementui表格自定义表头，template slot=“header“，表头判断监听不到数据更新的问题

代码背景：很简单的一个小功能，每一项都有一个继续或者暂停的按钮，表头有一个全部继续或全部暂停的总按钮。类似于选中和全选全不选的功能。<el-table-column align="center"> <template slot="header"> <span @click="xxx"> {{this.allBool?'全部继续':'全部暂停'}}</span > </template> <template slot-scop.

2020-08-31 16:50:38 9398 5

原创 vue中跳转刷新页面或路由，浏览器提示当前页面未保存

mounted() { // 地址跳转前拦截 window.onbeforeunload = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '关闭提示'; } .

2020-08-03 19:52:11 1399

原创 @keyup.enter.native不生效？看看@keyup.enter.native和@keyup.enter的区别和使用

vue中特殊的键盘修饰符，不必去记特定的keyCode：@keyup.13 == @keyup.enter@keyup.9 == @keyup.tab@keyup.46 == @keyup.delete (捕获 “删除” 和 “退格” 键)@keyup.27 == @keyup.esc@keyup.32 == @keyup.space@keyup.38 == @keyup.up@keyup.40 == @keyup.down@keyup.37 == @keyup.left@keyup.39

2020-07-23 10:20:21 8147 4

原创 HTML提供的5种空格实体

HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（ ‌‍）在不同浏览器中宽度各异。它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。它

2020-07-23 09:41:41 421

原创 JavaScript最常用又简单粗暴的15个数组方法

在JavaScript中，数组是一个特殊的变量，用于存储不同的元素。它具有一些内置属性和方法，可用于根据需要进行增删改查的基本操作及复杂操作。并且了解JavaScript数组方法可以提升你的开发技能。在本文中，我们将介绍15种关于JavaScript的数组方法，这些方法可以帮助你正确地处理数据。1.some（）2. reduce（）3. Every（）4. map（）5. flat（）6. filter（）7. forEach（）8. findIndex（）9. find（）10. s

2020-07-23 09:32:05 294

原创懒加载情况下，更改某一页某一条数据后，如何做到页面位置不变实时更新的4种方法

例如：我向后台请求数据，，共12条数据，每页是5条数据，一共3页，即请求3次，用懒加载实现。第一次我请求第1页，把拿到的5页数据存在dataList中，然后渲染出来。当用户拉到底部，我请求第2页数据，通过concat()方法存在dataList中，再次渲染5条数据。当用户再次拉到底部，我请求第3页数据，第3页只有2条数据，通过concat()方法存在dataList中，然后渲染在列表中。...

2020-04-30 11:54:59 1279 1

原创 git修改用户名和邮箱只要两行命令！

在Git Bash Here命令行操作：1、查看自己的当前用户名：//查看用户名$ git config user.name//查看邮箱$ git config user.email2、修改用户名和邮箱//修改用户名，“”内容自己填写$ git config --global user.name "修改后的用户名"//修改邮箱$ git config --global us...

2020-04-03 10:03:48 348

原创节流和防抖的说明和实现

在各个平台搜索“节流和防抖”，各种教程已经说的很多了，但是我之前刚接触节流和防抖的时候，还是很不理解，因为有的教程是互相引用直接复制粘贴的，看完不仅不知所以然，而且更迷茫了。其实理解之后，我们会发现节流和防抖的概念和用法是很简单的。为了避免新手小白继续踩坑，我来一个浅显的说明和简单的实现。说明节流:第一次点击立刻触发事件,此后点击时间与上次触发事件的时间大于3s才会触发就像纸条经过打孔机...

2020-01-16 12:01:08 214

原创关于APP版本号的规范和命名

在我们升级APP的时候，经常见到APP显示的版本号为：xx.xx.xx,这样的版本号有什么含义？版本号的命名有什么规范呢？如微信版本号：版本号一般是由三个数字组成，如x.y.z版本号的意义就是描述APP的版本信息，那么APP在什么时候会变更版本号，变更版本号的规范是什么呢？说明如下：如果只是修复已知bug，没有其他改动，需要更新Z位。如果新增了某些功能，但是向下兼容，需要更新Y位。如...

2020-01-08 13:22:45 1059

原创获取当前元素到页面底部的距离及其他获取距离问题

在我们进行懒加载的逻辑时，经常会遇到各种获取距离问题，比如获取当前元素到页面底部的距离，获取文档网页底部到可视区窗口距离，获取…大脑想象图形化比较困难的同学就会感觉很绕很麻烦，其实我们只需要获取到这五个值，就可以当前页面中存在的各种距离了我特意做了一张图：例如：文档底部与可视区窗口底部的距离 = 文档总高度 - 文档滚动高度 - 可视区窗口高度当前元素与底部的距离 = 文档总高度 - ...

2019-11-20 11:24:38 11908 5

原创在vue中使用echarts时使用v-if动态隐藏显示空白的问题

第一个问题：代码如下<el-button @click="tubiao">切换图表</el-button> <div id="chart1" v-if="+abc === 1"></div> <div id="chart2" v-if="+abc === 2"></div> <div id=...

2019-11-01 18:14:47 2796

原创在局域网下通过ip地址访问vue本地项目

一找到：build>>webpack.dev.conf.js把const HOST = process.env.HOST修改为：const HOST = ‘192.168.1.139’（192.168.1.139是本地电脑的ip地址）二找到：package.json把"dev": “webpack-dev-server --inline --progress --con...

2019-10-29 14:11:38 469

原创在main.js的axios中配置响应拦截器，当token值不合法直接跳转到登录页

先上代码：// 给axios配置响应拦截器axios.interceptors.response.use( function(response) { // 通过响应拦截器，直接返回 res.data console.log(response.data.code) if (response.data.code === 4002) { Vue.prototy...

2019-09-29 17:32:09 896

原创 element-ui编辑表单中的el-radio无法选择的情况

困扰了半上午的bug，表单样式及代码如下。问题是回显数据之后，当我点击其他的radio想要选择的时候，勾选不了。在网上找到了一样的bug，有解决方案，同样没有找到原因。解决方案是：原本是把从后台得到的数据res.data直接赋值给editPowerForm，现在需要先把res.data赋值给let obj，然后再由let obj赋值给editPowerForm，就可以了。还有需要注意的...

2019-08-09 11:11:32 14338 3

原创关于Error in callback for watcher “data“: “TypeError: data.indexOf is not a function“的错误

关于Error in callback for watcher “data”: "TypeError: data.indexOf is not a function"的错误说明原因：表格显示需要数组包含对象的形式，每个对象是一行数据，拿到的数据格式不对。错误例子：从后台获取数据res.data,显示在表格中。只有一条数据，六个内容，应该是一行六列，但是出现了六行六列，且都为空。报三个...

2019-07-16 11:59:02 29611 3

原创在el-table中判断三种情况，显示不同的数据

后端传来的数据是数据0，1，2。0代表未支付，1代表支付宝支付，2代表微信支付，要求动态显示在表格中 <el-table-column align="center" prop="pay_method" label="支付方式" width="150"> <template slot-scope="{row: {pay_method}}"> ...

2019-07-12 21:25:06 9298

原创在vue+element-ui中，select选项值动态从后台获取，同时将选中值的id传给后台的方法

**问题：** 选项动态从后台获取，同时要实时获取到用户选中值的id 如select框有红，黄，蓝三个值，id分别为1，2，3 用户点击红，我要获取到红的id为1 用户点击黄，我要获取到红的id为2 用户点击蓝，我要获取到红的id为3 **首先问题步骤分为三步：** 1，点击select框，发送请求到后台取到值data，动态渲染到页...

2019-07-12 19:14:11 40340 20

原创 ES6模块化export 和 import详解

在之前的 javascript 中一直是没有模块系统的，前辈们为了解决这些问题，提出了各种规范, 最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。而 ES6中提供了简单的模块系统，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。基本使用一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内...

2018-12-20 09:48:38 465

中国省市区三级联动json

空空如也