- 博客(517)
- 收藏
- 关注
原创 react页面定时器调用一组多个接口,如果接口请求返回令牌失效,清除定时器不再触发这一组请求
在这个例子中,fetchDataGroup 函数会发起一组API请求,并使用Promise.all等待所有请求完成。对于生产环境的应用,应该考虑通过更安全的方式管理访问令牌,例如从环境变量加载或者使用身份验证库来自动刷新令牌。3. 错误处理:在API调用中加入错误处理逻辑,特别是针对401未授权的状态码(通常意味着令牌已失效)。如果应用有刷新令牌的能力,可以在handleTokenInvalid中尝试刷新令牌而不是直接清除定时器。4. 清理定时器:当检测到令牌失效时,清除定时器并停止进一步的API调用。
2025-01-24 13:40:10
531
原创 react项目表格内容轮播,DataV-React轮播表的使用
项目中想要实现表格表头固定不动,表格行内容轮播呈现的效果,antd中的table无法实现,使用DataV-React轮播表来实现。1)样式文件中使用:global{}包裹元素选择器,设置样式。
2025-01-24 13:34:05
729
原创 antd日期时间选择datepicker使用两个分别作为开始时间、结束时间,设置禁用日期和时间点
请注意,在上面的代码中,假设正在使用 moment.js 进行日期处理。功能要求:使用两个antd日期时间选择datepicker分别作为开始时间、结束时间,开始时间的禁用日期设置为今天的前一天,禁用时间设置为今天当前时间点之前的时间,结束时间不能早于开始时间。1. 设置开始时间DatePicker的规则,禁用今天前一天及之前的所有日期,并且禁用今天当前时间点之前的时间,如果选择的日期是今天之后的日期,时间点不做禁用限制。2. 设置结束时间 DatePicker 的规则,结束时间不能早于开始时间。
2025-01-23 17:37:52
480
原创 antd datepicker禁用日期设置为今天的前一天,禁用时间设置为当前时间点之前的时间
如果使用的是最新的 antd 版本,它可能内置支持 ES6 Date 对象,因此可能不需要使用 moment.js。在使用 Ant Design (antd) 的 DatePicker 组件时,可以通过 disabledDate 和 showTime 的 disabledHours, disabledMinutes, disabledSeconds 属性来禁用特定的日期和时间。为了禁用今天的前一天及之前的所有日期,需要比较 current 和今天的日期。需要根据当前时间动态地设置这些属性。
2025-01-23 11:00:13
256
原创 flex横向布局超出部分滚动,使用Flexbox布局时,内容超出容器宽度时,容器内部出现横向滚动条而不是压缩子元素
上述代码中,.flex-container是包含所有.flex-item的父容器。每个.flex-item都有固定的宽度,并且不会因为容器空间不足而收缩。如果所有子项的总宽度超出了父容器的宽度,用户可以通过水平滚动来查看所有的子项。2. 为了确保父容器不会压缩子元素,需要给子元素设置flex-shrink: 0;3. 给父容器添加overflow-x: auto;属性,这样当内容超出父容器的宽度时,会显示一个水平滚动条。4. 如果不想让垂直方向也出现滚动条,可以加上overflow-y: hidden;
2025-01-23 10:57:29
201
原创 react项目引入字体文件失败:Failed to decode downloaded font
3)打包后,public目录下的字体文件作为静态资源存在,部署到服务器上之后,发现字体引入失效,控制台提示的download路径为:http://ip/fonts/……2)src中url路径不添加public,直接使用/即表示在public目录下,项目中加上/public的别名~@public之后,有时字体文件引入会失效,直接使用上述代码的/fonts/。react项目中引入字体文件,本地启动时,有时候生效,有时候失败,控制台提示:Failed to decode downloaded font。
2025-01-23 10:51:36
537
原创 react引入DingTalk-JinBuTi字体
在项目中创建一个新的CSS文件(如dingtalk-fonts.css),或者编辑现有的全局样式文件。如果DingTalk-JinBuTi字体不是通过npm或yarn可直接安装的包,则需要从官方渠道下载字体文件。如果DingTalk-JinBuTi字体是通过NPM或其他包管理工具提供的,并且它附带了可以直接使用的CSS文件或组件,那么可以直接安装该包并遵循其提供的集成指南。下载后,把字体文件放置在React项目的合适位置,例如public/fonts/或者src/assets/fonts/目录下。
2025-01-23 10:27:55
702
原创 react antd点击table单元格文字下载指定的excel路径
2. 定义表格列配置:在定义 antd Table 组件的 columns 属性时,为特定的列设置 render 方法,该方法返回一个带有点击事件处理程序的 React 元素。在这个例子中,当用户点击 "Name" 列中的文本时,会调用 handleDownload 函数,它将根据提供的 URL 创建一个链接并触发下载。1. 确保有一个可供下载的 Excel 文件:需要有一个服务器端点或者一个可以直接访问的 URL,指向想要用户下载的 Excel 文件。
2025-01-23 10:19:36
631
原创 前端react后端java实现提交antd form表单成功即导出压缩包
请注意,上述代码片段是简化版的示例,实际应用中可能需要更复杂的逻辑来处理错误、验证以及确保安全性。如果需要压缩多个文件或目录,或者有更复杂的需求,则可能需要引入其他库或工具来辅助完成任务。首先,需要添加必要的依赖项到pom.xml中,例如commons-compress用于创建ZIP文件。2. 处理表单提交:在onFinish回调中发起请求到后端API,并处理响应。1. 接收表单数据:创建一个REST控制器来接收前端发送的表单数据。2. 生成压缩包:根据接收到的数据生成压缩包。
2025-01-23 10:17:01
565
原创 无法访问com.zaxxer.hikari.HikariDataSource类文件具有错误的版本 55.0, 应为 52
2.使用兼容版本的 HikariCP:如果希望继续使用 JDK 8,可以下载HikariCP 3.x。1. 升级 JDK到版本 11 或更高版本。
2024-12-18 11:15:58
246
原创 DBeaver连接数据库时出现Public Key Retrieval is not allowed错误
在连接方式那里选中URL,拼接上?allowPublicKeyRetrieval=true,测试连接成功。
2024-12-16 17:00:59
198
原创 echarts树图二级子节点分别有几千个三级子节点 设置默认展开5个子节点及一个展开更多子节点 点击展开更多子节点时再追加展示固定数量的子节点
【代码】echarts树图二级子节点分别有几千个三级子节点 设置默认展开5个子节点及一个展开更多子节点 点击展开更多子节点时再追加展示固定数量的子节点。
2024-12-10 16:35:00
243
原创 yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。点击“新建”,然后添加 Yarn 的安装路径(例如 C:\Users\YourUsername\AppData\Roaming\npm)。关闭并重新打开一个新的终端或命令提示符窗口,然后再次尝试运行 yarn -v 命令,看看是否能够成功显示 Yarn 的版本号。打开“控制面板” -> “系统和安全” -> “系统” -> “高级系统设置”。在“系统变量”部分,找到名为 Path 的变量,然后点击“编辑”。打开VS Code,以管理员身份运行。
2024-12-03 15:02:01
1816
原创 react antd不在form表单中提交表单数据,而是点查询按钮时才将form表单数据和其他查询条件一起触发一次查询,避免重复触发请求
也可以采用useEffect依赖项触发请求,在useEffect中判断form表单填充是否有内容,有内容时限制要传的表单参数state对象为''时不触发查询,同时判断当前表单填充内容与要传的表单参数state对象是否相等,相等时再触发查询。
2024-12-03 11:21:35
404
原创 idea创建springboot项目JDK和java版本不匹配,java版本只能选择17,21,23
idea创建springboot项目JDK和java版本不匹配,java版本只能选择17,21,23
2024-11-25 16:11:34
548
原创 antd从数组动态生成Checkbox组,勾选一个影响另外一个,去掉勾选后再次勾选无法选中
给外层的Drawer抽屉增加的destroyOnClose属性,关闭时销毁 Drawer 里的子元素。2.去掉勾选后再次勾选无法再次选中。1.勾选一个会影响道另外一个;
2024-11-18 15:16:29
122
原创 git没有识别出大写字母改成小写重命名的文件目录
Git 默认不会跟踪大写字母和小写字母的区别,因为在大多数文件系统中,大写字母和小写字母被认为是相同的文件,只有在区分大小写的文件系统中(如 macOS 的 HFS+ 或 Windows 的 NTFS),这才是一个问题。如果重命名了一个目录,并且这个重命名涉及到大写字母到小写字母的转换,Git 可能会认为这只是一个名字的改变,而不是一个重命名。为了让 Git 识别出这是一个重命名,需要使用 git mv 命令来重命名目录。这个命令会让 Git 识别出这是一个重命名操作,并正确跟踪这次改动。
2024-11-14 16:01:02
547
原创 js将一个扁平化的数组转换为一个echarts多级树结构的对象
实际项目中自定义了节点图标,导致分辨不出来哪些节点是有子节点的,在series对象中设置initialTreeDepth: -1 表示默认展开所有节点即可。js将一个扁平化的数组转换为一个echarts多级树结构的对象。
2024-11-14 13:22:14
390
原创 react antd批量导入的formData传参在beforeUpload、onChange事件中获取文件内容
2. 在onChange(info) {}中info.file.originFileObj、info.fileList[0].originFileObj是上传的文件。1. 在beforeUpload(file, fileList){}中的file、fileList[0]是上传的文件;
2024-10-23 09:26:18
466
原创 react antd upload不通过action上传且校验文件类型不符合的不添加到文件列表中,单文件上传和多文件上传均支持
react antd upload不通过action上传且校验文件类型不符合的不添加到文件列表中,单文件上传和多文件上传均支持
2024-10-22 09:31:56
249
原创 react页面跳转时携带参数,返回时能展示跳转之前的数据
当从PageA跳转到PageB时,使用history.push方法并以第二个参数的形式传递了一个状态对象。在PageB中,通过useLocation钩子获取到了包含状态的location对象,并从中提取了传递的数据。从PageB返回pageA时,使用history.push方法再将pageA页面的参数返回,作为useEffect依赖项触发pageA页面的数据查询。在React中实现页面间的参数传递和数据持久化,可以使用react-router-dom库中的useHistory和useLocation钩子。
2024-10-16 13:13:53
569
原创 react antd多层抽屉使用getContainer={false},内层抽屉打开后,抽屉不在停靠在窗口的最边上,使用getContainer指定Drawer挂载的节点为外层抽屉的父容器
指定内外层抽屉挂载的节点为外层抽屉的父容器。即设置getContainer={() => document.getElementById('parent-container')}如果上述添加完成后,发现内层抽屉位于外层抽屉的下一层,给内层Drawer添加zIndex={1001},由于zIndex默认值为1000,内层抽屉的zIndex大于1000即可。
2024-10-16 10:53:01
513
原创 npm安装依赖时报错npm ERR! code ERESOLVE
清除 npm 缓存: 使用 npm cache clean --force 命令清除 npm 的缓存,有时缓存中的旧数据可能导致依赖解析问题;使用 npm install --legacy-peer-deps: 让 npm 在解析依赖时不考虑 peerDependencies。错误原因:不同依赖包要求使用相同的包的不同版本,npm无法解决依赖项之间的冲突。检查项目依赖的版本,有版本冲突可以尝试升级或降级某些依赖版本,以解决冲突;使用 npm install --force 强制安装;
2024-10-15 11:18:36
1424
原创 nginx服务器退出vi编辑器
如果需要强制退出而不保存更改,可以在命令模式下输入:q!,然后按Enter键。2. 输入:wq(写入并退出)或者:x(保存更改并退出)。1. 按下Esc键进入命令模式。3. 按下Enter键。
2024-10-10 13:08:19
282
原创 React 遍历中使用<></> 没有办法添加key,控制台一直有warning:Each child in a list should have a unique使用React.Fragment解决
React 遍历中使用 ,控制台一直有warning:Each child in a list should have a unique。
2024-09-29 16:39:45
257
原创 nvm安装node超时Get “https://nodejs.org/dist/latest/SHASUMS256.txt“: dial tcp 104.20.22.46:443: i/o timeo
报错问题:"nvm安装node超时"通常意味着nvm(Node Version Manager)尝试从远程仓库下载Node.js时,由于网络问题或者仓库访问延迟,导致安装过程中断或者耗时过长。手动下载和安装:如果上述方法都不行,可以尝试手动从Node.js官网下载对应版本的Node.js二进制包,然后将其路径指向nvm。检查安全软件设置:有时候防火墙或者杀毒软件会阻止nvm的下载,确保安全软件设置允许nvm的网络访问。增加超时时间:如果网络状况良好,但仍然超时,可以尝试增加nvm的超时时间设置。
2024-09-25 14:42:01
342
原创 vue el-date-picker禁用当前日期之前的日、小时、分钟
【代码】vue el-date-picker禁用当前日期之前的日、小时、分钟。
2024-09-20 18:20:03
518
原创 echarts根据数量级设置最大值最小值为整百的数
在ECharts中,可以通过设置yAxis的min和max属性来控制y轴的最大值和最小值。如果想要调整为10的其他整数倍,将100修改掉即可。
2024-09-14 13:46:25
328
原创 css滚动条隐藏但是可以滚动
要实现滚动条隐藏但仍然可以滚动的效果,可以使用CSS来隐藏滚动条,同时允许鼠标的滚轮或触摸板滚动。这样,滚动条在视觉上被隐藏,但用户可以通过触摸或使用鼠标滚轮来滚动内容。
2024-09-13 15:22:16
1162
原创 css父容器溢出隐藏 子容器溢出滚动
parent 容器设置了固定的宽度和高度,并且通过 overflow: hidden;隐藏了溢出的 .child 容器内容。如果 .child 容器的内容确实超出了其设定的宽度和高度,则会显示滚动条,允许用户滚动查看所有内容。在父容器上设置 overflow: hidden;可以隐藏溢出的内容。如果你想要在子容器溢出时出现滚动条,可以设置 overflow: auto;
2024-09-13 15:18:19
524
原创 echarts X轴文本太长 formatter自定义文本的显示方式
如果ECharts中X轴的文本太长,可以通过设置axisLabel的rotate属性来旋转标签,或者使用formatter函数来自定义文本的显示方式。另外,可以开启axisLabel的interval属性来控制显示的标签的间隔。上述代码中,X轴的标签将旋转45度,并且如果文本长度超过5个字符,将会被截断并在末尾添加省略号。这样可以保持图表的整洁性,同时用户可以通过悬停标签查看完整的文本信息(如果需要的话)。
2024-09-12 15:01:21
639
原创 echarts tooltip太长被遮挡
使用echarts时,由于tooltip文本太长,导致被其他div元素遮挡,解决办法:给tooltip添加appendToBody属性。
2024-09-12 14:54:46
494
原创 CSS属性选择器选择属性值中包含指定字符串的元素
attr*=value]:选择器匹配包含指定属性且该属性值中包含指定字符串“value”的元素。[attr^=value]:选择器匹配包含指定属性且该属性值以指定字符串“value”开头的元素。这将会选择所有data-type属性中包含button字符串的元素,并应用相应的样式。这将会选择所有data-type属性以button字符串开头的元素,并应用相应的样式。这将会选择所有data-type属性以button字符串结尾的元素,并应用相应的样式。/* 样式规则 *//* 样式规则 */
2024-09-10 14:58:50
605
原创 antd Transfer树穿梭框父子节点关联,支持全选、搜索,右侧只展示子节点
【代码】antd Transfer树穿梭框父子节点关联,支持全选、搜索,右侧只展示子节点。
2024-09-06 17:26:37
435
原创 useEffect的依赖项看起来是一样的,但是会触发重复请求
问题:页面查询条件作为useEffect的依赖项,页面初始加载的时候查询一次,查询条件不变的情况下,点击查询按钮,还会触发请求。原因:依赖项useState设置的是数组,数组是引用类型。解决:将依赖项类型改为引用类型,如字符串。
2024-08-30 13:49:26
203
原创 react antd点击table行时加选中背景色
state变量selectedRowKeys来记录选中的行的key。rowSelection属性用于配置行选择功能,而rowClassName属性用于根据行的key给行添加特定的className,从而实现加亮背景色的效果。点击表格的一行时,该行的背景色会变为蓝色(Ant Design默认主题的选中颜色),同时selectedRowKeys会被更新为当前点击的行的key。在React中使用Ant Design的Table组件时,可以通过rowSelection属性来实现点击行时加亮背景色的功能。
2024-08-29 09:26:43
822
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人