015-ant Design Pro advanced using API documentation tools

I. Overview

Original address: HTTPS://PRO.ANT.DESIGN/DOCS/API-DOC-CN

In the daily development, often is separated from the front and back end, this time agreed to a set of interface standards, the front and back end of their own independent development, will not be the other side of the technical difficulties to block, so as to ensure project progress.

In Ant Design Pro we already have a sophisticated mock function, and the Roadhog-api-doc tool is able to read the interface information from the mock data of the project to generate the corresponding document, so that the interface of the project can be more clearly demonstrated.

The effect is as follows: Pro API Docs.

Second, detailed 2.1, how to use

NPM Install Roadhog-api-doc-g

2,1.1, Local Service

Go to the project root directory and run:

Roadhog-api-doc start [Port]

It is possible to run a document site on the current project, but only if it is a Roadhog-based project like Ant Design Pro and uses the data mock function because the source of the document's information is the mock file.

It is important to note that the above port parameter refers to the service currently being used by the local application, and if it is roadhog specified that the project interface can be accessed locally and directly, the network request will be statically made without specifying it.

2.1.2, static site generation

Project root directory, run:

Roadhog-api-doc Build

Three document site static files are generated:,,, api.html api.js api.css You can deploy them to your own site for online access, where the data has been statically (transforming network requests into code data).

2.1.3, writing documents

In general, you can generate documents without adding any additional dependencies, but if you need to make a description of the interface, you need to modify the file in the following format roadhog mock :

NPM install Roadhog-api-doc--save-dev # Roadhog-api-doc as a local tool dependent installation

Import {format} from ' Roadhog-api-doc '; Const Proxy = {  ' get/api/currentuser ': {    ' get current user interface ',    $params: {      PageSize: {        ' paging '        ,2,      },    },    $body: {      ' momo.zxy ',      avatar:imgMap.user,      ' 00000001 ',      n,    },  default format (proxy);

which

• $desc: Interface Description

• $params: Interface parameter Description, object describes the meaning of each parameter

• $body: Data returns results, usually mock data

　　

2.1.4, local test mock data and real port

When you start the local API Docs site, you can click the send button to send POST or GET request, and the return value will be displayed in the popup box:

　　

It is important to note that if you start the API Docs site, there is no port number, then the return data here is static data, if the port number is added and local also run the project, then the actual data will be returned directly.

If you want to directly access real data on the line, you need to rewrite the current project .roadhog.mock.js and redirect to the online path.

You can learn more by visiting Roadhog-api-doc GitHub.

015-ant Design Pro advanced using API documentation tools