petsoft
个人笔记, 只记录有意义的地方, 应该没有学习的价值
安装项目
npx create-next-app .
带括号不会被计入路由, 如login的路由是http://localhost:3000/login
允许外链
images: {
remotePatterns: [
{
protocol: "https",
hostname: "bytegrad.com",
}
]
}next.config.mjs
看起来不错的UI库
npx shadcn-ui init<p className="opacity-80">current guests</p>用于设置元素的不透明度
<div className="grid grid-cols-3 grid-rows-[45px_1fr]"></div>网格的第一行高度为45px, 第二行将占用除第一行之外的所有可用空间.
<div className="grid grid-rows-[45px_300px_500px] md:grid-cols-3 md:grid-rows-[45px_1fr] gap-4 h-[600px]">
<div className="md:row-start-1 md:row-span-1 md:col-start-1 md:col-span-1">
<SearchForm />
</div>
<div className="md:row-start-2 md:row-span-full md:col-start-1 md:col-span-1">
<ContentBlock>
<PetList />
</ContentBlock>
</div>
<div className="md:row-start-1 md:row-span-full md:col-start-2 md:col-span-full">
<ContentBlock>
<PetDetails />
</ContentBlock>
</div>
</div>grid的示例, 直接看代码
const handleAddPet = (newPet: Omit<Pet, "id">) => {
setPets((prevPets) => {
return [
...prevPets,
{
id: String(Date.now()),
...newPet,
},
];
});
};处理id属性
prisma
npm install typescript ts-node @types/node --save-devnpm install prisma --save-devnpx prisma init --datasource-provider sqlitenpx prisma db pushBest practice for instantiating Prisma Client with Next.js | Prisma Documentation
Best practice for instantiating Prisma Client with Next.js
添加种子
"prisma": {
"seed": "ts-node --compiler-options {\"module\":\"commonjs\"} prisma/seed.ts"
},package.json中添加
npx prisma db seedexport default function PetFormBtn({ actionType }: petFoemBtnProps) {
const { pending } = useFormStatus();
return (
<Button type="submit" disabled={pending}>
{actionType === "add" ? "Add a new Pet" : "Edit Pet"}
</Button>
);
}管理按钮的状态
const [isPending, startTransition] = useTransition();
<PetButtons
buttonType="checkout"
disabled={isPending}
onclick={async () => {
startTransition(() => {
checkoutPet(selectedPet?.id);
});
}}
/>管理按钮的状态
<form
action={async (formData) => {
if (actionType === "add") {
// onFormSubmit();
handleAddPet(formData);
} else {
// onFormSubmit();
handleEditPet(formData);
}
setTimeout(onFormSubmit, 0);
}}
>久仰setTimeout(0)大名, 今天终于见识了.gpt的解释如下
React Hook Form
Building forms with React Hook Form and Zod.
shadcn
react-hook-form+zod的用法参考这个文档
cursor yyds