自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(64)
  • 收藏
  • 关注

原创 去除对象中各个字符串的前后空格

【代码】去除对象中各个字符串的前后空格。

2024-01-24 09:49:10 401

原创 封装可多选的组件(Autocomplete)

自称世界上最受欢迎的React UI组件库(能看到这里的基本用法应该都清楚了,我就不重复了)

2023-11-28 11:03:32 408

原创 小球无规则移动(动画参数AnimationParameters)

本功能主要是用到了animation属性--参数有以下几种速度(Speed):动画速度控制动画所需要的时间,可以从快到慢,或者相反。常见的有“缓动”(easing)、逐帧(frame by frame)和逐帧变速(frame by frame acceleration)等。时长(Duration):动画的结束时间点,时长的设定会直接影响到动画的效果。形式(Form):形式控制着动画的变化趋势,即动画的变化是先加快,还是缓慢、然后加快,或者是一直处于一种状态。

2023-11-16 16:06:32 168

原创 文件流转换成需要的文件格式(固定套路)

【代码】文件流转换成需要的文件格式(固定套路)

2023-10-31 15:33:16 178

原创 Java稀疏数组

当一个数组中大部分元素为0,或者为同一值的数组时,可以使用稀疏数组来保存该数组。稀疏数组的处理方式是:记录数组一共有几行几列,有多少个不同值把具有不同值的元素和行列及值记录在一个小规模的数组中,从而缩小程序的规模如下图: 左边是原始数组,右边是稀疏数组初始化左边的数组// 创建一个二维数组 6 * 7 0代表没有赋值// 这是增强for循环 将array1里面的值直接赋值给ints从二维数组变成稀疏数组// 声明一个变量 用来记录上面二维数组中一共有多少个值。

2023-08-04 17:24:51 878

原创 前期自学Java之Arrays篇及JDK帮助文档的下载

由于数组对象本身并没有什么方法可以提供给我们调用,但API中提供了一个工具类Arrays供我们使用,从而可以对数组对象进行一些基本的操作Arrays类中的方法都是static修饰的静态方法,在使用的时候可以直接使用类名进行调用,而“不用”使用对象来调用(注意:是“不用”而不是“不能”)

2023-08-04 14:37:50 136

原创 工作中处理数组对象的经典方法

后端返回一个数组对象 前端需要将数组对象中符合条件的一些对象放在数组对象前面去。今天在工作中遇见一个问题。

2023-08-03 20:24:31 98

原创 前期自学Java的基础部分总结(二)

在java中,一个没有方法体的方法应该定义为抽象方法,而类中如果有抽象方法,该类必须被定义为抽象类接口就是一种公共的规范标准,只要符合标准,大家都可以通用Java的接口更多的体现在对行为的抽象2.2 接口的特点接口用关键字interface修饰 publiceinterface接口名{}类实现接口用implements表示 publice implements 接口名{}接口不能实例化接口如何实例化呢?参照多态的方式,通过实现类对象实例化,这叫接口多态。

2023-08-02 21:10:53 238

原创 使用IDEA时,鼠标光标变成白色矩形怎么解决

这种情况据说是覆盖模式 其效果就是会覆盖当前被选中的代码 使原本可快捷创建的符号只能一个一个敲 特别折磨人并且还有一个特别恶心的地方就是 没办法下一行 也就是按enter键没有用。今天在工作中 不知道按到什么键导致鼠标的光标变成了如下图的样子。

2023-07-20 16:35:13 2282

原创 前期自学Java的基础部分总结

