Table des matières
Qu'est-ce que Swagger
Création d'un projet Koa2
Installez les dépendances liées à Swagger
配置Swagger
编写API接口
注释简析:
Ecriture de l'interface API" >

Ecriture de l'interface API

Analyse des commentaires :
rrreee
Résumé
Maison interface Web js tutoriel Un article explique comment utiliser Koa2 pour intégrer Swagger dans les projets Node.js

Un article explique comment utiliser Koa2 pour intégrer Swagger dans les projets Node.js

Apr 01, 2023 am 07:30 AM
前端 node.js 测试

Dans cet article, nous explorerons comment utiliser Koa2 pour intégrer Swagger dans un projet Node.js afin de générer automatiquement la documentation de l'API. Nous présenterons les concepts de base de Swagger, les packages NPM associés, et démontrerons l'ensemble du processus avec des exemples de code et des explications détaillés.

Un article explique comment utiliser Koa2 pour intégrer Swagger dans les projets Node.js

Qu'est-ce que Swagger

Swagger est un outil de génération de documents API RESTful qui peut aider les développeurs à rédiger, maintenir et réviser des documents API rapidement et avec précision. Swagger présente les avantages suivants :

  • Génère automatiquement des documents API, réduisant ainsi la charge de travail d'écriture manuelle
  • Fournit des outils de test d'interface API visuelle pour faciliter le débogage et la vérification
  • Prend en charge plusieurs langages et frameworks et offre une bonne polyvalence et évolutivité

Création d'un projet Koa2

Tout d'abord, nous devons créer un projet Node.js basé sur Koa2. Vous pouvez utiliser la commande suivante pour créer un projet : [Recommandations de didacticiel associées : Tutoriel vidéo Nodejs, Enseignement de la programmation]

mkdir koa2-swagger-demo
cd koa2-swagger-demo
npm init -y
Copier après la connexion

Ensuite, installez Koa2 et les dépendances associées :

npm install koa koa-router --save
Copier après la connexion

Installez les dépendances liées à Swagger

Ensuite, nous vous devez installer le package NPM lié à Swagger. Dans ce tutoriel, nous utiliserons koa2-swagger-ui et swagger-jsdoc. Utilisé pour afficher l'interface utilisateur Swagger et générer la documentation de l'API respectivement. koa2-swagger-uiswagger-jsdoc。分别用于展示Swagger UI和生成API文档。

npm install koa2-swagger-ui swagger-jsdoc --save
Copier après la connexion

配置Swagger

在项目根目录下,创建一个名为swagger.js的文件,用于配置Swagger。配置代码如下:

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;
Copier après la connexion

这里,我们定义了一个名为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;
Copier après la connexion

