前端自动生成写好的后端接口调用代码（umi）

介绍

当我们开发项目中，后端的接口已经准备好，我们现在需要解决的问题是如何让前端调用后台接口，实现接口信息的增删改查管理。前端以UMI框架，通常，我们会在前端定义

TS类型对象，并手动编写调用后台的方法，例如获取当前登录用户、退出登陆等。写前瑞代码的同学们，你们是自己编写调用后台接口的代码还是利用了某种自动生成方法？相信一些同学已经尝试过使用自动生成方法。比方说我们正在使用的Ant Design Pro框架，它已经支持自动化生成这些接口。现在，向大家介绍一个叫做 openapil的插件 ，它可以帮助我们实现接口的自动生成。

如何使用

原理

接下来，我们来探讨如何实现接口的自动生成。如果后端已经定义了各种接口，我们如何自动生成相应的接口调用代码呢？ 我们需要一个文档或者介质来同步这些信息。这就是我们需要使用openapi规范的地方 。只要为oneapi插件提供基于其规范的文档，就可以实现接口的自动生成。

那么，什么是oneapi呢？简单地说，oneapi是一种接口文档的规范，可以理解为接口文档的格式或者规则。举个例子，我们常用的Swagger这种后端接口文档，就是遵循了openapi规范。

不了解Swagger的小伙伴可以浏览一下这篇文章

启动后端项目，访问http:/localhost:+后端项目端口号/+后端项目前缀+ /doc.html,查看接口文档的主页。

所以我们如果现在已经有了现成的后端，想要前端直接生成调用这些后端的代码，只要把这个基于这个openapi规范的文档提供给前端就可以了。

具体使用

复制你的接口文档地址http:/localhost:7529/api/N3/api-docs,回到前端，找到config.ts中的openAPI插件。

把多余的代码删掉。

修改内容。

打开package.json,找到openapi运行（或在终端输入yarn run openapi)。

提示成功生成service文件。

效果展示

在services目录多出一个yuapi-backend目录，里面自动生成调用后端指定接口的方法代码。

可以点击interfaceInfoController.ts查看，生成了后端接口方法全部的代码。

而且还生成了ts类型，比如选中InterfaceInfoAddRequest(新增接口信息)，然后按[Ctrl+鼠标左键]就可以看见它的请求参数类型：name名称、description描述、url接口地址、requestHeader请求头、responseHeader响应头、method请求类型。

这个和我们在后端写的InterfaceInfoAddRequest(创建请求)完全一致：