当前位置: 首页 > news >正文

【Next.js 项目实战系列】04-修改 Issue

原文链接

CSDN 的排版/样式可能有问题,去我的博客查看原文系列吧,觉得有用的话,给我的库点个star,关注一下吧 

上一篇【Next.js 项目实战系列】03-查看 Issue

修改 Issue

添加修改 Button​

本节代码链接

安装 Radix UI 的 Radix Ui Icons

npm i @radix-ui/react-icons
# /app/issues/[id]/page.tsx...const IssueDeatilPage = async ({ params }: Props) => {...return (// 添加一个 Grid 以分列显示,设置 initial 为 1,在移动设备为每页 1 栏,平板以上则 2 栏<Grid columns={{ initial: "1", md: "2" }} gap="5"><Box><Heading as="h2">{issue.title}</Heading>...</Box>{/*添加一个 Button 用于编辑*/}
+       <Box>
+         <Button>
+           <Pencil2Icon />
+           <Link href={`/issues/${issue.id}/edit`}>Edit Issue</Link>
+         </Button>
+       </Box></Grid>);};export default IssueDeatilPage;

Single Responsbility Principle​

本节代码链接

Software entities should have a single responsibility

重构 /app/issues/[id]/page.tsx 以应用 SRP

  • page.tsx
  • IssueDetails.tsx
  • EditIssueButton.tsx
# /app/issues/[id]/page.tsximport prisma from "@/prisma/client";
import { Box, Grid } from "@radix-ui/themes";
import { notFound } from "next/navigation";
import EditIssueButton from "./EditIssueButton";
import IssueDetails from "./IssueDetails";interface Props {params: { id: string };
}
const IssueDeatilPage = async ({ params }: Props) => {const issue = await prisma.issue.findUnique({where: { id: parseInt(params.id) },});if (!issue) notFound();return (<Grid columns={{ initial: "1", md: "2" }} gap="5"><Box><IssueDetails issue={issue} /></Box><Box><EditIssueButton issueId={issue.id} /></Box></Grid>);
};
export default IssueDeatilPage;
# /app/issues/[id]/IssueDetails.tsximport { IssueStatusBadge } from "@/app/components";
import { Issue } from "@prisma/client";
import { Card, Flex, Heading, Text } from "@radix-ui/themes";
import ReactMarkdown from "react-markdown";const IssueDetails = ({ issue }: { issue: Issue }) => {return (<><Heading as="h2">{issue.title}</Heading><Flex gap="3" my="5"><IssueStatusBadge status={issue.status}></IssueStatusBadge><Text>{issue.createdAt.toDateString()}</Text></Flex><Card className="prose"><ReactMarkdown>{issue.description}</ReactMarkdown></Card></>);
};
export default IssueDetails;
# /app/issues/[id]/EditIssueButton.tsximport { Pencil2Icon } from "@radix-ui/react-icons";
import { Button } from "@radix-ui/themes";
import Link from "next/link";const EditIssueButton = ({ issueId }: { issueId: number }) => {return (<Button><Pencil2Icon /><Link href={`/issues/${issueId}/edit`}>Edit Issue</Link></Button>);
};
export default EditIssueButton;

修改 Issue​

页面​

本节代码链接

我们可以像这样构建文件结构,在 Issue 目录下创建 _components 以放置该目录下需要重复使用的组件,文件夹名前添加下划线就可以把这个文件夹从路由中移除

└─issues│  IssueActions.tsx│  loading.tsx│  page.tsx│├─new│      loading.tsx│      page.tsx│├─[id]│  │  EditIssueButton.tsx│  │  IssueDetails.tsx│  │  loading.tsx│  │  page.tsx│  ││  └─Edit│          page.tsx│└─_componentsIssueForm.tsx

将之前的 new/page.tsx 封装为一个组件,并添加一个可选参数,以初始化

# /app/issues/_components/IssueForm.tsx...
+ import { Issue } from "@prisma/client";...// 添加一个可选参数 issue 类型为之前 prisma 中的 Issue
- const IssueForm = () => {
+ const IssueForm = ({ issue }: { issue?: Issue }) => {...return (<div className="max-w-xl prose">...<TextField.Root><TextField.Input// 将该字段初始化为 issue.title (若传入 issue)
+             defaultValue={issue?.title}placeholder="Title"{...register("title")}/></TextField.Root><ErrorMessage>{errors.title?.message}</ErrorMessage><Controller// 将该字段初始化为 issue.description (若传入 issue)
+           defaultValue={issue?.description}name="description"control={control}render={({ field }) => (<SimpleMDE placeholder="Description" {...field} />)}/>...</div>);};export default IssueForm;

API​

本节代码链接

# /app/api/issues/[id]/route.tsximport { issueSchema } from "@/app/validationSchema";
import { NextRequest, NextResponse } from "next/server";
import prisma from "@/prisma/client";export async function PATCH(request: NextRequest,{ params }: { params: { id: string } }
) {const body = await request.json();const validation = issueSchema.safeParse(body);if (!validation.success)return NextResponse.json(validation.error.format(), { status: 400 });const issue = await prisma.issue.findUnique({where: { id: parseInt(params.id) },});if (!issue)return NextResponse.json({ error: "Invalid Issue" }, { status: 404 });const updatedIssue = await prisma.issue.update({where: { id: issue.id },data: { title: body.title, description: body.description },});return NextResponse.json(updatedIssue, { status: 200 });
}

连接​

本节代码链接

# /app/issues/_components/IssueForm.tsxconst IssueForm = ({ issue }: { issue?: Issue }) => {...return (...<formclassName="space-y-3"onSubmit={handleSubmit(async (data) => {try {setSubmitting(true);// 判断是否传入了 issue,若有传入则是 Update,若无则是 new
+           if (issue) await axios.patch("/api/issues/" + issue.id, data);
-           await axios.post("/api/issues", data);
+           else await axios.post("/api/issues", data);router.push("/issues");} ...})}>...<Button disabled={isSubmitting}>
+         {issue ? "Update Issue" : "Submit New Issue"}{" "}{isSubmitting && <Spinner />}</Button></form>...);};export default IssueForm;

