apiDoc生成接口文档,不费吹灰之力

效果

image

背景

之前做前端的时候,后端同学仗着自己是老同志,不给我接口文档

苦逼如我,需要拿着笔坐在他的旁边,听他口述

写下需要的api接口url和参数等等

现在自己做后端了,那不能这样子胡作非为了

自己吃的苦,怎能给其他同学吃呢?

这时候,apiDoc你值得拥有,稳稳的输出一篇优质的接口文档

安装apidoc

官网上是全局安装,我是喜欢安装到项目中,这样可以在另一个环境下,npm install就可以下载有所有依赖包


npm install apidoc --save-dev/-D

写注释

注册接口的注释


/**

* @api {post} /v1/auth/register User Register

* @apiName UserRegister

* @apiGroup userAuthentication

*

* @apiParam {String} username  New user's username.

* @apiParam {String} password  New user's password.

*

* @apiSuccess {String} username  The username of the register user.

* @apiSuccess {string} message  The registering success info.

*

* @apiSuccessExample Success-Response:

*    HTTP/1.1 200 OK

*    {

*      "username": "username",

*      "message": "User registered successful"

*    }

*

* @apiError REGISTER_FAILURE The register failure.

*

* @apiErrorExample Error-Response:

*    HTTP/1.1 500 Internal Server Error

*    {

*      "err": "REGISTER_FAILURE",

*      "message": "User register failure!"

*    }

*/

删除接口的注释


/**

* @api {delete} /v1/auth/user/ User delete

* @apiName UserDelete

* @apiGroup userAuthentication

*

* @apiParam {String} username  User's username.

* @apiParam {String} executor  Executor of this operation.

*

* @apiSuccess {String} username  The username of the deleted user.

* @apiSuccess {string} message  The message if deleting successful.

*

* @apiSuccessExample Success-Response:

*    HTTP/1.1 200 OK

*  {

*    "username": "username",

*    "message": "Delete User Successful"

*  }

*

* @apiError NOT_LOGIN The register failure.

*

* @apiErrorExample Error-Response:

*    HTTP/1.1 401 Unauthorized

*    {

*      "err": "NOT_LOGIN",

*      "message": "User has not logon in!"

*    }

*/

写入命令

apidoc -i routers/写入package.json的命令中

routers文件夹下都是路由文件


  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "lint": "eslint .",

    "apidoc": "apidoc -i routers/",

    "dev": "node --harmony index.js"

  },

出现了{"message":"Done.","level":"info"},即成功了

image

执行命令

执行npm run apidoc即可拿到接口文档

这样,在项目中就会出现doc文件夹

image

生成文档

这样,doc文件夹中包含该页面的所有材料

image

打开index.html

image

热乎乎的接口文档诞生了

image

结构解读

一个静态的文档很漂亮的生成了,但是实际控制这个方法的是api_data.js和api_project.js。但是实际上的数据显示是由api_data.json和api_project.json这两个json文件。

所以在支持将其他json格式转换成api_data.json和api_project.json,把apidoc生成的这两个文件进行替换,然后替换js文件,直接生产静态文档。

命令行界面

查看所有命令


apidoc -h

选项|作用

--|--

-f --file-filters |用于选择应分析的文件的regex筛选器(可以使用多个-f)。(默认值:[])

-e, --exclude-filters |用于选择不应解析的文件/目录的regex筛选器(可以使用many-e)。(默认值:[])

-i, --input |输入/源目录名。(默认值:[])

-o, --output |输出目录。(默认:“./doc/”)

-t, --template |对输出文件使用模板。(默认值:“/usr/local/lib/node_modules/apidoc/template/”)

-c, --config |包含配置文件(apidoc.json)的目录路径。(默认值:“./”)

-p, --private|Include private APIs in output.

-v, --verbose|详细调试输出。

--debug|显示调试消息。

--color|关闭日志颜色。

--parse|只解析文件并返回数据,不创建文件。

--parse-filters |可选的用户定义筛选器。格式名=文件名(默认值:[])

