- 博客(46)
- 问答 (12)
- 收藏
- 关注
RSS订阅原创 笔记：CSRF攻击概念和防范手段
攻击者构造一个恶意网站或者通过其他方式诱使用户访问这个网站，该网站中包含一个针对目标网站的请求。然后，攻击者通过各种手段，例如诱骗用户点击链接、嵌入图片或脚本等，使用户在其浏览器中发送该请求。由于用户已经在目标网站上进行了认证，浏览器会自动在请求中包含相应的凭证（如Cookie），使该请求看起来像是用户自己发送的。例如，攻击者可以更改用户的账户信息、发出支付请求、删除重要数据，甚至转移用户的资产、篡改网站数据等。总的来说，CSRF攻击是一种隐蔽性很强的攻击方式，它利用了用户对自己的信任。
2024-04-23 15:56:33
249
原创 笔记：XSS攻击概念和防范手段
具体来说，XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。其原理是攻击者向有XSS漏洞的网站中输入恶意的HTML代码，当其他用户浏览该网站时，该段HTML代码会自动执行，从而达到攻击的目的，如盗取用户的Cookie、破坏页面结构、重定向到其它网站等。XSS攻击有多种形式，包括恶意重定向攻击、假冒网站攻击、注入点击劫持攻击、散布虚假的警告信息、纵向钓鱼攻击、跨站脚本搜索攻击以及恶意广告攻击等。
2024-04-23 15:37:06
353
原创 flex弹性盒常用属性汇总
值>=0，默认是0即使有剩余空间也不拉伸，值越大，占据剩余空间的份额就越大值>-=0, 默认是1当父元素空间不足时所有子元素的等比收缩，值越大收缩比例越大flex-basis: auto | width的相关单位（px，百分比，max-content等）默认值是auto，基于设置的width和height，当width和flex-basis同时存在时，flex-basis优先级更高。
2024-03-18 17:46:18
447
原创 Array常用方法合集
forEach是一个比较特殊的遍历函数，乍一看它的结构和map、filter等很像，但是它却没有返回值，并且不支持continue和break，它的return其实是起到了continue的作用，用于跳出此次循环，而break则要通过，try{}catch(e){}来实现。此方法和indexOf相反，indexOf是从左向右查，lastIndexOf是从右向左查，可返回某个指定的值在数组中从右边起第一个出现的位置。howmany： 可选。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
2024-02-28 16:56:56
775
原创 useRef有什么用？
结果如图，会发现timer一直是null，这是因为每次setState之后，组件都会重新运行一遍，然后let timer = null；这句话透露出一个信息，不需要渲染的值可以用useRef引用，那需要渲染的值用什么引用呢？改变 ref 不会触发重新渲染，所以 ref 不适合用于存储期望显示在屏幕上的信息。如有需要，使用 state 代替。通过这个例子就能看出useRef的一个功能，那就是引用一个值，使其跳过组件的重新渲染过程。useRef是一个React Hook，它能帮助引用一个不需要渲染的值。
2024-02-22 18:07:34
702
原创 如何使用useMemo来优化性能
此时，count的变化就影响不到sum了，另外有一点要注意，此时的sum是单纯的一个数值，不是函数，useMemo的返回值是一个计算结果！可以看到当你点击按钮的时候，sum也在持续触发中，此时由于sum中的计算量过大，造成了明显的卡顿现象。一个没有任何参数的 calculation 函数，像这样 () =>，并且返回任何你想要的计算结果。一个由包含在你的组件中并在 calculation 中使用的所有值组成的 依赖列表。第二个参数是依赖项，类似于useEffect的用法，可以看一下下面的代码。
2024-02-21 18:26:27
474
原创 结合memo简述useCallback的使用场景
这是因为，组件每次渲染的时候，其中的函数都会被重新创建，React.memo使用的是浅比较，所以看似作为props的fn没有发生变化，其实它已经是一个新的fn了。useCallback能够将函数缓存起来，只依赖于给定的状态值来确定该函数是否需要重新创建，避免父组件每次更新都创建的这种情况。此时你再点击 父组件值加一 的这个按钮，会发现，即使子组件已经被memo包裹了，子组件还是触发了渲染。但是如果传入子组件的props中包含了一个函数的话，会发生什么事呢？通过这个例子，我们能看到，当。
2024-02-19 15:56:51
411
原创 useEffect的依赖项是Object时，即使依赖项的值没发生变化，仍然触发了useEffect
产生上述情况的原因是，useEffect的Object.is方法是通过“===”进行比较的，基础数据类型比较的是值，而引用类型比较的是内存中的引用地址，所以看似值没有变化，但是引用地址变了，就也会触发useEffect。那么问题来了，当依赖项是引用类型的时候，会发生什么呢？关于useEffect首先需要知道以下三种情况。如何解决这个问题呢？
2024-02-06 18:02:17
582
原创 setState是同步还是异步？
React 18 版本之前，如以下两个代码块。在合成事件和生命周期钩子函数中都是异步的。React 18 版本之后，都是异步的。在原生事件和定时器中都是同步的。
2024-02-05 16:29:27
362
原创 Antd的Select使用tagRender时，手动点选删除一个tag，界面展示上会同时消失两个的解决方法
Antd的Select使用tagRender时，手动点选删除一个tag，界面展示上会同时消失两个的解决方法，给Tag添加key
2022-06-21 18:39:33
2665
1
原创 chrome 的Input框自动填充自带背景色的解决方法
使用阴影遮挡，我这里是使用的白色阴影，根据需要可以更改颜色 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important; }
2022-05-11 17:48:20
725
原创 content-disposition 获取filename是乱码，处理方法
出现这种情况， 一般都是由于设置的文件名中存在中文导致的通过decodeURI进行解码，可获取到中文文件名const fileName = decodeURI(res.headers?.get('content-disposition')).split('filename=')[1]
2022-04-27 09:56:56
4810
1
原创 js快速造些假数据
使用new Array（）直接造，比如造100个，1~100的随机数Math.floor(Math.random()*(1-100)+100)//1~100的随机数let data = Array.from(new Array(100),(x,i)=>Math.floor(Math.random()*(1-100)+100))console.log(data)//[ 96, 95, 10, 99, 9, 2, 83, 44, 26, 40, 71, 42, 23, 86, 73.
2021-10-17 16:39:22
885
原创 基于antd的Table写了一个可扩展列表格
在一些情景下，当Table需要展现的Columns过多时，单纯的滚动条已经无法满足用户的交互体验，此时可能更需要如图所示的可扩展列表格代码如下，只是一个简单的demo，可根据具体场景打磨细节import "./styles.css";import "antd/dist/antd.css";import * as React from "react";import { Table, Checkbox, Button, Modal } from "antd";const { useState,.
2021-09-22 13:46:21
816
原创 小程序设置border-radius后，overflow:hidden在iPhone11、ios上失效
父元素设置z-index:1;可以解决<view class='parent'> <view class='children'></view></view>.parent{ width:100px; height:100px; border-radius:50%; overflow:hidden; z-index:1;//==设置层级可以解决==}.children{ width:100px; height:20px;}..
2021-08-28 11:24:33
484
原创 antd Modal和Form结合使用，Modal卸载，Form未清空
4.x之前的antd版本Modal设置: <Modal destroyOnClose={true}>Form设置： <Form preserve={false}>4.x之后的antd版本，两种操作注：4.x之后的版本加了destroyOnClose也不会起作用第一种{ visible && <Modal visible={visible}> <Form> .... </Form> &
2021-08-14 15:00:16
1255
原创 js中map和filter的区别
首先，这二者都会返回一个新数组，并不改变原数组至于区别，来看一下下面几个例子let arr = [{name:'张三',age:20,sex:'男'},{name:"李四",age:22,sex:"女"},{name:"王五",age:24,sex:'男'}]let mapTest1 = arr.map((item)=>{ return item.name})console.log(mapTest1)//[ '张三', '李四', '王五' ]let filterTest1 =
2021-05-26 11:29:23
1940
1
原创 前端下载文件的几种方式
可以使用a的download属性进行下载//ps:并不推荐这种方式，因为太不直接了fetch(`url`,{method:'get'}).then(res=>res.blob().then(blob=>{ let url = window.URL.createObjectURL(blob) let a = document.createElement('a') a.style.display = 'none' a.href=url a.download='filename' do
2021-05-25 17:53:42
1180
1
原创 antd校验两次密码输入一致的方法
<Form.Item label="新密码" name="password"> <Input palceholder="请输入密码"/></Form.Item><Form.Item label="确认密码" name="pw2" rules={[ ({getFieldValue})=>({ validator(rule,value){ if(!value || getFieldValue('password') === value){
2021-05-21 09:24:30
3587
2
原创 antd中Form表单限制输入空格
<Form.Item getValueFromEvent=(event)=>{ return event.target.value.replace(/\s+/g,"") }> <Input placeholder="限制输入空格"></Form.Item>
2021-05-21 09:06:43
1282
原创 js取出对象数组中对应的value值
封装一个函数传递任意key（a、b、c） 获取对应的值const arrs = [{ a: 1 }, { c: 1 }, { b: 2 }];function getNewArr (arrs){ let newArr = arrs.map(item=>{ let curKey = Object.keys(item) //Object.keys可以提取出对象中的key值,注意取出的key是数组 return item[curKey[0]] })
2021-01-26 22:22:40
7172
1
原创 对象数组去重
一般数组去重，let arr = [1,2,3,2,2,3,5,4,4,4]let newArr = Array.from(new Set(arr))console.log(newArr)//[1,2,3,5,4]对象数组去重const arr = [{ key: '01', value: '西施' }, { key: '02', value: '王昭君' }, { key: '03', value: '杨玉环' }, { ke
2021-01-26 22:11:23
190
原创 前端页面的pdf导出（h2c,jsPDF）
import jsPDF from 'jsPDF'import html2canvas from 'html2canvas'//需要引入这两个必要的依赖const exportPdf = () =>{ const detail = document.getElementById('detail') //获取到html包含此页面的外层标签，detail为页面中需要导出为pdf的最外层标签的id名 const imgHeight = detail.clientHeight;
2020-12-09 18:17:48
1206
原创 使用html2canvas和jsPDF做前端页面的pdf导出
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ExportPdf</title></head><style> #detail{
2020-12-07 14:33:12
343
原创 antd的Table,因重复数据导致，切换页面时仍显示了上一页的某些数据
出现如标题所述bug，有两个原因Table组件设置的rowKey不唯一render函数执行时，虚拟dom的渲染机制第一个原因，是因为rowKey设置的是每一列数据的id，而后台返回的数据有重复的，导致rowKey不唯一了第二个原因，是因为render函数执行时，新旧两个虚拟dom树会进行对比，两棵dom树进行节点替换的依据就是key值，如果key值相同，说明是同一个元素，那么新的元素就会替换掉旧的元素。所以，因为第一个原因导致key出现了重复，那么react虚拟dom去渲染的时候，替换掉其中一
2020-12-02 17:52:49
3185
4
原创 前端浏览器阻止页面跳转
在浏览器中输入一下代码并回车window.onbeforeunload=()=>{ return "我阻止了页面跳转"}然后页面要跳转的话，就会弹出一下对话框
2020-11-13 11:25:47
3318
原创 利用qrcode.js生成二维码，并点击按钮下载二维码图片（亲测可用）
话不多说，先上代码（复制即用）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>二维码</title> <style> body{
2020-09-08 19:03:29
6470
1
原创 canvas学习（一）canvas宽高异常，fillStyle的使用，demo：黑客帝国代码雨plus
首先一个小demo,来说明一下canvas简单的属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Document</title> </head><body><canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;
2020-09-07 15:54:55
596
原创 react使用xlsx插件做纯前端导出Excel（亲测有效）
纯前端导出Excel需要两个依赖，xlsx和file-saver话不多说，上代码：import XLSX from "xlsx";//必要依赖import FileSaver from "file-saver";//必要依赖import {Message} from "antd"import _ from "lodash"//三个参数，title是生成的Excel文件名，headers是文件的头部，values为具体的json数据export function exportCampaignL
2020-09-07 11:55:40
7158
4
原创 两层key-value字段转化为antd中TreeSelect的treeData
后台传来的数据结构如下：keyMap: [ { key1_1: [ {value: "value2_1", key2_1: "key2_1"}, {value: "value2_2",key2_2:"key2_2"} ] }, { key1_2: [ {value: "value2_1", key2_1: "key2_1"}, {value: "value2_2",key2_2:"key2_2"} ] }
2020-09-02 11:54:28
978
原创 css隐藏滚动条保留滚动功能（兼容edge、火狐）
话不多说，上代码html示例代码：<div class="scrollbar"> <div class="content"> <ul> test,test,test </ul> </div></div>css代码如下：.scrollbar{ height:100vh; overflow-y:auto; -ms-overflow-style:none; //兼容Edge}//chrome需要使用伪类
2020-08-28 17:05:52
569
原创 js阻止事件冒泡和默认事件（右键点击）
话不多说，上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{
2020-08-18 11:46:38
1075
原创 antd中DatePicker组件通过三元判断来切换年、月选择面板的时候出现错乱
有时打开year的picker面板，操作之后，又打开month的picker面板操作，再打开year的picker面板的时候会发现打开的是month的picker面板一个三元判断切换，会出现面板混乱，{ dateType === "month" ？ <DatePicker className={"monthPicker"} defaultValue={moment(new Date(),'YYYY-MM')} onChange={this.onDateChange.bin
2020-08-14 15:21:26
727
原创 antd设置纵向滚动条后，出现列宽被压缩，或是对不齐的现象
antd的Table同时设置横向和纵向滚动条的时候，会出现列宽被压缩或是对不齐的现象，如图：此时，两种解决方案，1、需要给scroll.x的值设置的比所有的列宽加起来的都大，包括非固定列的宽度（具体数字和百分比都可以）scroll={{x:2000,y:"500px"}}2、可以单独的给发生压缩的列中render的return的div设置width，撑开它{ title: "Behavior DealId", dataIndex: "behaviorDealId", width:2
2020-08-14 15:11:16
2339
原创 componentDidMount获取form的ref值为null
简单的复现代码如下：class FormModal extends Component{ constructor(props){ super() this.formRef = React.creatRef() this.state={ firstValue:"test" } } componentDidMount(){ this.refs.current.setFieldsValue({firstItem:this.state.firstValue}) //此时，会报错
2020-08-10 12:03:46
1750
1
空空如也
浏览器是否可以识别0.01px
2022-05-10
遇到不懂技术的产品经理该如何沟通？
2021-12-14
shell中是不是只有字符串和数组两种类型啊？
2021-08-09
同时调取了很多个接口，报错的时候会刷屏，怎么解决？
2021-06-28
antd RangePicker限制选择时间跨度在一天以内怎么做？
2021-06-03
react项目直接使用cra搭建好，还是纯react+webpack+ts好？
2021-05-27
发现一个有意思的面试题，因该是用递归，但是该怎么做呢？
2020-12-10
后台传来流文件压缩包，下载解压后，发现里面的文件也是流文件，该怎么处理
2020-08-31
为什么包裹了Router使用link还会报错
2020-03-20
Antd筛选后不能重新触发分页
2020-02-25
TA创建的收藏夹 TA关注的收藏夹
TA关注的人