使用apidocJs快速生成在线文档

apidoc是一个轻量级的在线REST接口文档生成系统,支持多种主流语言,包括Java、C、C#、PHPJavaScript等。使用者仅需要按照要求书写相关注释,就可以生成可读性好、界面美观的在线接口文档。本文主要包含以下内容:

  1. 介绍apidoc的基本概念
  2. 安装、使用和简单配置
  3. 一些特殊参数的含义及其使用
  4. 介绍一些使用经验

前言

apidoc能做什么

apidoc是一个轻量级的在线REST接口文档生成系统,可以根据其特定的规则的代码注释来生成静态网页。首先看下它生成的文档界面和风格。

支持

apidoc支持多种主流的编码语言,包括Java、C、C#、phpjavascript。一般情况下,语言会有多种注释方法,例如就Java中有普通风格的多行注释和Javadoc风格的注释。apidoc并不支持所有的注释,譬如Java仅中支持Javadoc风格的注释。首先要说明的是,apidoc并不具备语义识别能力,它不会发现代码中是否有BUG,它仅仅通过文件后缀来判断语言类型。下面是一些不同语言注释示例:

* Java、Javascript、PHP *

/**
 * @api {get} /user/:id Request User information
 * @apiName GetUser
 * @apiGroup User
 *
 * @apiParam {Number} id Users unique ID.
 *
 * @apiSuccess {String} firstname Firstname of the User.
 * @apiSuccess {String} lastname  Lastname of the User.
 */

* Python *

"""
@api {get} /user/:id Request User information
@apiName GetUser
@apiGroup User

@apiParam {Number} id Users unique ID.

@apiSuccess {String} firstname Firstname of the User.
@apiSuccess {String} lastname  Lastname of the User.
"""

安装

apidoc是基于nodeJs平台,在安装apidoc之前,需要先安装nodeJs。关于nodeJs的安装,一搜一大把,不过为了文章的完整性,还是首先介绍一下Windows平台下nodeJs的安装。nodeJs安装

首先,去node.js官网上下载最新的安装包,请下载自己对应系统的安装包。譬如笔者的操作系统是64位Windows操作系统,就下载下图所示的node安装包。

下载完毕后,按照一般的软件安装步骤安装即可。由于笔者的计算机已经安装过了,在这里就不过细演示了。

按理来说,按照安装步骤安装完毕后,node环境也已经配置好了,现在来验证一下node是否已正确安装配置。

首先,打开Window Shell窗口。使用win+R快捷键打开运行窗口,在文本框中输入cmd并回车打开Windows Shell。

然后,在控制台输入node命令进入node控制台。

最后,运行一个Hello World程序。在node控制台中输入console.info("hello world");,如果输出如下图所示的结果,则表示node安装配置成功。

除了node之外,npm(node package manager,node安装包管理器)也是很重要的,可以通过它来便捷地下载和安装node应用。在Windows Shell中输入npm命令,如果出现如下图所示的信息,则表示npm也正确安装完毕。

apidoc安装

apidoc可以利用npm来快速安装。

1、进入Windows Shell,输入npm install apidoc -g进行apidoc的安装,如下图。

等待一定时间(根据自身的网速)的下载和安装之后,如果出现下图所示的信息,则表示apidoc安装成功。

2、在Windows Shell中输入apidoc -v命令,如果出现如下图所示的界面,则表示apidoc已安装成功。 

初步使用

下面通过一些简单的demo来介绍如何利用apidoc生成一份在线接口文档。

命令行

在正式开始之前,先介绍一下apidoc中的重要命令和参数。apidoc的命令格式如下:

apidoc 参数

一些重要的参数如下表所示:

