目次
Swagger とは
Koa2 プロジェクトの作成
Swagger 関連の依存関係をインストールする
Swagger の構成
API インターフェイスの作成
コメントの簡単な分析:
API ドキュメントの生成
Test
概要
ホームページ ウェブフロントエンド jsチュートリアル Koa2 を使用して Swagger を Node.js プロジェクトに統合する方法について説明した記事

Koa2 を使用して Swagger を Node.js プロジェクトに統合する方法について説明した記事

Apr 01, 2023 am 07:30 AM
フロントエンド node.js テスト

この記事では、Koa2 を使用して Swagger を Node.js プロジェクトに統合し、API ドキュメントを自動的に生成する方法を説明します。 Swagger の基本概念、関連する NPM パッケージを紹介し、詳細なコード例と説明を使用してプロセス全体を示します。

Koa2 を使用して Swagger を Node.js プロジェクトに統合する方法について説明した記事

Swagger とは

Swagger は、RESTful API 用のドキュメント生成ツールです。開発者が API を迅速かつ正確に作成、保守、レビューするのに役立ちます。 Swagger には次の利点があります。

  • API ドキュメントを自動的に生成し、手動で作成する作業負荷を軽減します
  • デバッグと検証を容易にするビジュアルな API インターフェイス テスト ツールを提供します
  • サポート優れた汎用性とスケーラビリティを備えた複数の言語とフレームワーク

Koa2 プロジェクトの作成

まず、Koa2 に基づいて Node.js プロジェクトを作成する必要があります。次のコマンドを使用してプロジェクトを作成できます: [推奨される関連チュートリアル: nodejs ビデオ チュートリアル プログラミング指導 ]

mkdir koa2-swagger-demo
cd koa2-swagger-demo
npm init -y
ログイン後にコピー

次に、Koa2 と関連する依存関係をインストールします。

npm install koa koa-router --save
ログイン後にコピー

Swagger 関連の依存関係をインストールする

次に、Swagger 関連の NPM パッケージをインストールする必要があります。このチュートリアルでは、koa2-swagger-uiswagger-jsdoc を使用します。 Swagger UI の表示と API ドキュメントの生成にそれぞれ使用されます。

npm install koa2-swagger-ui swagger-jsdoc --save
ログイン後にコピー

Swagger の構成

プロジェクトのルート ディレクトリに、Swagger を構成するための swagger.js という名前のファイルを作成します。構成コードは次のとおりです。

const swaggerJSDoc = require('swagger-jsdoc');
const options = {
    definition: {
        openapi: '3.0.0',
        info: {
            title: '我是标题',
            version: '1.0.0',
            description: '我是描述',
        },
        //servers的每一项,可以理解为一个服务,实际项目中,可自由修改
        servers: [
            {
                url: '/api',
                description: 'API server',
            },
        ],
    },
    apis: ['./routes/*.js'],
};

const swaggerSpec = swaggerJSDoc(options);

// 如果有Swagger规范文件转TS的需求,可在此处保留Swagger规范文件到本地,方便使用
//fs.writeFileSync('swagger.json', JSON.stringify(swaggerSpec, null, 2));

module.exports = swaggerSpec;
ログイン後にコピー

ここでは、options という名前のオブジェクトを定義します。これには、Swagger の基本情報と API インターフェイスのソース (つまり、ルーティング ファイル) が含まれています。 )。次に、swagger-jsdoc を使用して API ドキュメントを生成し、エクスポートします。

API インターフェイスの作成

次に、routes という名前のフォルダーを作成し、その中に users.js という名前のファイルを作成します。ユーザー関連の API インターフェイス。 users.js ファイルに次のコードを記述します:

const Router = require('koa-router');
const router = new Router();

/**
* @swagger
* tags:
*   name: Users
*   description: User management
*/

/**
* @swagger
* components:
*   schemas:
*     User:
*       type: object
*       properties:
*         id:
*           type: integer
*           description: The user ID.
*         name:
*           type: string
*           description: The user's name.
*         email:
*           type: string
*           description: The user's email.
*       required:
*         - id
*         - name
*         - email
*/

