search
HomeWeb Front-endJS TutorialAn article discusses how to use Koa2 to integrate Swagger in Node.js projects

In this article, we will explore how to use Koa2 to integrate Swagger in a Node.js project to automatically generate API documentation. We will introduce the basic concepts of Swagger, related NPM packages, and demonstrate the entire process with detailed code examples and explanations.

An article discusses how to use Koa2 to integrate Swagger in Node.js projects

What is Swagger

Swagger is a document generation tool for RESTful APIs. It can help developers write, maintain and review APIs quickly and accurately. document. Swagger has the following advantages:

  • Automatically generate API documents, reducing the workload of manual writing
  • Provides visual API interface testing tools to facilitate debugging and verification
  • Support Multiple languages ​​and frameworks, with good versatility and scalability

Create Koa2 project

First, we need to create a Node.js project based on Koa2. You can use the following command to create a project: [Recommended related tutorials: nodejs video tutorial, Programming teaching]

mkdir koa2-swagger-demo
cd koa2-swagger-demo
npm init -y

Then, install Koa2 and related dependencies:

npm install koa koa-router --save

Next, we need to install Swagger-related NPM packages. In this tutorial, we will use koa2-swagger-ui and swagger-jsdoc. Used to display Swagger UI and generate API documentation respectively.

npm install koa2-swagger-ui swagger-jsdoc --save

Configuring Swagger

In the project root directory, create a file named swagger.js for configuring Swagger. The configuration code is as follows:

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;

Here, we define an object named options, which contains the basic information of Swagger and the source of the API interface (that is, our routing file). Then, we use swagger-jsdoc to generate the API documentation and export it.

Writing API interface

Now, let’s create a folder named routes, and create a file named users.js in it File used to define user-related API interfaces. In the users.js file, we will write the following code:

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;

Comment brief analysis:

  1. tags: This part defines a name The label for "Users". Tags are used to classify and group API interfaces. Here, the label is named "Users" and the description is "Interface under users.js".

    /**
     * @swagger
     * tags:
     *   name: Users
     *   description: users.js下的接口
     */
  2. components and schemas: This part defines a data model named "User". The data model describes the data structures used in the API interface. In this example, the "User" model contains three properties: id (integer type, representing user ID), name (string type, representing user name), and email (String type, representing the user's email). At the same time, the id, name, and email attributes are marked as required.

    /**
     * @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 interface: This part defines an API interface for obtaining a user list. It describes a GET request with the path /users. This interface uses the "Users" tag defined previously. In addition, it also defines a successful response with a status code of 200, indicating that a user list is returned. The content type of the response is application/json, and its structure is an array containing the "User" model.

    $ref: '#/components/schemas/User' is a reference syntax that refers to the schemas previously defined under components The data model named User.

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

This code provides the API documentation with details about the user management interface, data model, and response format. Swagger JSDoc parses these annotations and generates corresponding OpenAPI documents.

Generate API documentation

Next, we need to enable Swagger UI in the project. In the project root directory, create a file named app.js and write the following code:

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}`);
});

Here, we imported the API documentation generated by koa2-swagger-ui and swagger-jsdoc. Then, we defined a route named /swagger to display the Swagger UI. Finally, we mount the user-related API interface to the /api path.

Test

node app.js

Open in the browserhttp://localhost:3000/swagger You will see the Swagger UI and automatically generated API documentation.

Summary

In this article, we introduced in detail how to integrate Swagger and automatically generate API documentation in a Node.js project based on Koa2. By using koa2-swagger-ui and swagger-jsdoc, we can easily generate online documentation for API interfaces and utilize Swagger UI for visual testing.

The main steps to integrate Swagger are as follows:

  • Install related dependencies: koa2-swagger-ui and swagger-jsdoc
  • Configure Swagger: create the swagger.js file, Define the basic information and interface source of the API document
  • Write the API interface: Use Swagger annotation syntax to describe the interface information
  • Enable Swagger UI: Configure the routing of Swagger UI in app.js and add the API The document is passed to it
  • Run the project and access the Swagger UI

Through the above steps, we can realize the automatic generation, update and review of API documentation in the project, thereby improving development efficiency and Collaborative effect. At the same time, using the testing tools provided by Swagger UI, we can also easily verify the correctness and stability of the API interface.

You can use swagger-to-ts to convert Swagger specification files into TypeScript type files.

For more node-related knowledge, please visit: nodejs tutorial!

The above is the detailed content of An article discusses how to use Koa2 to integrate Swagger in Node.js projects. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:掘金社区. If there is any infringement, please contact admin@php.cn delete
Javascript Data Types : Is there any difference between Browser and NodeJs?Javascript Data Types : Is there any difference between Browser and NodeJs?May 14, 2025 am 12:15 AM

JavaScript core data types are consistent in browsers and Node.js, but are handled differently from the extra types. 1) The global object is window in the browser and global in Node.js. 2) Node.js' unique Buffer object, used to process binary data. 3) There are also differences in performance and time processing, and the code needs to be adjusted according to the environment.

JavaScript Comments: A Guide to Using // and /* */JavaScript Comments: A Guide to Using // and /* */May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript: A Comparative Analysis for DevelopersPython vs. JavaScript: A Comparative Analysis for DevelopersMay 09, 2025 am 12:22 AM

The main difference between Python and JavaScript is the type system and application scenarios. 1. Python uses dynamic types, suitable for scientific computing and data analysis. 2. JavaScript adopts weak types and is widely used in front-end and full-stack development. The two have their own advantages in asynchronous programming and performance optimization, and should be decided according to project requirements when choosing.

Python vs. JavaScript: Choosing the Right Tool for the JobPython vs. JavaScript: Choosing the Right Tool for the JobMay 08, 2025 am 12:10 AM

Whether to choose Python or JavaScript depends on the project type: 1) Choose Python for data science and automation tasks; 2) Choose JavaScript for front-end and full-stack development. Python is favored for its powerful library in data processing and automation, while JavaScript is indispensable for its advantages in web interaction and full-stack development.

Python and JavaScript: Understanding the Strengths of EachPython and JavaScript: Understanding the Strengths of EachMay 06, 2025 am 12:15 AM

Python and JavaScript each have their own advantages, and the choice depends on project needs and personal preferences. 1. Python is easy to learn, with concise syntax, suitable for data science and back-end development, but has a slow execution speed. 2. JavaScript is everywhere in front-end development and has strong asynchronous programming capabilities. Node.js makes it suitable for full-stack development, but the syntax may be complex and error-prone.

JavaScript's Core: Is It Built on C or C  ?JavaScript's Core: Is It Built on C or C ?May 05, 2025 am 12:07 AM

JavaScriptisnotbuiltonCorC ;it'saninterpretedlanguagethatrunsonenginesoftenwritteninC .1)JavaScriptwasdesignedasalightweight,interpretedlanguageforwebbrowsers.2)EnginesevolvedfromsimpleinterpreterstoJITcompilers,typicallyinC ,improvingperformance.

JavaScript Applications: From Front-End to Back-EndJavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AM

JavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.

Python vs. JavaScript: Which Language Should You Learn?Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AM

Choosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools