Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to use vue's swagger-ui, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this article on how to use swagger-ui in vue. Let's take a look at it.

Think-swagger-ui-vuele

There are many versions of swagger-ui, which I don't think is easy to use. With postman, each interface has to be entered by itself. Therefore, I parse the swagger format json based on think-vuele and implement a set of swaggerui interface.

Swagger is divided into back-end data provider and front-end page display requestor. From a certain point of view, swagger is a standard definition of data format. Implementing some annotated API in different languages can quickly generate this json string describing api information in restful format.

This project module depends on think-vuele

Mode of use

Download and compile by yourself

/ / download code git clone https://github.com/chfree/think-swagger-ui-vuele// installation depends on npm install// to run npm run dev// Packaging npm run build directly

Java project maven directly depends on

Com.tennetcn.free think-swagger-ui-starter 0.0.4

The open source project of this jar package is a subproject module in think-free-base

Landing

The login interface is divided into json mode and swagger request address access, there is not much difference, only get the standard swagger json data.

Two topics are supported, one is the theme of the back-end management system model. The other is similar, with 1024px in the middle and white space on both sides.

Home page

For a version of swagger I used, it takes a long time to wait when the number of interfaces is more than 1000 +, because he parses and renders all the interface data at once, which is the reason for the slow time.

So I optimize this to parse the api summary information first, and then render the request header and request body when I click on the summary; it can be done in an instant.

It can automatically populate the data of the non-json request body, using mock.Random.

The data of the json request body can be formatted and edited by json, which is also very convenient. Json online formatting editors use josdejong's jsoneditor.

The response data is directly formatted and displayed by json formatting components, and the deployment level is supported. You no longer have to format the returned data by looking for the relevant json formatting tool. The formatting control uses the vue-json-viewer of chenfengjw163.

Set up

When a backend api request is made, some token verification is usually included in the request header to identify the user. Therefore, a custom request header is set in the setting, which makes it easy to set the relevant request header, and the set request information is automatically included in any request.

Swagger information display

The relevant information from the backend swagger configuration is shown here

This is the end of the article on "how to use vue's swagger-ui". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use vue's swagger-ui". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.