- 博客(445)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 记录自己灵感闪现的开发语录 每日更新 记录变强或者变得更菜的过程
2018年8月6日 今日博客排名115万+ 1、大多数人不想成为菜鸟，但现实是大多数人是菜鸟，包括我。
2018-08-05 12:50:32
419
原创 React函数组件，不能直接将 ref 属性传递给组件，需要使用 React.forwardRef 来包裹组件以支持 ref
【代码】React函数组件，不能直接将 ref 属性传递给组件，需要使用 React.forwardRef 来包裹组件以支持 ref。
2024-04-15 10:41:55
111
原创 在React类组件中引用在其他文件中创建的zustand状态store
如果想在React类组件中引用在其他文件中创建的。导出并在类组件中引入使用。您可以在其他文件中创建。以下是一个示例，展示了如何在其他文件中创建。生命周期方法中使用该钩子来获取和更新状态。，并将其导出，然后在类组件中引入并使用该。，并在React类组件中引入和使用该。在上面的示例中，我们在。
2024-04-14 14:01:41
182
原创 zustand状态库在react类组件中使用
通常与函数式组件一起使用，但也可以在类组件中使用。如果想在React类组件中使用。状态管理库，可以在类组件中调用。钩子来访问和更新状态。
2024-04-14 13:53:41
217
原创 代码开发常见模块引入顺序规范
类型定义或常量（例如：ColumnType、InquiryOrderItemTableGetColOptions）根据以上规范，你可以将给出的模块按照对应的组别进行整理，以符合规范的引入顺序。这种规范有助于提高代码的可读性和维护性。
2024-04-13 09:19:24
214
原创 vite 全部引入模块和按需应入模块，打包大小区别，结论无区别
是指在打包过程中，工具会分析代码中的依赖关系，只将被引用的模块打包进最终的输出文件，未被引用的模块会被剔除。这样可以减小最终打包文件的体积，提高加载性能。这两种方式引入模块的打包结果是一样的，因为 Vite 在打包时会进行 Tree-shaking（树摇）优化。Vite 都会只打包被实际引用的部分，因此最终打包后的文件大小是一样的。在 Vite 中，使用。
2024-04-13 09:14:52
77
原创 vite打包大小可视化rollup-plugin-visualizer
在 Vite 项目中使用 rollup-plugin-visualizer 插件可以可视化分析打包后的文件大小。当运行打包命令后，会生成一个名为 stats.html 的文件，可以在浏览器中打开该文件来查看可视化的打包分析报告。在上面的配置中，filename 参数指定生成的可视化分析报告的文件路径，title 参数指定报告的标题。
2024-04-12 23:49:00
206
原创 zustand的UseBoundStore特性
库中的一个高级特性，它允许你创建一个新的钩子函数，该钩子函数只会订阅状态容器（store）中特定部分的状态，而不是整个 store。这有助于优化 React 组件的性能，因为只有当关心的状态发生变化时，组件才会重新渲染。需要注意的是，尽管 UseBoundStore 提供了更细粒度的状态订阅，但过度使用它可能会导致代码变得复杂。这种方法的优势在于它允许你更精细地控制组件的渲染行为，减少不必要的重新渲染，从而提高应用性能。方法返回的是一个新的钩子函数，它接受一个选择器函数作为参数。
2024-04-11 09:03:50
212
原创 FormData apend 几个变量，然后打印，不能直接打印出数据
在上面的代码中，我们首先创建了一个FormData实例，然后使用append方法向其中添加了三个键值对。of循环来遍历FormData对象的条目，并使用entries方法获取每一对键和值，然后将它们打印到控制台。对象的设计初衷是为了与XHR（XMLHttpRequest）或Fetch API一起使用，以发送表单数据，因此它并不是为了直接打印到控制台而设计的。上面的代码展示了如何查看其内容，但它并不提供一个直接的字符串表示形式。这将会打印出一个包含所有键值对的字符串，每对键值占一行。
2024-04-10 17:34:26
180
原创 antd react 上传组件 customRequest 讲解
的上传组件会使用内部的请求逻辑来处理文件上传。但是，很多时候，我们需要根据自己的业务需求来定制上传逻辑，比如添加认证信息、使用特定的 HTTP 请求库、处理复杂的上传流程等。这时，我们就可以使用。（Ant Design）是一个流行的 React UI 库，提供了丰富的组件以帮助开发者快速构建美观且功能强大的用户界面。是一个函数，它会在用户选择文件并触发上传时被调用。是一个非常重要的属性，它允许开发者自定义上传文件的请求逻辑。下面是一个简单的示例，展示了如何使用。），另一个是一个用于中断上传的函数（
2024-04-10 10:40:13
422
原创 react类组件转化为函数组件
2、**处理状态和生命周期：**如果类组件中有状态（state）和生命周期方法（如 componentDidMount、componentDidUpdate 等），可以使用 React Hooks 来处理状态和副作用。在上面的示例中，我们将一个简单的计数器类组件转换为函数组件。1、**提取渲染逻辑：**将类组件中的 render() 方法中的 JSX 代码提取出来，作为函数组件中的返回值。3、**转换类组件为函数组件：**将类组件的类定义转换为一个函数定义，并在函数中返回之前提取的 JSX 代码。
2024-04-09 16:10:11
385
原创 react ant design 通过函数弹出 modal窗口
通过以上步骤，当按钮被点击时，会弹出一个Modal窗口显示指定的内容。在Modal.info方法中，可以根据需求设置Modal的标题、内容和按钮点击事件等。中，可以通过调用Modal组件的方法来动态弹出和关闭Modal窗口。
2024-04-09 13:47:19
407
原创 mac 怎么在 iterm 中 打印文件路径 树结构
在 macOS 的 iTerm 终端中，可以使用 tree 命令来打印文件路径的树状结构。这里 -L 选项后跟的数字代表树的最大深度。
2024-04-09 09:36:39
481
原创 nextjs 14 实现i18n 国际化
库来实现国际化（i18n）。这个库可以帮助你在 Next.js 应用程序中轻松地管理多语言内容。创建一个 public/locales 目录，并在其中为每种语言创建对应的 JSON 文件。例如，en.json 和 fr.json。在 _app.js 文件中使用 appWithTranslation 高阶组件包装应用程序组件。在页面组件中，可以使用 useTranslation 钩子来访问翻译内容。对于 Next.js 14，可以使用。文件，并配置语言设置。通过这些步骤，就可以在。
2024-04-07 20:53:04
252
原创 getStaticProps 和 getServerSideProps 区别
getServerSideProps：用于服务器渲染页面（Server-Side Rendering），这些页面在每次请求时都会重新渲染，可以包含实时或基于用户请求的数据。都是 Next.js 中强大的数据获取工具，它们各自适用于不同的场景和需求。：通常用于静态生成页面（Static Generation），这些页面在构建时就已经确定内容，并且不依赖于客户端请求时的实时数据。在构建时获取数据并生成静态页面，因此它通常具有更好的性能和可伸缩性，因为服务器不需要为每个请求重新计算和渲染页面。
2024-04-07 09:06:17
156
原创 nextjs+shadcn学习
page.tsx代码return (return (</return (return (return (return (</return (return (return (return (</return (界面效果。
2024-03-31 21:15:51
275
原创 supabase+prisma使用
执行完成，可以看到supabase中表已经创建完毕。密码：91WNjThcUhde8QHb。执行命令，进行数据模型迁移。数据库名称：blog。
2024-03-25 14:38:54
314
原创 nextjs getServerSideProps 中 context 获取当前的路由
context 对象包含一个 req 属性，它是一个 HTTP 请求对象。但是，请注意，req 对象通常是一个 Node.js 的 http.IncomingMessage 对象，它本身并不直接包含路由信息。要获取路由信息，您通常需要解析请求的 URL。这个函数接收一个上下文对象作为参数，这个对象包含了页面的请求信息，其中也包括当前的路由信息。从 Next.js 10 开始，context 对象中增加了一个 resolvedUrl 属性，它提供了完整的解析后的 URL 对象，
2024-03-24 21:24:26
161
原创 fs-extra 抱错解决 TypeError: Cannot read property ‘native‘ of undefined
在函数中，使用到的地方引入，修改为动态的。原来的写法，直接在最上面。
2024-03-23 23:06:05
138
原创 nextjs使用Link跳转改变query会触发getServerSideProps吗？答案否
使用 getInitialProps 或 fetch 在客户端获取数据：如果你只是想在客户端处理查询参数的变化，并获取相应的数据，你可以考虑在组件内部使用 getInitialProps（如果你的 Next.js 版本较旧）或在页面组件中使用自定义的 fetch 函数。这样，当查询参数变化时，实际上是导航到了一个新的页面，从而触发了 getServerSideProps。它通常在页面第一次加载时触发，或者在页面通过路由参数变化时触发（如果页面依赖于路由参数来获取数据）。，你需要采取一些额外的步骤。
2024-03-22 10:30:22
338
原创 nextjs getServerSideProps 获取url中的参数
请注意，如果正在使用动态路由（例如 pages/example/[id].js），还可以通过 context.params 对象访问路径参数。函数接收一个上下文对象（通常命名为 context），其中包含了有关请求的信息，包括查询参数、路径参数等。然后，可以使用这些参数进行数据获取或其他操作，并将结果作为 props 返回给页面组件。可以通过解构赋值的方式从。对象中提取所需的参数，如。函数的上下文对象来获取。
2024-03-22 09:53:23
288
原创 nextjs 使用 lru-cache 进行缓存，在api里访问不到page中的缓存
解决这个问题的一种常见方法是将缓存实例化为一个单独的模块，并在页面和API路由中共享这个模块。这样，无论是页面还是API路由，它们都可以访问到相同的缓存实例，从而实现数据共享。这样，页面和API路由都可以通过引入相同的cache.js文件来访问相同的缓存实例，实现数据共享。因为Next.js中的页面和API路由是两个不同的执行上下文，它们之间的数据共享并不直接。
2024-03-18 10:37:12
334
原创 网页SPA和MPA的区别
最后，从用户体验和开发效率的角度来看，SPA通常能提供更好的用户体验，因为它可以提供流畅的交互和动态更新，尤其适用于需要频繁交互和实时更新的应用。此外，MPA的开发模式可能更为简单，因为每个页面都是独立的，可以单独开发和测试。这意味着SPA的首屏加载时间可能较长，但之后的页面切换和更新都是通过动态修改页面的内容来完成的，无需重新加载整个页面。其次，从页面切换方式来看，SPA是通过前端路由来实现页面的切换的，它可以根据URL来加载对应的页面内容。而MPA则一般是通过超链接等传统的页面跳转方式来切换页面。
2024-03-17 09:48:42
255
原创 nextjs router.asPath router.pathname 介绍
返回当前页面的路径名，不包括查询参数。这个属性对于只需要获取页面路径名的情况很有用，比如进行路由条件判断或构建其他 URL。对象提供了很多有用的方法和属性，帮助你控制页面导航和获取当前路由信息。对象还提供了很多其他方法和属性，用于控制页面导航、获取查询参数等。的情况非常有用，比如在某些 UI 元素中显示当前页面的链接。路径，包括查询参数。这个属性对于需要显示当前完整。是两个常用的属性，它们各自提供了关于当前。在 Next.js 中，
2024-03-16 23:56:44
220
原创 node一直在同一行打印
在这个例子中，Processing…会首先被打印，然后当异步操作完成后，光标会被移回行首（\r），并打印 Done!，覆盖掉之前的文本。如果你想要在同一行上的特定位置打印文本，你可以使用 ANSI 转义序列来移动光标。使用 process.stdout.write() 在同一行上连续打印内容，而不让光标移动到新的一行。使用 ANSI 转义序列移动光标。
2024-03-14 17:06:08
154
原创 axios 请求 url 地址，判断网络地址是否存在
这个示例中的 isUrlReachable 函数会发送一个 GET 请求到指定的 URL，并返回一个 Promise。如果 URL 可连接，Promise 将解析为 true；否则，Promise 将解析为 false。同时，它会捕获并处理各种可能的错误情况。使用 axios 来判断一个 URL 地址是否可连接，通常涉及到发送一个 HTTP 请求到这个地址，并检查响应的状态码。如果请求成功，并且返回了 200 OK 状态码，那么通常可以认为这个地址是可连接的。
2024-03-14 16:27:48
378
原创 node glob 根据指定目录，获取目录和子目录中所有文件
在 Node.js 中，glob 是一个强大的库，它使用模式匹配来查找与指定模式匹配的文件路径。你可以使用它来根据一个目录获取该目录及其所有子目录中的所有文件。使用 glob.sync 时，它会直接返回匹配的文件路径数组，或者在出错时抛出异常。默认是异步的，它接受一个回调函数来处理找到的文件路径。如果你需要同步版本，是一个 glob 通配符，表示匹配任意数量的目录（包括零个）和任意文件。只返回文件路径，不返回目录路径。如果你还想获取目录路径，只需移除。定义了要匹配的文件模式。
2024-03-14 14:37:46
216
原创 child_process spawn 进入具体目录中 执行命令
在 Node.js 中，如果你想要使用 child_process.spawn 方法在一个特定的目录中执行命令，可以使用 spawn 方法的 cwd（current working directory）选项。这个选项允许指定子进程应该在其上运行命令的目录。
2024-03-14 09:28:59
207
原创 node的child_process执行命令，增加额外参数
在 Node.js 的 child_process 模块中，你可以使用 exec、spawn、execFile 或 fork 方法来执行外部命令。当你需要设置额外的环境变量时，你可以通过 env 选项来指定它们。以下是一个使用 child_process.exec 方法并设置额外环境变量的示例。
2024-03-14 09:14:42
426
原创 supabase行级安全性策略设置
这个策略的目的是确保只有与 user_id 匹配的用户才能插入新的 watches。请注意，为了使这个策略生效，你需要确保已经在 watches 表上启用了行级安全性（RLS），并且已经为适当的角色或用户分配了使用这个策略的权限。在 Supabase 中，使用 PostgreSQL 的行级安全性（Row-Level Security, RLS）功能来创建策略是一种常见做法，以确保只有特定用户能够执行某些操作（如插入、更新或删除行）。: 这指定了该策略是针对插入操作的。: 这是策略的名称。
2024-03-10 21:54:58
281
原创 nextjs link跳转 和 window.location.href 跳转的区别
Next.js 的 next/link 组件和浏览器原生的 window.location.href 之间的跳转在功能上都实现了页面跳转，但它们之间存在一些重要的区别，特别是在 Next.js 这样的服务端渲染（SSR）或静态站点生成（SSG）框架中。
2024-03-09 14:31:34
410
原创 react中zustand的使用
zustand 还支持中间件和开发者工具，这可以帮助你扩展功能、调试和监控状态。你可以查阅 zustand 的文档来了解更多关于这些高级特性的信息。zustand 是一个轻量级且易于使用的 React 状态管理库。它提供了简单而强大的 API，使你能够轻松地管理应用的状态。通过创建 store、在组件中使用 useStore Hook，以及利用响应式更新，你可以构建出高效且可维护的 React 应用。
2024-03-08 19:43:58
447
原创 nextjs怎么保存本地设置
在 Next.js 中保存本地设置通常涉及使用浏览器端的存储机制，如 localStorage 或 sessionStorage。这些机制允许你在用户的浏览器中存储键值对，从而实现用户特定的设置或偏好。
2024-03-08 16:14:37
259
原创 nextjs中配置images domains 有什么用
通过明确指定哪些域名是可信的，Next.js 可以确保只对这些域名下的图像进行优化，从而避免潜在的攻击。例如，如果你的图像存储在 Cloudinary 或 Imgur 等服务上，你需要将它们的域名添加到 images.domains 配置中，以便 Next.js 可以对这些图像进行优化。组件，或者你的图像存储服务不需要 Next.js 的优化，你可能不需要配置 images.domains。组件来加载图像时，Next.js 会自动处理图像的加载，包括自动压缩、格式转换以及响应式图像等优化。
2024-03-07 16:58:11
197
原创 react组件中svg的放置位置，是放到组件文件夹，还是放置到统一管理的地方
在React项目中，SVG的放置位置主要取决于你的项目规模和团队习惯。
2024-03-07 10:33:34
413
原创 使用typescript将2024-03-05T00:00:00+00:00这种格式 怎么转化为 年月日
在这个函数中，new Date(isoDateString) 创建了一个 Date 对象，它表示了 ISO 格式的日期时间字符串所代表的日期和时间。在 TypeScript 中，你可以使用 JavaScript 的 Date 对象来解析这个 ISO 格式的日期时间字符串，并从中提取出年月日的信息。最后，我们将这三个部分拼接成一个格式为 “YYYY-MM-DD” 的字符串，并返回这个字符串。在示例中，formattedDate 变量将包含 “2024-03-05”，这正是预期结果。
2024-03-07 10:12:09
295
instantclient_12_2.zip
2019-09-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人