前端和后端注释文档生成

前端和后端的 函数及api 说明文档生成总结,持续更新中 by Qzx

参考网址

apiDoc的使用教程

一、安装

# 全局安装
npm install apidoc -g
# 查看是否安装成功,显示命令行参数
apidoc -h

二、apidoc 常用命令说明

指令简写 指令全称 说明
-f --file-filters 过滤器,指定应该解析的文件类型,后缀 (可以使用多个-f)。默认.cs .dart .erl .go .java .js .php .py .rb .ts。示例(仅解析.js和.ts文件):apidoc -f ".*\.js" -f ".*\\.ts"
-e --exclude-filters 过滤器用于选择不应该解析的文件
-i --input 指定输入的源目录名,项目文件的位置,默认为 ./ 例:apidoc -i myapp/
-o --output 指定输出的目录文件名,放置生成文档的位置,默认为 ./doc/,例:apidoc -o apidoc/
-t --template 指定要用的外部模板的路径,可以创建和使用自己的模板,默认使用全局的 node_modules/apidoc/template/ ,例:apidoc -t mytemplate/
-c --config 指定配置文件的路径 apidoc.json ./
-h --help 显示详细的帮助说明
--debug --debug 显示调试的信息,默认为 false

三、具体使用

  1. 在项目文件夹新建apidoc.json;

  2. 在项目目录运行:

    apidoc -i myapp/ -o apidoc/ -t mytemplate/
    # 简写指令
    apidoc

说明:上面的指令可以直接简写为 apidoc,没有任何参数时,默认从当前目录(包括子目录)下格式为(.cs .dart .erl .go .java .js .php .py .rb .ts) 的所有文件生成文档并将输出写入 ./doc/。

四、基本配置(apidoc.json)

项目根目录下的 apidoc.json 可配置项包含有关项目的常用信息,如 标题,简短描述、版本和配置选项,如页眉/页脚设置或模板特定选项。

  • 基本配置方式(apidoc.json)

    {
    "name": "example",
    "version": "0.1.0",
    "description": "apiDoc basic example",
    "title": "Custom apiDoc browser title",
    "url" : "https://api.github.com/v1"
    }
  • 在含有package.json文件的项目中配置(添加"apidoc":{}参数)

    {
    "name": "example",
    "version": "0.1.0",
    "description": "apiDoc basic example",
    "apidoc": {
    "title": "Custom apiDoc browser title",
    "url" : "https://api.github.com/v1"
    }
    }
  • 添加额外的 Header 和 Footer (不常用,在apidoc.json添加header和footer参数)

    {
    "header": {
    "title": "My own header title",
    "filename": "header.md"
    },
    "footer": {
    "title": "My own footer title",
    "filename": "footer.md"
    }
    }
  • 配置参数的详细说明(apidoc.json)

    参数名 描述
    name 项目名称,若不存在该字段,则会尝试取 package.json 里面的name值
    version 项目版本号,不存在则读取 package.json 里面对于的值
    description 项目描述 ,不存在同上
    title 浏览器标题文本
    url api路径的前缀,适合同一域下的接口,例:https://api.github.com/v1
    sampleUrl 测试样例的url, 具体请参考 @apiSampleRequest
    header 添加自定义的顶部描述 {title: '', filename: ''}
    title 顶部的标题
    filename 顶部具体的展现内容
    footer 添加自定义的尾部描述 {title: '', filename: ''}
    title 尾部的标题
    filename 尾部具体的展现内容
    order 用于定义输出的api-names/group-name列表排序。最后自动显示未定义的名称。"order": ["Error","Define","PostTitleAndError","PostError"]

