react,vue編寫介面文件

江理彭于晏發表於2020-11-18

1. 安裝模組

npm i apidoc --global

2.配置packag.json

在檔案最底部

"apidoc": {
  "title": "ERP admin pro", //隨便取
  "url" : "http://localhost:3001/"   //專案的埠號
}

3.編寫介面文件

在路由的配置前新增如下程式碼(星號註釋起來的部分)
注意一定要寫在路由的前面,不然不起作用

var router = require('express').Router()
var sql = require('./../sql')
var Navcategory = require('./../sql/models/Navcategory')
var Navlist = require('./../sql/models/Navlist')
var utils = require('./../utils')
/**
 * @api {get} /api/nav/navcategory 獲取導航分類  //讀取檔案的目錄及介面名
 * @apiName GetNavCategory
 * @apiGroup Nav
 *
 * @apiSuccess {String} code 狀態碼.
 * @apiSuccess {String} message  描述
 * @apiSuccess {String} data  資料
 *
 * @apiSuccessExample Success-Response:
 *     HTTP/1.1 200 OK
 *     {
 *       "code": "200",
 *       "message": "導航的分類資料",
 *       "data": []
 *     }
 * @apiSampleRequest /api/nav/navcategory
 */
router.get('/navcategory', (req, res, next) => {
  sql.find(Navcategory, {}, { _id: 0, __v: 0 }).then(data => {
    res.status('200').send({
      code: '200',
      message: '導航的分類資料',
      data
    })
  })
})
/**
 * @api {get} /api/nav/navlist 獲取導航列表
 * @apiName GetNavList
 * @apiGroup Nav
 *
 * @apiSuccess {String} code 狀態碼.
 * @apiSuccess {String} message  描述
 * @apiSuccess {String} data  資料
 *
 * @apiSuccessExample Success-Response:
 *     HTTP/1.1 200 OK
 *     {
 *       "code": "200",
 *       "message": "導航列表",
 *       "data": []
 *     }
 * @apiSampleRequest /api/nav/navlist
 */
router.get('/navlist', (req, res, next) => {
  sql.find(Navlist, {}, { _id: 0, __v: 0 }).then(data => {
    res.status('200').send({
      code: '200',
      message: '導航列表',
      data
    })
  })
})

module.exports = router

4.生成線上介面文件

apidoc -i api/ -o public/apidoc

api/ : 想要生成介面文件的檔案目錄
-o : output 輸出文件
public/apidoc : 輸出文件的目錄

通過 http://localhost:3001/apidoc 訪問當前的介面文件,或者開啟public/apidoc檢視.(路徑自改)

相關文章