Use the Swagger-UI open source component (a deep-seated solution) in Web APIs, and use the API

Use the Swagger-UI open source component (a deep-seated solution) in Web APIs, and use the API
Introduction:

Swagger-Ui is a great help page for Web API instructions. For details, Google and Baidu.

Official Website: http://swagger.io/GitHub address: https://github.com/swagger-api/swagger-ui

 

Usage:

Swagger-Ui is a project developed in pure front-end languages. All powerful functions are implemented by JS. In order to be able to be used in. Net Web API projects, we useSwashbuckle. The configuration method is as follows:

1. Install Swashbuckle in Nuget. It depends on Swashbuckle. Core. After the installation is complete, the SwaggerConfig. cs file will be added to your App_Start directory.

2. Right-click your Web API project, select properties, and click Generate. Select the XML document file. Select the output path above. This is my configuration method developed by domaindrivendev.Swashbuckle.This is also open-source (Shenkeng), Let's go down the source code, compile it, modify it, And I will jump to the pitfall.

 

I didn't talk much about it. At that time, the source code was down and I couldn't understand it. No matter what it was, I replaced Nuget's Swashbuckle. core reference, and then run it. A pile of JS and CSS files are missing. However, no missing files are found in the source code. It takes a long time to find the missing files. I guess it was obtained through the network, but it was debugged in Chorme and found that it was all local files. Finally all kinds of fruitless.

 

I had to decompile the packages under Nuget and pull out the. NET programmer's ILSpy. It is found that all the missing files in the dll file are in the resource,However, the results showed that I could not add those files in a certain path and format in the way of decompilation !!! If you don't believe it, you can try it and see how and path the added resource file is.

 

After N methods are tried, there is still no result. I had to ask for help. Finally, under the guidance of iFish, I found this ....

Okay, the problem is solved here.

In the project's csproj file, the author configures resource file import. However, when publishing the code, I forgot to add the Swagger-Ui code, and I still used this method to import the resource file. It's really powerless. But I learned something new ).

A slight modification was made to integrate Swagger-Ui into Swashbuckle. Core. The minor modification is as follows:

1 <!-- Automatically embed swagger-ui files. Construct name so resource can be retrieved by swagger-ui relative path -->2   <ItemGroup>3     <EmbeddedResource Include="swagger-ui\dist\**\*.*">4       <LogicalName>%(RecursiveDir)%(FileName)%(Extension)</LogicalName>5       <InProject>false</InProject>6     </EmbeddedResource>7   </ItemGroup>

Solve the problem! The rest is the front-end work. You can customize it yourself. For example, if you are using the Chinese Language Pack, refer to the following two JS files:

<! -- Chinese Translation --> <script src = 'lang/translator-js' type = 'text/javascript '> </script> <script src = 'lang/zh-cn-js 'Type = 'text/javascript '> </script>

 

 

Swagger project home: https://github.com/swagger-api/swagger-ui

Swashbuckle project home: https://github.com/domaindrivendev/Swashbuckle


These three are some domestic research shared article: https://github.com/helei112g/swagger-ui

Http://www.cnblogs.com/Flyear/p/4870373.html

Http://www.cnblogs.com/yxlblogs/p/4075932.html