react 实现自动创建api 请求文件

需求:

  • 前后端分离的情况下前端要调用后端的接口要写很多接口调用的定义文件很繁琐,切没有意义都是体力劳动

进程:

  • 让后端使用swagger 或者其他的openpai 格式的组件将server 端的接口喷出
  • 如果是swagger 的话一般会有一个口子 /v2/api-docs
  • 前端是react 使用 @umijs/openapi当然如果用了umi 的框架的话可以使用@umijs/plugin-openapi
  • 安装对应的组件yarn add ts-node @umijs/openapi -D
  • 但是如果node 的版本比较低的话这个安装可能会失败 error commander@12.0.0: The engine “node” is incompatible with this module. Expected version “>=18”. Got “16.15.0”
  • 因为openapi 依赖了commander 但是没有指定他的版本号然后安装commander 的时候会发现最新版本需要的node 的版本和本地的版本不一样,或者说不够高
  • 最简单的解决方案当然是升级node 的版本,但是升级node 版本的时候可能会导致其他的组件失效,所以我们需要在package.json 里面对这个组件指定一个版本
//与 devDependencies 同级
"resolutions": {"@umijs/openapi/**/commander": "10.0.1"}
  • 这个行为指定了openapi 下的 commander 依赖都使用10.0.1 版本,如果需要其他版本可以自行去github 查看
  • 安装成功之后在 package.json 里配置命令 "openapi": "ts-node openapi.config.ts"
  • 配置openapi.config.ts
const { generateService } = require('@umijs/openapi')generateService({schemaPath: 'http://***/v2/api-docs',//上面提到的swagger 的地址serversPath: './servers',//生成api 存放路径
})
  • 运行 yarn openapi之后发现生成的api用的是import { request } from 'umi'但我们并没有使用umi 的框架怎么办
  • openapi.config.ts 里添加一个参数
const { generateService } = require('@umijs/openapi')generateService({requestLibPath: "import request from \"umi-request\"",//替换requst 的导入信息,推荐用umi-requestschemaPath: 'http://***/v2/api-docs',//上面提到的swagger 的地址serversPath: './servers',//生成api 存放路径
})
  • 安装yarn add umi-request

拓展:

  • commander github 地址
  • openapi github 地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/828769.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单人脸检测/识别实战案例 之六 简单进行人脸训练与识别

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单人脸检测/识别实战案例 之六 简单进行人脸训练与识别 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单人脸检测/识别实战案例 之六 简单进行人脸训练与识别 一、简单介绍 二、简单进行人脸训练与识别 1、LBPH…

【MATLAB源码-第198期】基于simulink的三相光伏并网仿真模拟。

操作环境: MATLAB 2022a 1、算法描述 三相光伏并网系统是一种将太阳能转换为电能并将其馈入电网的系统。这个系统通常包括光伏阵列、逆变器(包括其控制算法)、滤波器、电网连接和监控系统。从上载的框图中可以看出,该系统的设计…

找不到mfc140.dll如何解决?mfc140.dll丢失的几种解决方法分享

在我们启动并开始利用电脑进行日常工作的过程中,如果遭遇了操作系统提示“mfc140.dll文件丢失”的错误信息,导致某些应用程序无法正常运行,这究竟是何种情况呢?小编将介绍计算机缺失mfc140.dll文件的5种解决方法,帮助大…

java项目:微信小程序基于SSM框架实现的购物系统小程序【源码+数据库+毕业论文+PPT】

一、项目简介 本项目是一套基于SSM框架实现的购物系统小程序 包含:项目源码、数据库脚本等,该项目附带全部源码可作为毕设使用。 项目都经过严格调试,eclipse或者idea 确保可以运行! 该系统功能完善、界面美观、操作简单、功能齐…

unity学习(91)——云服务器调试——补充catch和if判断

本机局域网没问题,服务器放入云服务器后,会出现异常。 想要找到上面的问题,最简单的方法就是在云服务器上下载一个vs2022! 应该不是大小端的问题! 修改一下readMessage的内容,可以直接粘贴到云服务器的。 …

使用FunASR处理语音识别

