How to Setup React Query in Next.js 13 App Directory
Are you interested in using React Query in your app directory? If so, you’ve come to the right place! In this article, I’ll guide you through the process of setting up React Query and making the QueryClient accessible to...
antd Select下拉滚动加载
(遇到的需求:使用antd Select选择器时,后端数据量非常大 类似这种: <img width="227" height="330" src="../../ resources/fae1c8cd50424ca2a76fd5e30fbd8722 6d84351261fe4b71a.webp" class="jop noMdConv" 准备的解决方法:后端数据分页,前端下拉滚动加载 用到的api: <img width="756" h...
使用Next.js构建并部署个人博客
解析markdown内容 需要安装以下插件: :代码高亮插件 :处理日期 :获取 元数据 :用于解析和渲染 内容 :对 内的链接添加 和 ,使其能够在新页面打开
单标签下的日间与黑夜模式切换按钮效果
前不久,在网上看到这么一张非常有趣的图: 想必很多同学都看到这张图,是一个开发小哥被一个日间/黑夜模式切换按钮效果逼疯的视频。 其最终效果大致如下: 原完整代码在这里:[Night && Day Toggle ☀️/🌙 \[Completed It!\]](https://link.juejin.cn?target=https%3A%2F%2Fcodepen.io%2Fjh3y%2Fpen%2FLYgjpYZ "https://cod...
webstorm tailwindcss 不智能提示
WebStorm 集成 Tailwind CSS 后,可能会出现提示不智能的问题。这通常是由于 WebStorm 默认没有对 Tailwind CSS 的样式进行语法解析,导致无法提供智能提示。 要解决这个问题,你可以手动配置 WebStorm,以便让其支持 Tailwind CSS 的智能提示功能。具体的步骤如下: 1. 在 WebStorm 中打开项目,找到 \ (或者使用快捷键 )进入设置页面。 2. 在左侧菜单栏中找到 \ ,并...
vite配置了proxy代理情况下如何查看真实的接口调用地址
vite配置了proxy代理情况下如何查看真实的接口调用地址? 使用vite进行代理 在vite.config.ts配置了代理 在浏览器查看请求头和响应头发现只有代理前的url,没有显示代理后的路径 然后发现一个bypass函数,但是此函数只能修改res响应头的数据,没法修改req请求头的数据,于是我将代理后的实际路径,设置到了相应头上面,方便分析代理后的实际路径,如图 <img width="756" height="464" src...
如何在 Nextjs 中使用 cookies 来持久化保存用户信息
在 React/NextJS 中使用 cookies 为了在 NextJS 中使用 cookies,我们需要安装两个 packages。在本文中,我们将会使用 cookie 和 react cookie 。 react cookie 允许我们从客户端设置 cookie,而 cookie 则让我们能从服务器端访问设置的 cookie。运行以下命令安装 packages。 功能与 react cookie 相同,但是包体积更小。 设置 co...
nextjs项目配置eslint+prettier
一、安装 \+ prettier + eslint plugin prettier 二、配置.eslintrc.json 三、配置.prettiterrc.js
从零开始的Docker Desktop使用
Docker简介 Docker 就像一个盒子,里面可以装很多物件,如果需要某些物件,可以直接将该盒子拿走,而不需要从该盒子中一件一件的取。 、 Docker 包括三个基本概念: 镜像(Image) Docker的镜像概念类似于虚拟机里的镜像(比如 文件),是一个只读的模板,一个独立的文件系统,包括运行容器所需的数据,可以用来创建新的容器。 例如:一个镜像可以包含一个完整的 ubuntu 操作系统环境,里面仅安装了MySQL或用户需要的其...