- 博客(454)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 记录自己灵感闪现的开发语录 每日更新 记录变强或者变得更菜的过程
2018年8月6日 今日博客排名115万+ 1、大多数人不想成为菜鸟，但现实是大多数人是菜鸟，包括我。
2018-08-05 12:50:32
420
原创 Electron vue 进程间消息通行
在 Electron 应用中，IPC（Inter-Process Communication，进程间通信）是一种允许主进程（main process）和渲染进程（renderer process）之间交换数据的方式。ipcRenderer.send 在渲染进程中调用， ipcMain 的事件监听器在主进程中设置。
2024-04-25 14:54:56
68
原创 zustand关于状态变化，是写在内部，还是外部
在Zustand内部定义状态和操作函数，并通过useStore hook来访问状态和操作函数，可以更好地组织代码，并且避免了不必要的重复代码。此外，将逻辑写在Zustand内部还可以更好地利用Zustand的自动订阅和更新机制，确保状态的一致性和可靠性。总的来说，将逻辑写在Zustand内部可以使代码更加清晰和易于维护，同时也能更好地利用Zustand提供的功能和优势。因此，建议将逻辑写在Zustand内部，并在需要修改状态时使用内部的操作函数来更新状态。
2024-04-23 16:53:06
266
原创 next14报错“getStaticProps“ is not supported in app
正在做next12到next14的升级，在next14中，推荐把代码写到app中，所以当我把next12中的page的页面，复制到next14中的app目录中，报错。
2024-04-21 11:22:14
197
原创 i18next serverSideTranslations 的使用
提供的一个方法，用于在服务器端获取翻译数据并传递给页面组件。这可以确保页面在首次加载时就包含所需的翻译数据，从而提高性能和。方法来实现国际化，确保页面在服务器端加载时就包含所需的翻译数据。是一个流行的国际化（i18n）库，它可以帮助应用程序中实现多语言支持。方法在服务器端获取翻译数据，并将其传递给页面组件。然后将返回的翻译数据作为 props 传递给页面组件。集成的官方插件，它提供了一种简单的方式来在。下面是一个示例代码，演示如何在。应用程序中实现国际化。在上述示例中，我们通过。通过这种方式，可以在。
2024-04-20 18:07:42
100
原创 Next实现 i18n 传递 locales 给 getStaticPaths
获取到传递的语言版本信息，然后根据这些语言版本生成对应的动态路由路径。通过这种方式，可以在 Next.js 中实现国际化，并在。下面是一个示例代码，演示如何在。文件定义可用的语言版本，并将这些。来生成多语言版本的动态路由路径。在上述示例中，通过配置。2、在页面组件中使用。
2024-04-20 16:55:56
260
原创 Next 中 getStaticPaths 和 getStaticProps 配合使用
用于获取动态路由对应页面的数据。通过配合使用这两个函数，可以实现动态路由的静态生成页面，并在构建时获取相应的数据。中一起使用的两个函数，用于实现动态路由和静态生成页面的数据获取。如果参数是不确定的或需要动态获取，可以在。可以很好地配合使用，实现动态路由的静态生成页面和数据获取。请注意，如果您的动态路由参数是在构建时已知的，可以在。用于生成动态路由的路径，而。中根据参数获取数据。在使用这两个函数时，
2024-04-20 16:37:05
213
原创 nextjs getStaticProps 和 getServerSideProps 区别
用于服务器端渲染页面，适用于需要每次请求时动态获取数据的情况。根据页面的需求和数据更新频率，您可以选择合适的函数来获取数据并注入到页面中。中用于数据获取的两个重要函数，它们在页面渲染时分别起到不同的作用。用于静态生成页面，适用于不频繁变化的内容，而。
2024-04-20 16:26:22
184
原创 next server 组件 加载client 组件，使用suspense
在Next.js中，你可以使用next/server模块中的suspense功能来实现组件的异步加载。这通常用于在服务端渲染时处理异步数据获取的场景。提供的一个高阶组件，它用于包装异步组件，以便在服务端渲染时处理异步加载的逻辑。特有的API，不是React的一部分，因此它不会在不支持。是一个通过代码分割的方式异步加载的组件。
2024-04-20 09:48:50
228
原创 React函数组件，不能直接将 ref 属性传递给组件，需要使用 React.forwardRef 来包裹组件以支持 ref
【代码】React函数组件，不能直接将 ref 属性传递给组件，需要使用 React.forwardRef 来包裹组件以支持 ref。
2024-04-15 10:41:55
114
原创 在React类组件中引用在其他文件中创建的zustand状态store
如果想在React类组件中引用在其他文件中创建的。导出并在类组件中引入使用。您可以在其他文件中创建。以下是一个示例，展示了如何在其他文件中创建。生命周期方法中使用该钩子来获取和更新状态。，并将其导出，然后在类组件中引入并使用该。，并在React类组件中引入和使用该。在上面的示例中，我们在。
2024-04-14 14:01:41
235
原创 zustand状态库在react类组件中使用
通常与函数式组件一起使用，但也可以在类组件中使用。如果想在React类组件中使用。状态管理库，可以在类组件中调用。钩子来访问和更新状态。
2024-04-14 13:53:41
301
原创 代码开发常见模块引入顺序规范
类型定义或常量（例如：ColumnType、InquiryOrderItemTableGetColOptions）根据以上规范，你可以将给出的模块按照对应的组别进行整理，以符合规范的引入顺序。这种规范有助于提高代码的可读性和维护性。
2024-04-13 09:19:24
215
原创 vite 全部引入模块和按需应入模块，打包大小区别，结论无区别
是指在打包过程中，工具会分析代码中的依赖关系，只将被引用的模块打包进最终的输出文件，未被引用的模块会被剔除。这样可以减小最终打包文件的体积，提高加载性能。这两种方式引入模块的打包结果是一样的，因为 Vite 在打包时会进行 Tree-shaking（树摇）优化。Vite 都会只打包被实际引用的部分，因此最终打包后的文件大小是一样的。在 Vite 中，使用。
2024-04-13 09:14:52
80
原创 vite打包大小可视化rollup-plugin-visualizer
在 Vite 项目中使用 rollup-plugin-visualizer 插件可以可视化分析打包后的文件大小。当运行打包命令后，会生成一个名为 stats.html 的文件，可以在浏览器中打开该文件来查看可视化的打包分析报告。在上面的配置中，filename 参数指定生成的可视化分析报告的文件路径，title 参数指定报告的标题。
2024-04-12 23:49:00
228
原创 zustand的UseBoundStore特性
库中的一个高级特性，它允许你创建一个新的钩子函数，该钩子函数只会订阅状态容器（store）中特定部分的状态，而不是整个 store。这有助于优化 React 组件的性能，因为只有当关心的状态发生变化时，组件才会重新渲染。需要注意的是，尽管 UseBoundStore 提供了更细粒度的状态订阅，但过度使用它可能会导致代码变得复杂。这种方法的优势在于它允许你更精细地控制组件的渲染行为，减少不必要的重新渲染，从而提高应用性能。方法返回的是一个新的钩子函数，它接受一个选择器函数作为参数。
2024-04-11 09:03:50
215
原创 FormData apend 几个变量，然后打印，不能直接打印出数据
在上面的代码中，我们首先创建了一个FormData实例，然后使用append方法向其中添加了三个键值对。of循环来遍历FormData对象的条目，并使用entries方法获取每一对键和值，然后将它们打印到控制台。对象的设计初衷是为了与XHR（XMLHttpRequest）或Fetch API一起使用，以发送表单数据，因此它并不是为了直接打印到控制台而设计的。上面的代码展示了如何查看其内容，但它并不提供一个直接的字符串表示形式。这将会打印出一个包含所有键值对的字符串，每对键值占一行。
2024-04-10 17:34:26
188
原创 antd react 上传组件 customRequest 讲解
的上传组件会使用内部的请求逻辑来处理文件上传。但是，很多时候，我们需要根据自己的业务需求来定制上传逻辑，比如添加认证信息、使用特定的 HTTP 请求库、处理复杂的上传流程等。这时，我们就可以使用。（Ant Design）是一个流行的 React UI 库，提供了丰富的组件以帮助开发者快速构建美观且功能强大的用户界面。是一个函数，它会在用户选择文件并触发上传时被调用。是一个非常重要的属性，它允许开发者自定义上传文件的请求逻辑。下面是一个简单的示例，展示了如何使用。），另一个是一个用于中断上传的函数（
2024-04-10 10:40:13
469
原创 react类组件转化为函数组件
2、**处理状态和生命周期：**如果类组件中有状态（state）和生命周期方法（如 componentDidMount、componentDidUpdate 等），可以使用 React Hooks 来处理状态和副作用。在上面的示例中，我们将一个简单的计数器类组件转换为函数组件。1、**提取渲染逻辑：**将类组件中的 render() 方法中的 JSX 代码提取出来，作为函数组件中的返回值。3、**转换类组件为函数组件：**将类组件的类定义转换为一个函数定义，并在函数中返回之前提取的 JSX 代码。
2024-04-09 16:10:11
393
原创 react ant design 通过函数弹出 modal窗口
通过以上步骤，当按钮被点击时，会弹出一个Modal窗口显示指定的内容。在Modal.info方法中，可以根据需求设置Modal的标题、内容和按钮点击事件等。中，可以通过调用Modal组件的方法来动态弹出和关闭Modal窗口。
2024-04-09 13:47:19
430
原创 mac 怎么在 iterm 中 打印文件路径 树结构
在 macOS 的 iTerm 终端中，可以使用 tree 命令来打印文件路径的树状结构。这里 -L 选项后跟的数字代表树的最大深度。
2024-04-09 09:36:39
489
原创 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
289
原创 getStaticProps 和 getServerSideProps 区别
getServerSideProps：用于服务器渲染页面（Server-Side Rendering），这些页面在每次请求时都会重新渲染，可以包含实时或基于用户请求的数据。都是 Next.js 中强大的数据获取工具，它们各自适用于不同的场景和需求。：通常用于静态生成页面（Static Generation），这些页面在构建时就已经确定内容，并且不依赖于客户端请求时的实时数据。在构建时获取数据并生成静态页面，因此它通常具有更好的性能和可伸缩性，因为服务器不需要为每个请求重新计算和渲染页面。
2024-04-07 09:06:17
172
原创 nextjs+shadcn学习
page.tsx代码return (return (</return (return (return (return (</return (return (return (return (</return (界面效果。
2024-03-31 21:15:51
290
原创 supabase+prisma使用
执行完成，可以看到supabase中表已经创建完毕。密码：91WNjThcUhde8QHb。执行命令，进行数据模型迁移。数据库名称：blog。
2024-03-25 14:38:54
316
原创 nextjs getServerSideProps 中 context 获取当前的路由
context 对象包含一个 req 属性，它是一个 HTTP 请求对象。但是，请注意，req 对象通常是一个 Node.js 的 http.IncomingMessage 对象，它本身并不直接包含路由信息。要获取路由信息，您通常需要解析请求的 URL。这个函数接收一个上下文对象作为参数，这个对象包含了页面的请求信息，其中也包括当前的路由信息。从 Next.js 10 开始，context 对象中增加了一个 resolvedUrl 属性，它提供了完整的解析后的 URL 对象，
2024-03-24 21:24:26
168
原创 fs-extra 抱错解决 TypeError: Cannot read property ‘native‘ of undefined
在函数中，使用到的地方引入，修改为动态的。原来的写法，直接在最上面。
2024-03-23 23:06:05
141
原创 nextjs使用Link跳转改变query会触发getServerSideProps吗？答案否
使用 getInitialProps 或 fetch 在客户端获取数据：如果你只是想在客户端处理查询参数的变化，并获取相应的数据，你可以考虑在组件内部使用 getInitialProps（如果你的 Next.js 版本较旧）或在页面组件中使用自定义的 fetch 函数。这样，当查询参数变化时，实际上是导航到了一个新的页面，从而触发了 getServerSideProps。它通常在页面第一次加载时触发，或者在页面通过路由参数变化时触发（如果页面依赖于路由参数来获取数据）。，你需要采取一些额外的步骤。
2024-03-22 10:30:22
340
原创 nextjs getServerSideProps 获取url中的参数
请注意，如果正在使用动态路由（例如 pages/example/[id].js），还可以通过 context.params 对象访问路径参数。函数接收一个上下文对象（通常命名为 context），其中包含了有关请求的信息，包括查询参数、路径参数等。然后，可以使用这些参数进行数据获取或其他操作，并将结果作为 props 返回给页面组件。可以通过解构赋值的方式从。对象中提取所需的参数，如。函数的上下文对象来获取。
2024-03-22 09:53:23
298
原创 nextjs 使用 lru-cache 进行缓存，在api里访问不到page中的缓存
解决这个问题的一种常见方法是将缓存实例化为一个单独的模块，并在页面和API路由中共享这个模块。这样，无论是页面还是API路由，它们都可以访问到相同的缓存实例，从而实现数据共享。这样，页面和API路由都可以通过引入相同的cache.js文件来访问相同的缓存实例，实现数据共享。因为Next.js中的页面和API路由是两个不同的执行上下文，它们之间的数据共享并不直接。
2024-03-18 10:37:12
349
原创 网页SPA和MPA的区别
最后，从用户体验和开发效率的角度来看，SPA通常能提供更好的用户体验，因为它可以提供流畅的交互和动态更新，尤其适用于需要频繁交互和实时更新的应用。此外，MPA的开发模式可能更为简单，因为每个页面都是独立的，可以单独开发和测试。这意味着SPA的首屏加载时间可能较长，但之后的页面切换和更新都是通过动态修改页面的内容来完成的，无需重新加载整个页面。其次，从页面切换方式来看，SPA是通过前端路由来实现页面的切换的，它可以根据URL来加载对应的页面内容。而MPA则一般是通过超链接等传统的页面跳转方式来切换页面。
2024-03-17 09:48:42
256
原创 nextjs router.asPath router.pathname 介绍
返回当前页面的路径名，不包括查询参数。这个属性对于只需要获取页面路径名的情况很有用，比如进行路由条件判断或构建其他 URL。对象提供了很多有用的方法和属性，帮助你控制页面导航和获取当前路由信息。对象还提供了很多其他方法和属性，用于控制页面导航、获取查询参数等。的情况非常有用，比如在某些 UI 元素中显示当前页面的链接。路径，包括查询参数。这个属性对于需要显示当前完整。是两个常用的属性，它们各自提供了关于当前。在 Next.js 中，
2024-03-16 23:56:44
244
原创 node一直在同一行打印
在这个例子中，Processing…会首先被打印，然后当异步操作完成后，光标会被移回行首（\r），并打印 Done!，覆盖掉之前的文本。如果你想要在同一行上的特定位置打印文本，你可以使用 ANSI 转义序列来移动光标。使用 process.stdout.write() 在同一行上连续打印内容，而不让光标移动到新的一行。使用 ANSI 转义序列移动光标。
2024-03-14 17:06:08
156
原创 axios 请求 url 地址，判断网络地址是否存在
这个示例中的 isUrlReachable 函数会发送一个 GET 请求到指定的 URL，并返回一个 Promise。如果 URL 可连接，Promise 将解析为 true；否则，Promise 将解析为 false。同时，它会捕获并处理各种可能的错误情况。使用 axios 来判断一个 URL 地址是否可连接，通常涉及到发送一个 HTTP 请求到这个地址，并检查响应的状态码。如果请求成功，并且返回了 200 OK 状态码，那么通常可以认为这个地址是可连接的。
2024-03-14 16:27:48
389
原创 node glob 根据指定目录，获取目录和子目录中所有文件
在 Node.js 中，glob 是一个强大的库，它使用模式匹配来查找与指定模式匹配的文件路径。你可以使用它来根据一个目录获取该目录及其所有子目录中的所有文件。使用 glob.sync 时，它会直接返回匹配的文件路径数组，或者在出错时抛出异常。默认是异步的，它接受一个回调函数来处理找到的文件路径。如果你需要同步版本，是一个 glob 通配符，表示匹配任意数量的目录（包括零个）和任意文件。只返回文件路径，不返回目录路径。如果你还想获取目录路径，只需移除。定义了要匹配的文件模式。
2024-03-14 14:37:46
227
原创 child_process spawn 进入具体目录中 执行命令
在 Node.js 中，如果你想要使用 child_process.spawn 方法在一个特定的目录中执行命令，可以使用 spawn 方法的 cwd（current working directory）选项。这个选项允许指定子进程应该在其上运行命令的目录。
2024-03-14 09:28:59
229
原创 node的child_process执行命令，增加额外参数
在 Node.js 的 child_process 模块中，你可以使用 exec、spawn、execFile 或 fork 方法来执行外部命令。当你需要设置额外的环境变量时，你可以通过 env 选项来指定它们。以下是一个使用 child_process.exec 方法并设置额外环境变量的示例。
2024-03-14 09:14:42
443
instantclient_12_2.zip
2019-09-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人