# # 基于源码来改造得到Front版本

## # 源码结构说明

在上一篇中,我们介绍了`knife4j`的本地运行方式以及`knife4j`的整个运行解析过程

本篇主要将怎么通过改造`knife4j`的源码来得到Front版本

从上一篇的执行解析图中,我们可以知道,`/src/layouts/BasicLayout.vue`文件是整个软件的主入口

在该文件中的`create()`方法中主要存在两个方法：

- `this.initKnife4jSpringUi()`:该方法主要是结合Springfox的组件打包构建来使用的,Java技术体系者需要使用该方法调用
- `this.initKnife4jFront()`:非Java体系使用,仅仅传入不同的参数来构造属于自己特定的版本

java技术栈的本文不再阐述,本文主要讲解如何使用非java技术体系的结构来运行调通`knife4j`

现在来看`initKnife4jFront()`方法：

    initKnife4jFront(){
      var that = this;
      //初始化swagger文档
      var url = this.$route.path;
      var plusFlag = false;
      if (url == "/plus") {
        //开启增强
        plusFlag = true;
      }
      this.swagger = new SwaggerBootstrapUi({
        Vue: that,
        plus: plusFlag,
        //禁用config的url调用
        configSupport: false,
        //覆盖url地址,多个服务的组合
        url: "services.json"
      });
      try {
        this.swagger.main();
      } catch (e) {
        console.error(e);
      }
    }

该方法很简单,初始化一个`SwaggerBootstrapUi`的对象,然后调用其`main()`方法

`SwaggerBootstrapUi`是`Knife4j`封装的核心JS对象,位于文件`/src/core/Knife4j.js`中,定义如下图：

option核心参数的意义说明如下：

参数 | 说明
--- | ---
Vue | 当前Vue实例化对象,传入该对象主要是在请求得到Swagger的操作后,初始化整个服务分组下拉框以及菜单
plus | 是否启用增强的操作,关于前端增强启用的方法请移步
configSupport | 该参数传入布尔值,代表是否需要调用Swagger的配置接口,获取后端的配置信息,我们在Front版本该参数应该传入false,即不需要个性化的配置
configUrl | 个性化配置的方法地址,如果启用个性化配置,则需要传入该地址
url | 该地址是服务分组的接口地址,即我们在Swagger界面见到的下拉框数据

针对`configUrl`以及`url`所返回的JSON数据结构实例如下：

个性化配置接口`configUrl` 返回的JSON:

    {
        "deepLinking": true,
        "displayOperationId": false,
        "defaultModelsExpandDepth": 1,
        "defaultModelExpandDepth": 1,
        "defaultModelRendering": "example",
        "displayRequestDuration": false,
        "docExpansion": "none",
        "filter": false,
        "operationsSorter": "alpha",
        "showExtensions": false,
        "tagsSorter": "alpha",
        "validatorUrl": "",
        "apisSorter": "alpha",
        "jsonEditor": false,
        "showRequestHeaders": false,
        "supportedSubmitMethods": [ "get","put","post","delete","options","head","patch","trace"]
    }

`knife4j`目前只对属性`supportedSubmitMethods`做了支持,即对不支持的HTTP类型不显示调试栏进行调试,仅显示文档页,效果如下图：

所以如果你在构造front版本的时候,仅仅只是希望别人查看文档,而不希望调试文档,则则可以构建一个config的静态JSON,将`supportedSubmitMethods`属性返回一个空数组即可

接下来是服务分组接口url返回的JSON结构,如下：

    [
        {
            "name": "2.X版本",
            "url": "/v2/api-docs?group=2.X版本",
            "swaggerVersion": "2.0",
            "location": "/v2/api-docs?group=2.X版本"
        }
    ]

属性 | 说明
--- | ---
name | 服务名称,下拉框的label可见部分
url | 同location
swaggerVersion | OPen API 版本,默认V2
location | 服务的Swagger实例地址

## # 构造front版本

既然我们已经知道了上面option的地址,接下来我们即可改造`initKnife4jFront()`方法来进行

方法如下：

    this.swagger = new SwaggerBootstrapUi({
        Vue: that,
        plus: plusFlag,
        //禁用config的url调用
        configSupport: false,
        //覆盖url地址,多个服务的组合
        url: "/static/services.json"
    });

我们将configSupport属性改为false,即不需要个性化配置,然后传入一个静态的JSON文件名称,该url在访问的时候是访问根目录下的static目录下的json文件

改造完成后,在该Vue的`create()`方法中进行调用,如下：

    created() {
        //this.initKnife4jSpringUi();
        this.initKnife4jFront();
    }

代码在这里就已经改造完成,接下来执行打包命令,构建我们的front版本

    yarn build

以上命令会在dist目录生成编译好的文件,文件结构如下：

接下来如何运行呢?，你需要参考：

- 基于IIS使用knife4j
- 基于Nginx方式使用

被围观 人次