The non-dependent code method of swagger environment construction _swagger-ui-edit

Objective

Swagger is a normative and complete framework for generating, describing, invoking, and visualizing RESTful-style Web services. The overall goal is to make the client and file system update at the same speed as the server. File methods, parameters, and models are tightly integrated into the server-side code, allowing the API to always remain synchronized. Swagger makes deployment management and use of powerful APIs never so simple. Well, the above is the official statement, I copied directly, in my opinion swagger is an interface document manager, previously we write interface is generally written in the world, but there is a problem is the test when the need to rely on Third-party tools, get interface Okay, direct browser open, Post can only rely on another tool, and swagger, you can directly through the annotations in the code to generate interface documents (Java EE), the General people in this way, and directly integrated in the project, convenient for members to view, while also able to test directly, the other swagger interface is also good, Perhaps this is the reason why I choose to use swagger, direct official said restful style that do not pipe, not restful style interface can also be used, of course, swagger also have a way is manual write interface, the advantage is that code only code, Because once the code added swagger interface annotation, the amount of code has increased a lot, of course, the disadvantage is that you have changed the code, but also to change the interface document, and this article mainly introduces the second way of the key points

Swagger-ui

Swagger-edit online edition

Swagger-edit Swagger-ui

In fact, the static HTML, JS, CSS files, from the GitHub down, open the Dist directory of the index.html, you can run up, but the default is Swwager Demo interface document, the following figure:
Swagger mainly through the JSON file to implement Interface document and interface description functions, so we enter a different JSON address in the input box, you can open a different interface document Swagger-editor online version

In fact, it is a Web page to edit the interface document, just said, Swagger-ui the interface is completely dependent on the content of the JSON, so we can use the Swagger-edit online version to customize the content of JSON, do not write their own JSON, Of course Swagger-edit online version is also through the Yaml markup language, but look at the demo, it will be easy to learn, written after we can download the JSON file to the local, for Swagger-ui use, but for some unknown reason, Swagger-edit online access speed that's called a slow, so generally we will download Swagger-edit to run locally swagger-editor

This and Swagger-edit online version is the same thing, but because the online version of the speed is too slow, so we need to run a local swagger-edit, so there is no network card issues such as the start of deployment download related files 1, download Swagger-ui

Swagger-ui, directly through git clone or download zip can be, using the core of things is downloaded down the Dist folder inside the things 2, download swagger-editor

This step is not necessary, if you do not want to use the default online version, you can perform this step, of course, currently in addition to the swagger default provides an online editor, there are third parties, such as SOSOAPI, all Chinese fool-like operation, fast

Download is recommended to download the latest version of the compiled package, in the Swagger-editor page has a description of the current version number and download address 3, download and install Nodejs

This step is not detailed, there are tutorials everywhere, and even if there is no tutorial, I believe it is easy for programmers to install a software, if you do not want to use this, you can skip, see Tomcat run Swagger-editor 4, install Http-server

Use Node.js to install the Http-server module, mainly through the Http-server module to enable the HTTP service, run Swagger-editor, by command

<code class= "Hljs lasso has-numbering" style= "Display:block"; padding:0px; Color:inherit; Box-sizing:border-box; font-family: ' Source Code Pro ', monospace;font-size:undefined; White-space:pre; border-radius:0px; Word-wrap:normal; background:transparent; " &GT;NPM install <span class= "Hljs-attribute" style= "Box-sizing:border-box"; >-g</span> http<span class= "Hljs-attribute" style= "Box-sizing:border-box;" >-server</span></code><ul class= "pre-numbering" style= "Box-sizing:border-box; Position:absolute; width:50px; top:0px; left:0px; margin:0px; padding:6px 0px 40px; border-right-width:1px; Border-right-style:solid; Border-right-color:rgb (221, 221, 221); List-style:none; Text-align:right; Background-color:rgb (238, 238, 238); ><li style= "Box-sizing:border-box; padding:0px 5px; " >1</li></ul><ul class= "pre-numbering" style= "Box-sizing:border-box; Position:absolute; width:50px; top:0px; left:0px; margin:0px; Padding:6px 0px 40px; border-right-width:1px; Border-right-style:solid; Border-right-color:rgb (221, 221, 221); List-style:none; Text-align:right; Background-color:rgb (238, 238, 238); ><li style= "Box-sizing:border-box; padding:0px 5px; " >1</li></ul>

However, for some reason, the domestic installation may be very slow, this time we can use the Taobao NPM image, to speed up the  
First run the command

