npm包@nll/api-codegen-ts使用教程

前言

随着前端技术的不断发展，前端已经不再是传统的展示型页面构建，而是在向着服务端的API接口服务开发越来越深入。这就需要前端开发人员具备一定的后端编程知识和技能。而随着前后端分离的逐渐成熟，我们经常需要与后端同步API接口的定义，以便前端能正确地调用后端提供的API。本文将介绍npm包@nll/api-codegen-ts的使用方法，以协助前端开发人员更加顺畅地进行API接口开发。

安装

在使用之前，我们需要先将 @nll/api-codegen-ts 安装到我们的项目中。安装方式有两种：

全局安装

在命令行中输入以下命令：

--- ------- -- -------------------

本地安装

在项目根目录下，打开命令行，输入以下命令：

--- ------- ---------- -------------------

使用

生成客户端代码

@nll/api-codegen-ts 可以通过Swagger或OpenAPI API规范生成客户端代码。 我们可以通过运行以下命令来生成：

-------------- -------- -------------------------------------------

其中https://petstore.swagger.io/v2/swagger.json是Swagger JSON API规范URL。生成的代码将被输出到当前目录下一个名为src/api的目录中。

生成的代码是基于TypeScript的，由以下部分组成：

----
  ----
    -----
      -- -- --- --- --
    -------
      -- -------- --
    --------
      -- ----- --
    ------
      -- ---- --
    --------
      -- ---- --

使用生成的API

生成的代码包括了一系列远程API请求的封装，模型类定义，以及API使用的类型，你可以通过以下方式使用：

-- ----------
------ - ---------- - ---- --------

-- -----
----- --- - --- -------------

-- ----
----- -------- ---------- -
  --- -
    ----- -------- - ----- -------------- ------ -- ---
    ---------------------------
  - ----- ------- -
    ---------------------
  -
-

代码生成器配置

如果我们不想使用默认配置，可以通过运行以下命令来生成一个基本的配置文件：

-------------- ----

生成出的基本配置文件如下：

-
  -------- -
    ------- ------
    -------- --
  --
  --------- -
    ------------ ----------
    ------------------ ---
    ----------------- -------
    -------------------- ---
    ------------------- ---
    ---------------------- -----
  --
  ---------- -
    --------------------- -----
    --------------- ------
    ---------------------- -----------
    ----------------------- -----
    --------------------- -----
    ----------------- -----
    ---------------------------- ------
    ----------------- -----
    ---------------- -----
    --------------------- -----
    --------------------- ------
    --------- ------
    -------- ------
    -------------------------- -----
  -
-

我们可以根据自己的需求修改配置文件，然后在运行时通过以下命令来指定配置文件：

-------------- -------- -- --------------

示例代码

以PetStore API为例，以下是使用 @nll/api-codegen-ts 生成的代码：

--- ------ ---
-- ------ --------
------ ----- -------- -
  ---- -------
  ------ -------
-

-- ------ ---
------ ----- --- -
  ---- -------
  ---------- ---------
  ----- -------
  ---------- --------------
  ------ -----------

  -- -----
  ------------------ ------------- -
    ------------------- ------
  -
-

-- ------ ---
------ ----- --- -
  ---- -------
  ------ -------
-