/**
* @swagger
* /users:
*   get:
*     summary: Retrieve a list of users
*     tags: [Users]
*     responses:
*       200:
*         description: A list of users.
*         content:
*           application/json:
*             schema:
*               type: array
*               items:
*                 $ref: '#/components/schemas/User'
*/
router.get('/users', async (ctx) => {
    const users = [
        { id: 1, name: 'John Doe', email: 'john.doe@example.com' },
        { id: 2, name: 'Jane Doe', email: 'jane.doe@example.com' },
    ];
    ctx.body = users;
});

module.exports = router;
ログイン後にコピー

コメントの簡単な分析:

  1. tags: この部分は名前を定義します。 「ユーザー」のラベル。タグは、API インターフェイスを分類およびグループ化するために使用されます。ここでは、ラベルの名前は「Users」、説明は「users.js のインターフェース」です。

    /**
     * @swagger
     * tags:
     *   name: Users
     *   description: users.js下的接口
     */
    ログイン後にコピー
  2. components および schemas: この部分では、「User」という名前のデータ モデルを定義します。データ モデルは、API インターフェイスで使用されるデータ構造を記述します。この例では、「User」モデルには 3 つのプロパティが含まれています: id (整数型、ユーザー ID を表す)、name (文字列型、ユーザー名を表す)、および email (ユーザーの電子メールを表す文字列タイプ)。同時に、idname、および email 属性が必須としてマークされます。

    /**
     * @swagger
     * components:
     *   schemas:
     *     User:
     *       type: object
     *       properties:
     *         id:
     *           type: integer
     *           description: id.
     *         name:
     *           type: string
     *           description: name.
     *         email:
     *           type: string
     *           description: email.
     *       required:
     *         - id
     *         - name
     *         - email
     */
    ログイン後にコピー
  3. /users API インターフェイス: この部分では、ユーザー リストを取得するための API インターフェイスを定義します。これは、パス /users を使用した GET リクエストを記述しています。このインターフェースは、前に定義した「Users」タグを使用します。さらに、ステータス コード 200 を含む成功応答も定義されており、ユーザー リストが返されることを示します。応答のコンテンツ タイプは application/json で、その構造は「User」モデルを含む配列です。

    $ref: '#/components/schemas/User' は、components で以前に定義された schemas を参照する参照構文です。 User という名前のデータ モデル。

    /**
    * @swagger
    * /users:
    *   get:
    *     summary: 获取用户列表
    *     tags: [Users]
    *     responses:
    *       200:
    *         description: success.
    *         content:
    *           application/json:
    *             schema:
    *               type: array
    *               items:
    *                 $ref: '#/components/schemas/User'
    */
    ログイン後にコピー

このコードは、ユーザー管理インターフェイス、データ モデル、応答形式の詳細を API ドキュメントに提供します。 Swagger JSDoc はこれらの注釈を解析し、対応する OpenAPI ドキュメントを生成します。

API ドキュメントの生成

次に、プロジェクトで Swagger UI を有効にする必要があります。プロジェクトのルート ディレクトリで、app.js という名前のファイルを作成し、次のコードを記述します。

const Koa = require('koa');
const Router = require('koa-router');
const swaggerUI = require('koa2-swagger-ui').koaSwagger;
const swaggerSpec = require('./swagger');
const usersRoutes = require('./routes/users');

const app = new Koa();
const router = new Router();

router.use('/api', usersRoutes.routes(), usersRoutes.allowedMethods());

router.get(
    '/swagger',
    swaggerUI({
        routePrefix: false,
        swaggerOptions: {
            spec: swaggerSpec,
        },
    })
);

app.use(router.routes()).use(router.allowedMethods());

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running at http://localhost:${PORT}`);
});
ログイン後にコピー

ここでは、koa2-swagger-ui および swagger-jsdoc によって生成された API ドキュメントをインポートしました。次に、Swagger UI を表示するために /swagger という名前のルートを定義しました。最後に、ユーザー関連の API インターフェイスを /api パスにマウントします。

Test

node app.js
ログイン後にコピー

ブラウザで開くhttp://localhost:3000/swagger Swagger UI と自動生成された API ドキュメントが表示されます。

概要