参数 描述
-f 选择要解析的文件,支持正则表达式。-f参数可以使用多次,多个表达式可以对应不同的-f。如:apidoc -f ".*\.js$" -f ".*\\.ts$"
-i 选择源代码所在的位置。如:apidoc -i myapp/
-o 选择生成的目标文件所在的位置。如:apidoc -o apidoc/
-t 为生成文件选择模板,可以创建和使用自定义的模板。(笔者注:目前为止,笔者还没有使用过这个参数)
-h 跟绝大多数命令一样,这个参数可以打印出帮助文档
apidoc -i src/ -o apidoc/ # 可以通过搜索src目录中的文件快速的生成文档文件,并将这些文件放在apidoc目录下。
apidoc -h # 显示帮助信息

使用apidoc

一个典型的文件目录结果如下图所示。

其中:

  1. apidoc.json:apidoc的项目级配置文件,它必须位于整个工程目录顶层。
  2. Demo1.java:用于演示的demo源文件,它可以位于整个工程目录的顶层目录及其子目录下。apidoc会搜索整个工程目录选择所有可能的源文件。

apidoc.json和Demo1.java中包含的代码分别如下:

{
  "name": "demo",
  "version": "1.0.0",
  "description": "这是一个简单的apidoc的demo",
  "title": "demo",
  "url" : "https://api.github.com/v1"
}
/**
 * @api {get} /user/:id Request User information
 * @apiName GetUser
 * @apiGroup User
 *
 * @apiParam {Number} id Users unique ID.
 *
 * @apiSuccess {String} firstname Firstname of the User.
 * @apiSuccess {String} lastname  Lastname of the User.
 */

下面通过这个demo来介绍如何生成文档文件。

首先,在Windows Shell中进入apidoc工程目录的上层目录。例如笔者的apidoc的工程位于E:\workspaces\sublime\apidoc路径下。在这个目录中创建名为src的工程目录,将apidoc.json和Demo1.java文件置于src目录下。

然后,在Windows Shell中输入apidoc -i src/ -o apidoc/命令,如果出现如下图所示的Done结果,则表明文档已经生成,位于同级目录的apidoc(与-o apidoc对应)目录下。

最后,打开apidoc目录,可以看到如下图所示的静态Web文件。双击index.html就可以在浏览器中打开生成在线接口文档网站。 
 

这样我们就成功地生成了一份在线接口文档了,接下来就只要部署到任意Web容器(Apache、Tomcat等)就可以将接口文档对外发布了,So easy!

配置

apidoc.json文件是项目级的配置文件,接下来简单地介绍一下其中常用的配置项。

配置名 描述
name 工程名。如果该字段不存在,则apidoc会尝试通过package.json(apidoc顶层配置文件)来生成
version 工程文档的版本号。如果该字段不存在,则apidoc会尝试通过package.json(apidoc顶层配置文件)来生成
description 工程详细描述。如果该字段不存在,则apidoc会尝试通过package.json(apidoc顶层配置文件)来生成
title 文档标题,显示在文档界面的最上方
url 整个api url的前缀,接下来的所有接口url都会加上这个前缀
sampleUrl api示例的url前缀。如果设置了这个值,则界面中显示请求表单,可以用于测试接口
header  
title 文档头(header)的连接锚点名
filename 文档头所使用的文件
footer  
title 文档尾(footer)的连接锚点名
filename 文档尾所使用的文件
order 接口的排列顺序list,如果不指定,则由apidoc自行确定

一个比较完整的配置文件如下:

{
    "name": "demo",
    "version": "1.0.0",
    "description": "这是一个简单的apidoc的demo",
    "title": "demo",
    "url": "https://api.github.com/v1",
    "sampleUrl": "https://api.github.com/v1/test",
    "header": {
        "title": "header",
        "filename": "header.md"
    },
    "footer": {
        "title": "footer",
        "filename": "footer.md"
    },
    "order": [
        "Error",
        "Define",
        "PostTitleAndError",
        "PostError"
    ]
}

更多的配置项请参考apidoc官方文档站点

Params

apidoc中最核心的东西就是参数(params)的书写,本节介绍apidoc中一些重要的params。

@api

@api定义一个特定的接口。如果一个注释块既不包含@apiDefine又没有包含@api参数,则apidoc会直接忽略这个注释块。这个参数在界面上表示一个接口区域块如下:

@api的书写格式为:

@api {method} path [title]

注意,[xxx]表示一个可选的参数,下同。

下表介绍了@api中的参数含义。

参数 描述
method 请求的HTTP方法名,包括DELETEGET, POSTPUT,更多方法详见http-learn-url
path 请求的url path(不包括前缀)
title 接口名,用于接口索引。这个配置项会显示在导航菜单中。

更多的配置项请参考apidoc官方文档站点

@apiDefine

@apiDefine表示定义一个变量,该变量可以指代任意值(字符串、参数块),这个参数并且写在独立的代码块中。可以使用@apiUse来使用其定义的变量。

@apiDefine的书写格式为:

@apiDefine name [title] [description]

下表介绍了@apiDefine中的参数含义。

参数 描述
name 值或者块的名字,可以看做就是变量名
title 标题,一般用于@apiParam (name)参数,显示请求参数所在组的名称
description 该变量的描述。

下面的代码定义一个错误块,然后在接口定义中引用使用这个错误块。多个不同接口可以引用同样的@apiDefine块,这也变成语言的变量功能一直。可以消除重复代码。

/**
 * @apiDefine MyError
 * @apiError UserNotFound The <code>id</code> of the User was not found.
 */

/**
 * @api {get} /user/:id
 * @apiUse MyError
 */

@apiDescription

用于@api代码块中,用于详尽地描述接口的功能。

@apiDescription的书写格式为:

@apiDescription text

text就是具体的描述内容,可以直接使用Markdown语法,这极大地丰富了其表现形式。

@apiGroup

表示接口所属的组,最直接的体现就是在侧边导航中将接口分在对用的组中。

@apiGroup的书写格式为:

@apiGroup name

name表示组名,可以是任意字符串。值得注意的是,name不支持中文,一旦输入中文,apidoc就会忽略这些中文字符。如果需要在界面中显示中文接口组名,只需要使用@apiDefine定义一个中文字符串,然后name用变量名替换即可。

/**
 * @apiDefine group 测试
 */

/**
 * @api {get} /user/:id Request User information
 * @apiName GetUser
 * @apiGroup group
 */

@apiName

