【Ant Design Pro】使用ant design pro做为你的开发模板(六)OpenAPI,快速管理你的请求接口

简介: 【Ant Design Pro】使用ant design pro做为你的开发模板(六)OpenAPI,快速管理你的请求接口

前言


在之前的处理中,我们的项目 模板到目前为止已经基本具备了大多数功能,并且较为清晰,从本章开始,我们就要着重于实际开发,来解决伙伴们在日常开发中碰到的坑以及麻烦的事情,最大程度上的提高开发效率与开发规范。本章我们就来说一下前后端分离后,前端如何定义请求开发接口。


什么是请求接口


在项目中,前后端交互,我们被称为前端调用后端的请求接口,我们需要先看后台有哪些接口,事先维护进我们的项目中,并且我们需要清楚的告知具体的API它是用来做什么的,有什么功能,尤其是我们现在使用的是 Typescript,我们则需要知道具体的字段信息来声明我们页面的interface 接口。


老的做法


在ts不流行的时候我们一贯的做法可能是,前后端定义一个接口名,参数,请求类型,然后前端将这个接口维护进自己的项目,如果说这个项目大一点需要几百个上千个接口,那么们在前端项目中就需要维护这么上百上千个接口,并且需要著名每个接口的请求方式,参数,接口名等等。

5a6e3f47523342faa97484ce836fe928.png


如上就是之前在某个老项目中,前端定义的接口请求。 (Ps: 此处只供参考,没有截图具体类型。代码补全哦~)


前端需要根据后台给出的Swagger 来将一个个的接口手动输入到项目中,然后在去对应页面去调用使用。


新做法

在新的做法中,前端接入了Typescript强类型,所以我们在之前老的接口上还需要给接口加上类型,参数类型已经返回类型等,所以对前端来说,又是一个很高的维护成本。


efcdbe03cd87485da2859c413b8704dc.png

并且还需要维护大量的接口文件。

b60c6af81e294020a9ce1c7a31340a9e.png

做为一个优秀的前端工程师来说,我们应该着重于提高开发效率,将精力应该着重放在业务之上,所以对这类重复的事情,我们应该想办法的快速搞起来,不应该占据我们的大量时间。那么这个我们怎么办呢?


答案就是:openApi。


为什么有openapi


openapi 即开放 API,也称开放平台。 所谓的开放 API(OpenAPI)是服务型网站常见的一种应用,网站的服务商将自己的网站服务封装成一系列 API(Application Programming Interface,应用编程接口)开放出去,供第三方开发者使用,这种行为就叫做开放网站的 API,所开放的 API 就被称作 OpenAPI(开放 API )。


如它的名字一样,打开api,也就是说它对我们前端来说,就是一个列出所有api的一个网站,如果你对接的后台是java,c#等,那我们最常见的就是。swagger。


后端接入完成 swagger 之后,我们可以访问 swagger 生成的文档。


63ce4599c7e2498582ba3f06358d20d1.png

它清楚的列出了我们所需要的接口请求地址,接口请求类型,接口名,并且针对不同的实现类也划分好了接口的标题。并且我们还可以在线直接输入参数用来进行接口请求,查看请求后返回的数据。


75db2935de1e4d28bd4f619e3cc02f85.png


并且访问页面我们可以拿到一个 openapi 的规范文件。(出于安全,我隐藏了自己的地址)


0946a63bcef44c649925fe6501bd4528.png


openapi 在前端的作用是什么呢?


openapi在前端,其实是umi 封装的一个小功能,它的作用是将你 swagger的 openapi 规范文件导入到项目中,并且在项目中实现 接口自动引入,类型自动生成等。


也就是说,你把openapi的规范文件地址复制到 我们项目的 openapi 中,我们就可以一键将你后台中所有的接口引入进来,并且自动创建对应类型,并且自动声明类型。


也就是说,它是一个提升你开发效率的。神器!我们杜绝了重复性的将接口引入到我们的项目中。


如下图,都是自动生成并引入的。

945db6de56894b5cacc09d6ad9b874b2.png


心动了吗?



我们来一起看看如何看看 在我们的pro项目中如何使用 openapi


如何使用


后端接入完成 swagger 之后,我们可以访问 swagger 生成的文档,一般来说都是 http://localhost:8080/swagger-ui.html,访问页面我们可以拿到一个 openapi 的规范文件。如图的位置


