基于Next.js、Prisma、Postgres和Fastfy构建全栈APP

译者 | 朱先忠,审校 | 孙淑娟,在本文中，我们将学习如何使用Next.js、Prisma、Postgres和Fastify来联合开发一个完整的全栈Web应用程序。具体地说，我们将构建一个考勤管理演示应用程序，用于管理员工的考勤信息。该应用程序的流程比较简单：一个管理用户登录页面，创建当天的考勤表界面，还有每个员工可以在考勤表上登录和注销的界面等。,Next.js是一个灵活的基于React框架的工具，它能够为您提供创建快速Web应用程序的组件。它通常被称为全栈式React框架，因为它可以使前端和后端应用程序位于同一个代码基上；并且，这种实现使用的是无服务器端（Serverless）功能。,Prisma是一个开源的ORM框架，同样基于Node.js框架和Typescript脚本实现。Prisma大大简化了SQL数据库的数据建模、迁移和数据访问过程。截止撰写本文时，Prisma支持以下数据库管理系统：PostgreSQL、MySQL、MariaDB、SQLite、AWS Aurora、Microsoft SQL Server、Azure SQL和MongoDB。当然，有关Prisma所有受支持的数据库管理系统的列表信息，您可以参考地址https://www.prisma.io/docs/reference/database-reference/supported-databases。,Postgres也称为PostgreSQL，是一个免费开源的关系数据库管理系统。它是SQL语言的超集，具有许多优秀特性，允许开发人员安全地存储和扩展复杂的数据工作负载。,本文是一个实践演示教程。因此，为了顺利调试通过这个项目，最好确保先在您的计算机上安装以下软件：,注意：本教程的代码可以在​​Github网站​​上找到；所以，您可以随意克隆下所有源码并继续学习。,让我们从设置Next.js应用程序开始。首先，请运行下面的命令。,等待安装完成，然后运行下面的命令来安装依赖项。,等待安装完成即可。,默认情况下，Next.js不使用Fastify作为其服务器。为了使用Fastfy作为我们的Next.js应用程序的服务器，需要在你的package.json配置文件中添加以下代码段：,接下来，我们创建一个名字为server.js的文件。这个文件是我们应用程序的入口点。然后，我们添加命令require（'fastfy-nextjs'），以便包括一个特定的插件，此插件能够暴露Fastify中的Next.js API来处理页面的渲染任务。,接下来，打开server.js文件，并添加以下代码段：,在上面代码片断中，我们使用插件fastify-nextjs来暴露Fastify中的Next.js API，以便帮助我们完成渲染任务。然后，我们使用noOpParser函数分析发来的请求。具体地说，此函数负责在我们的Next.js API路由处理器中可以使用请求体中的内容。注意到，这里我们通过命令[fastify.next](<http://fastify.next>定义了程序中的两个路由。然后我们创建了Fastify服务器，并让它监听端口3000。,接下来，我们使用“yarn dev”命令运行上面的应用程序。于是，程序会在地址localhost:3000上运行起来。,首先，运行以下命令以获得基本的Prisma设置：,上面的命令将创建一个名字为Prisma的目录，其下还有一个相应的配置文件名是schema.prisma。此文件是您的主Prisma配置文件，其中将包含您的数据库模式。此外，一个.env文件也将添加到项目的根目录中。注意，您需要打开这个.env文件，并将虚拟连接URL替换为PostgreSQL数据库的真实连接URL。,现在，把prisma/schema.prisma文件中的内容替换成如下代码：,在上面的代码片段中，我们创建了一个用户，一个考勤表AttendanceSheet和Attention模型，并定义了每个模型之间的关系。,接下来，需要在数据库中创建表格。请运行以下命令：,运行上述命令后，您应该会在终端中看到如下屏幕截图所示的输出：,,Prisma设置完成后，让我们创建三个实用函数，它们将不时在我们的应用程序中使用。,为此，打开文件lib/parseBody.js，并添加以下代码段。此函数的任务是将请求正文解析为JSON：,然后，打开/lib/request.js文件，添加以下代码段。此函数负责返回iron-session的会话属性对象。,接下来，将SESSION_PASSWORD添加到.env文件：它应该是至少32个字符的字符串。,完成上面的实用函数开发后，让我们为应用程序添加一些样式。我们将为这个应用程序定义几个CSS模块。为此，打开styles/Home.modules.css文件，并添加以下代码段：,造型完成后，让我们创建边栏组件，以便帮助我们导航到应用程序控制面板上的不同页面。为此，打开components/SideBar.js文件，并粘贴下面的代码段。,现在打开page/index.js文件，删除其中默认的所有代码并添加以下代码段。下面的代码将post请求与通过表单提供的电子邮件和密码一起发送到localhost:3000/api/login路由。一旦凭据验证为有效，它就会调用router.push('/dashboard')方法；此方法负责把用户重定向到localhost:3000/api/dashboard：,现在打开页面page/api/login.js，并添加以下代码段。我们将使用PrismaClient进行数据库查询。其中，withIronSessionApiRoute是在RESTful应用程序中用来负责处理用户会话的iron-session函数。,该路由处理通过localhost:3000/api/login登录后的POST请求，并在用户经过身份验证后生成身份验证Cookie。,打开/page/api/logout文件并添加下面的代码段。此路由负责处理对localhost:3000/api/logout的GET请求，该请求通过销毁会话Cookie注销用户。,此页面为用户提供了登录和注销考勤表的界面。当然，管理员还可以通过此界面创建考勤表。现在，打开page/dashboard/index.js文件，并添加下面代码段。,我们使用getServerSideProps函数来生成页面数据，而withIronSessionSsr是一个用于处理服务器端呈现页面功能的iron-session函数。在下面的代码段中，我们使用数据库考勤表中的一行查询考勤表的最后一行。其中，userId等于存储在用户会话中的用户id。我们还检查用户是否是管理员（ADMIN）角色。,打开页面/api/create Attention.js文件，并添加下面代码段。,此路由负责处理我们对localhost:3000/api/sign-attendance的API POST请求。路由接受POST请求，而attendanceSheetId和action用于登录和注销attendanceSheet。,打开/page/api/sign-attendance.js文件，并添加下面的代码段。,这个服务器端呈现的页面将显示登录用户的所有考勤表信息。打开/page/dashboard/attendance.js文件，并添加下面的代码段。,在下面的代码片段中，我们从attendanceSheet表中查询所有行，并获取用户id等于存储在用户会话中的用户id的考勤信息。,这个服务器端呈现的页面负责显示所有考勤表以及登录到该考勤表的员工信息。为此，打开/page/dashboard/attendance.js文件，并添加下面的代码段。,在下面的代码片段中，我们从attendanceSheet表中查询所有行，并通过选择名称、电子邮件和角色来获取考勤信息。,最后，我们来测试一下上面完整的示例应用程序。首先，我们必须向数据库中添加用户数据。我们是使用Prisma Studio来实现此任务的。要启动Prisma Studio，请运行以下命令：,最终，Prisma索引页面如下所示：,,要创建数据库用户，要求使用管理员（ADMIN）角色；而创建普通类型的多个用户，只需要使用员工（EMPLOYEE）角色即可。为此，请切换到以下页面：,,单击添加记录（Add record）按钮，然后填写所需字段：密码、名称、电子邮件和所属于角色等信息。完成后，单击绿色的保存变更（Save 1 change）按钮。注意，为了简单起见，我们没有对密码字段信息进行散列处理。,然后，使用“yarn dev”命令启动服务器。通过此命令将在本地地址[localhost:3000]上启动服务器，并启动应用程序登录页面如下所示：,,现在，请使用具有管理员（ADMIN）角色的用户登录，因为只有管理员用户才能创建考勤表。登录成功后，应用程序会将您重定向到系统的控制面板界面。,在这个管理界面中，单击创建考勤表（Create Attendance Sheet）按钮即可创建一个考勤表，然后等待向服务器端发出的请求完成。成功后，考勤表显示出来。用户控制面板界面如下所示：,,考勤表如下图所示，单击“登录”（Sign In）按钮进行登录。登录成功后，将显示登录时间并显示注销（Sign Out）按钮。您可以单击注销按钮注销，并使用不同的用户信息进行多次登录测试。,,接下来，您可以单击侧栏中的考勤链接以查看用户的考勤信息。结果应符合以下显示的内容：,,接下来，单击侧栏上的考勤表（Attendance Sheet）链接，可以查看所有用户的考勤情况。结果如下：,,在本文中，我们探讨了如何配合Next.js使用自定义Fastify服务器。然后，还介绍了Prisma和Prisma Studio有关知识，还介绍了如何将Prisma连接到Postgres数据库，以及如何使用Prisma客户端和Prisma Studio来创建、读取和更新数据库的问题。此外，您还学习了如何使用iron-session对用户进行身份验证。,最后，在本文的主体示例项目中，我们联合Next.js、Prisma、Postgres和Fastfy构建了一款完整的员工考勤管理应用程序。,朱先忠，51CTO社区编辑，51CTO专家博客、讲师，潍坊一所高校计算机教师，自由编程界老兵一枚。早期专注各种微软技术（编著成ASP.NET AJX、Cocos 2d-X相关三本技术图书），近十多年投身于开源世界（熟悉流行全栈Web开发技术），了解基于OneNet/AliOS+Arduino/ESP32/树莓派等物联网开发技术与Scala+Hadoop+Spark+Flink等大数据开发技术。,原文标题：​​How to Build a Full-Stack App With Next.js, Prisma, Postgres, and Fastify​​，作者：Clara Ekekenta