015-ant Design Pro advanced using API documentation tools

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.