Ant Design Pro V5 OpenAPI_whl_tangcupaigu

未知 02-07 2210

官方文档：https://beta-pro.ant.design/docs/openapi-cn

前言

Ant Design Pro升级到v5之后新引入了一个openapi的插件，这个是用来干什么的呢？

以前，我们写service文件时，都是根据swagger自定义接口名称，自己写注释，自己写接口调用方法，如果用的是TypeScript(以下简称Ts)，还需要自己一个字段一个字段的去定义字段的类型，后端接口没写好时还需要自己写mock数据自调。

现在，Pro v5出了一个OpenAPI，我们只需要简单的几个配置，就能根据swagger自动生成service文件，这个文件几乎包含你的所有需求，包括上面所列需手动操作的，还自动区分了目录（根据swagger目录区分），就连接口名都帮你定义好了（简直是起名困难户的福音）。

安装插件

我们使用umi搭建框架时，选择Pro v5版本就已经自带了openapi的插件，如果你使用的是非正式版本（大概自己升级到v5的属于非正式版本吧，本菜鸟也不懂啊）的 v5，可以通过下面的命令来安装这个插件：

yarn add @umijs/plugin-openapi

或者

npm i @umijs/plugin-openapi–save

回忆一下umi框架的目录结构接下来，看一下具体操作。

首先，config.ts配置

import { join } from 'path'; openAPI: { requestLibPath: "import { request } from 'umi'", // 在线版本 // schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json", // 本地版本 schemaPath: join(__dirname, 'oneapi.json'), mock: false, projectName: 'aaa' // 生成文件件名 }

? requestLibPath：引入request的方式一般我们都是使用umi自带的request，但是有些时候，我们需要更改request配置，比如在utils下面新建一个request文件：requestLibPath: “import request from ‘@utils/request’”,

? schemaPath：生成service文件的json地址 a. 在线版本：即swagger地址，需要json格式的才行 b. 本地json文件：一般在config文件里面新建一个json文件

? mock：设置为true自动生成假数据

先看一下官网给出的schemaPath格式：https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json

看了一下自己现在用的swagger，跟官网例子有些不一样，不过建swagger的时候按照OpenApi规范格式来，就能拿到我们需要格式的文件了

一番研究之后，虽然跟官网不一样，但是也能用

一般我们使用的swagger地址：http://localhost:8080/swagger-ui.html 这个地址我们用不了，跟schemaPath需要的格式是不一样的还是自己动手，丰衣足食吧

（在线版本）手动修改swagger地址， /swagger-ui.html 改为 /v2/api-docs 页面是这样的（本地文件） ? 打开上一步的 http://localhost:8080/v2/api-docs 的路径，然后Ctrl+A，Ctrl+C 或者F12打开调式页面，选择Network，查看/v2/api-docs接口，再Response，Ctrl+A，Ctrl+C ? Ctrl+V 粘贴到config/新建的json文件

其次，package.json配置

（umi框架Pro v5版本自带此命令，不用再配置）

"openapi": "umi openapi",

最后，一个命令搞定

npm run openapi

效果

生成文件目录结构（services文件下）

├── ant-design-pro -------自动生成的文件夹名字（可以自己手动修改） │ ├── index.ts ------- 接口公共引入文件 │ ├── api.ts ------- 接口定义文件（文件名称根据swagger目录定义的名字来的） │ ├── typings.d.ts -------Ts类型文件

（有时swagger上的目录是中文的，所以生成的service文件也是中文的，可以跟后端沟通修改，也可自己修改）看起来貌似还是有点麻烦，还是有很多需要自己修改的地方，不过比起自己手写，尤其Ts类型也是很麻烦的，这么一比，那可简单多了。

index.ts

// @ts-ignore /* eslint-disable */ // API 更新时间： // API 唯一标识： import * as api from './api'; import * as login from './login'; export default { api, login, };

api.ts

// requestLibPath 的配置 import { request } from 'umi'; /** 获取规则列表 GET /api/rule */ export async function rule(params: API.PageParams, options?: { [key: string]: any }) { return request<API.RuleList>('/api/rule', { method: 'GET', params: { ...params, }, ...(options || {}), }); }

typings.d.ts

这个文件会自动生成字段对应的中文名称，字典值，备注，以及字段的ts类型，有一个不好的点就是，ts类型定义都放到了同一个文件里面，不会给你区分目录，想分开放的话只能手动了

declare namespace API { type RuleListItem = { key?: number; disabled?: boolean; href?: string; avatar?: string; name?: string; owner?: string; desc?: string; callNo?: number; status?: number; updatedAt?: string; createdAt?: string; progress?: number; }; type RuleList = { data?: RuleListItem[]; /** 列表的内容总数 */ total?: number; success?: boolean; }; }

mock

import { Request, Response } from 'express'; export default { 'GET /api/rule': (req: Request, res: Response) => { res.status(200).send({ data: [ { key: 86, disabled: false, href: 'https://ant.design', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', name: '罗秀兰', owner: 'Garcia', desc: '斯达种整消建难风可却再日等果明此。', callNo: 96, status: 89, updatedAt: 'PpVmJ50', createdAt: 'FbRG', progress: 100, }, ], total: 98, success: false, }); }, };

完！