この記事では、Swagger を統合し、Koa2 に基づいた Node.js プロジェクトで API ドキュメントを自動的に生成する方法を詳しく紹介しました。 koa2-swagger-ui と swagger-jsdoc を使用すると、API インターフェイスのオンライン ドキュメントを簡単に生成し、ビジュアル テストに Swagger UI を利用できます。

Swagger を統合する主な手順は次のとおりです。

  • 関連する依存関係のインストール: koa2-swagger-ui および swagger-jsdoc
  • Swagger の構成: swagger の作成.js ファイル、API ドキュメントの基本情報とインターフェイス ソースを定義します。
  • API インターフェイスを作成します。Swagger アノテーション構文を使用してインターフェイス情報を記述します。
  • Swagger UI を有効にする: Swagger のルーティングを構成します。 app.js に UI を追加し、API を追加します。 ドキュメントが渡されます。
  • プロジェクトを実行し、Swagger UI にアクセスします。

上記の手順により、自動生成を実現できます。プロジェクト内の API ドキュメントの更新とレビューにより、開発効率と共同作業効果が向上します。同時に、Swagger UI が提供するテスト ツールを使用して、API インターフェイスの正確性と安定性を簡単に検証することもできます。

swagger-to-ts を使用して、Swagger 仕様ファイルを TypeScript タイプのファイルに変換できます。

ノード関連の知識の詳細については、nodejs チュートリアル を参照してください。

以上がKoa2 を使用して Swagger を Node.js プロジェクトに統合する方法について説明した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

furmark についてどう思いますか? - furmark はどのように資格があるとみなされますか? furmark についてどう思いますか? - furmark はどのように資格があるとみなされますか? Mar 19, 2024 am 09:25 AM

furmark についてどう思いますか? 1. メインインターフェイスで「実行モード」と「表示モード」を設定し、「テストモード」も調整して「開始」ボタンをクリックします。 2. しばらく待つと、グラフィックス カードのさまざまなパラメータを含むテスト結果が表示されます。ファーマークはどのように資格を取得しますか? 1. ファーマークベーキングマシンを使用し、約 30 分間結果を確認します。室温 19 度、ピーク値は 87 度で、基本的に 85 度前後で推移します。大型シャーシ、シャーシ ファン ポートが 5 つあり、前面に 2 つ、上部に 2 つ、背面に 1 つありますが、ファンは 1 つだけ取り付けられています。すべてのアクセサリはオーバークロックされていません。 2. 通常の状況では、グラフィックス カードの通常の温度は「30 ~ 85℃」である必要があります。 3. 周囲温度が高すぎる夏でも、通常の温度は「50〜85℃」です

新しい仙霞の冒険に参加しましょう! 「朱仙2」「武威検定」の事前ダウンロードが開始されました 新しい仙霞の冒険に参加しましょう! 「朱仙2」「武威検定」の事前ダウンロードが開始されました Apr 22, 2024 pm 12:50 PM

新作ファンタジー妖精MMORPG『朱仙2』の「武威試験」が4月23日より開始されます。原作から数千年後の朱仙大陸で、どのような新たな妖精冒険物語が繰り広げられるのでしょうか?六界の不滅の世界、フルタイムの不滅のアカデミー、自由な不滅の生活、そして不滅の世界のあらゆる種類の楽しみが、不滅の友人たちが直接探索するのを待っています! 「Wuwei Test」の事前ダウンロードが開始されました。Fairy friends は公式 Web サイトにアクセスしてダウンロードできます。サーバーが起動する前に、アクティベーション コードは事前ダウンロードとインストール後に使用できます。完成されました。 『朱仙2』「不作為試験」開催時間:4月23日10:00~5月6日23:59 小説『朱仙』を原作とした朱仙正統続編『朱仙2』の新たな童話冒険篇原作の世界観をベースにゲーム背景を設定。

PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ Mar 16, 2024 pm 12:09 PM

PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ 今日のインターネットの急速な発展の時代において、フロントエンド開発はますます重要になっています。 Web サイトやアプリケーションのエクスペリエンスに対するユーザーの要求がますます高まっているため、フロントエンド開発者は、より効率的で柔軟なツールを使用して、応答性の高いインタラクティブなインターフェイスを作成する必要があります。フロントエンド開発の分野における 2 つの重要なテクノロジーである PHP と Vue.js は、組み合わせることで完璧なツールと見なされます。この記事では、PHP と Vue の組み合わせと、読者がこれら 2 つをよりよく理解し、適用できるようにするための詳細なコード例について説明します。

