当前位置: 首页 > Web前端 > JavaScript

优秀的前端开发经验,前后端联调,数据mock解决方案

时间:2023-03-26 22:45:49 JavaScript

前后端交互的桥梁:RESTfulAPI规范swagger功能:【文档自动生成】定义接口名称/路径/注释/分组标签/入口参数字段/类型/必填,可以通过查看原始数据接口swaggerschema【在线测试】在线发送http请求测试swaggerschema生成方法【swagger自动生成】根据swaggerapi-docs接口获取json数据【模板手动添加】在本地生成swaggerscheme模板,然后手动编辑原始数据,最后将其与后端数据进行比较。在线验证和可视化查看:https://editor.swagger.io/swaggerschema目的这些功能可以通过自定义cli实现,效率更高【接口代码生成】api.ts、api.d.ts文件(根据生成toswaggerschema),使用ts实现接口数据校验【接口数据mock】yapi生成mock数据(根据swaggerschema生成)【导入postman】可以使用postman更高级的功能:变量,测试自动化,导出,参数记忆和其他功能;与swaggerweb相比,更加高效易用;swaggercli功能开发>swaggerapiinit//生成swaggerSchema.json本地模板,方便编辑>swaggerapiapi.d.ts[swaggerurl]//根据swaggerurl地址生成api。d.ts和api.ts文件>jstapicreate-osrc/services/api.d.tsswaggerTemplate.json-r@/utils/request//根据swagger生成api.d.ts和api.ts文件url地址(支持自定义存储路径和api.ts中引入require库)生成swaggerSchema.json本地模板文件{"swagger":"2.0","info":{"description":"xxx接口管理","version":"1.0","title":"xxx服务器接口文档","contact":{},“许可证”:{“名称”:“麻省理工学院”,“网址”:“http://opensource.org/licenses/MIT”}},“主机”:“petstore.swagger.io”,“basePath”:“/","definitions":{"TmCallStartRequestDto":{"type":"object","properties":{"callid":{"type":"string","description":"description"},"listenerUid":{"type":"integer","format":"int64","description":"Description"}}},"TmResponseDto":{"type":"object","properties":{"代码":{"type":"string"},"data":{"type":"array","description":"CClist","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":["*/*"],“参数”:[{“在”:“正文”,“名称”:“callStartRequestDto”,“描述”:“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":"NotFound"}}}}}}生成的api.ts文件(可以在cli命令中添加参数,在代码头添加请求路径)//应用上传导出异步函数AppUploadUsingPOST(params:Paths.AppUploadUsingPOST.Parameters.ConversionTypeDTO):Promise{returnrequest('/baidu/app-upload',{method:'POST',data:params,})}生成的api.d.ts文件可以通过npm库dtsgenerator生成,也可以通过另外一层封装,封装到你的命令中