丹哥不是哥-CSDN博客

原创 vue项目eslint配置

安装必要的插件依赖例如：npm install eslint eslint-friendly-formatter eslint-loader eslint-plugin-html eslint-plugin-vue --save-dev根目录添加.eslintrc.js配置module.exports = { root: true, parser: 'vue-eslint-parser', parserOptions: { ecmaVersion: 2018,

2021-06-24 11:44:53 298

原创 vue项目中eslint告警关闭

关闭控制台打印warning: Expected 1 line break before closing tag (</div>), but 2 line breaks found (vue/multiline-html-element-content-newline)在.eslintrc.js文件中添加以下代码即可'vue/singleline-html-element-content-newline': 'off','vue/multiline-html-element-conten

2021-06-24 11:41:02 3301

原创分页查询中，整除问题处理

问题描述有个导出数据功能，超过500条就自动转为发送邮件给操作人，但是某位操作人操作很多次都无法收到邮件。通过直接调接口测试，发现增加某个条件之后就可以导出，排除账号问题，缓存问题，以及日志当中没有记录报错的问题。找了很久，后来发现，每次导出不发邮件的数据总条数都是1000的整数倍，也是巧了。。。。后来查看后端日志发现，当总条数为1000的整数倍N的时候，会请求N+1次，导致后端数据返回为null，循环添加列表时，没有捕捉到空指针异常，导致程序终端而没有记录。解决方式在计算请求次数时，避免出现整除处

2021-06-01 14:08:56 307

原创 import-html-entry本地下载之后windows编译出错问题记录

错误：‘rm’ 不是内部或外部命令，也不是可运行的程序或批处理文件。[email protected] build:lib D:\payment-module\import-html-entry-masterrm -fr ./lib && BABEL_ENV=lib babel ./src --out-dir ./lib --ignore ‘src//tests//*.js’‘rm’ 不是内部或外部命令，也不是可运行的程序或批处理文件。解决方案rm -fr

2021-05-21 14:05:15 1426

原创 Vue给img标签动态绑定src不展示的问题

解决方案data中的数据加上require()即可<img v-for="(item, index) in emojiComp" :src="item" class="emoji"/>// dataemojiComp: [require('@/assets/statusIcon/cry.png'), require('@/assets/statusIcon/frown.png'), require('@/assets/statusIcon/meh.png'),require('

2021-04-09 16:12:42 654

原创前端JavaScript数据处理常用工具

丹哥的工具箱将base64的图片url数据转换为Blob生成guid获取带参数地址中的参数对象判断字符串是否是JSON字符串复制到粘贴板当前之间XXX之前/之后（举一反三）日期格式化处理日期反转去除所有空格去除首尾空格cookie增删改去除文本中的表情包格式化字符串中的内容(举一反三)判断是否包含html判断是否是正整数队列的封装栈的封装统一处理利率为4位；大于4位保留到最后一位非零按照一定间隔分割数组定时器管理方案是否是中国身份证号将base64的图片url数据转换为Blobfunction bas

2021-04-08 17:45:27 445

转载 [转载]javaScript中半角和全角的判断与相互转换

转载自：https://segmentfault.com/a/1190000009457684js判断输入的文字是全角还是半角？str="中文;；ａ" alert(str.match(/[\u0000-\u00ff]/g)) //半角 alert(str.match(/[\u4e00-\u9fa5]/g)) //中文 alert(str.match(/[\uff00-\uffff]/g)) //全角 js对全角与半角的相互转化全角转换为半角funct

2021-03-18 10:50:04 346

原创 js拦截所有请求

function listen() { var origin = { open: XMLHttpRequest.prototype.open, send: XMLHttpRequest.prototype.send } XMLHttpRequest.prototype.open = function(a, b) { // console.log('open'); // this.addEventListener('loadend', onReadyStateCh

2021-03-10 10:34:04 10051 9

原创获取dom节点xpath &&通过xpath返回dom节点

html结构<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equ

2021-03-09 17:02:31 1724 5

原创使用vue-cli和element-ui快速搭建后台管理系统

使用vue-cli和element-ui入门实践1. 环境配置安装node从Node官网下载对应平台的安装程序https://nodejs.org/en/在window上安装时要注意：选择全部组件，包括勾选Add to Path。安装完成后，在window环境下，打开命令行窗口，然后输入node -v，如果安装正常，可以看到输出如图所示：2. 安装vue-cli参考文档https://cli.vuejs.org/zh/npm install -g @vue/cli目前按照这种方式安装应

2021-01-14 18:17:22 963

原创 Vue-cli中使用sharedworker & websocket

搞了两天google和百度都搜不到完整解决方案，只能靠自己啦~~~还好搞出来啦！！！！开心呢~希望对你有帮助安装worker-loader参考：https://github.com/webpack-contrib/worker-loadernpm install worker-loader --save-dev配置vue.config.js chainWebpack: (config) => { config.module .rule('worker')

2020-12-08 23:27:16 1953

原创 input type=file 同一个文件做两次上传操作，第二次无效解决方法

问题使用input[type=file] 实现文件上传功能，通过onchange事件触发js代码，这个时候第一次上传是完全没问题的，当你第二次上传文件时，如果是不同于上一次上传文件的话是可以正常上传的，不过如果你选择的还是上一个文件，也就是两次上传的文件重复了，那么就会上传失败。原因input是通过onchange事件来触发js代码的，由于两次文件是重复的，所以这个时候onchange事件是没有触发到的。最佳解决方案读取文件后，记得把input的value重新设置为空即e.target.value

2020-11-04 12:13:31 6613 1

原创阿里云ECS服务器CentOS8环境下LAMP配置和Wordpress安装

文章目录官网复杂教程部分矫正（仅供参考）1.登录云服务器2.部署环境3.安装和配置WordPress4.发布博客阿里云ECS服务器博客搭建简单安装教程官网复杂教程部分矫正（仅供参考）使用Apache作为后端服务器，并在云服务器上创建一个MySQL数据库用来存储数据，系统为CentOS8。1.登录云服务器默认已购买ECS服务器，并且已更改目标实例密码，且系统已安装OpenSSH工具在终端输入以下命令，连接远程服务器。（123.123.123.123是ECS服务器的公网IP地址）ssh root@1

2020-10-15 15:46:05 2076 10

原创 mod_auth_mysql.c:269:10: fatal error: mysql.h: No such file or directory

阿里云服务器搭建云上博客的时候：输入指令：yum -y install httpd httpd-manual mod_ssl mod_perl mod_auth_mysql报错：No match for argument: mod_auth_mysqlError: Unable to find a match: mod_auth_mysql想着mod_auth_mysql应该是没有安装，就各种搜索找到了下面的文章：CentOS 7下httpd-2.4.6的mod_auth_mysql安装及配

2020-10-13 21:09:20 7798 15

原创前端面试问题集锦---CSS篇

CSS基础目录CSS选择器的优先级是怎么样的？link和@import的区别？CSS选择器的优先级是怎么样的？CSS选择器的优先级是：内联>ID选择器>类选择器>标签选择器到具体的计算层面，优先级是由A、B、C、D的值来决定的，其中它们的值计算规则如下：A的值等于1的前提是存在内联样式，否则A=0B的值等于ID选择器出现的次数C的值等于类选择器和属性选择器和伪类出现的总次数D的值等于标签选择器和伪元素出现的总次数比如下面的选择器，它不存在内联样式，所以A=0，不存在id

2020-09-30 14:51:59 164

原创前端面试问题集锦--HTML篇

目录doctype的作用是什么？标准模式，怪异模式，近乎标准模式的区别是什么？HTML、XHTML、XML有什么区别什么是data-属性你对HTML语义化的理解HTML5与HTML4的不同之处有哪些常用的meta标签src和href的区别？说说img的srcset的作用是什么？还有哪一个标签能起到跟srcset相似作用？script标签中defer和async的区别前端存储的方式有哪些？上述存储方式的区别是什么？doctype的作用是什么？DOCTYPE是html5标准网页声明，且必须声明在HTML文

2020-09-29 21:02:15 161

原创 JavaScript小纸条

JavaScript六种主要类型：stringnumberbooleannullundefinedobjectJavaScript内置对象：StringNumberBooleanObjectFunctionArrayDateRegExpError

2020-08-26 16:45:51 125

原创 [数据结构与算法][JavaScript]队列-先进先出

JavaScript中的队列的实现function Queue() { var items = [] //enqueue 从队列尾部添加一个元素 this.enqueue = function(item) { items.push(item) } //dequeue 从队列头部删除一个元素 this.dequeue = function() { return items.shift()

2020-08-17 19:48:36 172

原创 [Vue][面试]你了解哪些vue性能优化的方法

你了解哪些vue性能优化的方法答题思路：根据题目描述，这里主要探讨Vue代码层面的优化路由懒加载keep-alive缓存页面使用v-show复用DOMv-for遍历避免同时使用v-if,实现方式举例<template> <ul> <li v-for="user in activeUsers" :key="user.id">{{user.name}}</li> </ul></te

2020-08-17 15:40:59 590

原创 [Vue][面试]谈谈你对MVC、MVP和MVVM的理解

谈谈你对MVC、MVP和MVVM的理解答题思路：此题涉及知识点很多，很难说清楚，说透彻，因为MVC，MVP这些我们前端程序员自己甚至都没用过。但是恰恰反映了前端这些年从无到有，从有到优的变迁过程，因此沿此思路回答将十分清除。Web1.0时代在web1.0时代，并没有前端的概念。开发一个web应用多数采用ASP.NET/Java/PHP编写，项目通常由多个aspx/jsp/php文件构成，每个文件中同时包含了HTML、CSS、JavaScript、C#/Java/PHP代码，系统整体架构可能如下图所

2020-08-17 15:39:23 555

原创 [Vue][面试]谈一谈对vue的设计原则的理解

谈一谈对vue的设计原则的理解思路：在vue官网上写着大大的定义和特点：-渐进式JavaScript框架-易用、灵活和高效渐进式JavaScript框架：与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的但应用提供驱动。易用性：vue提供数据响应式，声明式模板语法和基于配置的组件系统等核心特性。这些使我们只需要关注应用的核心业务即可

2020-08-17 15:37:46 532

原创 [vue][面试]谈一谈对vue组件化的理解？

谈一谈对vue组件化的理解？思路：组件化定义，优点，使用场景和注意事项等方面展开陈述，同时要强调vue中组件化的一些特点。#####源码分析1：组件定义源码位置：src/core/global-api/assets.jsvue-loader会编译tempalte为render函数，最终导出的依然是组件配置对象。#####源码分析2：组件化优点lifecycle.js-mountComponent()组件、Watcher、渲染函数和更新函数之间的关系#####源码分析3：组件化实现构造函数，

2020-08-17 15:36:58 1013

原创 [Vue][面试]你怎么理解vue中的diff算法？

你怎么理解vue中的diff算法？#####源码分析1：必要性，lifecycle.js–mountComponent()vue中一个组件一个watcher实例，而组件中可能存在很多个data中的key的使用，为了精确地知道更新过程中到底哪里发生了变化，必须使用diff算法#####源码分析2：执行方式，patch.js–patchVnode()patchVnode是diff发生的地方，整体方案：深度优先，同层比较#####源码分析3：高效性，patch.js–updateChildren()算

2020-08-17 15:36:15 699

原创 [Vue][面试]你知道Vue中key的作用和工作原理吗？说说你对它的理解。

你知道Vue中key的作用和工作原理吗？说说你对它的理解。源码追溯：src/core/vdom/patch.js-updateChildren()结论1.key的主要作用是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。2.另外，若不设置key还可能在列表更新时引发一些隐藏的bug3.vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是

2020-08-17 15:35:17 2363

原创 [Vue][面试]v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？

v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？Vue源码追溯阅读位置：compiler/codegen/index.js 64行结论1.显然v-for优先于v-if被解析（原因为源码中可以看到先执行v-for再执行v-if）2.如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能3.要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环...

2020-08-17 15:30:10 1047

原创 [Vue][面试]Vue组件data选项为什么必须是个函数而Vue的根实例则没有此限制?

Vue组件data选项为什么必须是个函数而Vue的根实例则没有此限制?源码追溯：src\core\instance\state.js–initData()函数每次执行都会返回全新data对象实例结论Vue组件可能存在多个实例，如果使用对象形式定义data,则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制，也是因

2020-08-17 15:27:49 188

原创 [数据结构与算法][JavaScript]栈--后进先出

JavaScript中的栈的实现function Stack() { var items = []; //使用数组存储数据 //push方法向栈里压入一个元素 this.push = function(item){ items.push(item) } //pop方法把栈顶的元素弹出 this.pop = function(item) { return items.pop(

2020-08-17 15:11:54 459

转载 js判断一个字符串是不是json格式

因为JSON.parse()有特例JSON.parse('123'); // 123JSON.parse('{}'); // {}JSON.parse('true'); // trueJSON.parse('"foo"'); // "foo"JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]JSON.parse('null'); // n...

2020-03-03 11:01:26 4067

原创 Added non-passive event listener to a scroll-blocking 'mousewheel' event.告警

问题：Chrome 提醒：[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive.原因：详解：https://www.cnbl...

2020-02-19 17:09:21 7804 5

原创 element-ui组件select选择器无法显示选中的内容的问题记录

这里写自定义目录标题问题描述发现解决办法原因问题描述element-ui组件表单中某个select选择器无法显示选中的内容的，其他的select，都可以，就新添加的不行。发现网上查找之后，找到下面链接的解决办法，升级版本的省略，强制this.$set()方法也不行，https://segmentfault.com/q/1010000009295579后来发现，是在data()中没有初始...

2019-12-17 11:55:56 1345

原创基于vue-cli3开发组件库---从新建文件到npm发布

文章目录安装vue-cli3并创建一个Vue项目在项目中添加组件库文件夹添加配置文件编写组件在页面中使用组件查看组件调用效果库模式打包发布到npmnpm中查看库在其他项目中引用组件库安装vue-cli3并创建一个Vue项目这部分就不用讲啦，官网上有详细的过程，我使用的主要指令为：全局安装vue-clinpm install -g @vue/cli创建一个vue项目vue create...

2019-11-29 16:43:03 873

原创 element el-tree树组件，回绑数据问题

问题：树组件使用setCheckedKeys方法回绑数据时，如果只绑父级，子级有时候会选中，有时候不会选中。解决方法：找到父级下的所有子级使用setCheckedKeys方法，并每个都绑定，才能成功绑上。原因：？？？待解答...

2019-11-04 16:20:26 1852

翻译报错unexpected side effect in computed properties

https://stackoverflow.com/questions/53757107/handling-unexpected-side-effect-in-computed-properties-vuejs以上为参考链接修改前：<template> <select v-model="selected"> <option v-for="key ...

2019-06-03 18:16:48 26119 5

原创 javaScript一个数组对象根据另一个数组排序

直接上代码：var list = [ {name:'上海',code:'shanghai',}, {name:'西安', code:'xian'}, {name:'深圳', code:'shenzhen'}, {name:'北京', code:'beijing'}];list.sort((a,b)=>{ let order=['beijing',...

2019-05-31 11:01:11 6742

原创前端笔记---7.javascript基础（内置对象，常用方法及应用）

JavaScript 基础内置对象创建对象的几种方法自定义构造函数new关键字instance of内置对象MDN如何学习一个方法？Math对象---静态对象Date对象---构造函数Array对象创建数组对象的两种方式检测一个对象是否是数组toString/valueOf数组常用方法清空数组的方法基本包装类型String对象字符串的不可变创建字符串对象字符串对象常用的方法内置对象创建对象的几...

2019-05-29 14:56:50 202

原创前端笔记---6.javascript基础（作用域，对象，简单类型与复杂类型）

JavaScript 基础作用域全局变量和局部变量块级作用域作用域链对象为什么要有对象什么是对象JavaScript中的对象对象字面量对象创建方式对象字面量new Object()方法创建对象工厂函数创建对象属性和方法对象的使用遍历对象的属性删除对象的属性delete简单类型和复杂类型栈和堆内存模型基本类型在内存中复杂类型在内存中基本类型作为参数复杂类型作为参数案例：冒泡排序分析作用域作用域：...

2019-05-09 20:38:41 246 1

原创前端笔记---5.javascript基础（函数，代码规范）

JavaScript 基础函数为什么要有函数什么是函数函数的定义函数的调用函数的参数函数的返回值arguments的作用代码规范作业目标函数及其应用函数为什么要有函数如果要在多个地方求1-100之间所有数的和，应该怎么做？什么是函数把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用函数的作用就是封装一...

2019-05-08 12:25:27 223

原创前端笔记---4.javascript基础（数组）

JavaScript 基础数组为什么要学习数组数组的概念数组的定义获取数组元素数组遍历在数组中新增元素案例学习目标数组及其应用数组为什么要学习数组之前学习的数据类型，只能存储一个值(比如：Number/String。我们想存储班级中所有学生的姓名，此时该如何存储？数组是一种数据类型，可以存储很多项，有一定的顺序，很多项的集合，就叫数组。 Array数组的概念所谓数组...

2019-05-07 14:03:06 214

原创前端笔记---3.javascript基础（流程控制）

学习目标：JavaScript流程控流程控制流程控制是编程语言与其他语言区分的一个标识，流程控制指的是，我们写的代码是如何去执行的。顺序结构代码从上到下依次执行，就是顺序结构。程序默认就是从上倒下顺序执行的。Created with Raphaël 2.2.0开始语句1语句2结束分支结构根据不同的情况，执行不同的代码又叫选择结构Created w...

2019-05-06 15:25:05 153

原创前端笔记---2.javascript基础（操作符）

JavaScript 基础2表达式和语句表达式语句操作符算术运算符一元运算符逻辑运算符布尔类型的隐式转换关系运算符赋值运算符运算符的优先级学习目标：JavaScript中的操作符表达式和语句表达式一个表达式可以产生一个值，有可能是运算、函数调用、字面量等等。表达式可以放在任何需要的地方。比如： 5+6语句语句可以理解为一个行为，循环语句和判断语句就是最经典的语句。一个...

2019-04-29 15:59:38 344

凸起银行卡卡卡号字体

数字以及字母数据集，包含mnist图片数据集

Angular1.X中遇到的问题