--- ---- ---
-- ---- ----------
------ ----- ---------- -
  ------- --------- -------
  ------- ------ --------------

  -- -----
  -------------------- ---------- -
    ------------- - ---------------- -- ---
    ---------- - ---------------------
  -

  -- ------
  ----- ---------------------- -------------------- --------- ------------------- --------------------------------- -
    ----- ---- - -----------------------

    ----- -------------- ------------------ - -
      ------- ------
      ---- -----
      ------- ----------- - -------------------------------------------- - ----------
      ------------- -------
      ------------------------
    --

    --- -
      ----- -------- - ----- ----------------------------------
      ------ -------------------------------------
    - ----- ------- -
      ------ --------------------------
    -
  -

  -- ----
  ----- --------------- ---- --------- ------------------- --------------------------------- -
    ----- ---- - -----------------------

    ----- -------------- ------------------ - -
      ------- -------
      ---- -----
      -----
      ------------- -------
      ------------------------
    --

    --- -
      ----- -------- - ----- ----------------------------------
      ------ -------------------------------------
    - ----- ------- -
      ------ --------------------------
    -
  -

  -- ---------
  ----- ----------------- ------- --------- ------------------- --------------------------------- -
    ----- ---- - --------------------------------

    ----- -------------- ------------------ - -
      ------- ------
      ---- -----
      ------------- -------
      ------------------------
    --

    --- -
      ----- -------- - ----- ----------------------------------
      ------ -------------------------------------
    - ----- ------- -
      ------ --------------------------
    -
  -

  -- ----
  ----- --------------- ---- --------- ------------------- --------------------------------- -
    ----- ---- - -----------------------

    ----- -------------- ------------------ - -
      ------- ------
      ---- -----
      -----
      ------------- -------
      ------------------------
    --

    --- -
      ----- -------- - ----- ----------------------------------
      ------ -------------------------------------
    - ----- ------- -
      ------ --------------------------
    -
  -

  -- ----
  ----- ---------------- ------- -------- ------- --------- ------------------- --------------------------------- -
    ----- ---- - --------------------------------

    ----- -------------- ------------------ - -
      ------- ---------
      ---- -----
      -------- -
        ------- -------
        ---------------------------------
      --
      ------------- -------
      ------------------------
    --

    --- -
      ----- -------- - ----- ----------------------------------
      ------ -------------------------------------
    - ----- ------- -
      ------ --------------------------
    -
  -

  -- ------
  ----- --------------------- ------- -------------------- ------- ------ ----- --------- ------------------- --------------------------------- -
    ----- ---- - --------------------------------------------

    ----- -------------- ------------------ - -
      ------- -------
      ---- -----
      -------- -
        --------- -------------------
        ---------------------------------
      --
      ------- - ------------------- ------------------ -- -- --
      ----- -----
      ------------- -------
      ------------------------
    --

    --- -
      ----- -------- - ----- ----------------------------------
      ------ -------------------------------------
    - ----- ------- -
      ------ --------------------------
    -
  -
-

-- ------ -- --------
-- ------- --------------------
-------- ---------------------------- - ----- -------- ------- --- --------------- -
  ----- ------------ - --- ------------------
  --- ------ --- -- ------- -
    -- ------------ --- ---------- -
      --------------------- ---------------------
    -
  -
  ------ -------------
-

-- ------ -- --------
-- ------- -------------
-------- -------------------------- ------------------ -------------- -
  ----- ------- - -----------------
  ----- ------ - ----------------
  ----- ---- - --------------
  ------ - ----- -------- ------ --
-

-- ------ -- --------
-- ------- ------------------
-------- ------------------------- ------------ ---------------- -
  -- ----------------------------------------------------------------
  ----- ------- - ------------------------
  ----- ------ - ---------------------- -- --
  ----- ---- - -------------------- -- ---
  ----- -------------- ---------------- - - ------ - -------- ------------- -- -------- ------ --
  -- ------ -
    --- -
      ---------------------------------- - ----- ---------------- ---
    - ----- --- -
      ---------------------------------- - ---- ---
    -
  -
  ------ --------------
-

-- ------ -- --------
-- -----
------ ---- ----------- - -------------- ---------

------ --------- ------------------- -
  ------- -------
-

------ --------- --------- -
  ---------- -------
  ------------- -------------------
-

------ --------- ----------------- -
  ------------- -------------------
-

------ --------- -------------- -
  ----- --
  -------- -------------- --------
  ------- -------
-

------ --------- ---------------- -
  ------ -
    -------- -------
    ------ ----
  --
  -------- -------------- --------
  ------- -------
-

结论

在本文中，我们介绍了 @nll/api-codegen-ts 这个npm包的使用方法，其可以自动生成前端以及后端API的客户端代码、模型定义等。通过这个npm包，我们可以大大提高我们的开发效率，并且可以减少一些模板式的代码编写。同时，这个生成代码也极大地简化了前端与后端之间的接口开发。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53d81

阅读全文

