NodeJS系列（13） - Next.js 框架 (六) | Node.js + Next.js + Prisma/Sequelize (ORM) + MySQL 搭建 JSON API 服务

朋仔發表於 2023-11-4 22:42:00

NodeJS系列（13）- Next.js 框架 (六) | Node.js + Next.js + Prisma/Sequelize (ORM) + MySQL 搭建 JSON API 服务

Next.js 是一个用于构建 Web 应用程序的框架。Next.js 是一个用于生产环境的 React 框架，是一个 React 服务端渲染应用框架。
NextJS: https://nextjs.org/
 Prisma 是一个基于 promise 的 Node.js 和 TypeScript 的 ORM，目前支持
Mysql，MariaDB，SQLite，PostgreSQL，AWS Aurora Serverless 和 Aws Aurora ，暂不支持
Microsft SQL Server 。Prisma 通过提供类型安全、丰富的自动补全、平滑的 API 等特性。 Prisma: https://www.prisma.io Prisma CN: https://prisma.yoga/ Prisma NextJS: https://www.prisma.io/nextjs
 
Sequelize 是一个基于 promise 的 Node.js 的 ORM，目前支持 Mysql，Postgres，MariaDB，SQLite 以及 Microsft SQL Server。它具有强大的事务支持，关联关系，预读和延迟加载，读取复制等功能。 Sequelize: https://sequelize.org/

Sequelize CN: https://www.sequelize.cn/
 Prisma 和 Sequelize 各自支持的功能比较表如下：
<table border="0">
<tbody>
<tr>
<td style="text-align: center"> </td>
<td style="text-align: center">Prisma</td>
<td style="text-align: center">Sequelize</td>

</tr>
<tr>
<td>原始查询</td>
<td>yes</td>
<td>yes</td>

</tr>
<tr>
<td>事务</td>
<td>yes</td>
<td>yes</td>

</tr>
<tr>
<td>自动生成 Schema</td>
<td>yes</td>
<td>yes</td>

</tr>
<tr>
<td>迁移</td>
<td>yes</td>
<td>yes</td>

</tr>
<tr>
<td>TypeScript</td>
<td>yes</td>
<td>yes</td>

</tr>
<tr>
<td>子查询</td>
<td>yes</td>
<td>no</td>

</tr>
<tr>
<td>读写分离</td>
<td>no</td>
<td>yes</td>

</tr>
<tr>
<td>乐观锁</td>
<td>yes</td>
<td>no</td>

</tr>
<tr>
<td>高级函数</td>
<td>yes</td>
<td>no</td>

</tr>

</tbody>

</table>
 本文选择使用 Node.js + Next.js + Prisma + MySQL 搭建 JSON API 服务。
 
<h3>1. 系统环境</h3>

    NodeJS:  16.20.1     NPM: 8.19.4     NextJS: 13.4.12     Prisma：5.5.2 
 
<h3>2. 创建 NextJS 项目</h3>
    安装 create-next-app 脚手架，命令如下：         # 使用 -g 参数，表示该命令只需在本机上运行一次         $ npm install -g create-next-app@13.4.12                   ...         注：或直接使用如下命令创建 next 项目                            $ npx create-next-app@13.4.12     使用 create-next-app 命令创建 NextJS 项目，命令如下：
<div class="cnblogs_code">
<pre> $ create-next-app furniture-service

 √ What is your project named? ... furniture-service
 √ Would you like to use TypeScript? ... No / Yes
 √ Would you like to use ESLint? ... No / Yes
 √ Would you like to use Tailwind CSS? ... No / Yes
 √ Would you like to use `src/` directory? ... No / Yes
 √ Would you like to use App Router? (recommended) ... No / Yes
 √ Would you like to customize the default import alias? ... No / Yes
 Creating a new Next.js app in ..\furniture-service.</pre>
