在之前的文档中，我们了解到前端开发人员可以使用 http://webapi 地址/Miragedoc 来浏览微服务接口文档。虽然这个文档允许他们快速了解如何请求微服务接口，但是他们仍然需要自己封装调用接口的方法。这与之前我们使用 Swagger 来向前端公开文档并没有太大的区别。

其实，前端可以自定义一个脚本来自动生成调用服务的代码。下面我们将演示如何自定义这个脚本。

注意
网关和WebApi版本应 >= 3.3.0

添加自定义按钮

然后，点击【添加前端代码生成按钮】

输入按钮名称，按回车继续

然后点击【编辑脚本】

脚本编辑

脚本是用 vue2.0 的规范去编写的，下面我给出一个简单的例子：

常用字符转义（cUTF8 编码值）：
< = c60
= c62
{ = c123
} = c125
: = c58
@ = c64
v = c118

export class {{ name }} {

<template v-for="item in items">
    /* {{ item.desc }} */
    static async {{ item.title }}( <template v-for="param,index in item.parameters">{{ param.name }} {{(index<(item.parameters.length - 1)?",":"")}}</template> ) : Promise<{{ item.returnData.type }}>
    {
    //...
    }
</template>

}

<template v-for="dataType in dataTypeInfos.filter(m=>m.isEnum == false)">
export class {{ dataType.typeName }} {
    <template v-for="member,index in dataType.members">
    /* {{ member.desc }} */
    {{ member.name }}?:{{ member.type }}{{(index<(dataType.members.length - 1)?",":"")}}
    </template>
}
</template>

<template v-for="dataType in dataTypeInfos.filter(m=>m.isEnum)">
export enum {{ dataType.typeName }} {
    <template v-for="member,index in dataType.members">
    /* {{ member.desc }} */
    {{ member.type }}={{ member.name }}{{(index<(dataType.members.length - 1)?",":"")}}
    </template>
}
</template>

现在我们访问 http://webapi地址/Miragedoc ，会看到多出来一个按钮

点击该按钮，即可看到生成了以下代码：

export class DemoService {


    /*  */
    static async ListMongo(  ) : Promise<DemoService_UserInfo[]>
    {
    //...
    }

    /* 登录 */
    static async Login( name ,password  ) : Promise<string>
    {
    //...
    }

    /*  */
    static async Test( name  ) : Promise<string>
    {
    //...
    }

    /*  */
    static async TestMongo( name  ) : Promise<string>
    {
    //...
    }

    /* 测试姓名 */
    static async TestName( name ,age  ) : Promise<void>
    {
    //...
    }


}


export class DemoService_UserInfo {
    
    /*  */
    Id?:any,
    
    /*  */
    Name?:string,
    
    /*  */
    CreateTime?:any,
    
    /*  */
    Type?:#Mirage.MicroServiceHost1.Models.TestType
    
}
 
export enum DemoService_TestType {
    
    /* 没有 */
    None=1,
    
    /* 正常 */
    Normal=2
    
}

Vue的 data 结构

由于脚本是使用vue语法，下面给出vue的data变量样例，供大家编写脚本。

{
  "name": "DemoService",
  "desc": "我的Demo服务",
  "items": [
    {
      "title": "Login",
      "desc": "登录",
      "url": "/DemoService/Login",
      "isWebSocket": false,
      "parameters": [
        {
          "name": "name",
          "desc": "用户名",
          "type": "string",
          "isNullable": false
        },
        {
          "name": "password",
          "desc": "密码",
          "type": "string",
          "isNullable": false
        }
      ],
      "returnData": {
        "type": "string",
        "desc": "身份令牌"
      }
    },
    {
      "isComment": false,
      "title": "TestName",
      "method": "POST",
      "desc": "测试姓名",
      "url": "/DemoService/TestName",
      "opened": false,
      "isWebSocket": false,
      "parameters": [
        {
          "name": "name",
          "desc": "姓名",
          "type": "string",
          "isNullable": false
        },
        {
          "name": "age",
          "desc": "年龄",
          "type": "number",
          "isNullable": false
        }
      ],
      "returnData": { "type": "void" }
    }
  ],
  "dataTypeInfos": [
    {
      "typeName": "DemoService_UserInfo",
      "isEnum": false,
      "members": [
        {
          "name": "Id",
          "type": "any",
          "isNullable": false
        },
        {
          "name": "Name",
          "type": "string",
          "isNullable": false
        },
        {
          "name": "CreateTime",
          "type": "any",
          "isNullable": false
        },
        {
          "name": "Type",
          "type": "#Mirage.MicroServiceHost1.Models.TestType",
          "isNullable": false
        }
      ]
    },
    {
      "typeName": "DemoService_TestType",
      "isEnum": true,
      "members": [
        {
          "name": "1",
          "desc": "没有",
          "type": "None",
          "isNullable": false
        },
        {
          "name": "2",
          "desc": "正常",
          "type": "Normal",
          "isNullable": false
        }
      ]
    }
  ]
}

自定义 Vue 的 methods

如果您需要自定义 Vue 的 methods，可以点击【编写Vue内部方法】