🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!

前言

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

往期精彩推荐

正文

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

Next.js

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

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

并且结合了 OpenAPIPrisma 来实现数据库操作和 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 文件。

使用脚本

我尝试了多种方案实现理想的服务端代码,例如经典的 @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 模型。

代码在这个库里面:

github.com/mmdctjj/ope...

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

bash 复制代码
npm run gen:sdk

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

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

最后

虽然 AI 横行,但是现阶段,能比 AI 稳定实现想要的效果都是十分值得的思路!

今天的分享就这些了,如果文章中有错误的地方,欢迎指正!

往期精彩推荐

相关推荐
ohMyGod_1236 分钟前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜059 分钟前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界9 分钟前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku12 分钟前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员16 分钟前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句17 分钟前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿18 分钟前
Web第二次笔记
前端·javascript
良辰未晚19 分钟前
Canvas 绘制模糊?那是你没搞懂 DPR!
前端·canvas
Dream耀23 分钟前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript
P7Dreamer24 分钟前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js