表示接口的名字,应该在每个@api块中使用。可以生成一个Web锚点,快速定位接口位置。可以看到锚点(url的#后面的字符串)通常由groupName-apiName构成。

@apiName的书写格式为:

@apiName name

@apiUse

表示引用一个@apiDefine定义的值或块,相当于直接替换变量的值。

@apiUse的书写格式为:

@apiUse name 

name是一个已定义的@apiDefine中的name,如果输入的name不存在,则会抛出类似下面的异常信息。

{ File: ‘src\\Demo1.java‘,
  Block: 4,
  Element: ‘@apiUse‘,
  Groupname: ‘test‘,
  Definition: ‘@apiUse group‘,
  Example: ‘@apiDefine MyValidGroup Some title\[email protected] MyValidGroup‘ }

下面是一个示例:

/**
 * @apiDefine test
 * @apiParam {Number} id Users unique ID.
 */

/**
 * @apiUse test
 * @apiParam {Number} name name.
 */

@apiParam

表示一个请求参数。

@apiParam的书写格式为:

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

下表介绍了@apiParam中的参数含义。

参数 描述
(group) 参数所在的组,可以使用@apiDefine定义的值
{type} 参数的类型。例如 {Boolean}, {Number}, {String}, {Object}, {String[]} (array of strings), ..
field 请求参数名。
[field] 表示这个参数是个可选参数,非必传参数。
=defaultValue 表示这个参数的默认值。
description 这个请求参数的描述,支持Markdown语法。

下面是一个简单的示例:

/**
 * @api {get} /user/:id
 * @apiParam {Number} id Users unique ID.
 */

/**
 * @api {post} /user/
 * @apiParam {String} [firstname]  用户名(非必填).
 * @apiParam {String} lastname     用户姓(必填).
 */

@apiSuccess

表示请求成功时的一个返回字段。

@apiSuccess的书写格式为:

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

@apiSuccess的参数含义与@apiParam一致,这里就不再做说明了。

@apiError

表示请求失败时的一个返回字段。

@apiError的书写格式为:

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

与apiSuccess的参数含义完全一致。

@apiParamExample

表示一个请求范例。

@apiParamExample的书写格式为:

@apiParamExample [{type}] [title] example
参数 描述
{type} 表示请求数据的格式
title 显示在界面上的示例标题
example 示例实体

下面是一个简单的示例:

/**
 * @api {get} /user/:id
 * @apiParamExample {json} Request-Example:
 *     {
 *       "id": 4711
 *     }
 */

@apiSuccessExample

表示一个响应范例。其书写格式和参数含义与@apiParamExample完全一样。

@apiSampleRequest

表示一个接口测试块,可以根据定义的请求参数来生成一个表单,用来进行接口测试。

@apiSampleRequest的书写格式为:

@apiSampleRequest url

url可以与配置文件(apidoc.json)中的sampleUrl以及@api定义的path连接成一个完整的测试url。例如:

/**
 * @api {get} /user/:id
 * @apiParam {Number} id Users unique ID.
 * @apiSampleRequest /test
 */

生成的界面截图如下:

一些实际经验

下面介绍一下在实际使用过程发现的东西。

绝大部分地方可使用Markdown语法

在几乎所有的描述类字段处都可以使用符合Markdown语法的文本,可以使得文档形式更加美观。

/**
 * @api {get} /user/:id
 * @apiParam {String} rule
 *
 * - 规则1:不能使用小数
 * - 规则2:不能相加
 */

对象类型的参数

如果请求的参数是一个对象,那此时因为如果书写呢?比如需要Post一个Person对象,Person中包括name、age字段,那么可以这样书写。

/**
 * @api {post} /user
 * @apiName obj
 * @apiParam {Object} person
 * @apiParam {String} person.name  姓名
 * @apiParam {Integer} person.age 年龄
 */

从下图中可以看到name和age字段的前面有些缩进,而且字段显示名为name和age。

本想自己写这么一篇文章,发现有个博主写的很不错,就直接转载过来:

http://blog.csdn.net/xialei199023/article/details/63251482

apidoc 官网:http://apidocjs.com/

原文地址:https://www.cnblogs.com/jiangxiaobo/p/8425245.html

时间: 2024-08-25 20:19:29

使用apidocJs快速生成在线文档的相关文章

利用ApiPost一键、快速生成接口文档!女猿也过38节!

对于我们这些程序员和程序媛来讲,最头疼的莫过于写文档. 我们可都是正个八经的理工校草和理工女神,研究github.逛逛csdn.写hello world是才我们的拿手菜,写文档是文科生的事情好不啦?(手动吐哇吐) 今天,教大家一个妙招:利用ApiPost一键.快速生成接口文档! 妈妈再也不用担心自己女孩纸们没有时间过38节啦! 当女程序媛遇到问题,那就不是问题 ApiPost简介: ApiPost是一个支持团队协作,并可直接生成文档的API调试.管理工具.它支持模拟POST.GET.PUT等常见

如何开发一个java开源框架-----Jvn框架之实现自动生成在线文档(第七讲)

一 . 前言:博主正在教大家如何开发一个javaEE框架,我把框架命名为Jvn,博客里有完整的开发视频,每一篇博文都是一个知识点: 关于框架的介绍和学习,可以从我博客第一讲开始看起,博客首页:http://www.cnblogs.com/everxs/ 本次内容视频以及源码下载地址:http://pan.baidu.com/s/1o6MJnFc 二. 本次博客讲的内容 场景:现在是APP时代,APP很热门,而且跟后台交互跑的都是HTTP协议,所以讲到这里,对于这里面的交互. 安卓工程师(客户端)

(转)WebApi自动生成在线文档Swashbuckle

原文地址:http://www.cnblogs.com/Arrays/p/5146194.html?utm_source=tuicool&utm_medium=referral 1.前言 1.1 SwaggerUI SwaggerUI 是一个简单的Restful API 测试和文档工具.简单.漂亮.易用(官方demo).通过读取JSON 配置显示API. 项目本身仅仅也只依赖一些 html,css.js静态文件. 你可以几乎放在任何Web容器上使用. 1.2 Swashbuckle Swashb

Spring Boot集成smart-doc生成api文档

smart-doc是一个java restful api文档生成工具,smart-doc颠覆了传统类似swagger这种大量采用注解侵入来生成文档的实现方法.smart-doc完全基于接口源码分析来生成接口文档,完全做到零注解侵入,你只需要按照java标准注释的写,smart-doc就能帮你生成一个简易明了的markdown或是一个像GitBook样式的静态html文档.下面将介绍如何在Spring Boot项目中集成smart-doc生成一个简明的api文档. 注意: smart-doc已经被

使用phpdoc/phpDocumentor来生成api文档

phpDocumentor是一个非常强大的文档自动生成工具,利用它可以帮助我们编写规范的注释,生成易于理解,结构清晰的文档, 对我们的代码升级,维护,移交等都有非常大的帮助. 网上关于phpdoc的文档的介绍虽然不少,但是有点麻烦: 1.网上通常介绍的内容太多,不容易被新手看懂.个人觉得,教程应该本着简单易懂,在能解决问题的前提下,能有多简单就多简单. 更多的内容,应该以附录的形式,或者留下其他更详细的资料链接供读者去阅读(而不是把一大块都复制进自己的文章) 2.phpdoc的安装稍微麻烦.他们

C#WebApi中swagger在线文档输出参数和输入参数显示注释

最近开发webapi 时需要生成在线文档,发现文档里面没注释,在网上查找资料都不齐全,或者看起来很难看懂. 花了点时间搞出来了这个,很多都是借鉴网上资料整理的,通俗易懂小白专用. 最终效果如上图所示 1.定义一个SwaggerControllerDescProvider实现ISwaggerProvider接口 using Swashbuckle.Swagger; using System; using System.Collections.Concurrent; using System.Col

快速根据注释生成接口文档网页工具——Apidoc的使用教程

1,安装Node.js的npm工具环境: 如有不懂,请看我的博客:"https://blog.csdn.net/sinat_28371057/article/details/81612661" 2,npm环境搭好后,控制台运行命令: npm install apidoc -g 安装完成后显示如下界面: 2,在接口程序文件中添加apidoc文档注释 /** * @apiDefine userApiStr 用户接口文档 */ /** * @api {POST} /login 用户登录 *

Spring Boot:整合Swagger在线文档

综合概述 spring-boot作为当前最为流行的Java web开发脚手架,越来越多的开发者选择用其来构建企业级的RESTFul API接口.这些接口不但会服务于传统的web端(b/s),也会服务于移动端.在实际开发过程中,这些接口还要提供给开发测试进行相关的白盒测试,那么势必存在如何在多人协作中共享和及时更新API开发接口文档的问题. 假如你已经对传统的wiki文档共享方式所带来的弊端深恶痛绝,那么尝试一下Swagger2 方式,一定会让你有不一样的开发体验. 使用 Swagger 集成文档

转:Swagger2自动生成接口文档和Mock模拟数据

转自:https://www.cnblogs.com/vipstone/p/9841716.html 一.简介 在当下这个前后端分离的技术趋势下,前端工程师过度依赖后端工程师的接口和数据,给开发带来了两大问题: 问题一.后端接口查看难:要怎么调用?参数怎么传递?有几个参数?参数都代表什么含义? 问题二.返回数据操作难:数据返回不对或者不够怎么办?怎么才能灵活的操作数据? 这是很多公司前后端分离之后带来的困扰,那怎么来解决这些问题? 问题一的一般解决方案:后端团队共同维护一个在线文档,每次改接口再