如何使用 Next.js、 Prisma、Postgres 和 Fastify 构建全栈应用程序( 五 )

2025-12-16 全栈

Date Name Email Role Sign In Time Sign Out Time{(attendance.length === 0)&&(<> {id} {createdAt} No User signed this sheet)}{attendance.map(data => {const {name, email, role} = data.userreturn ({id} {createdAt}{name} {email}{role}{data.signInTime}{data.signOut ? attendance[0]?.signOutTime: "User did not Sign Out"})})})})}

)}
在下面的代码片段中，我们将查询 attancesheet 表中的所有行，并通过选择姓名、电子邮件和角色来获取出席率。
JavaScript

export const getServerSideProps = withIronSessionSsr(async () => {const prisma = new PrismaClient()const attendanceSheet = await prisma.attendanceSheet.findMany({orderBy: {id: 'desc',},include: {attendance: {include: {user: {select: {name: true,email: true,role: true}}}},},})return {props: {attendanceSheet: JSON.stringify(attendanceSheet),}}}, sessionCookie())

测试应用程序首先，我们必须将用户添加到数据库中。我们要用Prisma做这个。要启动 Prisma ，请运行以下命令:
Shell
npx prisma studio
Prisma 索引页面如下:
如何使用 Next.js、 Prisma、Postgres 和 Fastify 构建全栈应用程序

文章插图

要创建一个具有 ADMIN 角色的数据库用户和多个具有 EMPLOYEE 角色的用户，请访问以下页面:
如何使用 Next.js、 Prisma、Postgres 和 Fastify 构建全栈应用程序

文章插图

单击 Add record，然后填写所需的字段: password、 name、 email 和 role 。完成后，单击绿色的 Save 1 change 按钮。注意，为了简单起见，我们没有散列密码。

用yarn dev启动服务器。这将启动服务器并在[ localhost: 3000](< http://localhost:3000)上运行应用程序，登录页面如下所示。
如何使用 Next.js、 Prisma、Postgres 和 Fastify 构建全栈应用程序

文章插图

使用具有 ADMIN 角色的用户登录，因为只有管理用户可以创建考勤表。一旦登录成功，应用程序将重定向到您的仪表板。
单击 CreateAtnatureShet 按钮创建考勤表，然后等待请求完成，考勤表将出现。用户仪表板如下所示。
如何使用 Next.js、 Prisma、Postgres 和 Fastify 构建全栈应用程序

文章插图

出勤表如下所示，单击“登录”按钮即可登录。登录成功后，将显示登录时间，并且可以看到 Sign Out 按钮。单击“登出”按钮登出，并与不同的用户多次重复此过程。
如何使用 Next.js、 Prisma、Postgres 和 Fastify 构建全栈应用程序

文章插图

接下来点击侧边栏中的出席链接，查看用户的出席情况。结果应与下列结果相符:
如何使用 Next.js、 Prisma、Postgres 和 Fastify 构建全栈应用程序

文章插图

接下来点击侧边栏上的出勤表链接，查看所有用户的出勤情况。结果如下:
如何使用 Next.js、 Prisma、Postgres 和 Fastify 构建全栈应用程序

文章插图

结论在本文中，您学习了如何在 Next.js 中使用自定义 Fastify 服务器。您还了解了 Prisma 和 Prisma 工作室。我已经向您介绍了如何将 Prisma 连接到 Postgres 数据库，以及如何使用 Prisma 客户端和 Prisma studio创建、读取和更新数据库。
您还学习了如何使用铁会话对用户进行身份验证。在本教程中，我们构建了一个完整的应用程序，它使用 Next.js、 Prisma、 Postgres 和 Fastify 管理员工出勤率。请继续收听，下次再见。

【如何使用 Next.js、 Prisma、Postgres 和 Fastify 构建全栈应用程序】