威海建设银行网站,网站建设 书,广州外贸企业网站建设,支付宝手机网站支付原文链接 CSDN 的排版/样式可能有问题#xff0c;去我的博客查看原文系列吧#xff0c;觉得有用的话#xff0c;给我的库点个star#xff0c;关注一下吧 上一篇【Next.js 项目实战系列】04-修改 Issue
删除 Issue
添加删除 Button
本节代码链接
这里我们主要关注布局…原文链接 CSDN 的排版/样式可能有问题去我的博客查看原文系列吧觉得有用的话给我的库点个star关注一下吧 上一篇【Next.js 项目实战系列】04-修改 Issue
删除 Issue
添加删除 Button
本节代码链接
这里我们主要关注布局的问题我们调整 Grid 的 columns 与第一个 Box 的设置使得在小设备上两个 Box 上下排布在中等及以上左边 Box 占屏幕 80%
# /app/issues/[id]/page.tsxconst IssueDeatilPage async ({ params }: Props) {...return (Grid columns{{ initial: 1, sm: 5 }} gap5Box classNamemd:col-span-4IssueDetails issue{issue} //BoxBoxFlex directioncolumn gap3EditIssueButton issueId{issue.id} /DeleteIssueButton issueId{issue.id} //Flex/Box/Grid);};export default IssueDeatilPage;其次在 layout.tsx 中将 main 中所有内容用 Radix UI 中的 Container 包起来以实现居中最终显示效果如下 添加确认框
本节代码链接
# /app/issues/[id]/DeleteIssueButton.tsxuse client;
import { AlertDialog, Button, Flex } from radix-ui/themes;
import { Cross2Icon } from radix-ui/react-icons;const DeleteIssueButton ({ issueId }: { issueId: number }) {return (AlertDialog.RootAlertDialog.TriggerButton colorredCross2Icon /Delete Issue/Button/AlertDialog.TriggerAlertDialog.ContentAlertDialog.TitleConfirm Deletion/AlertDialog.TitleAlertDialog.DescriptionAre you sure you want to delete this? This action cannot be undone./AlertDialog.DescriptionFlex mt4 gap4AlertDialog.CancelButton variantsoft colorgrayCancel/Button/AlertDialog.CancelAlertDialog.ActionButton colorredDelete Issue/Button/AlertDialog.Action/Flex/AlertDialog.Content/AlertDialog.Root);
};
export default DeleteIssueButton;显示效果如下 删除 Issue
API
本节代码链接
# /app/api/issues/[id]/route.tsxexport async function DELETE(request: NextRequest,{ params }: { params: { id: string } }
) {const issue await prisma.issue.findUnique({where: { id: parseInt(params.id) },});if (!issue)return NextResponse.json({ error: Invalid Issue }, { status: 404 });await prisma.issue.delete({where: { id: issue.id },});return NextResponse.json({ status: 200 });
}连接
本节代码链接
# /app/issues/[id]/DeleteIssueButton.tsx...import axios from axios;import { useRouter } from next/navigation;const DeleteIssueButton ({ issueId }: { issueId: number }) {const router useRouter();const handleDelete async () {await axios.delete(/api/issues/ issueId);router.push(/issues);router.refresh();};return (...AlertDialog.ActionButton colorred onClick{handleDelete}Delete Issue/Button/AlertDialog.Action...);};export default DeleteIssueButton;处理 error
本节代码链接
# /app/issues/[id]/DeleteIssueButton.tsx...import { useState } from react;const DeleteIssueButton ({ issueId }: { issueId: number }) {const [error, setError] useState(false);const handleDeleteIssue async () {try {await axios.delete(/api/issues/ issueId);router.push(/issues);router.refresh();} catch (error) {setError(true);}};return (AlertDialog.Root.../AlertDialog.RootAlertDialog.Root open{error}AlertDialog.ContentAlertDialog.TitleError/AlertDialog.TitleAlertDialog.DescriptionThis issue could not be deleted/AlertDialog.DescriptionButtoncolorgrayvariantsoftmt4onClick{() setError(false)}OK/Button/AlertDialog.Content/AlertDialog.Root/);};export default DeleteIssueButton;效果如下在发生错误时会弹出这样一个框 优化用户体验
本节代码链接
和Button 优化技巧一章相同我们可以添加一个 Spinner 和 Disable 来优化用户体验
# /app/issues/[id]/DeleteIssueButton.tsx import { Spinner } from /app/components;const DeleteIssueButton ({ issueId }: { issueId: number }) {const [isDeleting, setDeleting] useState(false);const handleDeleteIssue async () {try {setDeleting(true);await axios.delete(/api/issues/ issueId);router.push(/issues);router.refresh();} catch (error) {setDeleting(false);setError(true);}};return (...AlertDialog.TriggerButton colorred disabled{isDeleting}Cross2Icon /Delete Issue{isDeleting Spinner /}/Button/AlertDialog.Trigger...);};export default DeleteIssueButton; CSDN 的排版/样式可能有问题去我的博客查看原文系列吧觉得有用的话给我的库点个star关注一下吧 下一篇讲身份验证
【Next.js 项目实战系列】06-身份验证
