江苏龙网

  1. 主页 > 生活百科 > >

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

全栈

在本文中，我们将学习如何使用 Next.js、 Prisma、 Postgres 和 Fastify 构建一个 Full-stack 应用程序 。
在本文中，我们将学习如何使用 Next.js、 Prisma、 Postgres 和 Fastify 构建一个 Full-stack 应用程序 。我们将建立一个考勤管理演示应用程序，管理员工的考勤 。这个应用程序的流程很简单: 管理用户登录，创建当天的出勤表，然后每个员工在出勤表上进出 。
什么是 Next.js？Next.Js 是一个灵活的 React 框架，它为您提供了创建快速 Web 应用程序的构建块 。它通常被称为全栈 React 框架，因为它可以让前端和后端应用程序在相同的代码基上使用无服务器函数来实现这一点 。
什么是 Prisma？Prisma 是一个开源的、 Node.js 和 Typecript ORM，它极大地简化了 SQL 数据库的数据建模、迁移和数据访问 。在撰写本文时，Prisma 支持以下数据库管理系统: PostgreSQL、 MySQL、 MariaDB、 SQLite、 AWS Aurora、 Microsoft SQL Server、 Azure SQL 和 MongoDB 。您可能还希望单击此处查看所有受支持的数据库管理系统的列表 。
什么是 Postgres？Postgres 也被称为 PostgreSQL，它是一个免费的开源关联式资料库管理系统 。它是 SQL 语言的超集，具有许多特性，使开发人员能够安全地存储和扩展复杂的数据工作负载 。
先决条件本教程是一个实践演示教程 。因此，最好在你的电脑上安装以下软件:

  • 安装在你的机器上
  • 数据库服务器正在运行
这个教程的代码可以在 Github 上找到，所以你可以克隆它，然后跟着学习 。
https://github.com/Claradev32/attendance
项目设置让我们从设置 Next.js 应用程序开始 。
Shell
npx create-next-App@latest 
等待安装完成，然后运行下面的命令来安装我们的依赖项 。
Shell
yarn add fastify fastify-nextjs iron-session @prisma/clientbryarn add prisma nodemon --dev 
等待安装完成 。
设置 Next.js 和 Fastify 
默认情况下，Next.js 不使用 Fastify 作为其服务器 。要使用 Fastify 为我们的 Next.js 应用程序提供服务，请编辑 package.json 文件中的脚本字段，其代码片段如下所示 。
JSON
scripts": { "dev": "nodemon server.js", "build": "next build", "start": "next start", "lint": "next lint"} 创建我们的 Fastify 服务器现在让我们创建一个 server.js 文件 。这个文件是我们的应用程序的入口点，然后我们添加了一个需求(‘ fast tify-nextjs’)来包含一个插件，这个插件在 Fastify 公开了 Next.js API 来处理渲染 。
打开 server.js 文件，并添加以下代码段:
const fastify = require('fastify')()async function noOpParser(req, payload) {return payload;}fastify.register(require('fastify-nextjs')).after(() => {fastify.addContentTypeParser('text/plain', noOpParser);fastify.addContentTypeParser('application/json', noOpParser);fastify.next('/*')fastify.next('/api/*', { method: 'ALL' });})fastify.listen(3000, err => {if (err) throw errconsole.log('Server listening on <http://localhost:3000>')})在上面的代码片段中，我们使用了 fast-nextjs 插件，它在 Fastify 公开了处理呈现的 Next.js API 。然后，我们使用 noopParser 函数解析传入的请求，这使得请求体可用于我们的 Next.js API 路由处理程序，我们使用[ fasttify.next ](< http://fastify.next > 命令)为我们的应用定义两个路由 。然后我们创建 Fastify 服务器，让它监听端口3000 。
现在继续并使用纱线 dev 命令运行应用程序: 应用程序将在 localhost: 3000上运行 。
Prisma 设置首先，运行以下命令来获得一个基本的 Prisma 设置:
Shell
npx prisma init 
上面的命令将创建一个包含 schema.Prisma 文件的 Prisma 目录 。这是您的主 Prisma 配置文件，它将包含您的数据库模式 。还有 。Env 文件将被添加到项目的根目录中 。打开 。Env 文件，并用 PostgreSQL 数据库的连接 URL 替换虚拟连接 URL 。
将 prisma/schema.prisma 文件中的代码替换为以下内容:
Properties files 属性文件
datasource db { url = env("DATABASE_URL") provider="postgresql"}generator client { provider = "prisma-client-js"}model User { idInt@id @default(autoincrement()) createdAt DateTime @default(now()) emailString@unique nameString passwordString roleRole@default(EMPLOYEE) attendanceAttendance[] AttendanceSheet AttendanceSheet[]}model AttendanceSheet { idInt@id @default(autoincrement()) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt createdByUser?@relation(fields: [userId], references: [id]) userIdInt?}model Attendance { idInt@id @default(autoincrement()) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt signInBoolean @default(true) signOutBoolean signInTimeDateTime @default(now()) signOutTimeDateTime userUser?@relation(fields: [userId], references: [id]) userIdInt?}enum Role { EMPLOYEE ADMIN}


推荐阅读


上一篇：一文打尽NMS技术

下一篇：Activity知识点整理