![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 67
Ly_cat
软件。一路学习,嘈嘈杂杂的勿扰~
展开
-
解决react + ant-design中Select下拉框分离随页面滚动问题
这个归根结底大概是ant-design中Select组件没有找到正确的父节点。很多方法试了并没有成功,最后用下面的方法解决了这个bug。1、在Select组件标签内添加getPopupContainer属性:2、在的上一层用包裹原创 2022-07-12 16:45:09 · 1285 阅读 · 1 评论 -
react-router-dom中的BrowserRouter和HashRouter
如果前端使用了,每次改变路由时,会向服务器发送请求,因为服务器未配置对应的路径指向对应的文件,自然导致出现的情况.(对于初始化页面,即路由为/时,不会发送请求)因此在使用需要再加一层服务器配置(node/Nginx),让前端发送的请求映射到对应的文件上.由于hashRouter会在路径上添加,而后面的所有都不会发送到服务器端,即对于服务器而言,路径依旧是,路由切换在前端完成。但是官方会更推荐使用browserRouter,貌似是因为其构建于H5的History API,比起hashRouter,它多出了更多原创 2022-06-20 15:42:09 · 1403 阅读 · 0 评论 -
redux的中间件之redux-thunk
是一个 的中间件,解决异步。主要功能 一个函数,而不是 object,会带来很大的灵活性。翻译 2022-06-17 16:22:39 · 397 阅读 · 0 评论 -
【数据格式转换】js如何将对象嵌套的数组数据取出来加到对象里,数据格式转换[{[],[]},{[],[]}] 转[{},{}]
在前后分离的大背景下,前端数据渲染过程中,有时候后端返回的数据结构并不是前端需要的格式,如果后端不处理,这个时候就需要前端自己处理。假如拿到的数据是这样的:list:[ { id: '01', name: 'saly', role: [{role_id: 1, name: "管理员", status: 1}], org: [{org_id: 1, name: "xx公司", parent_id:原创 2022-03-16 15:24:54 · 3272 阅读 · 0 评论 -
初识Reflect
ReflectReflect 是一个内置的对象,它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers 的方法相同。Reflect不是一个函数对象,因此它是不可构造的。与大多数全局对象不同Reflect并非一个构造函数,所以不能通过new运算符对其进行调用,或者将Reflect对象作为一个函数来调用。Reflect的所有属性和方法都是静态的(就像Math对象)。Reflect 对象提供了以下静态方法,这些方法与proxy handler methods (en-US)原创 2022-01-23 23:50:52 · 218 阅读 · 0 评论 -
JavaScript 防抖和节流的实现
一、防抖1. 认识防抖防抖:在第一次触发事件时,不立即执行函数,而是给出一个限定值,比如200ms,然后:如果在200ms内没有再次触发事件,那么执行函数如果在200ms内再次触发函数,那么当前的计时取消,重新开始计时应用场景:输入框中频繁的输入内容,搜索或者提交信息频繁的点击按钮,触发某个事件监听浏览器滚定事件,完成某些特定操作用户缩放浏览器的resize 事件效果:如果短时间内大量触发同一件事,只会执行一次函数。2.防抖函数的实现防抖函数的核心思路如下:当触发一个函数原创 2022-01-23 17:42:43 · 4037 阅读 · 0 评论 -
数组、对象、与Set和Map 数据结构的一些常见转换
Set1. Set 转为数组Array.from 可以将Set 结构转为数组: const items = new Set([1,2,3,4,5]); const array = Array.from(items);2. Set 实现数组去重const array = [1,20,20,3,4];const removeDuplicate = [...new Set(array)];3. 去除字符串里面的重复字符串[...new Set('abdjfjdd')].join('')原创 2022-01-18 16:20:11 · 451 阅读 · 0 评论 -
【antd-design】实例详解a-table 中column中slot-scope=“{text, record, index}
三者表示的值如下:text表示本项内容对应的字段值value,record的值是object,表示的是这一行数据的全部内容,index表示当行索引在column 中如何一个单元格显示多个变量,前面介绍了,这里就可以很清晰的知道用record可以是实现:例如我们后台返回的区域名和建筑名用> 串接起来显示在一个单元格内:a-table中:<div slot="estate" slot-scope="{text, record, index}"> <span>{原创 2022-01-12 11:38:15 · 8443 阅读 · 4 评论 -
【JavaScript原生】Object.prototype.hasOwnProperty()
Object.prototype.hasOwnProperty()hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)。用通俗的话来说就是:用来判断一个属性是定义在对象本身而不是继承自原型链的。语法obj.hasOwnProperty(prop)prop要检测的属性的 String 字符串形式表示的名称,或者 Symbol。返回值用来判断某个对象是否含有指定的属性的布尔值 Boolean。实例const obj = {原创 2021-12-12 15:34:18 · 780 阅读 · 0 评论 -
【TypeScript】TypeScript高级类型之Record
Record<Keys,Type>构造一个对象类型,其属性key是Keys,属性value是Type。被用于映射一个类型的属性到另一个类型。简单来说,TypeScript中的Record可以实现定义一个对象的 key 和 value 类型,Record 后面的泛型就是对象键和值的类型。实例比如我需要一个cats对象,这个对象里有三个不同的属性,且属性的值必须是数字和字符串那么可以这样写:interface CatInfo { age: number; breed: strin原创 2021-12-13 11:12:10 · 2864 阅读 · 0 评论 -
【Vue粒子动效插件】Vue3之vue-particles实现一个科技粒子动画登录页面,Picker It~
【Vue粒子动效插件】Vue3之vue-particles实现一个科技粒子动画登录页面,Picker It~原创 2021-12-05 11:50:31 · 4957 阅读 · 4 评论 -
【Vue EventBus】 | 实现组件间的通信&改变大屏背景颜色实践
效果:![动画.gif](https://img-blog.csdnimg.cn/img_convert/ed011cc17377ced7008436c06c9d71e8.gif#clientId=u5e5ca2d0-2607-4&crop=0&crop=0&crop=1&crop=1&from=drop&id=u4b3724fa&margin=[object Object]&name=动画.gif&originHeight=720.原创 2021-12-03 16:25:25 · 702 阅读 · 1 评论 -
JS相等判断中的运算符
js中的JS相等判断中的运算符,知识点太繁多了,如果不经常用,还真有点模糊,这是某博主总结的,直接拿来,再次学习复盘一下吧~等值检测运算符等值检测运算符说明==(相等)比较两个操作数的值是否相等!=(不想等)比较两个操作数的值是否不相等===(全等)比较两个操作数的值是否相等,同时检测它们的类型是否相同!==(不全等)比较两个操作数的值是否不相等,同时检测它们的类型是否不相同在相等运算中,应注意以下几个问题:如果操作数是布尔值,则先转换为数值,其中原创 2021-11-11 10:41:45 · 162 阅读 · 0 评论 -
【微信小程序】使用Promise 实现对wx.request()请求封装
写在前面我们在使用wx.request()请求网络操作的时候,里面的参数参数说多也不多,说少也不少,一旦请求多了,这写起来就很繁琐,而且一旦某些参数有变动,这修改起来太费事了。wx.request()是一个异步 API它的结果返回的是Promise,微信小程序基础库 2.10.2 版本起,异步 API 支持 callback &promise 两种调用方式。现在使用使用Promise 实现对wx.request()请求封装,可以帮助我们减少一些不必要的重复无用功。具体实现在小程序项目的u原创 2021-11-08 17:31:16 · 3499 阅读 · 3 评论 -
【前端开发】Array.prototype.reduce()的详细解析&使用
reduce() 的高级用法Array.prototype.reduce()reduce() 方法为数组中的每一个元素执行回调函数,并将其回调的的结果值作为返回值。语法:arr.reduce(callback(priviousValue,currentValue,currentIndex,sourceArray),[initValue])reduce 函数接收四个参数:callback:reduce得回调函数,接收四个参数:priviousValue:累加器,即上一次回调返回的值,或者原创 2021-11-07 14:57:24 · 820 阅读 · 0 评论 -
【微信小程序】页面传参实现列表中item点击跳转并传参到编辑页面
写在前面常见的需求操作:在一些页面中,我们一般会对后台请求的数据列表中的每项item进行CRUD 操作,点击对应的itme,跳转到编辑页面,并显示相应的数据,这涉及到一个很常见的操作:页面传参。下面演练实现一下上面的场景需求:发送数据端==> 列表页面:list.wxml:list.js接收数据端==> 编辑页面:edit.wxml在edit.js中onLoad中加载获取传过来的值:edit.js核心代码list.wxml: <view class="meeting原创 2021-11-06 17:40:20 · 3561 阅读 · 2 评论 -
Windows将VS Code注册添加到右键菜单面板中
写在前面之前安装vs code的时候,忘记了勾选添加到菜单面板中,导致我想要右键项目选择用vs code打开时,没有这个选项,很不方便,其中之一的方法就是卸载重装,但是我已经安装配置好了很多插件和主题,一卸载就全部没有了,太麻烦,拒绝,我不想;还有一个方法就是用.reg文件运行脚本命令将它添加到注册表里:具体操作新建文件,文件名随便,加入下面代码,并保存为以.reg为后缀名的xxx.reg文件文件代码:Windows Registry Editor Version 5.00 [HKEY_CLA原创 2021-11-05 22:25:36 · 626 阅读 · 0 评论 -
【前端开发】React+TypeScript 项目初体验
创建React + TypeScript 应用项目使用下面命令创建:比如我要创建一个叫react-typescript-demo的项目,npx react-create-app react-typescript-demo --template typescript创建成功后的目录结构如下:运行模板项目cd 进入目录,并yarn start跑起来:...原创 2021-11-01 10:22:12 · 183 阅读 · 0 评论 -
原型和原型链的理解
谈谈你对 JS 原型和原型链的理解?候选人:JS 原型是指为其它对象提供共享属性访问的对象。在创建对象时,每个对象都包含一个隐式引用指向它的原型对象或者 null。原型也是对象,因此它也有自己的原型。这样构成一个原型链。原型链有什么作用?候选人:在访问一个对象的属性时,实际上是在查询原型链。这个对象是原型链的第一个元素,先检查它是否包含属性名,如果包含则返回属性值,否则检查原型链上的第二个元素,以此类推。那如何实现原型继承呢?候选人:有两种方式。一种是通过 Object.create 或者 Ob原创 2021-10-18 17:12:53 · 149 阅读 · 0 评论 -
【JavaScript中高级进阶】推荐一个JavaScript进阶深入系列、专题系列(涉及原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等
推荐一个JavaScript进阶深入系列、专题系列,其中涉及原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等 JS 语言中的比较难懂的概念。作者写的很深如,详细,想要深入搞懂js基础原理得可以看这个,还不错~原文学习地址:JavaScript深入系列、JavaScript专题系列、ES6 系列...原创 2021-10-14 09:56:37 · 134 阅读 · 0 评论 -
【前端开发】谈谈H5的原生元素拖拽(drap& drop)事件
在原生h5 中,拖放(drag 和 drop)是 HTML5 标准的组成部分。它常用于:抓取对象以后拖放到另一个位置。一个元素的拖放的过程:选中–>拖动–>释放选中在HTML5标准中, draggable是一个全局的枚举属性,它决定了一个元素是否可以被拖动。draggable 的语法:<element draggable="true | false | auto" >true: 可以拖动;false:禁止拖动auto:跟随浏览器定义元素是否可以原创 2021-10-11 18:09:39 · 2273 阅读 · 0 评论 -
e.preventDefault()和e.stopPropagation()以及return false的作用和区别
https://www.cnblogs.com/sqh17/p/8427283.html转载 2021-10-11 10:08:09 · 467 阅读 · 0 评论 -
CSS中背景background值为data:image/png;base64的用法详解
在接手的一个项目中看到了background的url 的后面引用的是data:xxxxxxxxxbackground-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOAQMAAAAlhr+SAAAABlBMVEUqLjNSXWS1zSUzAAAAD0lEQVQI12NgwADMYIQBAACrAAd4ROv5AAAAAElFTkSuQmCC)这是什么呢?查阅资料大概了解:这是Data URI scheme。那么什么是Da原创 2021-09-28 10:06:40 · 14187 阅读 · 0 评论 -
【前端开发】Javascript中重难知识点、常见问题集合 (原型与原型链、事件委托、闭包、节流防抖、异步编程、深浅拷贝等)
文章目录闭包什么实闭包?闭包的特性闭包的优缺点变量对象作用域作用域链原型与原型链事件委托实现继承的方法This 对象的理解事件模型new 操作符操作过程闭包什么实闭包?闭包就是能够读取其他函数内部变量的函数,即指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域。闭包的特性函数内再嵌套函数;内部函数可以引用外层的参数和变量;参数和变量不会被垃圾回收机制回收;闭包的优缺点优点:能够实原创 2021-09-13 09:54:23 · 406 阅读 · 0 评论 -
【前端开发】| 浏览器的那些点点滴滴(存储方式、缓存、请求方式、url请求处理过程、渲染步骤等)
目录浏览器内核浏览器存储方式cookies , sessionStorage 和 localStorage 的区别HTTP 的请求方式场景HTTP 状态码浏览器处理过程:Cookie的优缺点浏览器缓存浏览器渲染步骤GET 和 POST 请求的区别什么是reflow导致reflow发生的原因浏览器内核浏览器内核主要分为两个部分:渲染引擎、js引擎;渲染引擎: 负责取得网页的内容(html css img …),以及计算网页的显示方式,渲染成DOM 树,然后会输出至显示器或者打印机。浏览器的内核不同对于原创 2021-09-11 11:08:42 · 425 阅读 · 0 评论 -
【前端开发】React 中父子组件之间的通信方式
文章目录一. 父组件传递子组件1. 子组件是class组件1. 子组件是function组件二. 子组件传递父组件一. 父组件传递子组件在react中父组件传递子组件中,主要的实现方式:父组件通过 属性=值 的形式来传递给子组件数据;子组件通过 props 参数获取父组件传递过来的数据;而子组件又有class子组件和function子组件,首先是class子组件:1. 子组件是class组件import React, { Component } from 'react';// 1.c原创 2021-09-03 17:09:20 · 894 阅读 · 1 评论 -
【前端开发】了解JavaScript 是如何运行的?
了解JavaScript 是如何运行的,以及的它的运行机制,首先,我们要了解浏览器的内核:浏览器内核了解过的都知道:不同的浏览器是由不同的内核组成,那么有哪些内核以及我们常用的浏览器都使用了那些内核:Gecko:早期被Netscape和Mozilla Firefox浏览器浏览器使用;Trident:微软开发,被IE4~IE11浏览器使用,但是Edge浏览器已经转向Blink;Webkit:苹果基于KHTML开发、开源的,用于Safari,Google Chrome之前也在使用;Blink:是W原创 2021-08-28 10:47:58 · 3205 阅读 · 16 评论 -
【Electron】使用Electron将web项目打包成桌面应用程序
执行打包命令:electron-packager . app --win --out sysApp --arch=x64 --electron-version 1.4.14 --overwrite --ignore=node_modules原创 2021-08-16 16:14:44 · 4735 阅读 · 4 评论 -
【前端开发】Vue + Fabric.js + Element-plus 实现简易的H5可视化图片编辑器
目录前言一 、实战效果技术选型核心功能代码实现二、Fabric.js 简介安装创建画布监听画布事件鼠标事件监听设置画布背景设置背景颜色向画布添加图层对象获取当前选中的对象控制图层层级将画布导出成图片下载为图片画布状态记录清除对象/图层清除画布前言canves 绘图的运用是前端必知必会的基础,但是canves 本身并不好用,而fabric.js是基于canves的一个绘图框架库,用起来可比canves友好多了!接下来带你看看案例和初识fabric.js~一 、实战效果编辑前:编辑中:技术选型原创 2021-11-11 10:39:55 · 10853 阅读 · 22 评论 -
Vue + element 实现动态显示后台数据到options上
需求:实现selector选择器中选项值options 数据的动态显示,而非写死的数据,我的角色ID数据如下:现在实现把这些数据请求显示option上实现如下:使用element-ui中selector 选择器:<el-form-item label="角色ID:" prop="roleId"> <el-select v-model="addUserForm.roleId" placeholder="请选择角色ID"> <el-option原创 2021-07-26 16:48:40 · 10404 阅读 · 24 评论 -
前端Vue 项目数据请求跨域问题:The value of the ‘Access-Control-Allow-Origin‘ header in the response must not be t
1. 报错问题console报错如下:Access to XMLHttpRequest at 'https://xxxxxx/system/users?totalPages=1&totalCount=1&page=1&name=&realName=&roleId=&mobile=&sex=&email=' from origin 'http://localhost:8080' has been blocked by CORS pol.原创 2021-07-24 22:23:09 · 4278 阅读 · 1 评论 -
React 系列教程
React 系列教程:学习原地址React系列(一) - 邂逅React开发React系列二 - 核心JSX语法一React系列二 - 核心JSX语法二React系列三 - 阶段案例练习React系列四 - React脚手架React系列五 - 组件化开发React系列六 - 父子组件通信React系列七 - 非父子组件通信React系列八 - 深入理解setStateReact系列九 - 受控非受控组件React系列十 - 高阶组件以及组件补充React系列十一 - React中的原创 2021-07-22 18:01:13 · 192 阅读 · 0 评论 -
【前后端分离】Springboot实现Kaptcha生成验证码、Graphics 2D随机验证码(两种样式) | 通过Vue显示到前端页面
目录一、kaptcha实现代码1. 引入坐标依赖2. CaptchaConfig3. CaptchaController4. 配置端口5. 应用程序启动入口二、Graphics 2D实现CaptchaConfig2Captcha2Controller三、前端 Vue项目Login.vuevue.config.js四、源码下载效果图:通过Graphics 2D实现:通过kaptcha实现:一、kaptcha实现代码1. 引入坐标依赖首先在Springboot项目下的pom下加入依赖坐标:原创 2021-06-09 08:43:22 · 3304 阅读 · 18 评论 -
【前端开发】代码结构及性能优化大总结
1、前端结构组织与文件命名规范前端结构组织具有如下原则:同一项目中代码的组织结构要清晰同类型文件归类到相同的文件夹中文件命名规则须统一并且命名要有意义HTML 命名规范HTML 代码所有的标签名和属性应该都为小写属性值应该用引号括起来元素的 id 与 class 按照特定规范命名代码缩进 4 个空格给 HTML 代码块添加必要注释CSS 命名规范尽量使用 class 选择器进行样式设定类命名时取父元素的 class 名作为前缀,使用-连接类名与样式之间以空格进行分割添原创 2021-06-08 11:51:47 · 5257 阅读 · 17 评论 -
【前端开发】简说Vue-router路由
目录1、认识路由SPA 和 Vue-router 路由Vue-router 路由2、vue-router基本使用安装vue-router:创建router实例挂载到Vue实例中使用路由3、动态路由路由参数传递通过params类型:通过query类型:4、获取路由参数5、嵌套路由命名路由视图6、路由导航守卫全局路由导航守卫编程式路由导航7、路由的懒加载懒加载的方式:8、vue-router钩子函数9、 route 和 router 的区别1、认识路由SPA 和 Vue-router 路由是针对 SPA(原创 2021-05-31 08:27:09 · 402 阅读 · 0 评论 -
【Bootstrap】入门Bootstrap框架,满满案例实战“开箱即用”直接cv~
前言Bootstrap 是一个全球比较流行好用的Web前端开发框架之一,它的强大之处在于它将常见的CSS布局小组件和JavaScript插件进行完整且完善的封装,即使没有经验的前端工程师和写页面样式灰常头疼的后端工程师,也能迅速掌握使用,大大的提高了开发效率。如果你不会Vue,使用Element-UI可能是有点蒙蒙的,这时候Bootstrap可能是你的另外一个选择。简单,方便,接下来,直接运用吧。安装首先,任何框架要使用它就必须得先安装它,安装有几种方式·:通过 CDN 引入<!-- 新原创 2021-05-28 18:39:03 · 788 阅读 · 4 评论 -
【1+X Web前端等级考证】浅谈前端AJAX基础知识 (中级必考)
好久没更1+X了,2021-6月将进行2021上半年的1+X web前端认证考试,基础不过关的刷起来,无论是web前端初级、中级还是高级,主要考的是基础知识,考前自己磨磨基础。官方信息网站???? 1+X Web考证信息成绩查询系统???? 工信部: 关于首批1+X证书制度试点院校名单的公告???? 1+X Web 前端开发职业技能等级标准.pdf1+X 系列导航考点知识回顾:一、 1+X Web前端中级必考 | PHP 技术与应用二、 1+X Web前端等级考证 | 详解jQuery基原创 2021-05-23 19:52:48 · 3048 阅读 · 7 评论 -
解决Vue打包后放到部署到服务器运行时出现Loading chunk * failed 错误
最近一直在捣鼓的Springboot+Vue 前后端分离项目,Vue 前端项目打包部署到Nginx 服务器访问时,点击导航栏切换一直报错:原因:路由懒加载的情况下,访问当前应用进行路由跳转时都是实时动态的从服务器上拉取相应模块的js文件,这时候我们改完代码打包上线,js文件名更换了,路由跳转的时候由于页面并未刷新,所以还是访问的原来的文件名,这是就会出现找不到模块的错误。 路由异步加载组件报错,这个错误来源 webpack 进行 code spilt 之后某些 bundle 文件 lazy loadin原创 2021-05-09 23:47:06 · 3819 阅读 · 4 评论 -
【前端开发】说说ES6核心基础中的let和const命令
目录ECMAScript 6简介Babel 转换器配置文件 .babelrcES6 let 和 Const 命令let 命令循环作用域不存在变量提升不允许重复声明块级作用域ES6 的块级作用域块级作用域与函数声明do 表达式const 命令顶层对象的属性global 对象ECMAScript 6简介ECMAScript 6.0(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。原创 2021-05-08 14:46:58 · 331 阅读 · 0 评论 -
【前端开发】 浅析入门webpack的详细构建打包过程
文章目录webpack 简介webpack 安装使用webpack管理使用一个配置文件NPM 脚本完结webpack 简介webpack官网介绍: 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。webpack有四个核心入口(entry)输出.原创 2021-05-07 18:43:01 · 474 阅读 · 4 评论