フロントエンドの面接官からよく聞かれる質問 フロントエンドの面接官からよく聞かれる質問 Mar 19, 2024 pm 02:24 PM

フロントエンド開発のインタビューでは、HTML/CSS の基本、JavaScript の基本、フレームワークとライブラリ、プロジェクトの経験、アルゴリズムとデータ構造、パフォーマンスの最適化、クロスドメイン リクエスト、フロントエンド エンジニアリング、デザインパターン、新しいテクノロジーとトレンド。面接官の質問は、候補者の技術スキル、プロジェクトの経験、業界のトレンドの理解を評価するように設計されています。したがって、候補者はこれらの分野で自分の能力と専門知識を証明するために十分な準備をしておく必要があります。

国産FPSの新たな王者! 「オペレーション・デルタ」の戦場は予想を超える 国産FPSの新たな王者! 「オペレーション・デルタ」の戦場は予想を超える Mar 07, 2024 am 09:37 AM

「オペレーション デルタ」は本日(3月7日)より大規模PCテスト「コードネーム:ZERO」を開始する。先週末、上海で本作のオフラインフラッシュモブ体験イベントが開催され、幸運にも17173さんも参加することができました。前回のテストからわずか 4 か月以上しか離れていないため、この短期間で「オペレーション デルタ」がどのような新たなハイライトやサプライズをもたらすのか、興味が湧きます。 4か月以上前、私はオフライン試食会と最初のベータ版で「オペレーション デルタ」を体験しました。当時、ゲームは「危険なアクション」モードのみを開きました。しかし、デルタ作戦は当時としてはすでに印象的なものでした。大手メーカーがモバイルゲーム市場に群がる中、国際基準に匹敵するFPS

Django はフロントエンドですか、バックエンドですか?それをチェックしてください! Django はフロントエンドですか、バックエンドですか?それをチェックしてください! Jan 19, 2024 am 08:37 AM

Django は、迅速な開発とクリーンなメソッドを重視した Python で書かれた Web アプリケーション フレームワークです。 Django は Web フレームワークですが、Django がフロントエンドなのかバックエンドなのかという質問に答えるには、フロントエンドとバックエンドの概念を深く理解する必要があります。フロントエンドはユーザーが直接対話するインターフェイスを指し、バックエンドはサーバー側プログラムを指し、HTTP プロトコルを通じてデータと対話します。フロントエンドとバックエンドが分離されている場合、フロントエンドとバックエンドのプログラムをそれぞれ独立して開発して、ビジネス ロジックとインタラクティブ効果、およびデータ交換を実装できます。

さまざまな言語での機能テストとカバレッジの違いは何ですか? さまざまな言語での機能テストとカバレッジの違いは何ですか? Apr 27, 2024 am 11:30 AM

機能テストでは、ブラック ボックス テストとホワイト ボックス テストを通じて機能の機能を検証します。一方、コード カバレッジでは、テスト ケースによってカバーされるコードの部分を測定します。言語 (Python や Java など) が異なれば、テスト フレームワーク、カバレッジ ツール、機能も異なります。実際の事例では、関数テストとカバレッジ評価に Python の Unittest と Coverage、Java の JUnit と JaCoCo を使用する方法を示します。

Go 言語のフロントエンド テクノロジーの探求: フロントエンド開発の新しいビジョン Go 言語のフロントエンド テクノロジーの探求: フロントエンド開発の新しいビジョン Mar 28, 2024 pm 01:06 PM

Go 言語は、高速で効率的なプログラミング言語として、バックエンド開発の分野で広く普及しています。ただし、Go 言語をフロントエンド開発と結びつける人はほとんどいません。実際、フロントエンド開発に Go 言語を使用すると、効率が向上するだけでなく、開発者に新たな視野をもたらすことができます。この記事では、フロントエンド開発に Go 言語を使用する可能性を探り、読者がこの分野をよりよく理解できるように具体的なコード例を示します。従来のフロントエンド開発では、ユーザー インターフェイスの構築に JavaScript、HTML、CSS がよく使用されます。

See all articles