Caching​

本节代码链接

NextJS Route Segment Config

  • Data Cache:
    • When we fetch data using fetch()
    • Stored in the file system
    • Permanent unitl we redeploy
    • fetch(".",{cache: "no-store"})
    • fetch(".",{revalidata: 3600})
  • Full Route Cache
    • Used to store the output of statically renderd routes
  • Router Cache (Client-side Cache)
    • To store the payload of pages in browser
    • Lasts for a session
    • Gets refreshed when we reload

提升 Loading 体验​

本节代码链接

由于我们要在多个地方用到 IssueForm 的 Skeleton,我们可以将其封装到一个组件里,然后在需要的地方调用。其次,对于静态的页面可以直接使用 loading.tsx,但是对于需要用到 dynamic 函数的页面,应该用另一种方法

  • IssueFormSkeleton.tsx
  • page.tsx
  • loading.tsx
# /app/issues/_components/IssueFormSkeleton.tsximport { Skeleton } from "@/app/components";
import { Box } from "@radix-ui/themes";const IssueFormSkeleton = () => {return (<Box className="max-w-xl"><Skeleton height="2rem" /><Skeleton height="20rem" /></Box>);
};
export default IssueFormSkeleton;
# /app/issues/[id]/edit/page.tsximport prisma from "@/prisma/client";
import dynamic from "next/dynamic";
import { notFound } from "next/navigation";
import IssueFormSkeleton from "./loading";const IssueForm = dynamic(() => import("@/app/issues/_components/IssueForm"), {ssr: false,loading: () => <IssueFormSkeleton />,
});interface Props {params: { id: string };
}const EditIssuePage = async ({ params }: Props) => {const issue = await prisma.issue.findUnique({where: { id: parseInt(params.id) },});if (!issue) notFound();return <IssueForm issue={issue} />;
};
export default EditIssuePage;
# /app/issues/[id]/edit/loading.tsximport IssueFormSkeleton from "@/app/issues/_components/IssueFormSkeleton";
export default IssueFormSkeleton;

CSDN 的排版/样式可能有问题,去我的博客查看原文系列吧,觉得有用的话,给我的库点个star,关注一下吧  

下一篇讲删除 Issue

下一篇【Next.js 项目实战系列】05-删除 Issue

http://www.lryc.cn/news/464705.html

相关文章:

  • 【Linux】并行与并发(含时间片)
  • 【Flutter】页面布局:弹性布局(Flex)
  • 深入解析 Go 语言接口:多接口实现与接口组合的实际应用
  • Eclipse——Java开发详解
  • 练手小项目推荐
  • 一图秒懂色彩空间和色彩模型
  • 控制Stable Diffusion生成质量的多种方法
  • 递归算法笔记
  • Android——发送彩信
  • 对比迁移项目的改动
  • 数据结构-复杂度
  • 无人机之放电速率篇
  • 免费开源AI助手,颠覆你的数字生活体验
  • VMware虚拟机三种网络模式详解
  • 【算法篇】动态规划类(4)——子序列(笔记)
  • 【图解版】力扣第162题:寻找峰值
  • Windows电脑桌面如何弄个好用的提醒备忘录?
  • Windows API 一 ----起步
  • 音视频入门基础:H.264专题(19)——FFmpeg源码中,获取avcC封装的H.264码流中每个NALU的长度的实现
  • 【uniapp】设置公共样式,实现公共背景等
  • Node.js学习笔记
  • resnetv1骨干
  • 设计模式,面试级别的详解(持续更新中)
  • 第9篇:网络访问控制与认证机制
  • CentOS安装NVIDIA驱动、CUDA以及nvidia-container-toolkit
  • STM32调试,发现HAL_Init();之后无法调试,甚至无法让程序停下来
  • Ajax(web笔记)
  • 多入口+vite+vue3预渲染方案
  • Vue3+Ts函数封装与应用
  • C语言全局变量和局部变量同时应用的题题型[求一堆数组中10个学生的成绩里最高分、最低分和平均分。]