- 博客(75)
- 收藏
- 关注
RSS订阅
原创 React 函数组件配置 websocket 封装【长链接】
然后使用 nodemon xxx ( 你 nodejs 代码的文件我此处是叫 ) websocket.js。此处消息监听可根据后端返来的具体字段数据做判定，重新调用接口更新页面数据 || 实现其它功能。打开终端运行 cnpm install xs , cnpm install nodemon。那么我开启就需要使用 nodemon websocket.js 即可打开 node 进行链接。也可链接本地 node 做测试。websocket 封装示例。
2024-02-28 13:39:23
705
原创 【antd design 5 Form.itme 封装】 持续更新......
【代码】【antd design 5 Form.itme 封装】 持续更新......
2023-12-22 14:26:49
469
原创 【插件推荐】之 Error Lens 以及切换中文提示！
开发过程中，难免会有一些小疏忽，比如标点中英文，括号缺失等在此推荐一个VScode里面超级好用的插件，Error Lens可以让你在编译过程中更加明显的提示错误信息当然它默认是按照英文去提示的，修改成中文的方法如下。打开设置，搜索 typescript.local 点开下拉框选择 zh-CN 就可以了。时小记，终有成。
2023-04-24 10:09:44
2816
3
原创 前端国际化 JS 库 =＞ i18n
lng 属性表示你选择的哪种语言，fallbacklng 属性表示你的备选语言（ 在主选语言查询不到的时候，会在 fallbacklng 中进行查找 ）resources 中的每个对象代表的是一种语言，需要自定义，我此处是将语言单独创建文件进行引入。由于我选择的语言是日语，所以此处的退出登录就会被翻译成 ログオンの終了。在跟组件创建语言文件并建立 i18n.ts （ 任意名字都可 ）下载 JS 国际化库。
2024-03-07 09:43:19
1137
原创 React Vite 构建工具如何查看代码占用体积
首先安装 Vite 中的 rollup-plugin-visualizer 插件。接着在你的 vite.config.ts 中引入并且使用到 plugins 中。接着进行打包，生成 dist 文件之后会自动为你打开页面进入查看，如下。
2024-02-29 13:57:46
636
原创 new FormData 同时发送表单 json 以及文件二进制流
接着将你的对象 json 存储，注意使用 new Blob 创建大表单转换成 json 格式。需要新增时同时发送表单 json 以及对应的文件即可使用以下方法传参。首先通过 new FormData（） 创建你需要最后发送的表单。在这里我将所有的 File 文件存储到 useState 中。我使用的是 antd design 的 upload 组件。接着发送的同时将所有的文件再次添加到 FormData 中。接着处理文件，一般是 xlsx，pdf，xls 等等。
2024-01-05 15:31:17
800
原创 【中后台全屏插件和使用方法】
接着可以直接在useEffect中处理逻辑并且修改 icon 的状态替换 icon。在你的 icon 上处理状态以及事件。
2023-12-08 10:59:40
273
原创 【React Hooks】useReducer()
useReducer 的三个参数是可选的，默认就是initialState，如果在调用的时候传递第三个参数那么他就会改变为你传递的参数，实际开发不建议这样写。switch 语句我判断 type 传递的值是不是 AddItem 如果是的话我就执行对应的方法,并且把 data 作为新加入的元素。第一个参数 state 就是你定义的数据。action 是你将来调用 dispatchData 来告诉它你要如何操作数据。必须将 useReducer 的第一个参数（函数）写在定义 hook 的上方。
2023-12-07 11:24:26
312
原创 【React Hooks】=＞ useId()
也就是说你使用了 useId 作为唯一 ID 那么在你删除数组某个元素之后不会引起数组的重新渲染，如果使用的全局变量是会导致某些问题的。并且这个 useId 会跟着你组件的渲染进行，在你的 HTML 生成之后会自动匹配在之上。相比较使用全局变量++ 作为唯一 ID 和直接使用 useId 是有区别的。如果是将 useId 作为 id 的情况下，是如下的形式。
2023-12-07 10:55:08
80
原创 【正则插件】前端正则插件以及预览插件推荐
将他 ctrl + a 删除，输入你对应的正则表达式内容。如果表达式通过会出现橙色背景，反之没有背景色。正则表达式插入之后顶部会有 Test Regex..选择你需要的正则表达式，随后可以使用第二个插件。下载好插件之后 在代码层右键选择。
2023-11-23 09:08:42
196
原创 vite =＞ .env 文件配置和使用
（ 两个 .env 内部的变量都是一样的 vite 会在你开发环境和线上环境自动做切换 ）.env.development 是在开发环境中的代理地址。.env.production 是在线上的代理地址。可以在你封装的 axios 中设置基准路径。
2023-11-15 15:45:20
133
原创 全局代码规范配置 （ Eslint ）
项目团队开发 为了保证统一的代码格式规范，可以借助两个插件以及 eslint 自由配置进行首先需要在 vscode 安装安装所需依赖。
2023-11-15 14:42:38
1806
1
原创 React 你还在用 Redux 吗？更简化的状态管理工具（Recoil）
同时引入 recoil 身上的 useRecoilValue 方法，可以获取你定义的 atom || selector 中的指定数据 （是不是跟 HOOK 的写法非常像）上面说的刷新会丢失数据的问题，你只要在当前页面用到了 Recoil 定义的 selector 它就会自动重新请求，永远不会出现数据突然丢失的问题！这一步做好之后，你可以在 src 文件之下定义 store（仓库）文件夹，名字随便起，按照自己喜欢的来（前提取的名字不要太骚被你的领导叫去喝茶）并且你也可以给返回的数据写上 TS 的类型！
2023-10-29 16:31:07
461
3
原创 来聊一聊 Promise 的错误重载
在你请求接口的过程中，可能这个接口返回的状态是随机的，如果是失败的状态你需要让他重新再次去进行请求，并且限制它的重复请求次数。使用 Promise 简单做一个封装，接受一个 promise 方法和一个 最大重复请求次数。
2023-09-18 12:07:13
142
原创 聊聊二叉树的前序遍历算法
前序遍历先去拿它的左节点，拿完之后再去拿它左节点相邻的右节点，如数据结构是这样。第一中不考虑性能的方式的话，可以使用递归的方式去给他遍历。考虑性能的算法使用 栈形式遍历；第二种方式使用栈的形式遍历。依次拿到值的 val；
2023-08-31 14:47:16
261
1
原创 【进度条插件】后台管理
当然进度条的样式你也可以自己在 nprogress/nprogress.css 里面进行更改。如果不想要加载状态的小 loading 效果，可以设置以下代码。接着就可以设置进度条的开始和进度条的结束。在你封装的 axios 里面引入。
2023-08-14 19:07:19
128
原创 antd design 多个弹框设置区分状态的技巧
通过某些事件 比如 查看或者编辑的时候修改定义的 modal 弹框状态。后续也可以在设置 modal 弹框 title 标题的时候写一个函数去做区分。可以使用 enum 枚举的方式去做区分。引入上述代码接着设置状态。
2023-08-07 17:31:11
190
原创 antd desigin 组件库 select 下拉框下滑页面栏目定位的问题
可以通过 getPopupContainer 属性配置绑定父级的id。然后通过父子 id 的样式设置相对定位就可以解决这个问题。
2023-08-07 17:23:11
388
原创 antd design 4 版本组件库 Form 的一些自定义校验（持续更新）
【代码】antd design 4 版本组件库 Form 的一些自定义校验（持续更新）
2023-07-14 11:12:48
411
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人