江苏龙网

  1. 主页 > 生活百科 > >

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

全栈

 
在上面的代码片段中，我们创建了 User、 AttendanceSheet 和 Attendance Model，定义了每个模型之间的关系 。
接下来，在数据库中创建这些表:
Shell
npx prisma db push 
在运行上面的命令之后，您应该可以在终端中看到如下截图所示的输出:

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

文章插图
 
创建实用程序函数完成 Prisma 设置后，让我们创建三个实用函数，它们将在我们的应用程序中不时使用 。
打开 lib/parseBody.js 文件并添加以下代码片段:
JAVAScript
export const parseBody = (body) => { if (typeof body === "string") return JSON.parse(body) return body} 
打开 lib/request.js 文件并添加以下代码片段 。
JavaScript
export const sessionCookie = () => { return ({cookieName: "auth",password: process.env.SESSION_PASSWORD,// secure: true should be used in production (HTTPS) but can't be used in development (HTTP)cookieOptions: {secure: process.env.NODE_ENV === "production",}, })} 
打开/lib/request.js 文件并添加以下代码片段 。此函数返回铁会话铁会话的会话属性对象 。
JavaScript
export const sessionCookie = () => { return ({cookieName: "auth",password: process.env.SESSION_PASSWORD,// secure: true should be used in production (HTTPS) but can't be used in development (HTTP)cookieOptions: {secure: process.env.NODE_ENV === "production",}, })} 
接下来，将 SESSION_PASSWORD 添加到. env 文件: 它应该是一个至少有32个字符的字符串 。
应用程序的样式完成我们的实用程序功能后，让我们给应用程序添加一些样式 。我们正在为这个应用程序使用 css 模块，所以打开 style/Home.modules.CSS 文件并添加以下代码片段:
CSS
.container { padding: 0 2rem;}.man { min-height: 100vh; padding: 4rem 0; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;}.login { width: 450px;}.login input { width: 100%; height: 50px; margin: 4px;}.login button { width: 100%; height: 50px; margin: 4px;}.dashboard { display: grid; grid-template-columns: 3fr 9fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; height: calc(100vh - 60px);}.navbar { height: 60px; background-color: black;} 创建侧边栏组件 
设计完成后，让我们创建侧边栏组件来帮助我们在应用程序仪表板上导航到不同的页面 。打开 Component/SideBar.js 文件，并粘贴下面的代码片段 。
JavaScript
import Link from 'next/link'import { useRouter } from 'next/router'import styles from '../styles/SideBar.module.css'const SideBar = () => {const router = useRouter()const logout = async () => {try {const response = await fetch('/api/logout', {method: 'GET',credentials: 'same-origin',});if(response.status === 200)router.push('/')} catch (e) {alert(e)}}return (<nav className={styles.sidebar}><ul><li> <Link href=https://www.isolves.com/it/cxkf/bk/2022-07-12/"/dashboard"> Dashboard
  • Attendance
  • Attendance Sheet
  • Logout
    • )}export default SideBar    登入网页现在打开 page/index.js 文件，删除其中的所有代码，并添加以下代码段 。下面的代码通过表单向 localhost: 3000/api/login 路由发送包含电子邮件和密码的发送请求 。一旦验证了凭据，它就调用 router.push (’/dashboard’)方法将用户重定向到 localhost: 3000/api/dashboard:
    JavaScript
    import Head from 'next/head'import { postData } from '../lib/request';import styles from '../styles/Home.module.css'import { useState } from 'react';import { useRouter } from 'next/router'export default function Home({posts}) {const [data, setData] = useState({email: null, password: null});const router = useRouter()const submit = (e) => {e.preventDefault()if(data.email && data.password) {postData('/api/login', data).then(data =https://www.isolves.com/it/cxkf/bk/2022-07-12/> {console.log(data);if (data.status === "success") router.push('/dashboard')});}}return (
    Login_江苏龙网
    setData({...data, email: e.target.value})} /> setData({...data, password: e.target.value})} />


    推荐阅读


    上一篇：一文打尽NMS技术

    下一篇：Activity知识点整理