注释简析:

  1. tags: 这部分定义了一个名为"Users"的标签。标签用于对API接口进行分类和分组。在这里,标签名为"Users",描述为"users.js下的接口"。

    /**
     * @swagger
     * tags:
     *   name: Users
     *   description: users.js下的接口
     */
    Copier après la connexion
  2. componentsschemas: 这部分定义了一个名为"User"的数据模型。数据模型描述了API接口中使用的数据结构。在这个例子中,"User"模型包含三个属性:id(整数类型,表示用户ID)、name(字符串类型,表示用户名)和email(字符串类型,表示用户电子邮件)。同时,idnameemail属性都被标记为必需。

    /**
     * @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
     */
    Copier après la connexion
  3. /users API接口: 这部分定义了一个获取用户列表的API接口。它描述了一个GET请求,路径为/users。这个接口使用了之前定义的"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'
    */
    Copier après la connexion

    Configuration de Swagger

  4. Dans le répertoire racine du projet, créez un fichier nommé swagger.js pour configurer Swagger. Le code de configuration est le suivant :
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}`);
});
Copier après la connexion

Ici, nous définissons un objet nommé options, qui contient les informations de base de Swagger et la source de l'interface API (c'est-à-dire notre fichier de routage). Ensuite, nous utilisons noreferrer">swagger-jsdoc

Générer la documentation de l'API et l'exporter.

Ecriture de l'interface API

Maintenant, créons un dossier nommé routes et créons-y un dossier nommé users. fichier, utilisé pour définir les interfaces API liées à l'utilisateur. Dans le fichier users.js, nous écrirons le code suivant :

node app.js
Copier après la connexion

Analyse des commentaires :

    tags : Ceci La section définit une étiquette appelée « Utilisateurs ». Les balises sont utilisées pour classer et regrouper les interfaces API. Ici, l'étiquette est nommée « Utilisateurs » et la description est « Interface sous users.js ».

    rrreee

    composants et schémas : Cette partie définit un modèle de données nommé "Utilisateur". Le modèle de données décrit les structures de données utilisées dans l'interface API. Dans cet exemple, le modèle "Utilisateur" contient trois attributs : id (type entier, représentant l'ID utilisateur), name (type de chaîne, représentant le nom d'utilisateur) et email (Type String, représentant l'email de l'utilisateur). Dans le même temps, les attributs id, name et email sont marqués comme obligatoires. rrreee

    🎜🎜/users Interface API : Cette partie définit une interface API pour obtenir une liste d'utilisateurs. Il décrit une requête GET avec le chemin /users. Cette interface utilise la balise "Utilisateurs" définie précédemment. De plus, il définit également une réponse réussie avec un code d'état de 200, indiquant qu'une liste d'utilisateurs est renvoyée. Le type de contenu de la réponse est application/json et sa structure est un tableau contenant le modèle « Utilisateur ». 🎜🎜$ref : '#/components/schemas/User' est une syntaxe de référence, qui fait référence aux schémas précédemment définis sous components A modèle de données nommé Utilisateur. 🎜rrreee🎜🎜🎜Ce code fournit à la documentation de l'API des détails sur l'interface de gestion des utilisateurs, le modèle de données et le format de réponse. Swagger JSDoc analyse ces annotations et génère les documents OpenAPI correspondants. 🎜🎜Générer la documentation de l'API🎜🎜Ensuite, nous devons activer l'interface utilisateur Swagger dans le projet. Dans le répertoire racine du projet, créez un fichier appelé app.js et écrivez le code suivant : 🎜rrreee🎜Ici, nous avons importé la documentation API générée par koa2-swagger-ui et swagger-jsdoc. Ensuite, nous avons défini une route nommée /swagger pour afficher l'interface utilisateur de Swagger. Enfin, nous montons l’interface API relative à l’utilisateur sur le chemin /api. 🎜🎜Test🎜rrreee🎜Ouvrez 🎜http://localhost:3000/swagger🎜 dans le navigateur. Vous verrez l'interface utilisateur Swagger et la documentation de l'API générée automatiquement. 🎜

    Résumé

    Dans cet article, nous avons présenté en détail comment intégrer Swagger et générer automatiquement la documentation de l'API dans un projet Node.js basé sur Koa2. En utilisant koa2-swagger-ui et swagger-jsdoc, nous pouvons facilement générer une documentation en ligne pour les interfaces API et utiliser l'interface utilisateur Swagger pour les tests visuels.

    Les principales étapes pour intégrer Swagger sont les suivantes :

  • Installer les dépendances associées : koa2-swagger-ui et swagger-jsdoc
  • Configurer Swagger : Créer le fichier swagger.js, définir les informations de base et la source de l'interface de l'API document
  • Écrivez l'interface API : utilisez la syntaxe d'annotation Swagger pour décrire les informations de l'interface
  • Activez l'interface utilisateur Swagger : configurez l'itinéraire de l'interface utilisateur Swagger dans app.js et transmettez-lui le document API
  • Exécutez le projet et accédez à l'interface utilisateur Swagger

Grâce aux étapes ci-dessus, nous pouvons implémenter la génération, la mise à jour et la révision automatiques des documents API dans le projet, améliorant ainsi l'efficacité du développement et les effets de collaboration. Dans le même temps, en utilisant les outils de test fournis par Swagger UI, nous pouvons également facilement vérifier l'exactitude et la stabilité de l'interface API.

Les fichiers de spécifications Swagger peuvent être convertis en fichiers de type TypeScript à l'aide de swagger-to-ts.

Pour plus de connaissances sur les nœuds, veuillez visiter : tutoriel Nodejs !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que pensez-vous de furmark ? - Comment furmark est-il considéré comme qualifié ? Que pensez-vous de furmark ? - Comment furmark est-il considéré comme qualifié ? Mar 19, 2024 am 09:25 AM

Que pensez-vous de furmark ? 1. Définissez le « Mode d'exécution » et le « Mode d'affichage » dans l'interface principale, ajustez également le « Mode de test » et cliquez sur le bouton « Démarrer ». 2. Après avoir attendu un moment, vous verrez les résultats du test, y compris divers paramètres de la carte graphique. Comment Furmark est-il qualifié ? 1. Utilisez une machine à pâtisserie Furmark et vérifiez les résultats pendant environ une demi-heure. Elle oscille essentiellement autour de 85 degrés, avec une valeur maximale de 87 degrés et une température ambiante de 19 degrés. Grand châssis, 5 ports de ventilateur de châssis, deux à l'avant, deux en haut et un à l'arrière, mais un seul ventilateur est installé. Tous les accessoires ne sont pas overclockés. 2. Dans des circonstances normales, la température normale de la carte graphique doit être comprise entre « 30 et 85 ℃ ». 3. Même en été, lorsque la température ambiante est trop élevée, la température normale est de « 50 à 85 ℃.

Rejoignez une nouvelle aventure Xianxia ! Le pré-téléchargement de 'Zhu Xian 2' 'Wuwei Test' est maintenant disponible Rejoignez une nouvelle aventure Xianxia ! Le pré-téléchargement de 'Zhu Xian 2' 'Wuwei Test' est maintenant disponible Apr 22, 2024 pm 12:50 PM

Le « Test d'inaction » du nouveau MMORPG féerique fantastique « Zhu Xian 2 » sera lancé le 23 avril. Quel genre de nouvelle histoire d'aventure féerique se produira sur le continent Zhu Xian des milliers d'années après l'œuvre originale ? Le monde immortel des six royaumes, une académie à plein temps pour cultiver des immortels, une vie libre pour cultiver des immortels et toutes sortes de divertissements dans le monde immortel attendent que les amis immortels l'explorent en personne ! Le pré-téléchargement "Wuwei Test" est maintenant ouvert. Les amis fées peuvent accéder au site officiel pour télécharger. Vous ne pouvez pas vous connecter au serveur de jeu avant le lancement du serveur. Le code d'activation peut être utilisé après le pré-téléchargement et l'installation. est terminé. "Zhu Xian 2" "Inaction Test" horaires d'ouverture : 23 avril 10h00 - 6 mai 23h59 Le nouveau chapitre d'aventure de conte de fées de la suite orthodoxe de Zhu Xian "Zhu Xian 2" est basé sur le roman "Zhu Xian" comme un modèle basé sur la vision du monde de l'œuvre originale, l'arrière-plan du jeu est défini.

PHP et Vue : une combinaison parfaite d'outils de développement front-end PHP et Vue : une combinaison parfaite d'outils de développement front-end Mar 16, 2024 pm 12:09 PM

PHP et Vue : une combinaison parfaite d'outils de développement front-end À l'ère actuelle de développement rapide d'Internet, le développement front-end est devenu de plus en plus important. Alors que les utilisateurs ont des exigences de plus en plus élevées en matière d’expérience des sites Web et des applications, les développeurs front-end doivent utiliser des outils plus efficaces et plus flexibles pour créer des interfaces réactives et interactives. En tant que deux technologies importantes dans le domaine du développement front-end, PHP et Vue.js peuvent être considérés comme une arme parfaite lorsqu'ils sont associés. Cet article explorera la combinaison de PHP et Vue, ainsi que des exemples de code détaillés pour aider les lecteurs à mieux comprendre et appliquer ces deux éléments.

Questions fréquemment posées par les enquêteurs front-end Questions fréquemment posées par les enquêteurs front-end Mar 19, 2024 pm 02:24 PM

Lors des entretiens de développement front-end, les questions courantes couvrent un large éventail de sujets, notamment les bases HTML/CSS, les bases JavaScript, les frameworks et les bibliothèques, l'expérience du projet, les algorithmes et les structures de données, l'optimisation des performances, les requêtes inter-domaines, l'ingénierie front-end, les modèles de conception et les nouvelles technologies et tendances. Les questions de l'intervieweur sont conçues pour évaluer les compétences techniques du candidat, son expérience en matière de projet et sa compréhension des tendances du secteur. Par conséquent, les candidats doivent être parfaitement préparés dans ces domaines pour démontrer leurs capacités et leur expertise.

Le nouveau roi des FPS domestiques ! Le champ de bataille « Opération Delta » dépasse les attentes Le nouveau roi des FPS domestiques ! Le champ de bataille « Opération Delta » dépasse les attentes Mar 07, 2024 am 09:37 AM

"Opération Delta" lancera aujourd'hui (7 mars) un test PC à grande échelle appelé "Codename: ZERO". Le week-end dernier, ce jeu a organisé un événement d'expérience flash mob hors ligne à Shanghai, et 17173 a également eu la chance d'être invité à participer. Ce test remonte à un peu plus de quatre mois depuis le dernier, ce qui nous rend curieux, quels nouveaux points forts et surprises l'Opération Delta apportera-t-elle en si peu de temps ? Il y a plus de quatre mois, j'ai expérimenté « l'Opération Delta » lors d'une séance de dégustation hors ligne et la première version bêta. A cette époque, le jeu n'ouvrait que le mode "Action Dangereuse". Pourtant, l’opération Delta était déjà impressionnante pour l’époque. Dans un contexte où les grands constructeurs se ruent sur le marché du jeu mobile, un tel FPS comparable aux standards internationaux

Django est-il front-end ou back-end ? Vérifiez-le! Django est-il front-end ou back-end ? Vérifiez-le! Jan 19, 2024 am 08:37 AM

Django est un framework d'application Web écrit en Python qui met l'accent sur un développement rapide et des méthodes propres. Bien que Django soit un framework Web, pour répondre à la question de savoir si Django est un front-end ou un back-end, vous devez avoir une compréhension approfondie des concepts de front-end et de back-end. Le front-end fait référence à l'interface avec laquelle les utilisateurs interagissent directement, et le back-end fait référence aux programmes côté serveur. Ils interagissent avec les données via le protocole HTTP. Lorsque le front-end et le back-end sont séparés, les programmes front-end et back-end peuvent être développés indépendamment pour mettre en œuvre respectivement la logique métier et les effets interactifs, ainsi que l'échange de données.

Explorer la technologie front-end du langage Go : une nouvelle vision du développement front-end Explorer la technologie front-end du langage Go : une nouvelle vision du développement front-end Mar 28, 2024 pm 01:06 PM

En tant que langage de programmation rapide et efficace, le langage Go est très populaire dans le domaine du développement back-end. Cependant, peu de gens associent le langage Go au développement front-end. En fait, l’utilisation du langage Go pour le développement front-end peut non seulement améliorer l’efficacité, mais également ouvrir de nouveaux horizons aux développeurs. Cet article explorera la possibilité d'utiliser le langage Go pour le développement front-end et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre ce domaine. Dans le développement front-end traditionnel, JavaScript, HTML et CSS sont souvent utilisés pour créer des interfaces utilisateur.

Quelles sont les différences entre les tests fonctionnels et la couverture dans différentes langues ? Quelles sont les différences entre les tests fonctionnels et la couverture dans différentes langues ? Apr 27, 2024 am 11:30 AM

Les tests fonctionnels vérifient la fonctionnalité des fonctions via des tests en boîte noire et en boîte blanche, tandis que la couverture du code mesure la partie du code couverte par les scénarios de test. Différents langages (tels que Python et Java) ont des cadres de test, des outils de couverture et des fonctionnalités différents. Des cas pratiques montrent comment utiliser Unittest et Coverage de Python et JUnit et JaCoCo de Java pour les tests de fonctions et l'évaluation de la couverture.

See all articles