🚀🚀🚀 Openapi：全栈开发神器，0代码写后端！

前言

上篇文章中，我们介绍了 GraphQL 和 REST Api 的优劣势，今天我们以 REST API 为例聊聊如果一个前端想做全栈，会怎么选择！

往期精彩推荐

VsCode Colipot 🚗 + MCP Tools ✈️ = 让你的编程体验直接起飞 🚀🚀🚀
🚀🚀🚀MCP SDK 快速接入 DeepSeek 并添加工具！万万没想到MCP这么简单好用！
🚀🚀🚀 这六个事半功倍的 Pinia 库，你一定要知道！
更多精彩文章欢迎关注我的公众号：萌萌哒草头将军

正文

技术栈：Next.js + OpenAPI + openapi-typescript-codegen + Prisma

Next.js

说起全栈框架，Next.js 无疑是当前顶流，

今天，我们就是使用 Next.js 构建一个项目，

并且结合了 OpenAPI 和 Prisma 来实现数据库操作和 API 生成。

什么是 OpenAPI

OpenAPI 是一个用于描述 REST API 的标准化规范（原称为 Swagger 规范）。它允许开发者以机器可读的格式（通常是 YAML 或 JSON）定义 API 的结构、端点、参数、返回类型等信息。

例如，我们的系统里，通常至少会对应一个 User 表，和一个查询用户列表的接口: /v1/api/users ，

使用 OpenAPI 规范描述，将会是下面这样的内容：

yaml 复制代码

openapi: 3.0.0
info:
  title: User API
  version: 1.0.0
paths:
  /users:
    get:
      summary: 获取用户列表
      operationId: getUsers
      responses:
        '200':
          description: 用户列表
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/User'
components:
  schemas:
    User:
      type: object
      properties:
        id:
          type: string
        name:
          type: string
        email:
          type: string

有了这样的规范，我们就可以基于一些支持 OpenAPI 规范的工具快速生成通用的代码。

比如今天我们要讲到的，openapi-typescript-codegen

openapi-typescript-codegen

openapi-typescript-codegen 是一个基于 OpenAPI 规范生成 model http 请求的基础代码。

js 复制代码

generate({
  input: "./openapi/api.yaml",
  output: "./src/services",
  httpClient: "fetch",
  useOptions: true,
  useUnionTypes: true,
  exportCore: true,
  exportSchemas: true,
  exportServices: true,
});

生成的代码如下：

Prisma

Entries 层的实现我们借助的 Prisma ，可以参考之前的这篇文章：

项目结构

对后端了解的同学一定知道，后端针对每个表，都会有个 model 作为 Entries 层和数据库对应的表做映射，然后通过 Dao 层作为数据访问层，进行对数据库操作，通过 Services 层进行一些业务处理调用合适的 Dao 层逻辑，而每个路由都会和 Controller 绑定！

上述就是经典的后端逻辑分层！

我们的项目结构主要是借鉴这种分层模型，来简化代码实现！

openapi/: 存放 OpenAPI 规范文件。
scripts/: 包含用于生成服务、DAO 和 Prisma 模型的脚本。
src/: 包含应用的主要代码，包括 API、控制器、DAO 和服务。
- controllers/: 控制器层，脚本实现
- dao/：数据访问层代码，脚本实现
- app/：页面
prisma/: 包含 Prisma 的 schema 文件。