- 博客(50)
- 收藏
- 关注
原创 微信公众平台上传和预览图片
1、在index.html中引入js文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js2、通过config接口注入权限验证配置,进行微信认证:wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,企业号的唯一标识,此处填写企业号corpid time
2022-03-23 19:43:18
1373
原创 IE中添加cookie
谷歌浏览器中可以通过application进行cookie的添加,打开IE发现在IE浏览器中并没有application这个东西,如何在IE浏览器添加cookie?解决方案:在控制台运行这条命令:document.cookie = "cookie_name=cookie_value";比如我需要添加session,可以运行:document.cookie = "SESSION=xxxxxxxx";刷新浏览器后,添加成功,亲测有效...
2021-10-08 20:18:57
1636
原创 Vue.$set()如何对二维数组进行更新
我们在处理vue项目的时候,可能经常会遇到数据变化,但是视图并没有实时渲染的情况,主要有两种情况1、使用索引值操作数组时使用索引值去更新数组时会出现数据变化试图却没有更新的情况,比如使用了push()、pop()、shift()、unshift()、splice()、sort()、reverse()等方法操作数组,或者是直接通过ary[index]操作数组都会出现这种情况2、对象的增加或者删除属性时由于 Vue 会在初始化实例时对属性执行getter/setter转化过程,所以属性必须在..
2021-09-28 20:09:36
3552
原创 el-table多级表头再加一列无法添加表头的问题
在项目中使用el-table,是一个多级表头table,有一个需求需要新开一列添加一个类似于在表格中加Checkbox的一列,我在最外层el-table-column,并排加一列,发现table-body中都可以加上,表头无法添加上。解决方案:1、你可以使用原生js去获取到这个表头元素,没记错的话貌似是一个class为cell的div下,然后使用document.getElementsByClassName去操作添加。这样直接操作不推荐!2、在仔细查询文档后发现elementui官网上是有提供属
2021-09-22 20:46:32
544
原创 Vue报错——did you register the component correctly? For recursive components, make sure to provide the
今天项目中遇到一个大坑,项目报错did you register the component correctly? For recursive components, make sure to provide thethe "name" options,报错很容易理解,就是组件注册的方式不对,没有注册成功,仔细看了自己组件的注册,发现并没有什么问题在网上找了很久,一无所获,偶然看到一篇博客的评论,受到了启发。评论区是这样说的:多次调用的组件使用import引入,可以让name不和父组件冲突解决方式.
2021-09-22 20:28:15
88340
12
原创 vue插值表达式如何将\n转义为换行
在项目中遇到一个渲染问题,渲染的内容中有个\n字符,\n表示转义,使用插值表达式进行渲染时发现,渲染的内容不会换行只是用空格将内容分开解决方案:使用white-space属性<div class="text-wrapper"> {{ text }}</div><style scope> .text-wrapper { white-space: pre-wrap; }</style>p
2021-09-22 20:14:38
2525
2
原创 后端传递数据过大,导致精度丢失的问题
今天在项目中遇到一个数据渲染的问题,有一个itemId的字段数据渲染时发生错误,数据为1010500100000301720,但是渲染上来发现是1010500100000301700,于是在控制台打印出返回结果,发现打印结果也是1010500100000301700,很奇怪,于是在Network和postman中依次将接口返回数据打印出来,发现都是1010500100000301720,这就很奇怪了,第一反应是在后续的代码中将返回结果值进行了修改(以前也遇到过,因为返回的是引用数据类型,很容易在后面不知不觉
2021-03-17 16:08:00
1381
原创 react项目中使用less
在react项目中使用less:1.首先安装less和less-loader:npm install less less-loader --save-dev2.还需要在webpack中进行配置:运行npm run eject,运行完毕后项目中会多出一个config的文件夹找到webpck.config.js,大约50行的位置添加less代码:// 新加lessconst lessRegex = /\.less$/const lessModuleRegex = /\.module
2021-03-16 16:09:45
1775
原创 antd中table内添加checkbox踩坑记录
table是一些管理系统经常需要使用的组件,如果想要在table中同时操作多项,可能需要在前面添加checkbox,今天在项目终于到一个坑,使用的是antd组件库,但是在按照官网的例子引入时,发现点击其中某一行的checkbox,会将所有行的checkbox同时选中在查阅官方文档后,发现有一个selectedRowKeys属性,文档上说selectedRowKeys需要和onChange 进行配合进行配合使用,onChange方法有两个参数function(selectedRowKeys, select
2021-03-15 17:09:54
3980
2
原创 antd在table中使用Dropdown怎么获取当前行的数据
今天在项目中使用到antd的Dropdown组件,搭配table一起使用,效果如图:希望在点击复制或者删除时能够获取到当前行的数据,通过查阅antd中table的api可知,Column有个render属性这里的record就可以获取到当前行的数据,问题在于如何将render中的record传递给Dropdown在查阅资料后,发现两种方法1.将Dropdown封装成一个组建,然后将数据传递给自组件,在子组件中打印this.props.data就可以获取当该值了<RiskD
2021-03-02 16:36:11
3542
原创 js如何判断两个数组是否相等
今天在实现一个需求的时候,需要去判断两个数组是否相等,看似简单的问题,实则还挺复杂。首先我们知道数组是引用数据类型,在==或者===比较时,比较的是其地址值,所以[1,2] == [1,2] [1,2] === [1,2] 二者输出的都是false,那么如何比较两个数组是否相等呢1. toString()或者join():它们的原理都是将二者转换成字符串,针对某一些数组可以进行判断,如:[1,2,3].toString() === [1,2,3].toString() 和 [1...
2021-02-25 16:56:56
8998
4
原创 react+antd项目打包报错踩坑记录
今天在把一个react+antd项目打包部署到测试环境中,运行npm run eject将webpack的配置暴露时报错:This git repository has untracked files or uncommitted changes:在百度一番后发现了原因,是因为 git没有提交解决:1.运行git add . 2.然后git commit -am “Save before ejecting”之后你再运行npm run eject,就可以正常的将webpack暴露出...
2021-02-23 14:42:52
643
原创 express存储session时打印出undefined
在项目中使用node写接口,在写登录功能的时候,有一个验证码登录,写了一个生成验证码的接口,登录思路是:前端这边将用户名,密码和验证码传过来,后端生成的验证码存在session里面,请求过来就去session里面查验证码是否正确因为登录功能还没有写好,所以现在postman里面测接口,但是出现了问题:验证码正确的情况下也是一直显示验证码不正确,把session打印出来发现并没有存入的验证码,在网上搜索后,有人说是express跨域导致session丢失的问题,但是修改跨域后仍然无法解决问题,在和
2021-02-09 14:21:18
524
原创 antd可展开table的expandedRowRender的全部展开问题
在项目中使用到了可展开的table,再将antd中的代码迁移到自己项目中后,发现了一个bug:官网中的例子是每行单独展开,互不干扰的,但是我在引用代码后,发现我无论我点击哪个,所有的行都会展开,开始我以为是代码粘贴的错误,检查一番后,发现没有问题于是去阅读了一番table的api,展开功能的expandable下有个expandedRowRender控制展开的行于是我将record打印出来,发现点击展开时,他会将所有的行数据都打印出来,而同样的操作打印官网的例子,则不是,在查了一些资
2021-02-08 18:31:17
11036
4
原创 antd之RangePicker设置默认值
今天在项目中有使用到日期选择框,在antd中选择了一个可以选择起始时间和结束时间的日期选择框RangePicker有个需求是需要将当前时间和当前时间的前一天作为它的默认值,期间遇到了很多bug,在一番修改和csdn后终于修改好了,特此记录一下首先翻看一下antd中日期选择框的api,它有一个defaultValue的属性,如果是RangePicker的话,他是接受一个数组作为参数,分别作为起始和结束的时间默认值有点坑的地方在与我刚开始没看懂这里的moment[],是啥意思,它这里需要传入mo
2021-01-29 18:55:58
6866
原创 node解决跨域问题
今天在写一个vue/node的项目中遇到了跨域问题,所谓跨域,即是浏览器的安全策略机制导致的,无法访问不同源的资源,同源包括:协议,端口,端口号我采用的是cors来解决:1. 安装依赖,npm install cors --saveconst express=require('express')const cors = require("cors");const app = express();app.use(cors()); //在这一步解决跨域,node内置的cors帮助我们解决.
2021-01-25 10:04:35
381
原创 在react中使用codemirror
codemirror使用JavaScript为浏览器实现的多功能文本编辑器。codemirror作用:专门用于编辑代码,并带有实现更高级编辑功能的多种语言模式和附加组件codemirror的官网:https://codemirror.net/ (全英文的)react-codemirror的官网:https://www.npmjs.com/package/react-codemirror2安装:npm install codemirror --save如果你是在react使用的话,建.
2021-01-20 16:53:51
7153
9
原创 node-sass版本报错
今天在项目中使用到的sass,在安装完sass-loader时,运行项目报错Module build failed: TypeError: this.getResolve is not a function at Object.loader在网上搜索一番后发现是sass-loader版本太高的原因,我装的是8.0.0的版本,卸载后安装一个低版本的再运行,项目正常运行,具体操作:1. npm uninstall sass-loader2.npm install sass-loader@7.3.1.
2021-01-19 21:48:15
323
原创 js作用域和作用域链
js作用域和作用域链的理解 作用域: js作用域分为全局作用域、函数作用域和ES6新增的块级作用域。 作用域是一个独立的空间,让变量不会暴露出去,不同作用域下的同名变量不会起冲突。 函数作用域内定义的变量只能在函数中调用,外界无法访问到,但是因为ES之前没有块级作用域,所以会导致if和for这样的逻辑语句中的变量会被外界访问到。 ES6中新增let和const命令来创建块级作用域,所声明的变量在指点块的作用域外无法..
2020-11-25 09:36:18
229
原创 js数据类型
JS中的数据类型基本数据类型numberstringbooleannullundefinedsymbolbigint引用数据类型object普通对象数组对象正则对象日期对象Math数学函数对象…function数据类型检测typeof 检测数据类型的逻辑运算符(typeof返回的结果永远是一个字符串(字符串中包含了对应的类型))typeof检测原理:typeof基于计算机底层数据 类型的值(二进制)进行检测。typeof的缺陷:无法具
2020-11-24 19:24:41
89
原创 纯css实现三角形
纯css实行三角形1)将元素的宽高都设置为0。2)只设置border属性。3)把任意三条边隐藏掉(颜色设为 transparent),剩下的就是一个三角形。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2020-11-23 16:20:33
255
原创 css外边距塌陷问题
CSS外边距塌陷问题CSS外边距塌陷问题主要有兄弟元素和父子元素的外边距塌陷:兄弟元素:解决方法:给其中一个div一个父级的div,并设置overflow:hidden(BFC原理)浮动/display:inline-block/绝对定位的元素不会与垂直方向上的元素发生外边距塌陷。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name
2020-11-22 15:58:57
415
5
原创 vue中唯一key
Vue中的唯一keyVue 中 key 的作用是:key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速。利用唯一key来获取对应节点,比遍历更快。Vue中的virtual DOMvirtual DOM是将真实的DOM的数据抽取出来,以对象的形式模拟树形结构,最终经过一系列操作将其映射到真正的环境中。操作真实DOM元素开销很大,容易引起整个DOM树的重绘和回流,在Vue的底层实现上,Vue将模板编译成虚拟DOM渲染函数,再转换成虚拟DOM,虚拟D
2020-11-20 17:14:37
1842
原创 浏览器的事件循环机制
浏览器事件循环事件循环机制浏览器事件循环机制:js任务分为同步任务和异步任务,同步任务会直接进入js主线程执行,形成一个执行栈,当前一个任务执行完,后一个任务才会执行。异步任务不直接进入主线程,它会先在Event Table中注册回调函数,然后进入任务队列中,等执行栈中为空后,任务队列中的函数就会进入主线程中执行。异步任务分为宏任务(script, setTimeout, setInterval)和微任务(process.nextTick (node.js中进程相关的对象), Promise..
2020-11-19 17:19:31
537
1
原创 js继承
js继承原型链继承:将子类的原型指向父类缺陷: 1. 因为子类通过prototype对父类实例化继承了父类,所以父类上的引用类型的属性会被所有实例共享,其中一个实例改变它的值,其他实例中的值也会发生改变。 2. 在实例化子类时,是无法向父类传递参数的,实际上应该是说无法在不影响所有对象实例的情况下,给父类构造函数传递参数。functions Son() {}functionFather() {}Son.prototype = new Father();S..
2020-11-19 17:03:30
82
原创 Vue中的keep-alive
keep-alivekeep-alive 是 Vue 内置的一个抽象组件,可以使被包含的组件保留状态,避免组件反复创建和渲染keep-alive一般结合路由和动态组件一起使用,用于缓存组件。<keep-alive> <component :is='current'></component></keep-alive>keep-alive提供 include 和 exclude 属性,两者都支持字符串或正则表达式, include 表示
2020-11-19 16:45:18
83
原创 Vue插槽
Vue插槽什么是插槽?插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。默认插槽默认插槽就是指没有名字的插槽,子组件未定义的名字的插槽,父级将会把 未指定插槽的填充的内容填充到 默认插槽中。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <me
2020-11-19 16:27:42
151
原创 v-model的实现原理
v-model的实现原理Vue中,在input框中使用v-model能够实现数据的双向绑定,其实v-model其实是个语法糖,实际上做了两件事。绑定vlaue值触发输入事件input<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
2020-11-19 11:11:36
1331
原创 display:none和visibility:hidden
display:none和visibility:hidden的区别和联系: 联系:二者都是设置元素不可见 区别: display:none会使元素从整个DOM树中消失,渲染的时候不占据空间。设置了visibility:hidden的元素仍然在DOM树中占据空间,只是元素不可见。 display:none会使页面发生回流,visibility:hidden只是使此元素发生重绘。 display:none是非继承属性,子孙元素消失是因为父元素在DOM在中
2020-11-18 16:59:57
1222
原创 div的水平垂直居中
div的水平垂直居中定位+margin:auto(子元素未知宽高不能实现水平垂直居中)<style> .out { width: 200px; height: 200px; background-color: yellow; position: relative; } .in { width: 100px; height: 100px; background-color: g..
2020-11-18 16:56:45
61
原创 Vue组件间的通信
Vue组件间的通信组件间的通信总共有六种方式props(父组件向子组件传值)和$emit(子组件向父组件传值)父组件向子组件传值:props<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
2020-11-18 16:44:06
114
原创 new Object()中的new做了什么
New的执行: 创建一个空对象 把这个对象.--proto-- == 构造函数.prototype 将构造函数执行 把构造函数内的this指向实例对象 如果构造函数没有返回值或者返回值是一个基本数据类型,那么就返回构造函数的实例,如果返回的是引用数据类型,那么把这个引用数据类型返回。 ...
2020-11-17 17:19:16
495
原创 js中的undefined和null的区别和联系
undefined和null: undefined和null都是基本数据类型,且他们都只有一个值,分别为undefined和null。 undefined表示变量声明了但是没有定义,null表示的是空对象指针,null主要用于一些赋值给一些可能会返回对象的变量,作为初始化。 null == undefined为true,null === undefined为false。 Number(null) === 0,Number(undefined) === NaN,null和u
2020-11-17 16:52:19
130
原创 js中==和===的区别
==和===的区别和一些比较规则: == 在比较类型不同的变量时,会进行数据类型转化,将二者转换成数据类型相同的变量,再进行比较。 NaN == NaN false NaN和任何数都不相等,包括NaN本身 。 [] == [] false {} == {} false 引用数据类型比较的是地址。 undefined == null true 但是 undefined === true false (因为数据类型不一样)。 对象 == 字符串 将对象转换成字符串
2020-11-17 15:19:36
12006
原创 js垃圾回收机制
js具有自动垃圾回收机制,js垃圾回收机制是为了防止内存泄露,会寻找到那些没有被引用的内存块,释放掉他们的内存,js垃圾回收有两种方式:标记清除,引用计数。 标记清除:JavaScript中最常用的垃圾收集方式是标记清除,当变量进入执行环境(函数中声明变量)的时候,垃圾回收器将其标记为“进入环境”,当变量离开环境的时候(函数执行结束)将其标记为“离开环境”,在离开环境之后还有的变量则是需要被删除的变量。标记方式不定,可以是某个特殊位的反转或维护一个列表等。 垃圾收集器给内存中的所有变量都加上标记,
2020-11-17 14:07:38
105
原创 箭头函数和普通函数的区别
箭头函数和普通函数的区别 箭头函数没有自己独立的作用域,箭头函数没有自己的this,所有箭头函数中的this指向和它外层函数中的this指向一致。 使用call和apply等方法也无法改变箭头函数内的this指向。 箭头函数不能当做构造函数来使用,也就是说不能使用new命令。(因为箭头函数内没有this和prototype) 不可以使用arguments对象,该对象在函数体内是不存在的,可以使用ES6中的展开运算符(...args)。 箭头函数不可以使用yiel
2020-11-17 11:19:13
87
原创 var,let,const的区别
var,let,const的区别: var可以重复定义,let和const不能重复定义。 var存在变量提升,let和const不存在变量提升,如果要使用,需要提前定义 用var定义的变量会被挂载到window上,let和const定义的不会。 let和const出现的代码块会变成块级作用域,并出现暂时性死区。 ...
2020-11-17 11:11:31
109
原创 MVC和MVVM
MVVM和MVCMVC指的是Model-View-Controller,Model表示数据层,View表示视图层,Controller:控制器层,数据模型和视图之间通信的桥梁,通常控制器负责从事图读取数据,控制用户输入,并向模型发送数据。View 接受用户交互请求View 将请求转交给Controller处理Controller 操作Model进行数据更新保存数据更新保存之后,Model会通知View更新View 更新变化数据使用户得到反馈MVVM指的是M
2020-11-17 09:45:55
270
原创 computed和watch
Vue中的computed和watch用二者来实现两个输入框内容的拼接:效果:watch的使用watch监听,一般用于监听某些属性,发生改变后触发一些回调,watch支持异步,当需要在数据变化时执行异步或者开销较大时可以使用watch。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>通过watch监听文本框数据的改变<
2020-11-17 09:16:20
156
原创 v-if和v-show
v-if和v-show的区别和使用场景v-if是通过控制DOM节点存在与否来控制节点的显示和隐藏的,v-show是通过设置DOM元素的display样式来控制元素的显示和隐藏的,如果显示display为block,隐藏display为none。v-if会确保在切换过程中条件块内的监听器和子组件会被适当的销毁和重建,和v-show则简单的多,只是简单的基于css切换。v-if是惰性的,如果初始条件为false时,则啥也不做,只有当条件为true时,才开始渲染条件块,而v-show不管在什么条件下都会渲
2020-11-16 22:25:15
77
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人