猜你喜欢

  • npm 包 spectron-8.0.0 使用教程

    简介 Spectron 是用于编写桌面应用程序的自动化测试库。它基于 Electron 框架，为开发人员提供能够控制应用程序的 API。本文将介绍如何使用 spectron-8.0.0 这个版本进行自...

    4 年前
  • npm 包 vue2-datepicker-infinite 使用教程

    最近在开发一款前端应用时，需要使用到日期选择器组件。由于时间范围较长，需要一个可以无限滚动的日期选择器组件，并能适应各种语言环境和时间格式。经过搜索和比较，我们决定使用 npm 包 vue2-date...

    4 年前
  • npm 包 peero-server 使用教程

    介绍 peero-server 是一个基于 WebRTC 技术的 P2P（点对点）连接库。它可以帮助开发者快速地实现基于浏览器的 P2P 通信功能，不需要中转服务器的支持。

    4 年前
  • npm 包 @mithray/smd 使用教程

    在前端开发过程中，我们经常会使用各种第三方库来实现功能。而npm作为当下最流行的第三方包管理工具之一，也成为了前端开发过程中不可缺少的一部分。其中 @mithray/smd 这个npm包旨在提供一种简...

    4 年前
  • npm包typogen使用教程

    Typogen是一个开源的JavaScript包，它可以自动生成有着美观排版的文章。使用Typogen，你可以大大减少排版方面的工作量，提高你的文章质量，对于前端开发人员来说，它也是一个非常方便的排版...

    4 年前
  • npm包@okfe/okex-node使用教程

    前言 随着数字货币的广泛应用，对于数字货币交易API的需求也越来越高，而OKEX交易所是一家国际知名数字货币交易平台，其提供了丰富的API接口方便开发者进行量化交易等操作，本文将介绍如何使用npm包@...

    4 年前
  • npm 包 nest-client-generator 使用教程

    本教程介绍了如何在 NestJS 中使用 npm 包 nest-client-generator 生成客户端代码，以便与后台 API 交互。以下是本文将要介绍的内容： nest-client-gen...

    4 年前
  • npm 包 nice-react 使用教程

    在前端开发中，使用好的库可以大大提高开发效率，npm 是常用的 JavaScript 包管理工具，而 nice-react 是一个优秀的 React 组件库。本文将为大家介绍如何使用 npm 包 ni...

    4 年前
  • npm 包 ang-drag-drop 使用教程

    本文介绍 npm 包 ang-drag-drop 的使用方法，该包是一个 Angular 2+ 的可跨浏览器、兼容移动端的拖放指令。 安装 使用 npm 进行安装： --- ------- -----...

    4 年前
  • npm 包 egg-error-handler 使用教程

    前言 在开发过程中，错误处理是非常重要的。错误处理不仅可以使我们更快速地定位和解决问题，而且还可以提高应用程序的稳定性。 在 Egg.js 项目中，我们经常使用 eggjs 框架提供的错误处理方式。

    4 年前
  • npm 包 angular-moment-calendar 使用教程

    前言 在前端开发中，如何对时间进行处理和渲染是一项非常常见的任务。为了简化这个任务，npm 社区各种时间插件层出不穷，其中 angular-moment-calendar 就是一个非常值得推荐的插件。

    4 年前
  • npm 包 express-err 使用教程

    介绍 express-err 是一个 Node.js Express 应用中全局异常处理的 npm 包。它可以方便地实现对 Express 应用程序中所有未捕获异常的集中处理并返回错误信息，同时可以自...

    4 年前
  • npm 包 express-simple-sitemap 使用教程

    简介 express-simple-sitemap 是一个基于 Express.js 的轻量级网站地图生成器。 在网站中加入网站地图可以帮助搜索引擎更好地索引网站的内容。

    4 年前
  • npm 包 figma-plugin-types 使用教程

    随着前端技术的快速发展，我们越来越多地使用各种 npm 包来提升我们的开发效率和代码质量。在前端设计领域，Figma 已经成为了一款非常流行的设计工具，而 figma-plugin-types 就是一...

    4 年前
  • npm 包 react-native-responsive-component 使用教程

    前言 随着移动设备数量的不断增加和用户对移动设备的依赖程度不断加深，移动应用程序的需求也随之激增。同时，随着 React Native 的出现，跨平台移动应用程序的开发也变得更加容易。

    4 年前
  • npm 包 vuepress-plugin-vue-demo 使用教程

    当我们在编写文档时，经常需要通过示例代码来解释一些概念和技术细节。在前端开发中，我们通常使用 Vue.js 和 VuePress 来编写文档。而 vuepress-plugin-vue-demo 是一...

    4 年前
  • npm 包 @rudellandy/logger 使用教程

    在前端开发中，日志记录是一个非常重要的环节，它可以帮助我们更好地调试代码和分析问题。而 npm 包 @rudellandy/logger 就是一个非常方便的工具，可以帮助我们快速、便捷地记录日志。

    4 年前
  • NPM包rebilly-recomponents使用教程

    随着前端开发的快速发展，几乎每个项目都需要引入一些通用的组件来提高开发效率。而 npm 已成为前端开发的必备工具之一。在 npm 上有许多可复用的组件包，而 Rebilly-Recomponents ...

    4 年前
  • npm 包 vue-description-list 使用教程

    介绍 vue-description-list 是一个基于 Vue.js 的 UI 组件库，用于展示信息列表，特别是用于展示键-值对列表。组件支持复杂的数据结构，如对象和数组，可以优雅地展示到页面上。

    4 年前
  • npm 包 error-overlay-webpack-plugin 使用教程

    在前端开发中，webpack 是一个不可或缺的工具。然而，在调试代码的时候，我们经常会遇到一些错误信息，有时候这些错误信息可能会让我们看得眼花缭乱。有了 npm 包 error-overlay-web...

    4 年前

相关推荐

    暂无文章