五、apiDoc 常用api说明

  • 常用api:@api,@apiName,@apiGroup,@apiVersion,@apiDescription,@apiParam,@apiSuccess,@apiSuccessExample,@apiDefine,@apiError,@apiIgnore

  • 基本例子(demo.js)

    /**
    * @api {get} /user/:id Request User information
    * @apiVersion 0.1.0
    * @apiName GetUser
    * @apiGroup User
    *
    * @apiParam {Number} id Users unique ID.
    *
    * @apiSuccess {String} firstname Firstname of the User.
    * @apiSuccess {String} lastname Lastname of the User.
    *
    * @apiSuccessExample Success-Response:
    * HTTP/1.1 200 OK
    * {
    * "firstname": "John",
    * "lastname": "Doe"
    * }
    *
    * @apiError UserNotFound The id of the User was not found.
    *
    * @apiErrorExample Error-Response:
    * HTTP/1.1 404 Not Found
    * {
    * "error": "UserNotFound"
    * }
    */

    说明:文档块以 /** 和 */ 结尾,其中@api为必须字段,格式同例子:@api + {请求类型} + 接口路径 + 接口描述,在生成的时候没有@api 的文档块会被忽略。@apiName 和 @apiGroup,在版本迭代时应保持一致,其他字段为可选。

  • @api (必须字段,没有会被忽略)

    @api {method} path [title]

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

  • @apiParam

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

    示例:

    /**
    * @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.
    */

    说明:1. 带括号的Fieldname将Variable定义为可选。2. =defaultValue 参数默认值。

  • @apiSuccess

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

    示例:

    /**
    * @api {get} /user/:id
    * @apiSuccess {String} firstname Firstname of the User.
    * @apiSuccess {String} lastname Lastname of the User.
    */ /**
    * @api {get} /user/:id
    * @apiSuccess (200) {String} firstname Firstname of the User.
    * @apiSuccess (200) {String} lastname Lastname of the User.
    */ /**
    * @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.
    */
    ```

六、示例代码下载

apiDocDemo示例代码

七、demo示例效果图

 
1532659983362.jpg
 
1532660016333.jpg

jsDoc的使用教程

一、安装

# 全局安装方式
npm install -g jsdoc
# 查看安装是否成功
jsdoc -v
# 基本使用方式
jsdoc demo.js

二、jsdoc 常用命令说明

指令简写 指令全称 说明
-f --file-filters 过滤器,指定应该解析的文件类型,后缀 (可以使用多个-f)。默认.cs .dart .erl .go .java .js .php .py .rb .ts。示例(仅解析.js和.ts文件):apidoc -f ".*\.js" -f ".*\\.ts"
-e --exclude-filters 过滤器用于选择不应该解析的文件

三、具体使用

  • 命令行新建一个项目
mkdir jsDocDemo
cd jsDocDemo
npm init -y
  • 新建一个demo.js,代码示例如下:
/**
* Book类,代表一个书本.
* @constructor
* @param {string} title - 书本的标题.
* @param {string} author - 书本的作者.
*/
function Book(title, author) {
this.title=title;
this.author=author;
}
Book.prototype={
/**
* 获取书本的标题
* @returns {string|*}
*/
getTitle:function(){
return this.title;
},
/**
* 设置书本的页数
* @param pageNum {number} 页数
*/
setPageNum:function(pageNum){
this.pageNum=pageNum;
}
};
  • 命令行编译文件
jsdoc demo.js

注: 默认生成在 out 目录下,更换目录可使用 -d + 文件夹路径

ApiDoc 后端接口注释文档的使用的更多相关文章

  1. 后端编写Swagger接口管理文档

    Swagger接口管理文档 访问接口文档的网页:http://localhost:8080/swagger-ui/index.html 导入依赖 <dependency> <grou ...

  2. 支付宝接口使用文档说明 支付宝异步通知(notify_url)与return_url.

    支付宝接口使用文档说明 支付宝异步通知(notify_url)与return_url. 现支付宝的通知有两类. A服务器通知,对应的参数为notify_url,支付宝通知使用POST方式 B页面跳转通 ...

  3. python快速生成注释文档的方法

    python快速生成注释文档的方法 今天将告诉大家一个简单平时只要注意的小细节,就可以轻松生成注释文档,也可以检查我们写的类方法引用名称是否重复有问题等.一看别人专业的大牛们写的文档多牛多羡慕,不用担 ...

  4. FastDFS接口API文档说明

    FastDFS接口API文档说明 时间:2012-03-17 来源:R9IT 作者:R9传奇 一.命令行的上传: 上传命令1. /usr/local/bin/fdfs_upload_file conf ...

  5. c语言小程序以及java生成注释文档方法

    c语言小程序:sizeof和strlen() sizeof运算符以字节为单位给出数据的大小,strlen()函数以字符为单位给出字符串的长度,字符和字节不是一回事. char类型用于存储字母和标点符号 ...

  6. Eclipse规范注释及注释文档的生成

    Eclipse作为JavaIDE(Integrated Development Environment,集成开发环境),可以通过设置自动添加Javadoc注释信息,如@author 作者名.@vers ...

  7. Web Api 2 接口API文档美化

    使用用第三方提供的swgger ui 帮助提高 web api 接口列表的阅读性,并且可以在页面中测试服务接口. 运行程序如下: 注意:在IE中必须输入红色部分. 并且可以对方法进行测试. 在开发we ...

  8. 使用Swagger实现webapi接口自动化文档生成

    这里是实现自动化api稳当的生成,在网上看了很多swagger的文档,可能都是在为实现接口时直接使用的swagger,其实步骤差不多,但是更加详细的我还没看到,又或者说,我看着文档来的时候还是出错啦, ...

  9. 使用swagger作为restful api的doc文档生成——从源码中去提取restful URL接口描述文档

    初衷 记得以前写接口,写完后会整理一份API接口文档,而文档的格式如果没有具体要求的话,最终展示的文档则完全决定于开发者的心情.也许多点,也许少点.甚至,接口总是需要适应新需求的,修改了,增加了,这份 ...

随机推荐

  1. springboot-拦截器redis注入空问题解决

    转自:https://blog.csdn.net/liuyang1835189/article/details/81056162 主要问题是在拦截器的配置类里面,配置的类,spring容器无法获取,所 ...

  2. Python之PyLint自动检查代码

    PyLint的下载地址:https://pypi.python.org/pypi/pylint PyLint的官网:http://www.pylint.org/ 从源码发行版安装,解压文件包并且运行 ...

  3. Acwing-196-质数距离(素数区间筛法)

    链接: https://www.acwing.com/problem/content/198/ 题意: 给定两个整数L和U,你需要在闭区间[L,U]内找到距离最接近的两个相邻质数C1和C2(即C2-C ...

  4. JAVA访问Zabbix API

    Zabbix 一.Zabbix 概述 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的 ...

  5. Codeforces 884E E. Binary Matrix

    题 OvO http://codeforces.com/contest/884/problem/E 884e 解 考虑并查集,每个点向上方和左方的点合并,答案即为1的总数减去需要合并的次数 由于只有1 ...

  6. Windows10启用或关闭Windows功能一直显示请稍候

    1.运行service.msc打开服务列表,找到Windows Modules Installer服务进行重启.如果重启失败,可以重启电脑后再次启动该服务. 2.此时运行controller打开控制面 ...

  7. 【Python之路】特别篇--Python装饰器

    前情提要 1. 作用域 在python中,函数会创建一个新的作用域.python开发者可能会说函数有自己的命名空间,差不多一个意思.这意味着在函数内部碰到一个变量的时候函数会优先在自己的命名空间里面去 ...

  8. vim(vi)下的三种模式及其相关命令

    vim(vi)下的三种模式1.命令行模式 2.末行模式 3.插入模式 三种模式的联系及其相互转换 在我们输入vi命令进入编写程序的页面后,我们看到的是命令行模式,在我们输入“a”.“i”.“o”.“O ...

  9. TCP层sendmsg系统调用的实现分析

    概述 sendmsg系统调用在tcp层的实现是tcp_sendmsg函数,该函数完成以下任务:从用户空间读取数据,拷贝到内核skb,将skb加入到发送队列的任务,调用发送函数:函数在执行过程中会锁定控 ...

  10. cin.clear()与cin.sync()的使用

    cin.clear()与cin.sync()使用是有先后顺序的. 他们的作用: cin.clear(); //将流中的所有状态都重设为有效值 cin.sync();//清空流 在输入错误的情况下,如果 ...