fb20dc23265414f5efdd494c1fa1f642.png

其次我们需要在我们项目中的 config 文件中修改config.ts 配置。,以 pro 的 openapi 为例,我们配置一下


openAPI: {
   requestLibPath: "import { request } from 'umi'",
   // 这里使用 copy 的 url
   schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json",
   mock: false,
 }
   //  requestLibPath
   这里我们需要保证引入request,我们可以是自己封装的 request,也可以是 umi 自己的request。但是这里必须要保证,引入request,否则,我们在项目中的请求将可能无法执行。
   // mock 
   这里指的是 如果配置为 true 则会自动生成一些mock文件,虽然质量不如我们写的,但是在开发中没啥问题,生成的 mock 文件在项目根路径下的 mock 文件中,生成的 mock 数据每次都不同,如果要调试可以随意修改,只有执行 npm run openapi 才会进行修改。
   // schemaPath
   这里指的是 我们的openapi 规则文件的地址,一般我们取上述 swagger 中的openapi地址。也可以取本地某个 openapi规范化文件。

当我们这些都配置完成之后。


我们就可以执行项目自带的执行openapi的命令。

npm openapi


然后系统会自动的帮我们在项目目录生成对应的 请求文件。

a92e5e797b504d2d9b149a1cabdea617.png


并且也会自动的帮我们声明这些请求接口的 定义类型。

c096dc61e1494e9081b12e2423bfbe6d.png


同时,swagger中的注释也会给我们引入进来。

在 pro项目中,这个接口会默认生成在 src/service/ .. 之下。



33b10db718a646b68baf1e4b4072a3ae.png


如果说,你的swagger 有很多个不同的分类如:

756efd15ad194f6e9ad91ed9dea48344.png

这时候为了区分不同的业务。

所以你在配置config的时候一定要注意传递一个参数叫: projectName 用来区分不同的接口

3181c81ec98a495283bc87c677d207fa.png


然后你的项目中,就会是我这种样子,自动区分了对应的文件夹

bae6348d4f6f4f92b1ccab1e5cfa903f.png


这下如果你想用的话,就直接在页面使用即可。

并且也为你定义好了声明文件。

也可以自由使用这些声明文件哦。


最后要注意的是:


openapi 是umi 团队开发且重度绑定了umi,如果你对当前的实现觉得不合适,也可以自行参考工具的实现思路,然后在其之上进行造轮子,配置适合你自己的 openapi。

目录
相关文章
|
14天前
|
Java API 微服务
【Spring Boot系列】通过OpenAPI规范构建微服务服务接口
【4月更文挑战第5天】通过OpenAPI接口构建Spring Boot服务RestAPI接口
69 0
|
8月前
|
Java API 开发工具
Java程序如何通过阿里云OpenAPI调用短信接口
Java程序如何通过阿里云OpenAPI调用短信接口
549 1
|
14天前
|
弹性计算 网络安全
阿里云OpenAPI提供了多种接口来管理ECS实例
【1月更文挑战第8天】【1月更文挑战第36篇】阿里云OpenAPI提供了多种接口来管理ECS实例
234 1
|
14天前
|
前端开发 安全 Java
springboot集成springdoc-openapi(模拟前端请求)
springboot集成springdoc-openapi(模拟前端请求)
|
14天前
|
弹性计算 网络安全
阿里云OpenAPI提供了多种接口来管理ECS实例
【2月更文挑战第1天】阿里云OpenAPI提供了多种接口来管理ECS实例
37 0
|
14天前
|
弹性计算 网络安全
阿里云OpenAPI提供了多种接口来管理ECS实例,包括创建、删除、重启等操作
【1月更文挑战第22天】【1月更文挑战第107篇】阿里云OpenAPI提供了多种接口来管理ECS实例,包括创建、删除、重启等操作
231 6
|
8月前
|
JSON 算法 API
阿里云 OpenAPI 中,一般情况下请求参数是放在请求的 URL 中的
阿里云 OpenAPI 中,一般情况下请求参数是放在请求的 URL 中的
111 1
|
8月前
|
Java 开发工具 Android开发
在阿里云 OpenAPI 移动推送的 Java 版本接口 v1.0
在阿里云 OpenAPI 移动推送的 Java 版本接口 v1.0
194 1
|
9月前
|
小程序 程序员 API
微信开发之openApi管理
微信开发之openApi管理
125 0