- 博客(81)
- 收藏
- 关注
RSS订阅原创 Antd中使用Table集成 react-resizable实现可伸缩列
【摘要】在Ant Design 3.x项目中实现可拖拽调整列宽的Table时，安装react-resizable报错。解决方案：1. 安装兼容版本（react-resizable@1.11.1 + react-draggable@4.4.5）；2. 必须手动引入CSS样式文件；3. 检查Umi.js配置确保样式加载；4. 自定义Resizable组件并重写样式。核心步骤包括版本控制、样式注入和DOM结构调整，最终通过组合Table组件与react-resizable实现列宽拖拽功能。（149字）
2025-07-16 18:53:56
721
原创 防止恶意 iframe 嵌套：使用 Nginx 设置 X-Frame-Options 与 Content-Security-Policy 安全策略
本文介绍了防范点击劫持攻击的两种Nginx配置方法：使用X-Frame-Options（已弃用但仍有兼容性价值）和更推荐的Content-Security-Policy的frame-ancestors指令。通过添加响应头限制iframe嵌套来源，配置示例展示了如何设置单一/多个允许域名，并建议用always参数确保所有响应都包含安全头。文章还提供了验证配置生效的方法和测试iframe嵌套的代码片段，对比了两种技术的优缺点，强调基础安全配置的重要性。
2025-07-11 10:02:57
633
原创 C#项目 在Vue/React前端项目中 使用使用wkeWebBrowser引用并且内部使用iframe网页外链 页面部分白屏
摘要：针对wkeWebBrowser出现的问题，分析指出其局限性包括对ES6+语法和现代WebAPI支持不足，以及跨域iframe控制困难。当嵌入非同源iframe时，使用IntlAPI可能导致白屏。解决方案建议在项目根目录配置.browserslistrc文件或package.json的browserslist字段，设置兼容目标浏览器版本，如最低支持Chrome 60和IE11，确保前端代码在不同环境下的兼容性。
2025-07-09 15:20:30
189
原创 C#中使用wkeWebBrowser 内嵌部分前端H5页面 并包含部分iframe 但是部分iframe显示白屏（Intl API 报错解决方案）
【摘要】C#内嵌wkeWebBrowser控件时，因内核老旧导致React项目中的跨域iframe页面出现Intl API缺失报错和白屏问题。解决方法包括：1)在主页面和可控iframe中引入Intl polyfill；2)不可控iframe建议联系开发者添加兼容或升级浏览器内核；3)长期方案推荐迁移至WebView2/CefSharp等现代内核。具体操作涉及安装intl包、在项目入口文件导入polyfill、配置.browserslistrc降级构建目标等步骤。该方案有效解决国际化API兼容性问题，同时为
2025-07-08 16:52:02
906
原创 react中在Antd3.x版本中 Select框在单选时 选中框的高度调整
【代码】react中在Antd3.x版本中 Select框在单选时 选中框的高度调整。
2025-07-01 09:56:31
198
原创 react老项目 使用类组件(Class Component)和函数组件(Function Component) 完成父组件引用子组件方法代码示例 Antd3.x版本
React组件开发核心差异总结：类组件使用class语法和生命周期方法，需手动管理状态(refs)；函数组件依赖Hooks（如useState/useEffect）实现更简洁的逻辑聚合。Antd3项目推荐类组件（尤其表单场景），Antd4+项目优先函数组件+Hooks以获得更好性能。示例显示类组件通过createRef调用子组件方法，函数组件则需配合forwardRef和useImperativeHandle实现类似功能。函数组件代码量减少约30%，但需注意Hooks的闭包问题。
2025-06-25 11:39:34
130
原创 前端react使用 UmiJS 构建框架 在每次打包时候记录打包时间并在指定页面显示
摘要：本文介绍在UmiJS项目中实现构建时间记录的方法，只需4步：1)创建build.js脚本生成时间戳；2)建立src/utils/buildTime.js存储变量；3)修改package.json的build命令；4)在页面引入时间变量。该方法会在每次构建时自动记录当前时间，并在控制台输出格式化的构建时间（如2025-06-24 15:30:00），方便开发者追踪版本。通过简单的脚本和配置修改，实现了构建时间的自动化记录和显示功能。
2025-06-24 15:28:22
282
原创 前端react框架实现打包时间动态加入配置展示在指定页面
摘要：本文介绍了在React项目（create-react-app构建）中实现打包时自动记录构建时间的方法。通过在项目根目录创建build.js脚本生成时间戳文件，修改package.json的build命令顺序执行脚本和构建，最终可在代码中引用和输出构建时间（如：console.log('BuildTime:2025-06-2415:09')）。该方法利用Node.js脚本动态生成时间变量，兼容CRA的Webpack构建流程。
2025-06-24 15:24:28
194
原创 配置文件JavaScript
代码摘要：本文档包含两个项目配置常量。1) projectName 存储当前项目名称（示例中被注释，可选"数据治理"等）；2) loginUI 定义登录界面的UI版本（1为旧版，2为新版，当前使用新版）。两个配置项均附有详细注释说明，包括作者、日期、描述、版本号和相关文档链接。
2025-06-23 17:55:14
81
原创 前端JS 实现 canvas验证码功能
该代码实现了一个图形验证码生成器GVerify，通过Canvas绘制包含干扰线和干扰点的验证码。主要功能包括： 可自定义验证码类型（数字字母混合/纯数字/纯字母） 通过/绘制干扰线/和/绘制干扰点/注释标记的部分控制验证码干扰项 提供refresh()方法刷新验证码，validate()方法验证输入 支持自定义容器ID、尺寸等参数 生成随机颜色、角度和位置的验证码文字增强安全性 使用方法： 引入gVerify.js文件 实例化GVerify对象 调用refresh()方法生成验证码 调用validate()
2025-06-20 09:30:41
236
原创 使用 React.Children.map遍历或修改 children
摘要：React组件可通过React.Children.map安全遍历子元素，结合React.isValidElement过滤合法React元素，并使用React.cloneElement克隆修改子组件。示例展示了如何给每个子项添加边框、内边距和序号属性，同时保留非React元素（如纯文本）。这种方法适用于需要对子组件统一添加样式、属性或进行结构处理的场景，是React高阶组件开发的常用技术。（150字）
2025-06-17 10:30:25
154
原创 前端处理后端对象类型时间格式通用方法封装，前端JS处理JSON 序列化后的格式 java.time 包中的日期时间类
文章摘要： 本文介绍了后端接口返回的时间数据层级结构及其处理方法。数据通常来自Java8的java.time包（如LocalDateTime/ZonedDateTime），通过JSON序列化工具转换。前端处理方案提供了一个parseCustomDate函数，用于将Java时间对象转换为Moment.js格式，包含空值检查、字段验证和ISO字符串拼接功能，最终输出"YYYY-MM-DD HH:mm:ss"格式的日期字符串。该方案适用于处理Java后端与前端JavaScript之间的日期时间
2025-06-13 15:45:17
268
原创 前端样式CSS设置 display: ‘grid‘, gridTemplateColumns: ‘repeat(4, 1fr)‘ 部分电脑展示内容溢出
文章摘要：在Grid布局中，高分辨率设备使用200%缩放时会出现子项溢出问题，而低分辨率设备使用125%缩放则正常。解决方案是给Grid子项设置minWidth:0和overflow:'hidden'属性，防止内容溢出。修改后代码示例展示了如何在子项div中添加这些样式属性，有效解决了不同缩放比例下的布局问题。
2025-06-10 09:36:29
292
原创 AntdPro框架下载后 部分重要初始化文件配置
本文摘要主要介绍了Umi项目的关键配置文件和修改方法。主要内容包括：1)config/config.ts配置文件中调整历史模式、代理设置等；2)app.tsx中初始化状态管理和权限校验逻辑；3)requestErrorConfig.ts处理请求头和token配置；4)login/index.tsx的登录函数实现；5)AvatarDropdown.tsx的账号信息组件。重点说明了如何进行代理配置、路由设置、主题定制以及请求拦截等核心功能配置，并提供了开发环境与生产环境的区别处理建议。这些配置共同构成了基于Um
2025-06-04 15:44:58
265
原创 URL / GET请求 中文UTF-8编码JS转化
decodeURIComponent 将编码转为中文。仅转义非合法 URL 字符（不转义。会对整个参数字符串转义（包括。
2025-04-17 14:02:46
189
原创 Antd使用日期RangePicker框，实现左侧有时间区间选择 本月、上月、过去7天、过去30天等
【代码】Antd使用日期RangePicker框，实现左侧有时间区间选择 本月、上月、过去7天、过去30天等。
2025-02-20 11:05:10
458
原创 Git报错 Please specify which branch you want to merge with. git pull ＜remote＞ ＜branch＞
git branch --set-upstream-to=origin/<branch> master_新疆。
2024-10-09 14:49:43
538
1
原创 antd中Select大数据分页触底刷新处理优化
antd中Select大数据分页触底刷新处理优化 今天遇到一个需要模糊查询并且总量上万条的下拉框，如果一次性怼上去上万条，会造成浏览器卡顿。所以这边采用后端分页，前端触底加载刷新的方式去优化这个模糊查询。平时使用antd中Select的下拉一般就几十几百条，这时候直接使用组件模糊查询就能实现大部分业务场景需求。
2024-06-27 16:46:56
648
原创 Antd中使用Select框 在点出弹出下拉列表后 鼠标移到外面滚动会导致下拉框位置偏移
Antd中使用Select框 在点出弹出下拉列表后 鼠标移到外面滚动会导致下拉框位置偏移注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用。将下拉弹层渲染节点固定在触发器的父元素中。
2024-02-01 11:29:16
1053
原创 前端使用Antd中Upload组件上传获取图片base64值
前端使用Antd中Upload组件上传获取图片base64值在beforeUpload事件中获取base64。
2024-01-30 17:58:00
905
原创 Antd使用table同时使用scroll和fixed定位，滑动导致左右高度不统一
此问题可能在antd3.24.0版本之前都存在，反正3.16.2版本是存在这个问题的，如果是3.24.0之前的版本估计只能通过修改css样式解决。
2024-01-10 16:13:29
1800
原创 前端导出Excel文件，部分数字前面0消失处理办法
前端导出Excel文件，部分数字前面0消失处理办法 这种办法 虽然能解决0的问题 但是会发现Excel会自动识别后前面加一个' 不太美观 这时候还有一种办法。'会自动被excel过滤的，只是 说明这个单元格是字符串，不去掉首位0。如图本来字符串前面的0 都没了。
2024-01-10 11:32:15
1581
3
原创 前端使用高德api的AMap.Autocomplete无效，使用AMap.Autocomplete报错
前端使用高德api的AMap.Autocomplete无效，使用AMap.Autocomplete报错 重新看一遍文档，发现还是太心急了，很多问题其实文档里都写了，只是平时直接拿起来用，只看了那一段就会导致别的地方缺胳膊少腿。一开始使用遇到一个问题是，使用AMap.Autocomplete会报错。但是这时候问题又出现了，input框输入没有反应。
2023-12-28 16:09:07
4443
7
原创 前端react项目中使用高德地图JS-API,并设置初始化地图中心点和基点周边label文本提示
前端react项目中使用高德地图JS-API,并设置初始化地图中心点和基点周边label文本提示
2023-12-27 15:34:24
1308
原创 前端更新linux服务器上nginx包
更新一下现场环境的前端包通过运维给的vpn连接远程服务器linux上部署的docker服务器上nginx包linux上压缩zip包
2023-12-21 15:33:04
666
原创 前端实现一个时间区间内，再次单选功能，使用Antd组件库内日历组件Calendar
前端实现一个时间区间内，再次单选功能，使用Antd组件库内日历组件Calendar需求：需要先让用户选择一个时间区间，然后再这个时间区间中，让用户再次去单选其种特殊日期。思路：1.先用Antd组件库中日期选择DatePicker.RangePicker实现让用户选择时间区间2.在选择完时间区间后，用这个时间区间，弹出一个在这个时间区间范围内的日历组件Calendar3.通过Calendar组件（日历）的onSelect（点击事件）获得点击value，然后通过dateCellRender
2023-12-15 16:30:20
1328
原创 Antd中使用Table的rowSelection筛选功能，搭配检索选择需求实现
name: '数据一'}, {name: '数据二'}, {name: '数据三'}, {name: '数据四'}, {name: '数据五'}], // 列表数据temporaryData: [], // 暂存未被模糊查询前的数据集合selectedRowKeys: ['code3', 'code4'], // 默认选中项，现实情况一般由后端返回。
2023-12-13 17:59:34
1122
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人