使用 Prisma 在 60 秒内实现 SQL Server 的响应

本文原发表于fullstackfish.com

使用 Prisma 将 SQL Server 连接到 React 非常简单便捷。本文将指导您如何在不到一分钟的时间内将 Azure SQL Server 数据加载到 React 应用的屏幕上。真的！（只要在npm下载文件时暂停计时。）

当然，在能够如此快速地连接之前，有一些前提条件。Prisma 支持使用现有数据库（本文将介绍这种方法），也支持在应用程序中定义数据库，然后通过迁移创建数据库对象（这将在其他文章中介绍）。

1. 您必须拥有一个现有的 Azure SQL Server 数据库，并且拥有该数据库的凭据。此外，您的 IP 地址必须已添加到 Azure 的白名单中。
2. 数据库中必须至少有一个包含我们可以查询的数据的表。
3. 您必须安装最新版本的 Node.js（12.6 或更高版本）和 Visual Studio Code。请注意，nvm 是野蛮人的选择。使用 Volta 管理 Node 版本是一种更便捷的方式。
4. 您必须create-next-app全局安装。（npm global install create-next-app如果没有）
5. 你的硬盘上必须有一个空文件夹用于此项目。

就这样。开始吧。

1. 在 VS Code 中打开你的空项目文件夹。
2. 打开终端并运行以下命令来初始化一个新的 Next 应用程序：

npx create-next-app .

点号（.）将在当前路径下创建下一个应用程序。

应用初始化完成后，您应该会看到确认信息。运行应用以验证其是否编译并运行正常。

npm run dev

请在浏览器中打开http://localhost:3000进行验证。

现在停止应用程序，让我们获取一些数据。

您需要添加以下依赖项，prisma作为开发依赖项和@prisma/client常规依赖项。

npm i -D prisma

npm i @prisma/client

检查您的 package.json 文件，确认开发依赖项中已安装 prisma 版本 3.01 或更高版本。

在您的应用中初始化 Prisma。这会在根目录下添加一个 prisma 文件夹，其中包含一个 schema.prisma 文件。如果您还没有 .env 文件（此时通常不需要），它还会添加一个。为了方便以后参考，如果您已经有了 .env 文件，此步骤会向该文件中添加一个新条目，而不会影响其中已有的任何其他内容。

npx prisma init

schema.prisma 文件中配置的默认连接是 Postgres。我们来修正一下。

将文件编辑成如下所示：

// schema.prisma
generator client {
  provider        = "prisma-client-js"
}

datasource db {
  provider = "sqlserver"
  url      = env("DATABASE_URL")
}

请注意这里引用的常量 DATABASE_URL。我们现在将在 .env 文件中更新该常量的值。

在 .env 文件中设置连接字符串，使其指向您的 Azure SQL Server 数据库。本示例中使用的是用户名和密码。本文篇幅有限，无法详细解释所有连接字符串的写法，但我相信您应该能够自行摸索。

我的连接字符串，其中敏感信息已屏蔽以保护无辜者：

DATABASE_URL="sqlserver://[SERVERNAME].database.windows.net:1433;database=[DATABASENAME];encrypt=true;trustServerCertificate=false;hostNameInCertificate=*.database.windows.net;loginTimeout=30;user=[USERNAME];password=[PASSWORD]"

连接字符串可能很长，所以您需要向右滚动才能看到全部内容。

现在我们准备对数据库进行内省。此步骤将根据您的数据库模式填充 Prisma 模式。请确保在运行以下命令之前打开 schema.prisma 文件。看着这一切发生真是太有趣了。

npx prisma db pull

搞定！我们的应用和数据库现在是好朋友了。

假设您的连接字符串正确且您拥有数据库访问权限，您现在应该可以在 schema.prisma 文件中看到 dbo 架构中所有表的列表，这些表会以模型的形式生成。目前，此功能仅限于 dbo 架构中的表。您不会在架构文件中看到视图、函数或存储过程，这对于 Prisma 支持的所有数据库都是如此，所以请不要对 SQL Server 感到失望。您仍然可以在应用程序中与这些对象进行交互。

现在我们有了有效的架构，让我们运行命令来生成 Prisma 客户端。

npx prisma generate

Next 是一款非常棒的工具，它能安全地将后端和前端代码分开，同时又能让它们在同一个项目中轻松协作，此外还有许多其他优点。

在根目录下添加一个名为 lib 的文件夹，并在其中创建一个 prisma.js 文件，然后将以下内容复制/粘贴或输入到该文件中：

// lib/prisma.js
import { PrismaClient } from "@prisma/client";

let prisma;

if (process.env.NODE_ENV === "production") {
  prisma = new PrismaClient();
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient();
  }
  prisma = global.prisma;
}

export default prisma;

这是 Prisma 和 Next 定义的集成最佳实践。您可以在整个应用程序中导入单个 Prisma 客户端实例（我们稍后会演示），它将为您处理连接池并防止内存泄漏。有关更多详细信息，请参阅“使用 Next.js 实例化 PrismaClient 的最佳实践”。

让我们定义一个前端将要使用的 API 路由。

在 pages/api 目录下添加一个名为 products.js 的文件。将“products”替换为数据库中你要操作的表名。本示例中使用的是 Adventure Works 表。

将以下代码添加到 products.js 文件中：

// pages/api/products.js
import prisma from "../../lib/prisma";

export default async function handle(req, res) {
  const products = await prisma.product.findMany();
  res.json(products);
}

现在删除 pages/index.js 文件的内容，并按照以下代码进行替换。你需要运用 React 技能创建一个包含你数据的组件。

你需要将此处的表替换products为你数据库中你想要的任何表，并使用该表中的字段代替我下面使用的字段。

// pages/index.js
export const getServerSideProps = async () => {
  const res = await fetch("http://localhost:3000/api/products");
  const products = await res.json();
  return {
    props: { products },
  };
};

export default function Product({ products }) {
  return (
    <div>
      {products.map((p) => {
        return (
          <div key={p.ProductID}>
            <p>
              {p.Name} — ${p.ListPrice}
            </p>
          </div>
        );
      })}
    </div>
  );
}

就这样。看看效果如何。

npm run dev

在浏览器中打开http://localhost:3000，即可查看您的数据！

欢迎在推特上联系我@jonrcrowell，告诉我你的想法或者遇到的任何问题。

Prisma 于 2021 年 9 月 7 日发布了 SQL Server 连接器。请点击此处阅读官方公告：
Prisma 中的 Microsoft SQL Server 支持已达到生产就绪状态。