</div>
        注：这里选择 App Router     进入 furniture-service 项目目录安装依赖，命令如下：         $ npm install             ...     运行 furniture-service 项目，命令如下：         $ npm run start     # npm run dev             ...     浏览器访问 http://localhost:3000，显示内容如下：              Get started by editing src/app/page.js
<h3> 3. API 路由</h3>
    路由处理程序 (Route Handlers) 允许用户使用 Web 请求和响应 API 为给定路由创建自定义请求处理程序。它定义在 app 目录及其子目录下的 route.js 或 route.ts 文件中，比如：         app/api/route.js     路由处理程序类似于 page.js 和 layout.js，但在同一目录下 page.js 和 router.js 不能同时存在。     支持以下 HTTP 方法：GET、POST、PUT、PATCH、DELETE、HEAD 和 OPTIONS。如果调用了不支持的方法，Next.js 将返回一个 405 method Not Allowed 响应。     示例，创建 app/api/route.js 文件，内容如下：
<div class="cnblogs_code">
<pre> import { NextResponse } from 'next/server';

 export async function GET(request) {

 //console.log(request.nextUrl.searchParams);
 return NextResponse.json({ ret: 'GET Success' }, { status: 200 });
 }

 export async function POST(request) {
 //console.log(request);
 return NextResponse.json({ ret: 'POST Success' }, { status: 200 });
 }</pre>
</div>
     运行 furniture-service 项目，浏览器访问 http://localhost:3000/api，显示内容如下:         {"ret":"GET Success"}     Postman 用 POST 方法访问 http://localhost:3000/api，显示内容如下:         {             "ret": "POST Success"         } 
<h3> 4. 安装 MySQL 支持</h3>
    手动创建 MySQL 数据库 testdb 和 user 表，SQL 脚本如下:
<div class="cnblogs_code">
<pre> CREATE TABLE `user` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `username` varchar(50) NOT NULL,
 `password` varchar(255) DEFAULT NULL,
 `age` int(11) DEFAULT NULL,
 `createtime` timestamp NULL DEFAULT NULL,
 PRIMARY KEY (`id`),
 UNIQUE KEY (`username`)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

 # 创建一条用户记录
 INSERT INTO user (username, password, age, createtime) VALUES ('admin', '123456', 18, Now());</pre>
</div>
     进入 furniture-service 项目目录，安装 MySQL 支持，命令如下：         $ npm install mysql mysql2 --save             ...     修改 app/api/route.js 文件，内容如下：
<div class="cnblogs_code">
<pre> import { NextResponse } from 'next/server';
 import mysql from 'mysql';

 const getData = () => {
 return new Promise((resolve, reject) => {

 var connection = mysql.createConnection({
 host : 'localhost',
 user : 'root',
 password : '123456',
 port: '3306',
 database: 'testdb'
 });

 connection.connect();
 connection.query('SELECT * FROM user', function (err, result) {
 if (err) {
 //console.log("getData() -> reject: " + err.message);
 reject({ ret: 'error', msg: err.message })
 }

 //console.log("getData() -> resolve: " + result);
 resolve({ ret: 'success', data: result});
 });

 connection.end();
 })
 }

 export async function GET(request) {

 let data = await getData();
 //console.log(data);

 return NextResponse.json( data, { status: 200 });
 }

 export async function POST(request) {
 console.log(request);
 return NextResponse.json({ ret: 'POST Success' }, { status: 200 });
 }</pre>
</div>
     运行 furniture-service 项目，浏览器访问 http://localhost:3000/api，显示内容如下:         {"ret":"success","data":[{"id":1,"username":"admin","password":"123456","age":18,"createtime":"2023-11-04T07:24:59.000Z"}]}
<h3> 5. 安装 ORM 支持</h3>
    1) 安装 Prisma
        在 furniture-service 项目目录下安装 Prisma，命令如下：             $ npm install prisma --save                 ...             注：可以运行 npx prisma 来查看 prisma 的命令使用方法。         创建 Prisma 架构文件模板来设置 Prisma 项目，命令如下：             $ npx prisma init
