註解寫在Code內生成swagger UI
Last updated
Was this helpful?
Last updated
Was this helpful?
Was this helpful?
yarn add swagger-jsdoc swagger-ui-express swagger-model-validator新增： /router/swagger.js
const express = require('express')
const router = express.Router()
const options = {
swaggerDefinition: {
info: {
2.綁定swagger UI router
server.js
const swaggerRoute = require("./router/swagger");
app.use("/swagger", swaggerRoute);API 文件
/**
* @swagger
* /:
* get:
* description: Create Grid
* tags:
* - Grid
* produces:
* - application/json
* responses:
* 200:
* description: stocks
* schema:
* $ref: '#/definitions/Stocks'
*/
或是
/**
* @swagger
* /:
* post:
* summary: Add a new pet
* parameters:
* - in: formData
* name: userId
*/
router.post('/', async (req, res) => {
.......
})Model 文件
/**
* @swagger
* definitions:
* Stock:
* type: object
* required:
* - id
* - name
* - currentPrice
* - lastUpdate
* properties:
* id:
* type: number
* name:
* type: string
* currentPrice:
* type: number
* lastUpdate:
* type: number
* Stocks:
* type: array
* items:
* $ref '#definitions/Stock'
*/
const GridSchema = new Schema({
......
})5.瀏覽 swagger UI
http://localhost:3000/swagger/api#/
port 為你 server 的 port
參考至：https://danielpecos.com/2017/09/06/rest-api-with-node-js-and-swagger/
6.瀏覽產生出的swagger.json
Redoc提供更完整的文件頁面
https://github.com/Redocly/redoc
使用方式
在html加入如下
<!DOCTYPE html>
<html>
<head>
<title>ReDoc</title>
<!-- needed for adaptive design -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
<!--
ReDoc doesn't change outer page styles
-->
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<redoc spec-url='http://petstore.swagger.io/v2/swagger.json'></redoc>
<script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script>
</body>
</html>把上面的swagger.json替換為你的即可