乐趣区

关于mock:绝佳的前端开发体验前后端联调数据mock方案

前后端交互的桥梁:RESTful API 标准

swagger 性能:

  • 【主动文档生成】定义 接口名称 / 门路 / 正文 / 分组标签 / 出入参字段 / 类型 / 是否必填,可通过接口 swagger schema 查看原始数据
  • 【在线测试】在线发送 http 申请进行测试

swagger schema 生成路径

  • 【swagger 主动生成】依据 swagger api-docs 接口获取 json 数据
  • 【模板手动增加】本地生成 swagger scheme 模板,再手动编辑这块原始数据,最初和后端对这份数据即可。在线验证及可视化查看:https://editor.swagger.io/

swagger schema 用处

这些性能可通过自定义 cli 实现,更加高效

  • 【接口代码生成】api.ts, api.d.ts 文件(依据 swagger schema 生成), 应用 ts 可实现接口数据校验
  • 【接口数据 mock】yapi 生成 mock 数据(依据 swagger schema 生成)
  • 【导入 postman】能够应用更多 postman 高级的性能:变量,测试自动化,导出,参数记忆等性能;相比 swagger web 更高效、易用;

swagger cli 性能开发

> swagger api init // 生成 swaggerSchema.json 本地模板,不便编辑
> swagger api api.d.ts [swagger url]  // 依据 swagger url 地址生成 api.d.ts 和 api.ts 文件 
> jst api create -o src/services/api.d.ts swaggerTemplate.json -r @/utils/request   // 依据 swagger url 地址生成 api.d.ts 和 api.ts 文件(反对自定义存储门路和 api.ts 中 require 库的引入)

生成的 swaggerSchema.json 本地模板文件

{
    "swagger": "2.0",
    "info": {
        "description": "xxx 接口治理",
        "version": "1.0",
        "title": "xxx 服务端接口文档",
        "contact": {},
        "license": {
            "name": "MIT",
            "url": "http://opensource.org/licenses/MIT"
        }
    },
    "host": "petstore.swagger.io",
    "basePath": "/",
    "definitions": {
        "TmCallStartRequestDto": {
            "type": "object",
            "properties": {
                "callid": {
                    "type": "string",
                    "description": "形容信息"
                },
                "listenerUid": {
                    "type": "integer",
                    "format": "int64",
                    "description": "形容信息"
                }
            }
        },
        "TmResponseDto": {
            "type": "object",
            "properties": {
                "code": {"type": "string"},
                "data": {
                    "type": "array",
                    "description": "抄送列表",
                    "items": {"type": "string"}
                },
                "errMsg": {"type": "string"},
                "msg": {"type": "string"}
            }
        }
    },
    "tags": [
        {
            "name": "tel-call-hook-api",
            "description": "通话"
        }
    ],
    "paths": {
        "/call/tm/directcall/callbackstart": {
            "post": {
                "tags": ["tel-call-hook-api"],
                "summary": "tmAxbSuccess",
                "description": "接口形容",
                "operationId": "tmAxbSuccessUsingPOST",
                "consumes": ["application/json"],
                "produces": ["*/*"],
                "parameters": [
                    {
                        "in": "body",
                        "name": "callStartRequestDto",
                        "description": "callStartRequestDto",
                        "required": true,
                        "schema": {"$ref": "#/definitions/TmCallStartRequestDto"}
                    }
                ],
                "responses": {
                    "200": {
                        "description": "OK",
                        "schema": {"$ref": "#/definitions/TmResponseDto"}
                    },
                    "201": {"description": "Created"},
                    "401": {"description": "Unauthorized"},
                    "403": {"description": "Forbidden"},
                    "404": {"description": "Not Found"}
                }
            }
        }
    }
}

生成的 api.ts 文件(可在 cli 命令中,增加参数,在代码头部增加 request 门路)

// appUpload
 export async function AppUploadUsingPOST(params: Paths.AppUploadUsingPOST.Parameters.ConversionTypeDTO):Promise<Paths.AppUploadUsingPOST.Responses.$200> {
    return request('/baidu/app-upload', {
        method: 'POST',
        data: params,
    })
}

生成的 api.d.ts 文件,可通过 npm 库 dtsgenerator 生成,也能够对它再封装一层,封装进你的命令中

退出移动版