<div class="cnblogs_code">
<pre> ✔ Your Prisma schema was created at prisma/schema.prisma

 warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.

 Next steps:
 1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started
 2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql, sqlite, sqlserver, mongodb or cockroachdb.
 3. Run prisma db pull to turn your database schema into a Prisma schema.
 4. Run prisma generate to generate the Prisma Client. You can then start querying your database.

 More information in our documentation:
 https://pris.ly/d/getting-started</pre>
</div>
        以上命令会在 furniture-service 项目的根目录下创建一个 .env 文件和一个 prisma 目录，.env 文件用于定义环境变量（例如数据库连接），prisma 目录下生成了一个 schema.prisma 文件，schema.prisma 文件包含带有数据库连接变量和模式模型的 prisma 模式。
     2) 配置 Prisma
         修改 .env 文件，内容如下：             DATABASE_URL="mysql://root:123456@localhost:3306/testdb?schema=public"         修改 prisma/schema.prisma 
<div class="cnblogs_code">
<pre> // This is your Prisma schema file,
 // learn more about it in the docs: https://pris.ly/d/prisma-schema

 generator client {
 provider = "prisma-client-js"
 }

 datasource db {
 provider = "mysql"
 url = env("DATABASE_URL")
 }</pre>
</div>
                      3) 安装 Prisma Client         Prisma Client 提供常用的数据库 CRUD 方法: create、update、delete、findUnique、findMany 等。                  安装 Prisma Client，命令如下：             $ npm install @prisma/client                 ...
 
<h3>6. 使用 Prisma Migrate</h3>
    Prisma Migrate 是一个声明性数据库模型迁移工具，使您能够：         (1) 随着 Prisma 架构的发展，保持数据库架构与 Prisma 数据模型同步         (2) 维护数据库中的现有数据     Prisma Migrate 生成 .sql 迁移文件的历史记录，并在开发和部署中发挥作用。     上文我们是用手动方式在 testdb 数据库创建了 user 表，而且 app/api/route.js 文件里的 GET/POST 函数中没有使用 ORM (Prisma/Sequelize) 数据模型来操作数据库的表。     在我们熟悉 Prisma 数据模型的情况下，我们可以直接在 prisma\schema.prisma 文件里添加表的数据模型，再运行 npx prisma migrate dev --name init 命令把表迁移到数据库。     1) 新增 post 表              修改 prisma\schema.prisma 文件，添加 post 表的数据模型，内容如下：
<div class="cnblogs_code">
<pre> generator client {
 provider = "prisma-client-js"
 }

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

 model post {
 id Int @id @default(autoincrement())
 title String @db.VarChar(255)
 createdAt DateTime @default(now())
 updatedAt DateTime @updatedAt
 }</pre>
</div>
         执行 prisma migrate 命令，创建第 1 个数据库迁移，格式如下：             $ npx prisma migrate dev --name init    // dev 表示开发环境
<div class="cnblogs_code">
<pre> ...

 [+] Added tables
 - user

 ? We need to reset the MySQL database "testdb" at "localhost:3306"
 Do you want to continue? All data will be lost. » (y/N) y

 Applying migration `20231106104925_init`

 The following migration(s) have been created and applied from new schema changes:

 migrations/
 └─ 20231106104925_init/
 └─ migration.sql

 Your database is now in sync with your schema.

 ✔ Generated Prisma Client (v5.5.2) to .\node_modules\@prisma\client in 56ms</pre>
</div>
            注：testdb 数据库里的 user 表是手动创建的，该表不在 prisma migrate 的版本管理范围之内，会提示是否重置数据库，这里选择了 y 重置数据库。                     prisma migrate 命令会自动执行 prisma generate 命令读取 Prisma 架构并生成 Prisma Client 库。         查看 testdb 数据库，可以看到新增了两个表 post 和 _prisma_migrations（记录 migration 历史）。查看项目目录，新增了一个 prisma/migrations/20231106104925_init/migration.sql 文件。         可以运行 npx prisma migrate status 命令查看 migration 状态。     2) 修改 post 表         修改 prisma\schema.prisma 文件，修改 post 表的数据模型，内容如下：