<code class= "Hljs avrasm has-numbering" style= "Display:block"; padding:0px; Color:inherit; Box-sizing:border-box; font-family: ' Source Code Pro ', monospace;font-size:undefined; White-space:pre; border-radius:0px; Word-wrap:normal; background:transparent; " &GT;NPM install-g cnpm--registry=https://registry<span class= "hljs-preprocessor" style= "Color:rgb" (68, 68, 68); Box-sizing:border-box; " >.npm</span><span class= "Hljs-preprocessor" style= "Color:rgb" (68, 68, 68); Box-sizing:border-box; " >.taobao</span><span class= "Hljs-preprocessor" style= "Color:rgb" (68, 68, 68); Box-sizing:border-box; " >.org</span></code><ul class= "pre-numbering" style= "Box-sizing:border-box; Position:absolute; width:50px; top:0px; left:0px; margin:0px; padding:6px 0px 40px; border-right-width:1px; Border-right-style:solid; Border-right-color:rgb (221, 221, 221); List-style:none; Text-align:right; Background-color:rgb (238, 238, 238); ><li style= "Box-sizing:border-box; padding:0px 5px; " >1</li></ul><ul class= "pre-numbering" style= "Box-sizing:border-box; Position:absolute; width:50px; top:0px; left:0px; margin:0px; padding:6px 0px 40px; border-right-width:1px; Border-right-style:solid; Border-right-color:rgb (221, 221, 221); List-style:none; Text-align:right; Background-color:rgb (238, 238, 238); ><li style= "Box-sizing:border-box; padding:0px 5px; " >1</li></ul>

Then you may need to restart the CMD command tool to run

<code class= "Hljs lasso has-numbering" style= "Display:block"; padding:0px; Color:inherit; Box-sizing:border-box; font-family: ' Source Code Pro ', monospace;font-size:undefined; White-space:pre; border-radius:0px; Word-wrap:normal; background:transparent; " &GT;CNPM install <span class= "Hljs-attribute" style= "Box-sizing:border-box"; >-g</span> http<span class= "Hljs-attribute" style= "Box-sizing:border-box;" >-server</span></code><ul class= "pre-numbering" style= "Box-sizing:border-box; Position:absolute; width:50px; top:0px; left:0px; margin:0px; padding:6px 0px 40px; border-right-width:1px; Border-right-style:solid; Border-right-color:rgb (221, 221, 221); List-style:none; Text-align:right; Background-color:rgb (238, 238, 238); ><li style= "Box-sizing:border-box; padding:0px 5px; " >1</li></ul><ul class= "pre-numbering" style= "Box-sizing:border-box; Position:absolute; width:50px; top:0px; left:0px; margin:0px; Padding:6px 0px 40px; border-right-width:1px; Border-right-style:solid; Border-right-color:rgb (221, 221, 221); List-style:none; Text-align:right; Background-color:rgb (238, 238, 238); ><li style= "Box-sizing:border-box; padding:0px 5px; " >1</li></ul>

This will quickly install http-server, the same reason, if you need to install other modules, you can install through CNPM, and then through the cmd command to enter the Swagger-edit root directory, run the command

<code class= "Hljs lasso has-numbering" style= "Display:block"; padding:0px; Color:inherit; Box-sizing:border-box; font-family: ' Source Code Pro ', monospace;font-size:undefined; White-space:pre; border-radius:0px; Word-wrap:normal; background:transparent; " >http<span class= "Hljs-attribute" style= "Box-sizing:border-box;" >-server</span> <span class= "Hljs-attribute" style= "Box-sizing:border-box;" >-p</span> <span class= "Hljs-number" style= "Color:rgb (0, 102, 102); Box-sizing:border-box; " >8000</span> </code><ul class= "pre-numbering" style= "Box-sizing:border-box; Position:absolute; width:50px; top:0px; left:0px; margin:0px; padding:6px 0px 40px; border-right-width:1px; Border-right-style:solid; Border-right-color:rgb (221, 221, 221); List-style:none; Text-align:right; Background-color:rgb (238, 238, 238); ><li style= "Box-sizing:border-box; padding:0px 5px; " >1</li></ul><ul class= "Pre-numbering" StylE= "Box-sizing:border-box; Position:absolute; width:50px; top:0px; left:0px; margin:0px; padding:6px 0px 40px; border-right-width:1px; Border-right-style:solid; Border-right-color:rgb (221, 221, 221); List-style:none; Text-align:right; Background-color:rgb (238, 238, 238); ><li style= "Box-sizing:border-box; padding:0px 5px; " >1</li></ul>

-P function is to specify the port, the following 8000 is our designated port, access to localhost:8000 can enter the Swagger-edit can enter the editing interface, the left is the edit box, the right side is the preview interface, the following figure

Of course, this step is also not necessary, if you do not want to use through Http-server to run Swagger-editor, you can run Tomcat run through Tomcat Swagger-editor

First copy the Swagger-editor directory to the WebApps of the Tomcat root directory, then run Tomcat, Access Localhost:8080/swagger-editor 5, export JSON

Because the writing interface document is not the content of this document, so about writing here does not do more description, and mainly I think the writing is not what to say, directly with the default interface document to be able to see it, so go directly to the final step, after writing, export the JSON file

Click File->download json to download Swagger.json file 6, deploy Swagger-ui

First copy the JSON file to the Swagger-ui root directory, Modify the URL of the index.html reference JSON file, and then open index.html directly, and deploy to the server, but note that the URL of the JSON file referenced in index.html must be the correct conclusion

So far, the steps to deploy swagger have been completed, and if there is no clear or unclear place, you can message exchange