AntDesignProV5OpenAPI
前⾔
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';
requestLibPath:"import { request } from 'umi'",
// 在线版本
// schemaPath: "gw.alipayobjects/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⾃动⽣成假数据
看了⼀下⾃⼰现在⽤的swagger，跟官⽹例⼦有些不⼀样，不过建swagger的时候按照OpenApi规范格式来，就能拿到我们需要格式的⽂件了
⼀番研究之后，虽然跟官⽹不⼀样，但是也能⽤
1. （在线版本）⼿动修改swagger地址， /swagger-ui.html 改为 /v2/api-docs
页⾯是这样的
2. （本地⽂件）
· 打开上⼀步的 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
svg文件怎么生成效果
⽣成⽂件⽬录结构（services⽂件下）
├── ant-design-pro -------⾃动⽣成的⽂件夹名字（可以⾃⼰⼿动修改）
│ ├── index.ts ------- 接⼝公共引⼊⽂件
│ ├── api.ts ------- 接⼝定义⽂件（⽂件名称根据swagger⽬录定义的名字来的）
│ ├── typings.d.ts -------Ts类型⽂件
（有时swagger上的⽬录是中⽂的，所以⽣成的service⽂件也是中⽂的，可以跟后端沟通修改，也可⾃⼰修改）
看起来貌似还是有点⿇烦，还是有很多需要⾃⼰修改的地⽅，不过⽐起⾃⼰⼿写，尤其Ts类型也是很⿇烦的，这么⼀⽐，那可简单多了。
index.ts
/* 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:'ant.design',
avatar:'gw.alipayobjects/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',          name:'罗秀兰',
owner:'Garcia',
desc:'斯达种整消建难风可却再⽇等果明此。',
callNo:96,
status:89,
updatedAt:'PpVmJ50',
createdAt:'FbRG',
progress:100,
},
],
total:98,
success:false,
});
},
};
完！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。