Introducing
Prezi AI.
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
Loading…
7
Transcript
Swagger
Thank You!
Swagger
Topic 1
- 一個工具
- 讓你的後端API接口可以更視覺化被呈現
- 可以產生HTML & CSS & Javascript製作出的網頁的API文件。
- 可用來做測試API接口
- 可搭配Postman使用
帶來的好處
Topic 2
- 讓User知道如何使用API
- 讓前端了解需要餵什麼參數並拿回什麼資料，大幅讀提升開發效率。
- 專案有寫出來的 Code 等同於技術文件，減少額外寫文件及維護文件的成本。
- 透過Swagger立即知道 API 回傳的結果，節省溝通時間提升效率。
如何使用Swagger?
Topic 3
準備一份專案，接者把package裝進專案內。
$ npm i swagger-jsdoc swagger-ui-express --save-dev
Step 1
在專案的index.js/app.js引入下列語法。
const swaggerJsdoc = require('swagger-jsdoc');
const swaggerUi = require('swagger-ui-express');
Step 2
Step 3
接者swagger-jsdoc會依照Yaml去自動產生swagger.json妳需要的api文件。
const options = {
swaggerDefinition: {
// api文件網頁描述
info: {
title: 'web_demo API',
version: '1.0.0',
description: 'Generate web_demo API document '
}
},
// 想要產生的api文件檔案
apis: ['./controllers/*.js']
};
const specs = swaggerJsdoc(options);
Step 4
設定endpoint讓swagger-ui-express可以呈現出畫面
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(specs));
Step 5
下指令
$ npm run dev
完成後可到
http://localhost:3000/api-docs
查看已完成的API文件
相關網址
- Swagger官網
https://swagger.io/tools/
- api文件寫法
https://swagger.io/docs/specification/about/
Topic 4
Choose a template
Learn more about creating dynamic, engaging presentations with Prezi