FunASR是阿里的一个语音识别工具,比SpeechRecognition功能多安装也很简单; 官方介绍:FunASR是一个基础语音识别工具包,提供多种功能,包括语音识别(ASR)、语音端点检测(VAD&#xff…

【Java数据结构】初步认识ArrayList与顺序表

前言~🥳🎉🎉🎉 hellohello~,大家好💕💕,这里是E绵绵呀✋✋ ,如果觉得这篇文章还不错的话还请点赞❤️❤️收藏💞 💞 关注💥&#x…

分布式文件系统--MinIO

1 MinIO安装(Docker) ●在root目录下新建docker_minio文件夹 ●在docker_minio文件夹下新建config文件夹,data文件夹 ●在root目录下新建docker_compose文件夹,在docker_compose文件夹中添加docker-compose.yaml services:minio:image: quay.io/minio/miniocontainer_name: mi…

Vuforia AR篇(三)— AR模型出场效果

目录 前言一、AR模型出场二、AR出场特效三、添加过渡效果四、效果 前言 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。 一、AR模型出场 创建ARCamer…

Three.js——基础材质、深度材质、法向材质、面材质、朗伯材质、Phong材质、着色器材质、直线和虚线、联合材质

个人简介 👀个人主页: 前端杂货铺 🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展 📃个人状态: 研发工程师,现效力于中国工业软件事业 🚀人生格言: 积跬步…

【树莓派】强力烧写工具 Balena Etcher,烧写树莓派系统,树莓派系统克隆,备份

文章目录 使用Win32DiskImager备份和写入树莓派系统步骤一:下载和安装Win32DiskImager步骤二:准备工作步骤三:备份树莓派系统步骤四:写入树莓派系统 使用Balena Etcher给树莓派烧写系统Balena Etcher简介步骤一:下载Ba…

Mac安装telnet

一、安装Homebrew 1、打开官网:Homebrew — The Missing Package Manager for macOS (or Linux) 2、打开终端输入: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 二、安装Telnet bre…

【LAMMPS学习】八、基础知识(4.5)TIP5P水模型

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语,以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各…

园区智慧化转型新篇章:解码智慧技术如何助力园区实现精细化管理,提升运营效率

目录 一、智慧技术概述及其在园区管理中的应用 (一)物联网技术的应用 (二)大数据技术的应用 (三)云计算技术的应用 二、智慧技术助力园区实现精细化管理 (一)实现资源优化配置…

轻松上手,无缝对接:详述如何接入企讯通空号检测接口API

企讯通空号检测接口API作为一款高效、精准的手机号码状态检测工具,能够帮助企业及开发者快速识别手机号码的有效性,优化通讯资源,提升营销效果。本篇文章将带领您一步步了解如何轻松、无缝地对接企讯通空号检测接口API,让您的业务…

【RAG 论文】Adaptive-RAG:自适应地根据 query 难度来选择合适的 RAG 模型

论文:Adaptive-RAG: Learning to Adapt Retrieval-Augmented Large Language Models through Question Complexity ⭐⭐⭐⭐ Code:github.com/starsuzi/Adaptive-RAG NAACL 2024,arXiv:2403.14403 文章目录 一、论文速读二、实现细节2.1 三种…

使用FPGA实现逐级进位加法器

介绍 逐级进位加法器就是将上一位的输出作为下一位的进位输入,依次这样相加。下面以一个8位逐级进位加法器给大家展示。 我增加了电路结构,应该很容易理解吧。 下面我也列举了一位加法器,可以看下。 电路结构 设计文件 1位加法器 librar…

Docker 的数据管理 端口映射 容器互联 镜像的创建

目录 概念 概念 管理 Docker 容器中数据主要有两种方式:数据卷(Data Volumes)和数据卷容器(DataVolumes Containers)。总结:因为容器数据是临时保存的为了安全,就要让数据保持持久化。 1&#…

OceanBase单机版安装体验

前情提要 上周OceanBase开发者大会过后,作为观察员也来体验一下OB的安装。业内有某个国产安装用了两周,这种其实有点劝退了。话说就是10年前,没搞过Oracle的人也不用两周安装一个数据库啊。今天看看OB的(一体化)安装。…

计算机网络----第十三天

DNS协议和文件传输协议 DNS: 含义:用于域名和IP地址的互相解析 DNS域名: 背景:通过IP地址访问目标主机,不便于记忆 域名的树形层次化结构: ①根域 ②顶级域:主机所处的国家/区域&#xf…