--parse-languages |可选的用户定义语言。格式名=文件名(默认值:[]

--parse-parsers |可选的用户定义的分析器。格式名=文件名(默认值:[])

--parse-workers |可选的用户定义的工作人员。格式名=文件名(默认值:[])

--silent|关闭所有输出。

--simulate|执行但不写入任何文件。

--markdown [markdown]|关闭默认标记分析器或将文件设置为自定义分析器。(默认值:真)

--line-ending |关闭自动检测行尾。允许值:lf,cr,crlf。

--encoding |设置源代码的编码。[UTF8]格式。(默认值:“utf8”)

-h, --help|输出使用信息

所用的的apiDoc的参数(翻译)

@api


@api {method} path [title]

必需的!

如果没有该指示器,apidoc解析器将忽略文档块。

唯一的例外是@apidefine定义的文档块,它们不需要@api

Usage: @api {get} /user/:id Users unique ID.

Name|Description

--|--

method|Request method name: DELETE, GET, POST, PUT, ...

path|Request Path.

title optional|A short title. (used for navigation and article header)


/**

* @api {get} /user/:id

*/

@apiName


@apiName name

应始终使用。

定义方法文档块的名称。名称将用于生成的输出中的子导航。结构定义不需要@apinname

用法:@apinname getuser

Name|Description

--|--

name|方法的唯一名称。可以定义相同的名称和不同的@apiversion。格式:method+path(例如get+user),只有一个建议,您可以根据需要命名。也可以用作导航标题。


/**

* @api {get} /user/:id

* @apiName GetUser

*/

@apiGroup


@apiGroup name

应始终使用。

定义方法文档块所属的组。组将用于生成的输出中的主导航。结构定义不需要@apigroup

用法:@apigroup user

Name|Description

--|--

name|组名称。也使用导航标题。


/**

* @api {get} /user/:id

* @apiGroup User

*/

@apiParam


@apiParam [(group)] [{type}] [field=defaultValue] [description]

描述传递给API方法的参数。

用法:@apiparam(mygroup)number id users unique id

Name|Description

--|--

(group)optional|所有参数都将按此名称分组。如果没有组,则设置默认参数。您可以使用@apidefine设置标题和说明。

{type}optional|参数类型,如{Boolean}, {Number}, {String}, {Object}, {String[]}

{type{size}}optional|变量大小的信息{string{..5}} 最大值为5的字符串.{string{2..5}} 最小2最大为5的字符串.{number{100-999}} 在100到999的i数字.

{type=allowedValues}optional|有关变量允许值的信息。{string="small"}包含small的字符串,{string="small","huge"}包含small/huge的字符串,{number=1,2,3,99}一个允许值是1,2,3,和99的数字,{string {..5}="small","huge"}最多5个字符的字符串,只包含单词“small”或“mage”。

field|变量名称.

[field]|带括号的fieldname将变量定义为可选变量。

=defaultValueoptional|参数默认值。

descriptionoptional|字段的说明。


/**

* @api {get} /user/:id

* @apiParam {Number} id Users unique ID.

*/

/**

* @api {post} /user/

* @apiParam {String} [firstname]  Optional Firstname of the User.

* @apiParam {String} lastname    Mandatory Lastname.

* @apiParam {String} country="DE" Mandatory with default value "DE".

* @apiParam {Number} [age=18]    Optional Age with default 18.

*

* @apiParam (Login) {String} pass Only logged in users can post this.

*                                In generated documentation a separate

*                                "Login" Block will be generated.

*/

@apiSuccess


@apiSuccess [(group)] [{type}] field [description]

成功返回参数。

用法:@apiSuccess {String} firstname Firstname of the User

Name|Description

--|--

(group)optional|所有参数都将按此名称分组。

如果没有组,则设置默认成功200。

您可以使用@apidefine设置标题和说明。

{type}optional|返回类型,如{Boolean}, {Number}, {String}, {Object}, {String[]}

field|返回标识符(返回成功代码)。

description optional|字段的说明。


/**

* @api {get} /user/:id

* @apiSuccess {String} firstname Firstname of the User.

* @apiSuccess {String} lastname  Lastname of the User.

*/

Example with (group), more group-examples at @apiSuccessTitle:


/**

* @api {get} /user/:id

* @apiSuccess (200) {String} firstname Firstname of the User.

* @apiSuccess (200) {String} lastname  Lastname of the User.

*/

Example with Object:


/**

* @api {get} /user/:id

* @apiSuccess {Boolean} active        Specify if the account is active.

* @apiSuccess {Object}  profile      User profile information.

* @apiSuccess {Number}  profile.age  Users age.

* @apiSuccess {String}  profile.image Avatar-Image.

*/

Example with Array:


/**

* @api {get} /users

* @apiSuccess {Object[]} profiles      List of user profiles.

* @apiSuccess {Number}  profiles.age  Users age.

* @apiSuccess {String}  profiles.image Avatar-Image.

*/

@apiSuccessExample


@apiSuccessExample [{type}] [title]

                  example

成功返回消息的示例,输出为预先格式化的代码。

用途:` @apiSuccessExample {json} Success-Response:

              { "content": "This is an example content" }`

Name|Description

--|--

typeoptional|响应格式

titleoptional|示例的简短标题

example|详细示例,支持多行


/**

* @api {get} /user/:id

* @apiSuccessExample {json} Success-Response:

*    HTTP/1.1 200 OK

*    {

*      "firstname": "John",

*      "lastname": "Doe"

*    }

*/

@apiError


@apiError [(group)] [{type}] field [description]

成功返回参数。

用法:@apiError UserNotFound

Name|Description

--|--

(group)optional|所有参数都将按此名称分组。如果没有组,则设置默认错误4xx。您可以使用@apidefine设置标题和说明。

{type}optional|返回类型,如{Boolean}, {Number}, {String}, {Object}, {String[]}

field|返回标识符(返回失败代码)。

description optional|字段的说明。


/**

* @api {get} /user/:id

* @apiSuccess {String} firstname Firstname of the User.

* @apiSuccess {String} lastname  Lastname of the User.

*/

@apiErrorExample


@apiErrorExample [{type}] [title]

                example

失败返回消息的示例,输出为预先格式化的代码。

用途:` @apiErrorExample {json} Error-Response:

            This is an example. `

Name|Description

--|--

typeoptional|响应格式

titleoptional|示例的简短标题

example|详细示例,支持多行


/**

* @api {get} /user/:id

* @apiErrorExample {json} Error-Response:

*    HTTP/1.1 404 Not Found

*    {

*      "error": "UserNotFound"

*    }

*/

参考文献

apidoc官网

接口文档神器之apidoc

apidoc快速生成在线文档,apidoc生成静态文件的生成规则,原理分析,实践


  1. 欢迎大家进群,参与讨论

  2. 一起进步,是我们的准则,我们是前端的一道美丽风景线

  3. 请加我的vx:qiufeihong0203,拉你进群


  1. 欢迎关注feihong的掘金账号

  2. 原文地址


版权声明

转载时请注明作者 qiufeihong 以及本文地址:http://www.qiufeihong.top/technical-summary/apiDoc/

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容