swagger ui 排序问题-接上篇

---

title: swagger ui 排序问题-接上篇
date: 2019-03-19 22:56:44
tags:
- swagger-ui
- 排序问题

---

插一句话

别看到人家的文章就直接复制，自己没有好好研究，别瞎眼说误人子弟。

前言

我们已经将后端所需的Swagger已经按position排序，但是通过swagger-ui.html看的结果还是按path排序，那么肯定是在前端展示的时候，又做了排序。唯有修改swagger-ui源码来解决该问题～

下载swagger-ui前端源码

        
            io.springfox
            springfox-swagger-ui
            2.9.2
        

我们查看上述jar包的MANIFEST.MF文件的信息

Manifest-Version: 1.0
Implementation-Title: springfox-swagger-ui
Built-With: gradle-4.6, groovy-2.4.12
Implementation-Version: 2.9.2
SwaggerUi-Version: 3.17.1
Built-By: d_krishnan
Build-Time: 2018-06-23T17:02:09-0500
Created-By: 1.8.0_151 (Oracle Corporation)
Built-On: ISDV161716L.local/192.168.1.163

由此可见，此jar包中的swagger-ui是根据3.17.1版本构建的。我们来看看swagger-ui在github上的信息
https://github.com/swagger-api/swagger-ui
查看tag标签，找到3.17.1版本 https://github.com/swagger-api/swagger-ui/tree/v3.17.1
下载下来。

调试源码

源码的调试，涉及node环境的安装，此处不再叙述。只是简单展示相关的调试步骤。

安装依赖

使用vscode 打开文件夹 swagger-ui-3.17.1；在终端输入

npm install

配置获取swagger信息的url

我们可以在dev-helpers文件夹下的index.html配置

// Build a system
      const ui = SwaggerUIBundle({
        url: "http://localhost:8080/cms/v2/api-docs",
        dom_id: '#swagger-ui',
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
      })

在url中配置获取swagger的url即可。

出现Failed to load API definition.

Errors
Hide
Fetch errorFailed to fetch http://localhost:8080/cms/v2/api-docs
Fetch errorPossible cross-origin (CORS) issue? The URL origin (http://localhost:8080) does not match the page (http://localhost:3200). Check the server returns the correct 'Access-Control-Allow-*' headers.

看来是跨越的问题，我们增加其他方法来处理

package wowurenzidileme.swagger;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Primary;
import org.springframework.core.env.Environment;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import springfox.documentation.annotations.ApiIgnore;
import springfox.documentation.spring.web.DocumentationCache;
import springfox.documentation.spring.web.json.Json;
import springfox.documentation.spring.web.json.JsonSerializer;
import springfox.documentation.swagger2.mappers.ServiceModelToSwagger2Mapper;
import springfox.documentation.swagger2.web.Swagger2Controller;

import javax.servlet.http.HttpServletRequest;

import static org.springframework.util.MimeTypeUtils.APPLICATION_JSON_VALUE;

@CrossOrigin(origins = {"http://localhost:3200", "null"})
@Controller
@ApiIgnore
public class Swagger2ControllerCORS extends Swagger2Controller {

    public static final String DEFAULT_URL = "/v2/api-docs/CORS";

    @Autowired
    public Swagger2ControllerCORS(Environment environment,
                                  DocumentationCache documentationCache,
                                  ServiceModelToSwagger2Mapper mapper,
                                  JsonSerializer jsonSerializer) {
        super(environment, documentationCache, mapper, jsonSerializer);

    }

    @RequestMapping(
            value = DEFAULT_URL,
            method = RequestMethod.GET,
            produces = { APPLICATION_JSON_VALUE })
    @Override
    @ResponseBody
    public ResponseEntity getDocumentation(String swaggerGroup, HttpServletRequest servletRequest) {
        return super.getDocumentation(swaggerGroup, servletRequest);
    }
}

我们可以在
swagger-ui的前端源代码中，修改以下代码，则可以修改前端又自动排序的问题

// 文件：swagger-ui-3.17.1/src/core/plugins/spec/selectors.js 
export const taggedOperations = (state) => ({ getConfigs }) => {
  let { tagsSorter, operationsSorter } = getConfigs()
  return operationsWithTags(state)
    // .sortBy(
    //   (val, key) => key, // get the name of the tag to be passed to the sorter
    //   (tagA, tagB) => {
    //     let sortFn = (typeof tagsSorter === "function" ? tagsSorter : sorters.tagsSorter[ tagsSorter ])
    //     return (!sortFn ? null : sortFn(tagA, tagB))
    //   }
    // )
    .map((ops, tag) => {
      // let sortFn = (typeof operationsSorter === "function" ? operationsSorter : sorters.operationsSorter[ operationsSorter ])
      // let operations = (!sortFn ? ops : ops.sort(sortFn))
      let operations = ops

      return Map({ tagDetails: tagDetails(state, tag), operations: operations })
    })
}