umimax 使用 openapi

353 阅读1分钟

我的项目是, "@umijs/max": "^4.3.28" + "antd": "^5.4.0" + ts + "@ant-design/pro-components": "^2.4.4"。

services下的文件,阿里内部的人用的是ONEAPI,作为路人用不了。


ONEAPI用不了,推荐用OPENAPI

openapi结合ts-node使用

安装插件

npm install @umijs/openapi --save-dev

npm install ts-node typescript --save-dev

配置文档

package.json中加入下面的语句

"scripts": {
    "openapi2ts": "ts-node .openapi2tsrc.ts",
  },

根目录增加配置文件.openapi2tsrc.ts

import { generateService } from '@umijs/openapi';
import path from 'path';

export default generateService({
  // schemaPath: 'http://petstore.swagger.io/v2/swagger.json',
  schemaPath: path.resolve(__dirname, './schema.json'),
  serversPath: 'src/services',
});

生成services文件

运行下面的语句,即可在services文件夹下面,生成对应的文件了

npm run openapi2ts

image.png


这种方法我没成功,先记录一下

在网上看到有人推荐使用 @umijs/max-plugin-openapi

安装插件

安装npm install @umijs/max-plugin-openapi --save

配置插件

.umirc.ts中配置使用

import path from 'path';
openAPI: {
    requestLibPath: "import { request } from '@umijs/max'",
    schemaPath: path.resolve(__dirname, './src/schema.json'),
    // schemaPath:  'https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json', // 或 './src/schema.json'
    mock: false, // 设置为 true 启用 mock 数据
},

schema.json文件,可以用swagger工具生成,官方网址swagger openapi

GIT HUB上关于OPENAPI的讨论 地址

ps. 看到有建议安装 umi-presets-pro搭配使用的,但是我没看懂怎么个搭配法 orz

安装为 npm install umi-presets-pro

.umirc.ts中配置presets: [require.resolve('umi-presets-pro')],

启动项目

npm run dev

image.png

理论上,应该在 services文件夹下面,生成对应的文件。