江苏龙网

  1. 主页 > 生活百科 > >

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

全栈


JavaScript
import { PrismaClient } from '@prisma/client'import { withIronSessionApiRoute } from "iron-session/next";import { sessionCookie } from '../../lib/session';export default withIronSessionApiRoute( async function handler(req, res) {const prisma = new PrismaClient()const user = req.session.userconst attendanceShe设置签到 API 路由此路由处理我们对 localhost 的 API POST 请求:
3000/API/sign-publications 。该路由接受 POST 请求，而 attanceSheetId 和 action 用于登录和退出 attancesheet 。
打开/page/api/sign-around. js 文件并添加下面的代码片段 。
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 handler(req, res) {const prisma = new PrismaClient()const {attendanceSheetId, action} = parseBody(req.body)const user = req.session.userconst attendance = await prisma.attendance.findMany({where: {userId: user.id,attendanceSheetId: attendanceSheetId}})//check if atendance have been createdif (attendance.length === 0) {const attendance = await prisma.attendance.create({data: {userId: user.id,attendanceSheetId: attendanceSheetId,signIn: true,signOut: false,signOutTime: new Date()},})return res.json({status: "success", data: attendance});} else if (action === "sign-out") {await prisma.attendance.updateMany({where: {userId: user.id,attendanceSheetId: attendanceSheetId},data: {signOut: true,signOutTime: new Date()},})return res.json({status: "success", data: { ...attendance[0], signOut: true, signOutTime: new Date()}});}res.json({status: "success", data: attendance});}, sessionCookie())创建出勤页面此服务器端呈现的页面显示了登录用户的所有出勤表 。打开
/page/dashboard/attance.js 文件并添加下面的代码片段 。
JavaScript
import { withIronSessionSsr } from "iron-session/next";import Head from 'next/head'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";export default function Page(props) {const data = https://www.isolves.com/it/cxkf/bk/2022-07-12/JSON.parse(props.attendanceSheet)return (

Attendance Management Dashboard_江苏龙网
{data.map(data =>{const {id, createdAt, attendance } = datareturn ({ attendance.length === 0 ?(<>):(<>)})})}
Attendance Id DateSign In Time Sign Out Time
{id} {createdAt}You did not Sign InYou did not Sign Out{attendance[0]?.signInTime}{attendance[0]?.signOut ? attendance[0]?.signOutTime : "You did not Sign Out"}
)}In the code snippet below, we query for all the rows from the attendanceSheet table and also fetch the attendance where the userId is equal to the user id stored in the user session.export const getServerSideProps = withIronSessionSsr( async ({req}) => {const user = req.session.userconst prisma = new PrismaClient()const attendanceSheet = await prisma.attendanceSheet.findMany({orderBy: {id: 'desc',},include: {attendance: {where: {userId: user.id},}}})return {props: {attendanceSheet: JSON.stringify(attendanceSheet),}}}, sessionCookie())创建出勤单页这个服务器端呈现的页面显示了所有的考勤表以及在该考勤表上签名的员工 。打开
/page/dashboard/attance.js 文件并添加下面的代码片段 。
JavaScript
import { withIronSessionSsr } from "iron-session/next";import Head from 'next/head'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";export default function Page(props) {const data = https://www.isolves.com/it/cxkf/bk/2022-07-12/JSON.parse(props.attendanceSheet)return (
Attendance Management Dashboard_江苏龙网
{data?.map(data => {const {id, createdAt, attendance } = datareturn (<>


推荐阅读


上一篇：一文打尽NMS技术

下一篇：Activity知识点整理

Attendance Id