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

59次阅读

共计 2347 个字符，预计需要花费 6 分钟才能阅读完成。

swagger 性能：

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

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

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

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

> 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 生成，也能够对它再封装一层，封装进你的命令中

正文完