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

2025-12-25 全栈

)} 设置登录 API 路由现在打开页面/api/login.js 文件并添加以下代码片段。我们将使用 Prismaclient 进行数据库查询，IronSessionApiRoute 是用于处理 RESTful 应用程序中的用户会话的铁会话函数。
此路由处理对 localhost: 3000/api/login 的登录 POST 请求，并在用户通过身份验证后生成身份验证 Cookie 。
JavaScript

import { PrismaClient } from '@prisma/client'import { withIronSessionApiRoute } from "iron-session/next";import { parseBody } from '../../lib/parseBody';import { sessionCookie } from '../../lib/session';export default withIronSessionApiRoute(async function loginRoute(req, res) {const { email, password } = parseBody(req.body)const prisma = new PrismaClient()// By unique identifierconst user = await prisma.user.findUnique({where: {email},})if(user.password === password) {// get user from database then:user.password = undefinedreq.session.user = userawait req.session.save();return res.send({ status: 'success', data: user });};res.send({ status: 'error', message: "incorrect email or password" });},sessionCookie(),);

设置注销 API 路由打开/page/api/logout 文件并添加下面的代码段。此路由处理对 localhost 的 GET 请求: 3000/api/logout，该请求通过销毁会话 cookie 将用户注销。
JavaScript

import { withIronSessionApiRoute } from "iron-session/next";import { sessionCookie } from "../../lib/session";export default withIronSessionApiRoute(function logoutRoute(req, res, session) {req.session.destroy();res.send({ status: "success" });},sessionCookie());

创建仪表板页此页面为用户提供了登录和退出考勤表的界面。管理员还可以创建考勤表。打开 page/dashboard/index.js 文件并添加下面的代码片段。
JavaScript

import { withIronSessionSsr } from "iron-session/next";import Head from 'next/head'import { useState, useCallback } from "react";import { PrismaClient } from '@prisma/client'import SideBar from '../../components/SideBar'import styles from '../../styles/Home.module.css'import dashboard from '../../styles/Dashboard.module.css'import { sessionCookie } from "../../lib/session";import { postData } from "../../lib/request";export default function Page(props) {const [attendanceSheet, setState] = useState(JSON.parse(props.attendanceSheet));const sign = useCallback((action="") => {const body = {attendanceSheetId: attendanceSheet[0]?.id,action}postData("/api/sign-attendance", body).then(data =https://www.isolves.com/it/cxkf/bk/2022-07-12/> {if (data.status === "success") {setState(prevState => {const newState = [...prevState]newState[0].attendance[0] = data.datareturn newState})}})}, [attendanceSheet])const createAttendance = useCallback(() => {postData("/api/create-attendance").then(data => {if (data.status === "success") {alert("New Attendance Sheet Created")setState([{...data.data, attendance:[]}])}})}, [])return (Attendance Management Dashboard_江苏龙网
{props.isAdmin && }{ attendanceSheet.length > 0 &&{attendanceSheet[0]?.attendance.length != 0 ?<>:<>}Id  Created At  Sign In  Sign Out
{attendanceSheet[0]?.id} {attendanceSheet[0]?.createdAt} {attendanceSheet[0]?.attendance[0]?.signInTime} {attendanceSheet[0]?.attendance[0]?.signOut ?attendanceSheet[0]?.attendance[0]?.signOutTime:  }   {""}
}
)}

Id	Created At	Sign In	Sign Out
{attendanceSheet[0]?.id}	{attendanceSheet[0]?.createdAt}	{attendanceSheet[0]?.attendance[0]?.signInTime}	{attendanceSheet[0]?.attendance[0]?.signOut ?attendanceSheet[0]?.attendance[0]?.signOutTime: }		{""}

我们使用 getServerSideProps 来生成页面数据，而 IronSessionSsr 是用于处理服务器端呈现页面的 Iron-session 函数。在下面的代码片段中，我们使用考勤表中的一行查询考勤表的最后一行，其中 userId 等于存储在用户会话上的 User id 。我们还检查用户是否是 ADMIN 。
JavaScript

export const getServerSideProps = withIronSessionSsr( async ({req}) => {const user = req.session.userconst prisma = new PrismaClient()const attendanceSheet = await prisma.attendanceSheet.findMany({take: 1,orderBy: {id: 'desc',},include: {attendance: {where: {userId: user.id},}}})return {props: {attendanceSheet: JSON.stringify(attendanceSheet),isAdmin: user.role === "ADMIN"}}}, sessionCookie())

设置创建出勤 API 路由打开页面/api/create-around. js 文件并添加下面的代码片段。