类的定义步骤:1.定义类2.编写类的成员变量3.编写类的成员方法public class 类名{// 成员变量变量1的数据类型 变量1;变量2的数据类型 变量2;...// 成员方法方法1;方法2;...构造方法是一种特殊的方法作用: 创建对象//格式public calss 类名{修饰符 类名(参数){// 功能: 主要是完成对象数据的初始化。

2023-07-14 16:44:46 185

原创 两分钟了解TS(常用基础类型)

常用基础类型将 TS 中的常用基础类型分为两类 JS 已有类型 原始类型:number/string/boolean/null/undefined/symbol 对象类型:object(包括,数组、对象、函数等对象) TS 新增类型 联合类型 自定义类型(类型别名) 接口 元组 字面量类型 枚举 void any 等 注意

2023-07-13 15:09:30 287

原创 给后台管理系统加水印(react)

【代码】给后台管理系统加水印(react)

2022-09-15 10:10:01 568 1

原创 防 XSS 攻击

由于后端有可能返回给前端的数据是带标签的格式的,此时我们就需要使用<div dangerouslySetInnerHTML={{___html:content}} />将标签都去掉,但是伴随着就会出现一个问题,那就是会受到XSS攻击XSS攻击人们经常将跨站脚本攻击(Cross Site Scripting)缩写为CSS,但这会与层叠样式表(Cascading Style Sheets,CSS)的缩写混淆。因此,有人将跨站脚本攻击缩写为XSS。XSS攻击通常指的是通过利用网

2021-12-14 22:03:34 281

原创 封装Keep-alive实现组件缓存

目标路由切换时,组件只是隐藏,而不要销毁,以达到缓存的目的。思路通过路由来实现,封装一个自定义路由,来实现即可实现原理:在切换路由时,让页面不卸载,而是通过 display none 隐藏掉。这样,因为页面没有卸载,所以原来所有的操作都会被保存下来。 将来再返回该页面,只需要 display block 展示即可。这样,就可以恢复原来的内容了背景知识1.Switch之外的Route中如果设置了children属性,且值是函数,此时,这个函数一定会执行;<Route pat

2021-12-14 21:09:07 855

原创 提升TS实力的知识

枚举-基本使用目标掌握枚举类型的使用定义enum,枚举。它用来描述一个值,该值只能是 一组命名常量 中的一个没有type之前,用枚举比较多,现在用的少了。枚举的功能类似于字面量类型+联合类型组合的功能,也可以表示一组明确的可选值格式定义格式enum 枚举名 { 可取值1,可取值2,.. }说明: 使用 enum 关键字定义枚举 一般约定首字符大写 使用格式枚举名.可取值示例// 定义枚举类型enum Direction { Up

2021-11-25 19:31:48 572 1

原创 redux-中间件与redux调试工具

redux-中间件-理解中间件:middleware。用来在不损害原功能的前提下,引入额外的代码来拓展功能。Redux 中间件中间:在 dispatch action 和 到达 reducer 之间图示没有中间件:dispatch(action) => reducer。用来发起状态更新使用中间件:dispatch(action) => 执行中间件代码 => reducer。 dispatch() 就是 中间件 封装处理后的 dispatch,但是,最终一定.

2021-11-25 19:07:47 196

原创 React发ajax请求拿数据的五个步骤(绝对实用)

一 .在需要数据的组件里用useEffect和dispatch调用请求import React, { useEffect } from 'react'import { useDispatch, useSelector } from 'react-redux'import { getChannels } from '@/store/actions/channel' //没有这个组件稍后会创 const dispatch = useDispatch() //写在函数组件里//获取

2021-11-20 19:43:59 1689 1

原创 React 路由使用的基本

基础步骤第一步下安装包。npm i [email protected]这个包提供了三个核心的组件:HashRouter, Route, Link(上个月刚刚出了6.0还不是很稳定,稳定了再用哈)第二步导入包,并使用。import { HashRouter, Route, Link } from 'react-router-dom' 第三步使用Link指定导航链接使用Route指定路由规则(哪个路径展示哪个组件)路由三大对象之-RouterR.

2021-11-19 22:18:52 199

原创 React 项目启动的准备工作

一. 创建项目 使用 React CLI 搭建项目:npx create-react-app geek-pc 进入项目根目录:cd geek-pc 启动项目:npm run start 调整项目目录结构: /src /assets # 项目资源文件,比如,图片 等 /components # 通用组件 /pages # 页面 /utils # 工具,比如,token、axios 的封装等、...

2021-11-17 20:50:47 655

原创 React hooks知识总结

使用React 你永远避不开的就是hooksHook 概览 – React 这里是官方介绍 下面 我会按照自己的理解与总结 介绍HooksHooks按照官方说法 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。主要作用 :为函数组件提供状态、生命周期等原本 在Class 组件中才提供的功能注意点 :Hooks 只能在函数组件中使用可以理解为通过 Hooks 为函数组件钩入 class 组...

2021-11-16 19:50:02 843

原创 关于React中函数组件中父子组件函数执行顺序

今天突发奇想 用了React怎么久还没有写过关于函数组件里useEffect在组件的执行顺序 下面我会按照自己的一些想法介绍 创作不易 望大家多多支持 点赞我们需要探讨的就是 在父组件嵌套多层子组件的情况下每个组件里useEffect与页面渲染顺序 以及在修改父组件或子组件时 的执行顺序以下是我的测试代码import React, { useState, useEffect } from 'react'import ReactDOM from 'react-dom'functio..

2021-11-16 19:43:46 781

原创 在新项目中安装并使用eslint

一、 在项目中安装eslint包(1) 下载eslint包我们在一个新项目中需要使用eslint的时候,我们需要先下载eslint的包npm i eslint -D(2)在根目录进行eslint的初始化配置npx eslint --init备注:1. npx 是 npm v5.2 版本新添加的命令,用来简化 npm 中工具包的使用2. 没有npx之前:2.1. 全局安装npm i -g create-react-app 2.2. 在通过脚手架的命令来创建 Reac

2021-11-15 18:07:39 1443

原创 React的传值 父传子 注意点

父组件传值给子组件的一个过程 在哪个生命周期能获得props的值呢?今天写代码时突然回想起这一个注意点 所以来出来大家说一说 大家请看如下代码父组件中给子组件传值然后子组件调用 大家可以猜一下 哪一个地方可以打印出props的值呢不买关子 大家看在第一次渲染时子组件是获取不到 props的值的 只有在更新阶段才能拿到props的值所以一些刚刚入门React的大家注意了 父组件传值给子组件 第一次可能是拿不到值的并且你们也可以看到 子组件挂载阶段走完后 又走...

2021-11-13 23:15:51 1353

原创 React Hooks进阶的操作跟详解

useEffect发送请求 目的: 能够在函数组件中通过useEffect发送ajax请求 格式:// 正确使用useEffect(() => { // 定义一个函数 async function fetchMyAPI() { let url = 'http://something/' + productId let config = {} const response = await myFetch(url) } ...

2021-11-12 18:50:30 990

原创 react中hooks的使用方式

作用: 为函数组件提供状态、生命周期等原本 在Class 组件中才提供的功能Hooks 只能在函数组件中使用可以理解为通过 Hooks 为函数组件钩入 class 组件的特性第一个hooks:useState使用useState为函数组件提供状态const [count, setCount] = useState(初始数据)count:状态值(state) setCount: 修改该状态的函数useState-回调函数格式2useState((上一次的值) => { ret

2021-11-11 23:22:11 201

原创 路由间有哪些跳转方式

1、<router-link to="需要跳转的路径">2、this.$router.push()跳转到指定的 url,并在 history 中添加记录,点击回 退返回到上一个页面3、this.$router.replace()跳转到指定的 url,但是 history 中不会添加记录, 点击回退到上上个页面4、this.$touter.go(n)向前或者后跳转 n 个页面,n 可以是正数也可以是负数...

2021-11-10 21:33:03 415

原创 react的组件通讯的使用方法详解

拓展:使用vscode的代码片段快速录入组件基本结构组件通讯介绍介绍组件通讯组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据。 在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能。 而在这个过程中,多个组件之间不可避免的要共享某些数据 为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通。这个过程就是组件通讯。三种方式父子组件之间 兄弟组件之间 跨组件层级注意: 组件中的状态是私有的,也就是说,组件的状态只能在...

2021-11-08 20:39:43 137

原创 整理Vuex 的出现解决了什么问题

以下三个问题: 1.多个组件共享状态时,单向数据流的简洁性很容易被破坏: 2.多个视图依赖于同一状态。 3.来自不同视图的行为需要变更同一状态。

2021-11-07 16:12:55 468

原创 整理Vuex 的数据传递流程

被问可以这么说: 当组件进行数据修改的时候我们需要调用 dispatch 来触发 actions 里面的 方法。actions 里面的每个方法中都会 有一个 commit 方法,当方法执行的时候 会通过 commit 来触发 mutations 里面的方法进行数据的修改。 mutations 里面 的每个函数都会有一个 state 参数,这样就可以在 mutations 里面进行 state 的 数据修改 ,当数据修改完毕后,会传导给页面。页面的数据也会发生改变数据传递流程个过程的...

2021-11-07 15:42:08 573

原创 整理Vuex 的 Mutation 和 Action 之间的区别

我们可以从以下三个方面对两者进行分析:第一点 => 流程顺序“相应视图--->修改State”拆分成两部分,视图触发Action,Action再触发Mutation。第二点 => 角色定位基于流程顺序,二者扮演不同的角色。Mutation:专注于修改State,理论上是修改State的唯一途径。Action:业务代码、异步请求。第三点 => 限制角色不同,二者有不同的限制。Mutation:必须同步执行。Actio...

2021-11-07 15:19:11 252

原创 resct的组件化概念及使用方法

React 组件介绍目标了解 React 组件的意义组件对特定功能的封装,主要用来对UI进行拆分。内容结构 HTML样式 CSS逻辑 JS特点独立 可复用 可组合分类基础组件:指input、button这种基础标签,以及antd封装过的通用UI组件 业务组件:由基础组件组合成的业务抽象化UI。例如: 包含了A公司所有部门信息的下拉框 区块组件:由基础组件组件和业务组件组合成的UI块 页面组件:展示给用户的最终页面,一般就是对应一个路由规则Reac

2021-11-07 14:24:43 336

原创 对VueX知识初步的整理与解析

对Vuex的初步认识 在认识Vuex之前,我们应该对Vue的使用有了基本的认识跟使用。在Vue中我们学习到了组件化,组件之间的数据传递主要有父传子,子传父跟兄弟传递。但是有些数据我们需要频繁传递或者很多组件中有相同的数据,这时我们一般用EventBus(事件总线)进行集中管理,而EventBus就充当了个组件中间共同的事件中心,今天我们学习的Vuex是官方专门为Vue开发的一种开发模式也可以说是库一.为什么要学习Vuex? 由于Vue是单向数据流,子组件内部不能直接修改从...

2021-11-06 22:17:52 206

原创 对react的初步认识以及安装eslint

React 介绍 React 是用于构建用户界面的 JavaScript 库 构建用户界面. User Interface,对咱们前端来说,简单理解为:HTML 页面 javscrtipt库。不是框架,是库。 vue: 是渐进式的javascript框架 react 全家桶是框架 react: 核心库 react-dom: dom操作 react-router:路由, r...

2021-11-05 22:05:46 961

原创 打包优化简介

项目开发完成打包 : 用webpack做打包(把.vue, .js, .less ------> .js, .css, .html) 在项目中都会提供命令: npm run build 打包优化: 在保证功能可用的前提下,让我们的文件尽可能小 在保证功能可用的前提下,让我们的页面显示出来的速度更快一些 打包之后,会得到dist目录,如果希望可以双击打开index.html,则需要提前在vue.config.js中配置:vue.config.js中{

2021-10-29 22:48:44 280

原创 动态添加路由及分配按钮权限

目标: 学习vue-router对象中的addRoutes,用它来动态添加路由配置思路: 用户能访问到的页面(路由配置)必须是动态的, 所以要先掌握一个可以动态添加路由地址的APIaddRoutes基本使用:格式: router.addRoutes([路由配置对象]) 或者: this.$router.addRoutes([路由配置对象])作用:动态添加路由配置如图所示:示例 ...

2021-10-28 18:42:01 430

原创 Excel表格导入时,将中文key转为英文key

Excel表格中读入的是姓名,而后端需要的是username//我们在ex文档中得到的数据 {电话:'12345678901', 名称:'管理员'.....}//我们需要的数据 {mobile:'12345678901', username:'管理员'.....}所以我们这时需要将key从中文转换为英文思路:对于原数组每个对象来说找出所有的中文key 得到对应的英文key 拼接一个新对象: 英文key:值 formatData(rows) { //这个地方是对.

2021-10-26 21:53:35 343

原创 JavaScript中的逗号操作符

逗号操作符可以用来在一条语句中执行多个操作,如下所示:在一条语句中同时声明多个变量是逗号操作符最常用的场景。不过,也可以使用逗号操作符来辅助赋值。在赋值时使用逗号操作符分隔值,最终会返回表达式中最后一个值:在这个例子中,num 将被赋值为 2,因为 2 是表达式中最后一项。逗号操作符的这种使用场景并不 多见,但这种行为的确存在。二、逗号操作符的拓展用法逗号操作符还有很多意想不到的操作,例如可以使我们的代码最大程度的进行简写,如下所示:let arr = [{ id: ..

2021-10-25 23:02:32 676

原创 vue组件通信(父,子)

因为每个组件的变量和值都是独立的初步关注父传子, 子传父父: 使用其他组件的vue文件子: 被引入的组件(嵌入)1.vue组件通信_父向子-props目的: 从外面给组件内传值, 先学会语法。需求: 封装一个商品组件MyProduct.vue - 外部传入具体要显示的数据, 如下图所示步骤: 创建组件components/MyProduct.vue - 复制下面标签 组件内在props定义变量, 用于接收外部传入的值 Ap...

2021-10-23 21:34:18 62

原创 watch监听

1. watch使用的几种方法 (1). 通过 watch 监听 data 数据的变化,数据发生变化时,就会打印当前的值watch: { data(val, value) { console.log(val) console.log(value) }}(2).通过 watch 监听 list 数据的变化,数据发生变化时,this.number++(使用深度监听)data() { return { ...

2021-10-22 23:31:56 231

原创 JS数组reduce()使用方法and高级技巧

reduce()可以解决很多问题,当然在解决这些问题的初衷上它也不是唯一的办法,比如for循环和forEach方法都可以针对性的解决问题,但是在我看来,会熟练的使用reduce()在找工作上是一件非常加分的一项。1.语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组,在这四个参数的

2021-10-22 16:58:03 159

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除