bug收集-CSDN博客

原创快速Get Mobx6 的新语法

目前 MobX 已经更新到 6.X 了，相比于之前有了极大的简化，去掉了之前版本的装饰器风格写法，主要原因是装饰器在现在的 ES 规范中并不成熟，而且引入装饰器语法也会增加打包后的代码体积。1 、Mobx6 的新语法老版本：import {observable, action,makeObservable} from'mobx'class count{constructor() {makeObservable(this)}@observa...

2021-09-26 11:18:44 688

转载 Emmet插件: 提高效率的必备“神器“

工欲善其事，必先利其器本文推荐Emmet插件，HTML/CSS代码快速编写"神器"~~，快来和我一起学习吧一、快速编写HTML代码1. 初始化HTML文档需要包含一些固定的标签，比如<html>、<head>、<body>等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键：<!doctype html><html lang="en"><head...

2021-06-15 16:11:38 227

转载 TypeScript中，抽象类和接口的区别

现在，对于TypeScript的使用越来越多，而要用TypeScript进行开发，不仅是语法上的不同，更是思想上的不同。今天，就来分享下TypeScript中，抽象类与接口的特性及其区别；这是JavaScript中没有提及的概念。所以，更要对其了解，才能更好的在项目中应用它们。目录：1.什么是抽象类？1.1 抽象类的特性！2.什么是接口？2.1 接口的特性！3.抽象类和接口的区别？1. 什么是抽象类？抽象类，顾名思义，即类的抽象,从面向对象的角度来...

2021-06-03 09:27:25 1463

转载 Vue中的renderless 非渲染组件

面试中遇到的一个问题，什么是 renderless ？renderless即非渲染组件开发的思想，请看下文01什么是 render 函数众所周知，在工程中，我们会在.vue文件中定义<template>、<script>和<style>三种tag，分别盛放组件html、javascript和css。<template><button class="mood"> {{ state ? ...

2021-06-02 10:54:43 835

原创你不知道的undefined？

面试时，经常会被问到对undefined的理解？本文, 针对undefined做了超详细的总结，请仔细看哦~~1、undefined 即是一个原始数据类型，也是一个原始值。2、undefined 是全局对象上的一个属性 window.undefined。console.log( window.undefined );// undefined3、不可写 writable: falsewindow.undefi...

2021-06-02 10:09:57 1161

原创你真的知道『立即执行函数』吗？

立即执行函数，经常使用，但是你确定了解它嘛？下面，就来看看吧！1、定义立即执行函数，又称IIFE.ImmediatelyInvokedFuncationExpression 立即地调用（函数表达式）注：是函数表达式2、定义函数的两种方式1、函数声明// 函数声明 !== 函数表达式function test(){ console.log('Function de...

2021-06-02 10:03:02 176 2

转载 0.1+0.2为什么不等于0.3

面试时，经常会被问到 0.1+0.2 结果是多少呢？知道结果，肯定不是0.3请看下图：可原因就不太清楚了，本文就来讨论下原因：在于在JS中采用的IEEE 754的双精度标准，计算机内部存储数据的编码的时候，0.1在计算机内部根本就不是精确的0.1，而是一个有舍入误差的0.1。当代码被编译或解释后，0.1已经被四舍五入成一个与之很接近的计算机内部数字，以至于计算还没开始，一个很小的舍入错误就已经产生了。这也...

2021-06-02 09:57:14 560

转载 JS中文档碎片的理解和使用

本文将要探讨： js中对于文档碎片的理解与使用1、我们要明白当js操作dom时发生了什么？每次对dom的操作都会触发"重排"（重新渲染界面，发生重绘或回流），这严重影响到能耗，一般通常采取的做法是尽可能的减少dom操作来减少"重排"2、什么是文档碎片？document.createDocumentFragment()一个容器，用于暂时存放创建的dom元素3、文档碎片有什么用？将需要添加的大量元素时...

2021-06-02 09:52:51 197

原创 flex 布局中，所有子项高度变成一致了，如何保持子项自身高度

在做移动端项目时，使用了flex布局后，所有的子项高度变成了一致问题：在flex布局中，如何保持子项自身高度原因： Flex 布局会默认：把所有子项变成水平排列。默认不自动换行。让子项与其内容等宽，并把所有子项的高度变为最高子项的高度。解决方案：直接在flex容器上，将align-items设为 flex-start,或者align-items属性的其他值都可以,子项就会保持其自身的高度了。作者：doubleyong博客：bugshouji.c...

2021-04-16 11:00:33 12647 1

原创 vue项目中使用axios 请求，报431错误（Request Header Fields Too Large）错误

背景：在vue项目过程中，后台将权限数据一起放在token 中，导致token 过大，后台将请求头部的最大值设置为40M , 在axios请求过程中，报：431（Request Header Fields Too Large）错误原因：虽然，后台已经设置了请求头部的最大值。但是，我们在用vue-cli 脚手架开发过程中，是使用脚手架自带的服务，去启动的项目，所以，需要给脚手架启的服务，设置请求头部的最大值。注：打包后，页面为静态页面，需要在运行此页面的服务器上，重新设置请求头部的最大值。解决方案：参考：ht

2021-04-01 14:45:30 8863 4

原创 axios 传数组参数及对象的方法

在vue项目中，使用axios 传参，参数为数组的传递方式问题一：传递数组解决方案：使用qs.stringify() 方法，进行转换，根据你想到的形式，设置arrayFormat的值 .1、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })// 输出结果：'a[0]=b&a[1]=c'2、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brack...

2021-03-30 16:18:16 2192

转载 Axios post 传参报400错误，error ：Required Integer[] parameter ‘copyIDs‘ is not present spring boot

在vue 项目中，使用axios 调用后端接口，报类似下面的错误：Required Integer[] parameter 'copyIDs' is not present spring boot 请求中包含数组参数解决方案：将下面链接的内容，给后端看看，让他修改一下，即可；前端看不懂，直接给后端看下面的文章。大概意思就是把传的参数写到实体类中链接：https://blog.csdn.net/leisure_life/article/details/82590912内容如.

2021-03-30 15:45:21 406

原创将vue的dist文件夹打成app 的方法及注意事项

目标： vue的dist文件夹打成app安装包(android)方法： 1、下载软件：hbuildx 2、hbuildx 将dist文件夹打包成app安装包的图解步骤参考：https://my.oschina.net/u/3692129/blog/4471258 3、下载，测试 (如遇问题，欢迎留言)注意事项： 1、 dist文件夹中的index.html页面打开显示空白需要在vue.config.js 中，设置 pu...

2021-03-18 16:48:42 826

原创 Promise顺序输出面试题，给你答案求原因？快来围观

最近遇到一道面试题，运行出来的答案和想象的有点不一样。大家一起来看看答案，想想原因呢？面试题： Promise.resolve() .then(() =>{ console.log(0) return Promise.resolve(4) }) .then(res =>{ console.log(res)}) Promise.resolve() .then(() ...

2021-03-16 21:21:25 1316

原创 vue中{{}} 如何解析出textarea换行符

问题：vue中,将textarea进行v-model绑定后，在使用pw_ 显示时，换行不生效，直接显示成空格代码：<div> {{summary}}</div><textarea v-model="summary" cols="30" rows="10"></textarea> 解决方案：在展示的div添加样式.pre-line {white-space: pre-line;}&

2021-03-15 16:57:41 1516

原创 React中使用fetch请求mock接口的坑，快避雷

问题：在React 项目中，使用fetch 请求mock 接口时，报如下错误：you need to enable javascript to run this app访问，其它接口，都是正常的原因：查阅了相关文档才发现：fetch不支持mock接口解决方案：要支持请使用fetch-mock，来请求mock接口具体方法：安装 npm install fetch-mock导入 import fetchMoc

2021-03-12 16:22:02 1278

原创快速理解宏任务与微任务

前端高频面试题：宏任务(macro-task)与微任务(micro-task) 概念理解宏任务和微任务都是我们在开发工作中经常用到的。macrotask 和 microtask 表示异步任务的两种分类。宏任务一般是：包括整体代码script，setTimeout，setInterval、I/O、UI render。微任务主要是：Promise、Object.observe、MutationObserver。 &n

2021-02-23 21:18:55 312

原创 ES6 之reduce的基本介绍与使用

现在ES6语法应用的特别广泛，今天我们就来介绍下ES6中的reduce方法，它的用法非常强大，下面就跟着我一起来学习它吧 01 基本介绍定义：对数组中的每个元素执行一个自定义的累计器，将其结果汇总为单个返回值形式：array.reduce((t, v, i, a) => {}, initValue) 参数callback：回调函数(必选)initValue：初始值(可选)callback回调函数的参数

2021-02-05 09:34:28 385 1

原创理解Object.defineProperty方法

经常听到使用Object.defineProperty 数据劫持，它是如何实现劫持的呢？除了数据劫持还可以做啥呢？今天，就来详细认识一下它 01 语法 Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象语法：Object.defineProperty(obj, prop, descriptor) 参数：obj：需要定义属性的

2021-02-04 10:06:00 185

原创 Object.assign() 详解

今天，我们来看看 Object.assign() 方法如果你已经知道此方法，可以看看下面的题，想想 v5 的输出结果如果你不知道这个方法，可以跳过，先看看下面关于 Object.assign() 方法的介绍 const v1 = 123;const v2 = '123';const v3 = true;const v4 = function test() {};const v5 = Object.assign({},v1,v2,v3,v4);conso

2021-02-03 13:07:19 572

原创 Object.create() 详解

01 分析语法：Object.create(proto[,propertiesObject])参数proto创建对象的原型，表示要继承的对象propertiesObject(可选 )也是一个对象，用于对新创建的对象进行初始化注：Object.create(null) 创建的对象是一个空对象，在该对象上没有继承 Object.prototype 原型链上的属性或者方法如图：我们来看看底层实现Object.create = function (o) {...

2021-02-03 12:45:56 27561 7

原创【算法】javascript 递归实现 reverse(s) ，将字符串倒置

前端的一道面试题，关于：“编写一个递归版本的 reverse(s) 函数,以将字符串s倒置。”01、分析功能：字符串s倒置（倒序）方法：递归分析：若将字符串"hello",实现倒置；先将每一位放到倒数第一位，然后，将第一位放到倒数二，依次交换，直到倒数位和第一位为同一位结束；如下：var str = "hello"; //olleh elloh 第一位，放到倒数第一交换4 lloeh 第一位，放到倒数第二交换3 loleh ...

2021-01-24 20:14:49 689

原创【算法解析】js 树形数据转扁平数据

在项目开发过程中，都会遇到树形数据结构与扁平数据结构的转换。下面分享一下，树形数据结构转扁平数据结构的方法01、数据结构树形数据结构[{id:1, pid:0, name:'沃尔玛', childrens:[ {id:2, pid:1, name:'生鲜区', childrens:[ {id:4, pid:2, name:'鱼'}, {id:5, pid:2, name:'牛肉'} ]}, {id:3, pid:1, name:'.

2021-01-18 16:58:16 1313

原创【算法解析】js 扁平数据转树形数据

在项目开发过程中，都会遇到树形数据结构与扁平数据结构的转换。今天就分享一下，扁平数据结构转树形数据结构的方法01、回顾数据结构扁平数据结构[{id:1, pid:0, name:'沃尔玛'}, {id:2, pid:1, name:'生鲜区'}, {id:3, pid:1, name:'日用品区'}, {id:4, pid:2, name:'鱼'}, {id:5, pid:2, name:'牛肉'}, {id:6, pid:3, name:'卫生纸'}, {id:7, pid:3, .

2021-01-18 16:53:12 573

原创【ps小技巧】内容识别, 1分钟去掉图片上的文字

在做项目中，很多时候需要对于素材进行处理，比如：去掉图片上的内容，只要图片PS的内容识别适用于图片的背景颜色比较单一、颜色不复杂的图片。操作步骤如下：step 1第一步：使用ps打开图片step 2第二步：选择左边工具栏的第二个工具：选框工具，使用选框工具里面的矩形选框工具。step 3第三步：选择好要进行内容识别的区域step 4第四步：选择上面的任务栏的编辑项——选择填充（快捷键：Shift+F5，如果没有反应，使用s...

2021-01-13 20:53:20 5592

原创 bootstrap 中使用modal模态框遮罩颜色加深

背景：使用 bootstrap + jQuery 做一个后台管理系统，采用load 方法去加载页面。问题：部分页面中的模态框，多次点击显示后，模态框颜色加深，具体说明：学生管理中的添加模态框，直接点击没有问题，但是去班级管理中点击添加模态框后，在点添加学生模态框，就会出现这个问题。代码实现，直接复制的bootstrap中的模态框的示例，取消时，直接使用 hide 方法进行隐藏代码如下：<!-- Butto

2021-01-07 13:32:53 1114

原创 jQuery的load()方法页面显示空白，没有内容

项目中，使用jquery中的load方法加载页面，一直不能实现。页面显示空白，也不提示错误。代码如下：$("#box").load("html/userInfo.html",function(response,status,xhr){　console.log(xhr);});控制台，打印发现页面数据请求是成功的。环境：hbuilderjquery.3.5.1 解决方法：最后，换了一个开发工具，使用WebStorm就可以了

2021-01-05 10:25:03 1115 3

原创 web app 中物理返回键的监听

使用Vue + Vant 进行web app 的开发，需要处理 android 自带的物理返回键，对不同页面，点击物理返回键进行不同的处理那如何监听到物理返回键，并进行相应的处理？ app网页返回键 vs 手机物理返回键网页上的返回键是返回上一个页面的意思，手机上的返回键是返回上一个操作。并且手机上的返回键还有很多其它功能，在使用某些软件可以双击返回键退出app Vue 中监听物理返回键

2020-12-29 11:49:49 386

原创 amimate.css 的使用分享

Animate.css 中文网：http://www.animate.net.cn/英文网：https://animate.style/ 使用步骤： 1、下载animate.css开源社区下载：https://daneden.github.io/animate.css/ 2、引用animate.css<link rel="stylesheet" href="animate.min.css"> 3、使用老版本使用

2020-12-26 21:02:14 365

转载 web app 中如何调用支付宝app 进行支付

项目是vue+vant框架写的前端页面，利用HbuilderX将项目打包成APP的。在应用里调用支付宝APP进行支付的时候，需要用到html5plus函数里面的payment属性。首先看看HTML5+是什么？HTML5+是中国HTML5产业联盟的扩展规范，基于HTML5扩展了大量调用设备的能力，是的web语言可以像原生语言一样强大！如何使用原生APP中调起支付宝APP的功能呢？具体操作步骤：1、在需要调用该属性的组件里，先定义plusReady方法： plusReady () {...

2020-12-22 10:17:38 1287

原创 div 或 span 的高度比 img 的高度要多3px。如何解决？

问题：如果将一个 img 放在 div 或 span 里面，你会发现在img下面无端端的就多出3px的空白出来。padding、margin、border都设为0，无效！那么怎么解决这个问题呢？代码：<div class="pic"> <img src="/images/1.jpg"/></div><span> <img src="/images/2.jpg"/></span>原因：异步更新队列

2020-12-19 15:41:04 441 1

原创 Vue 数据修改出现异常，不是预想的效果

在做移动端app时，修改购物车的过程中，逻辑如下：购物车数量相减1判断如果数量减1后，如果为0删除此条数据问题：上一条数据为0，下一条数据为1时，进行删除后，下一条数据，也变成了0代码如下：this.checkProdcutList[index].num--;if(this.checkProdcutList[index].num==0){ this.checkProductList.splice(index,1);}原因：异步更新队列Vue中数据与视图的显示是双向的, 数据显示

2020-12-10 16:36:51 225

原创 [Vue warn]: Computed property “totalPrice“ was assigned to but it has no setter.

问题：在Vue项目中出现如下错误提示：[Vue warn]: Computed property "totalPrice" was assigned to but it has no setter. (found in <Anonymous>)代码：<input v-model="totalPrice"/>原因：v-model命令，因Vue 的双向数据绑定原理，会自动操作 totalPrice，对其进行set 操作而 totalPrice 作为计...

2020-12-10 11:28:51 1595

原创 CSS3框阴影只在一个方向？巧用外spread-radius外延值

问题：只想让盒子在一个方向上有阴影，如向下的阴影分析： x方向不偏移，设置y方向的偏移，且加上模糊值。代码如下：box-shadow:020px20px#000000;结果：x轴方向还是阴影，怎么办呢？这时，就可以巧用spread-radius外延值, 来消除x轴方向的阴影。查看文档发现：spread-radius，设置对象的阴影外延值。可以为负值，模糊值设置，让盒子扩展了20px , 可以将外延值，设置为负，让水平方向阴影取消代码如下：box-shadow:02...

2020-11-30 14:40:16 796

原创如何利用google浏览器来截取网页长图

如何利用google浏览器来截取网页长图的方法介绍（不同浏览器方法不同）1. 打开要截取的网页地址，如：书签酷2. 右键，选择 “检查”3. 按“ctrl + shift + p”, 将会弹出一个命令输入框4. 输入“cap”, 点击 "Capture full size screenshot"5. 等待文件下载即可，完成后，会在左下角进行提示(注：因图片比较大，有时等待的时间会比较长，请耐心等待)图片：tip.jpg[删除]作者：doubleyong公众号：bu...

2020-11-30 11:25:08 721

原创 React 技术整合贴

解决react项目中event对象打印的值为nullhttp://bugshouji.com/mybug3/t1225解决项目打包内存溢出问题http://bugshouji.com/mybug3/t1057用React+antd实现简单Select 下拉多级联动；http://bugshouji.com/mybird/t1248react 设置代理(proxy) 实现跨域请求http://bugshouji.com/sharebird/t1275react + Ant Design 实现table表格分页

2020-11-11 10:52:59 115 2

原创 vue 知识整合贴

vue-cli3脚手架的配置以及使用https://www.cnblogs.com/XCWebLTE/p/9546756.htmlVue-Cli3 如何配置全局生产环境及开发环境等信息http://bugshouji.com/bbs-read-run?tid=916在vue-cli3.x中配置代理和环境变量http://bugshouji.com/bbs-read-run?tid=611vue调试工具vue-devtools的使用http://bugshouji.com/shareweb/t529vue里r

2020-11-10 10:39:11 159

react 结合 redux/toolkit 实现权限管理

WPF DEMO 集

NSIS processwork.dll

空空如也