<div class="cnblogs_code">
<pre> generator client {
 provider = "prisma-client-js"
 }

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

 model post {
 id Int @id @default(autoincrement())
 title String @db.VarChar(255)
 content String?
 createdAt DateTime @default(now())
 updatedAt DateTime @updatedAt
 }</pre>
</div>
         执行 prisma migrate 命令，创建第 2 个数据库迁移，格式如下：             $ npx prisma migrate dev --name post_add_content                 ...         查看 testdb 数据库，可以看到 post 表结构已更新，_prisma_migrations 里新增了一条记录。查看项目目录，新增了一个 prisma/migrations/20231106130648_post_add_content/migration.sql 文件。     3) 反向生成 Prisma 数据模型         上文运行 npx prisma migrate dev --name init 命令过程中，我们选择了 y 重置了 testdb。         如果我们需要保留 user 表结构，可以在运行 prisma migrate 命令之前，反向生成 prisma 数据模型，把 user 表数据模型保存到 prisma\schema.prisma 文件，命令如下：             $ npx prisma db pull
<div class="cnblogs_code">
<pre> Prisma schema loaded from prisma\schema.prisma
 Environment variables loaded from .env
 Datasource "db": MySQL database "testdb" at "localhost:3306"

 ✔ Introspected 1 model and wrote it into prisma\schema.prisma in 79ms

 Run prisma generate to generate Prisma Client.</pre>
</div>
         查看 prisma\schema.prisma 文件，内容如下：
<div class="cnblogs_code">
<pre> generator client {
 provider = "prisma-client-js"
 }

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

 model post {
 id Int @id @default(autoincrement())
 title String @db.VarChar(255)
 content String?
 createdAt DateTime @default(now())
 updatedAt DateTime @updatedAt
 }

 model user {
 id Int @id @default(autoincrement())
 username String @unique(map: "username") @db.VarChar(50)
 password String? @db.VarChar(255)
 age Int?
 createtime DateTime? @db.Timestamp(0)
 }</pre>
</div>
            注：prisma\schema.prisma 文件里多了一个 user 表的数据模型。
<h3> 7. 读写数据库</h3>
    示例，创建 app/api2/route.js 文件，内容如下：
<div class="cnblogs_code">
<pre> import { NextResponse } from 'next/server';
 import { PrismaClient } from '@prisma/client'

 const prisma = new PrismaClient();

 export async function GET(request) {

 // By unique identifier
 let user = await prisma.user.findUnique({
 where: {
 id: 2,
 },
 })
 //console.log(user);

 return NextResponse.json(user, { status: 200 });
 }

 export async function POST(request) {

 let user = await prisma.user.create({
 data: {
 username: request.get('username'),
 password: request.get('password'),
 age: request.get('age'),
 createtime: time()
 },
 })
 //console.log(user);

 return NextResponse.json(user, { status: 200 });
 }</pre>
</div>
     运行 furniture-service 项目，在 postman 上用 POST 方法访问 http://localhost:3000/api2，HTTP 请求的 Body 类型为 raw（JSON 格式），内容如下：         {"username":"user","password":"abcdef","age": 99}     返回结果为：
<div class="cnblogs_code">
<pre> {
 "id": 2,
 "username": "user",
 "password": "abcdef",
 "age": 99,
 "createtime": "2023-11-04T12:27:47.000Z"
 }</pre>
</div>
     浏览器访问 http://localhost:3000/api2，显示结果如下：         {"id":2,"username":"user","password":"abcdef","age":99,"createtime":"2023-11-04T12:27:47.000Z"} 
来源：https://www.cnblogs.com/tkuang/p/17809971.html

頁: [1]

琼殿技术论坛's Archiver

NodeJS系列（13）- Next.js 框架 (六) | Node.js + Next.js + Prisma/Sequelize (ORM) + MySQL 搭建 JSON API 服务