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
C   and JavaScript: The Connection ExplainedC and JavaScript: The Connection ExplainedApr 23, 2025 am 12:07 AM

C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

From Websites to Apps: The Diverse Applications of JavaScriptFrom Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python vs. JavaScript: Use Cases and Applications ComparedPython vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

The Role of C/C   in JavaScript Interpreters and CompilersThe Role of C/C in JavaScript Interpreters and CompilersApr 20, 2025 am 12:01 AM

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

JavaScript in Action: Real-World Examples and ProjectsJavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AM

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

JavaScript and the Web: Core Functionality and Use CasesJavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AM

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

Understanding the JavaScript Engine: Implementation DetailsUnderstanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AM

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python vs. JavaScript: The Learning Curve and Ease of UsePython vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

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 Tools

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

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),

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!