大赚万万亿

原创 tailwindcss中,自定义多个背景渐变色

原生是to空格bottom,而在tailwindcss中,是to_bottom,要注意逗号后面不要为了格式好看而按回车,这样会导致代码无效。-45deg是代表逆时针旋转。0deg是从底部往上方渐变。多个渐变叠加与显示规则。

原创 react组件外的变量是共用的

2:点击第2个A1.jsx组件的查看console,发现组件外变量已经改变,但界面UI不更新.3:修改第2个A1.jsx的state,渲染页面后发现从war3改成了cs。4:点击第一个A1jsx组件的强制更新,渲染页面后发现war3也改成了cs。一直好奇如果一个组件被多次使用,那么在组件外写的变量是否共用,App.jsx组件,里面调用2次A1.jsx组件。1:点击"改变游戏名",对组件外变量进行修改。结论:组件外的game变量是多个组件共用的。结果实验下来,发现的确是共用的。

原创 新手的postgreSQL笔记

windows下安装postgreSQL后，把bin文件加入到环境变量。例如把E:\PostgreSQL\18\bin加入到Path的系统变量。按下回车后需输入密码,例如11111。将本地sql还原至远程服务器。

原创 TANSTACK Query中,isFetching,isLoading,isPending的区别

状态初始请求请求失败 & 等待重试（延迟）重试请求发起中重试结束（成功/失败）isFetching✅❌✅❌isLoading✅❌❌❌isPending✅❌（通常和 isFetching 配合）❌所以：✅不是在 5 次重试期间这三个状态一直是true。❌ 在“重试延迟期”里这些状态是false。⚠️isLoading特别只和首次加载相关。

原创 关于http状态码4xx与5xx的背锅问题

4xx是前端参数传错,应前端仔背锅。5xx是后端代码错误,应后端仔背锅。

原创 background-position如果填写百分比,该怎么理解?

上面这句话描述得最贴切。

原创 react中用css加载背景图的2种情况

因为源码中已写死了images,所以在调用时,无需重复写images,只需撰写余下路径。就算vite.config.js中设置了base,打包时会自动加上,无需操心。另外如果你的文件夹不是images,可以改成别的文件夹名。css文件中载入背景图,用@或./之类的都可以。resolve.alias已经设置过@路径。行内背景图片地址,在jsx中使用。useImages源码。

原创 motion利用layoutId做补针动画

是。

原创 motion的逐个动画示例

在一个设置，可以让，而不是同时播放。

原创 vscode备份还原插件和设置

不要在cmd中使用，而是在PowerShell中还原。Mac备份设置和插件列表。

原创 postgreSQL设置自增id的起始值

设置自增id从4000开始。

原创 supabase备份数据库中某个schema的方法

备份数据库第一步选择支持ipv4的Transaction pooler免费版supabase未发现可以整体备份的选项，只能单个table备份，为了备份schema,只能在本地计算机里执行pg_dump命令第二步下列命令二选一。

原创 supabase外键查询语句

下面2段查询语句效果一样，!wp_postmeta_post_id_fkey似乎并不重要。因为supabase会自动寻找外键。但一切的前提是需要先去数据库创建外键。

原创 supabase创建安全策略,待续

允许用户查看自己的数据（uud 字段等于当前用户ID的数据）- 允许特定管理员查看所有数据。将上述2个语句合并成一个。

原创 nextjs一些笔记(持续补充)

下面代码如果在layout.tsx中使用,只能获得params,但如果放在page.tsx,那么可以获得params和searchParams。generateMetadata获得的参数。layout.tsx,只有params。

原创 nextjs路由[[...slug]]与[...slug]的区别

特性[...slug]是否必需✅ 必须提供参数❌ 参数可选匹配根路径❌ 不匹配✅ 匹配使用场景必须有参数的页面可同时处理首页和子页面参数处理总是数组可能是 undefined选择哪个取决于业务需求：是否需要单独处理"根路径"的情况。

原创 supabase的api示意图

下面的supabase方法都是由import { createServerClient } from '@supabase/ssr'生成。没有claims,就是null。未登录用户就是null。

原创 supabase新建schema后,无法查询到数据的解决办法

其实官方给出解决办法,只是大家没找到第一步去添加新增的schema第二步在sql中运行如下代码细节:把xxmyschemaxx改成你新建的schema名字。

原创 axios响应发生错误时的情况列表

→ 请求没有得到响应（网络、CORS、超时等）→ HTTP 状态码（如 404、500）→ 判断是否主动取消请求。可以让所有接口都返回。

原创 @tanstack/react-query中isLoading,isFetchingisRefetching的区别

tanstack/react-query中isLoading,isFetchingisRefetching的区别。

原创 用selectNodeContents计算文字行数

如果文字内没有改变文字大小的标签和样式,那么range.getClientRects()返回的长度就是文字所在div里的行数,否则会有误差。

原创 document.createTreeWalker获取文本数的好方法

是 DOM 规范中用于​​的高级方法，它返回一个TreeWalker对象，能够以深度优先（默认）或其他顺序遍历 DOM 子树，并支持按节点类型、名称等条件过滤节点。

原创 win平台，导出postgreSQL数据给supabase

如果数据很多，那么在网页版supabase执行sql的插入数据命令时，会报错，于是只能曲线救国，每次导出一个表的数据，然后插入到supabase中。遇到的问题：免费版supabse不支持ipv4地址连接数据库并导入数据，而我没有ipv6,所以只能逐个导出。将本地数据库wp1020下的schema为hghghg的wp_posts表导出为csv,包含表头行。最近想把wordpress的数据导出,并存放到supabase的PostgreSQL中。导出某表的值为sql文件(不带结构)(若有ipv6,可以试试)

原创 win平台，用pgloader将mysql的数据导入到postgresql

以下操作皆在windows平台💡dimitri就是 pgloader 的作者 Dimitri Fontaine。安装完毕后点击action箭头不会执行，属于正常现象之后不用.load脚本文件，而是用下方命令直接搞定(无需脚本文件)

原创 docker安装php+apache

src文件放一个index.html或wordpress文件即可。在项目的根目录中执行下方命令，等待片刻即可成功访问。同时在docker的gui界面也可以看到成功启动。注意yml文件严格重视缩进，要用空格缩进。

原创 Motion动画的几个例子

viewport={{ once: true, margin: "10px" }}中的margin支持正负的百分比和px。whileTap="tapsss"也表明key的值可以自定义，whileTap也可以接函数。controls.start的实参不仅可以是对象，也可以是字符串（比如本文的例子"都是执行一个函数，里面用 controls.start开启动画。）会直接传递给子元素，子元素通过匹配。细节：非直接子元素也是可以有动画效果。利用whileInView的错开动画。触发动画的方式之点击按钮。

原创 tailwindcss出现could not determine executable to run

在tailwindcss v4版本中,使用如下命令会报错报错信息:npm ERR!于是用chatGPT查答案,给出的一些方法看似合理,但实际都是v3版本的解决方案最后在overflowstack中找到了答案,特此记录overflowStack给的回答TheinitThe use of@config。

原创 useLayoutEffect的执行顺序

渲染阶段（Render Phase）执行函数组件（也就是重新计算 JSX）收集到所有的useEffect回调React 还没真正更新 DOM（只是准备好 Virtual DOM）提交阶段（Commit Phase）React 把变更同步写入真实 DOM此时浏览器还没开始绘制回调 → 先执行浏览器开始绘制（paint）useEffect回调 → 后执行在组件 JSX return 之后、DOM 更新之后、浏览器绘制之前执行。它常用于读取或同步修改 DOM 布局，比如计算尺寸、滚动位置等。

原创 flex-basis与width优先级，flex-shrink收缩说明

原创 零宽字符显示与书写

​名称Unicode用途​​U+200B无视觉宽度，但可换行​​U+200C防止字符连写（如阿拉伯语）​​U+200D强制字符连写（如 Emoji 组合）​​U+2060防止换行​​U+FEFF文件开头标识编码可在vscode中输入node,输入一些字符复制后在vscode中粘贴,vscode会自动提示不可见字符。

原创 我理解的scrollHeight,clientHeight,offsetHeight

offsetHeight=height+paddingTop+paddingBottom+borderTop+borderBottom,不包括任何方向的margin。scrollHeight=clientHeight+scrollTop(子元素若有垂直方向的margin,padding,都会增高scrollHeight)如果有滚动条,那么height值自身会割掉一些值,转移给滚动条,割掉的值成为滚动条的高度。是否有滚动条只影响clientHeight的值,

原创 react组件分离举例,搭配useQuery,useMutation

分离前分离后。

原创 react用useImages读取图片,方便backgroundImage

注意import.meta.glob中定义的文件夹路径,视情况而定,可能是assets或images。

原创 react合成事件大全,如onClick,onDrag

【代码】react合成事件大全,如onClick,onDrag。

原创 Promise的allSettled,all,race

如果有些请求可能会失败，但你不想让一个失败就中断所有，还想知道每个请求最终是成功还是失败了，用Promise.allSettled。只要数组里有一个Promise完成（无论是成功还是失败），它就立刻完成，结果或错误就是那个最快的Promise的。完成的Promise。只有数组里所有的Promise都失败了，它才失败。适合需要尝试多个途径，只要有一个成功就行。下列代码证实了:无论是for或是for of循环, 都会等上一个请求彻底完成，才会开始下一个。

原创 关闭chrome自带的跨域限制,简化本地开发

4. 点击“确定”后等于在桌面为用户在自己电脑创建了一个chrome的私有化浏览器，以后用此图标打开的浏览器将没有跨域限制。在开发时为了图方便,简化本地开发,懒得去后端配置允许跨域,那就可以用此方法。1. 右键桌面上的Chrome浏览器图标，选择“创建快捷方式”到桌面。2. 在新创建的快捷方式的图标上右键，选择“属性”。注意：与前面的chrome.exe"之间留一空格。

原创 passive:true意味着绝不会​调用 preventDefault()，可放心立即执行默认行为(滚动)

（因为这些事件通常不需要阻止默认行为）​ 是否要执行默认行为（如滚动），你可以放心地立即执行默认行为"（因为确实需要条件性地阻止滚动）您的滚动控制逻辑会失效。

原创 mac中创建 .command 文件，执行node服务

1.​.command​用文本编辑器创建文件，命名为2.​​​现在双击文件会自动在终端中执行脚本。

原创 HTTP状态码滥用指南：全栈开发者的REST API最佳实践

HTTP状态码是由Web服务器返回的3位数字，用于指示客户端请求的结果。它们分为五个类别：•1xx（信息性）- 请求正在处理中•2xx（成功）- 请求已成功处理•3xx（重定向）- 需要进一步操作•4xx（客户端错误）- 客户端请求有误•5xx（服务器错误）- 服务器处理请求时出错在RESTful API中，选择正确的状态码可以提高清晰度，帮助调试，并与行业标准保持一致。

原创 使用Mac自带的图像捕捉导出 iPhone 相册

选中想导出的照片（或全选），点击右下角的“将 iPhone 连接到 Mac。打开 Spotlight，输入。左侧栏选择你的 iPhone 设备。等待加载照片缩略图（可能需要几秒）在 iPhone 上点击“