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

admin管理员组

文章数量:1437374

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

前言

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

正文

技术栈：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 规范描述，将会是下面这样的内容：

代码语言：javascript代码运行次数：0运行复制

openapi: 3.0.0
info:
title:UserAPI
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 规范生成 modelhttp 请求的基础代码。

代码语言：javascript代码运行次数：0运行复制

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

生成的代码如下：

使用fetch请求用户列表

使用fetch请求用户列表

Prisma

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

项目结构

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

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

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

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

代码结构

代码结构

使用脚本

我尝试了多种方案实现理想的服务端代码，例如经典的 @openapitools/openapi-generator-cli，但是效果都不理想，主要是缺少对 ts 的支持！

所以我主要通过脚本实现我想要的代码！

脚本主要是通过解析 openapi 配置文件实现的

• generate-services.js: 根据 OpenAPI 规范生成服务代码。
• generate-api.js: 根据 OpenAPI 规范生成 API 路由。
• generate-dao.js: 根据 OpenAPI 规范生成 DAO 层代码。
• generate-prisma.js: 根据 OpenAPI 规范生成 Prisma 模型。

代码在这个库里面：

篇幅问题，就不贴代码了，我只需要将执行代码的命令添加到 package 脚本里，每次修改配置运行：

代码语言：javascript代码运行次数：0运行复制

npm run gen:sdk

生成代码

生成代码

就可以看到生成的代码了！

这个周末只有一天，这些功能还在不断完善中，喜欢的同学可以一起交流学习！

本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。原始发表：2025-04-26，如有侵权请联系 cloudcommunity@tencent 删除openapi后端脚本开发全栈

本文标签： Openapi全栈开发神器，0代码写后端！