您的位置:首页 > 娱乐 > 明星 > 在非 antd pro 项目中使用 umi OpenAPI

在非 antd pro 项目中使用 umi OpenAPI

2024/12/23 15:51:20 来源:https://blog.csdn.net/weixin_52258854/article/details/140137205  浏览:    关键词:在非 antd pro 项目中使用 umi OpenAPI

大家好,我是松柏。
自从跟着鱼皮哥使用了ant design pro中的OpenAPI插件之后,我已经无法忍受自己写请求后端接口的方法了,所以这篇文章记录一下如何在非ant design pro项目中使用OpenAPI

安装依赖

首先我们需要安装包@umijs/openapi

yarn add @umijs/plugin-openapi

这其实就是在antd pro中使用的OpenAPI插件,它跟antd pro并没有什么耦合,可以在其它项目中直接使用。
然后安装请求库axios

yarn add axios

当然也可以使用其它的请求库,我这里以axios为例。

配置

首先配置OpenAPI的生成规则,添加以下openapi.config.ts配置文件:

import {generateService} from '@umijs/openapi'generateService({// 请求工具路径,按实际项目更改,建议尽量按umi-request的参数格式定义请求工具。因为生成的server传参是按umi-request来的。requestLibPath: "import request from '@/../config/axios.config'",// 后端提供的swagger Json。ps:这里使用相对路径存在问题,没有解决。使用绝对路径、远程路径可以schemaPath: 'http://localhost:1101/api/v3/api-docs',// 生成servers的路径// serversPath: './servers',// 项目名称,生成server会在这个文件夹下projectName: 'backend-template-new-pine',// 命名空间,生成的类型命名空间namespace: 'backup',
});

然后新增axios.config.ts文件配置一下axios

import axios from "axios";const request = axios.create({baseURL: "http://localhost:1101/api",headers: {},
});export default request;

添加命令

package.json文件的scripts中添加命令:

"openapi": "ts-node config/openapi.config.ts"

现在我们执行一下进行测试:
image.png
ok,执行成功!service目录下生成了接口文件:
image.png
之后就可以直接使用了。

这次分享就到这里了,拜拜👋🏻!

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com