- 博客(16)
- 收藏
- 关注
RSS订阅原创 Nextjs document is not defined issue
拦截路由 /login，使LoginForm在dialog 中打开。最近在做Nextjs项目，它有。例子说明：用 Nextjs。下面是我的例子以及解决方法。
2025-03-21 19:16:37
290
原创 React: window resize context
需求：写一个Context 用于监听屏幕尺寸变化。Step1: 创建一个Context。Step2: 使用Context。
2025-03-06 18:26:47
240
原创 Java: 处理电话号码
最近项目需要对用户输入的电话号码的有效性进行校验，经过search采用google libphonenumber library。做了一个小demo， 用于日后参考 😊。此包很强大， 支持大部分语言，此处我用的是java在后端进行判断。对于前端（javascript）可以参考下面文章进行一个快速了解上手😊。step2: 创建一个PhoneUtil 类。step3: 测试 (这里我只用了部分方法)step1: 引入依赖包。
2025-02-25 11:15:31
218
原创 Java: read local json file with date time
开发的时候我们后端可能还要依赖另一个接口返回数据， 进行进一步处理。为了排除dependency， 我们通常是在本地创建一个mock 数据，读取本地mock json 数据。应该是很简单，但是遇到时间的时候就可能需要一些额外处理， 这里记录一下。config/LocalDateTimeTypeAdapter & LocalDateTypeAdapter(用于处理时间)创建mock数据：resources/sampleJson/Customer.json。
2025-02-14 15:07:28
217
原创 模仿 API 返回延迟
在前端开发中， 有时候我们想用mock data 模拟API 返回延迟的情景， 这样可以测试一些例如loading的显示情况。
2025-02-06 09:22:34
118
原创 React: 用styled- component写一个toggle button
最近的项目需要自己写组件库，不用任何第三方的UI库。用习惯了各种UI组件库，突然觉得自己创建组件库也是一个蛮好玩的事情。今天分享的是toggle button。
2025-01-22 14:41:26
106
原创 Table cell merge
最近做项目，需要根据条件对table cell 进行merge。于是做了一个小demo， 方便日后自己参考。如果相邻两行单元格内容相同， 就merge成一个单元格。如果相邻两列单元格内容相同，就merge成一个单元格。step 1: 创建mock data。step 3: 实现utility。
2024-12-11 18:02:51
335
原创 React Drawer 创建
step 2: 创建一个useMountTransition hook， 至于为什么用这个hook可以参考文章，上下文写的很清楚。step 3: 在components下面创建一个drawer folder, 在drawer folder下面创建一个Drawer.tsx (根据自己项目结构自行调整)根据项目需要，需要自己创建一个通用的sliding Drawer， 可以上下左右弹出。但是因为我门用styled component作为样式库，所以跟文章用的css 略微有些差别， 在此记录一下作为以后参考。
2024-10-08 11:50:31
421
原创 React: 创建路径别名
用Vite创建react项目命令：npm create vite@latest my-react-app --template react-s。这篇主要记录一下用Vite创建的React项目，如何配置路径别名@。路径别名的好处就是做路径简化， 经过配置的@相当于src目录。大家可以试想一下， 如果项目结构比较复杂，当想import一个指定组件的时候， 路径别名的好处是不是就不言而喻了。是一种新型的前端构建工具，能够显著提升前端开发经验，大家可以浏览。
2024-06-24 12:53:22
309
原创 React: 使用Redux
Redux是React最常用的集中状态管理工具，通过集中管理的方式管理应用的状态。从下面的图可以看出， 没用Redux之前，整个组件树之间的通信是比较混乱的。用了Redux之后， 多了一个公共区域Store, 组件树里的任何一个组件都可以去Store里取数据并且修改Store里的数据， 一旦Store里的数据发生变化， 所有用到Store里数据的组件都会得到更新。- reducer：一个函数，根据action的描述生成一个新的state。- state：一个对象， 存放着我们管理的数据的状态。
2024-06-21 14:33:56
1070
原创 React: 组件之间传值
注意props是只读对象，子组件只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件修改。可以传递任何值， 包括基本数据类型， 引用类型， 方法，JSX内容，嵌套在子组件中的内容（子组件会自动在名为。以下列场景为例，在App组件内部获取子组件ref, 然后调用其内部focus方法使子组件内部input聚焦。以下列场景为例，在App组件内部获取子组件ref, 然后让其内部的input元素聚焦。总结：代码很简单，主要是知识点的梳理总结。核心思想是在子组件中调用父组件中的函数并传递参数。
2024-06-11 19:09:38
922
原创 React - router使用
如果想让访问一级路由的时候， 默认二级路由也可以得到渲染，只需在二级路由的位置把path改成index 并设置属性为true。当浏览器访问的url路径在整个路由配置中都找不到相应的path，我们需要使用404 兜底组件进行渲染，提示用户访问的页面不存在。step： 使用React内置的Suspence组件包裹路由中的element选项对应的组件。以上就是React路由最最基本的配置及使用方法，下面对路由使用的不同case逐一说明。step2: 在路由数组的末尾，以*号作为路由path配置路由。
2024-06-10 23:29:59
732
原创 React: memo 允许组件在props没有变化的情况下跳过渲染
运行结果及解析：示例中， 因为传给子组件Child的prop(message) 是一个不变的字符串值，所以当点击‘Update message’ 按钮的时候（这里改变的是状态值msg），并没有触发子组件的重新渲染。我们知道， React组件默认的渲染机制是：只要父组件重新渲染，子组件就会重新渲染。这是因为当点击update message button的时候触发了App组件的重新渲染，导致了list的引用地址发生了变化， 从而触发了子组件的重新渲染。NO NO NO， 我不想这样，怎么解决？
2024-06-08 22:40:55
495
1
原创 React: useMemo 在组件每次重新渲染的时候缓存计算结果
但是我们fn方法只跟number1相关， number2变化的时候也触发了fn方法， 显然存在资源浪费。大家试想一下下面的场景，组件里有两个状态值 number1 和 number2. 按需求，当number1发生变化的时候需要触发fn方法执行计算。点击button ‘change number1’, 从运行结果可以看出， fn 方法被执行了， 符合我们的期待。可以看出，这回当点击button‘change number2’ 的时候， fn方法并没有触发 >_<很显然也是会被触发的。
2024-06-08 14:04:59
274
原创 Angular 高亮搜索关键字
最近做了一个文章发布管理的小项目， 其中一个需求是通过搜索关键字，列出来所有包含关键字的文章， 并且高亮关键字。于是网上搜索了一圈解决方案，本地做了一个小demo, 记录下来。# 搜索框# 根据关键字搜索出来的文章, 用highlighter pipe 高亮参考文章注意：开始的时候参考上面的文章总是没办法实现关键字高亮，然后使用DomSanitizer的bypassSecurityTrustHtml， 解决了问题。下面是Angular DomSanitizer 提供的一些方法。
2024-06-07 14:42:58
713
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人