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、算法描述 三相光伏并网系统是一种将太阳能转换为电能并将其馈入电网的系统。这个系统通常包括光伏阵列、逆变器(包括其控制算法)、滤波器、电网连接和监控系统。从上载的框图中可以看出,该系统的设计…

【力扣】16. 最接近的三数之和

16. 最接近的三数之和 题目描述 给你一个长度为 n 的整数数组 nums 和 一个目标值 target。请你从 nums 中选出三个整数,使它们的和与 target 最接近。 返回这三个数的和。 假定每组输入只存在恰好一个解。 示例 1: 输入:nums [-1,2,1…

Golang实现一个批量自动化执行树莓派指令的软件(6)简易批量指令处理

简介 基于上篇 Golang实现一个批量自动化执行树莓派指令的软件(5)模块整合, 这里我们实现简单的从配置文件设置指令集, 然后程序自动运行指令集的操作。 环境描述 运行环境: Windows, 基于Golang, 暂时没有使用什么不可跨平台接口…

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

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

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

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

MATLAB初学者入门(17)—— 爬山算法

爬山算法是一种局部搜索算法,它采用贪心策略来迭代改进问题的解决方案,直到达到局部最优。爬山算法在解决一些优化问题时很有用,尤其是当问题的解空间是离散的,并且我们可以容易地定义“邻居”概念时。 案例分析:使用…

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

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

使用FunASR处理语音识别

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

DAC音频解码芯片DP7398立体声数模转换芯片

DP7398 Pin TO Pin CS4398和CS43122,同轴光纤DAC解码,支持HIFI播放器。 产品介绍 DP7398 是一个立体声 24 位/1 92kHz 数模转换芯片。 该 D/A 系统包括数字去加重、半分贝步长音量控制、 ATAP I 通道混频、可选择的快速和慢速数字插补滤波器和过采样多位…

使用TensorFlow 2.x实现深度学习模型的完整指南

TensorFlow 2.x 是一个强大的开源软件库,用于数据流编程,广泛应用于各种机器学习和深度学习模型的开发。这里将提供一个使用 TensorFlow 2.x 实现深度学习模型的基本步骤,包括环境设置、模型构建、训练和评估。 ### 步骤 1: 安装 TensorFlow…

AI辅助编码体验

自从自己架设了ai玩了一个月以后,感觉好哇塞 在线的文心一言很棒棒 前几天Llama3出来了,因为不翻墙所以等这两天大家搬家我就把Llama3-8B-Chinese-Chat模型给用上了,简单一试感觉比microsoft_phi-2(好像是7B,大了我这…

【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…

vscode中对 python 快速增加header 描述

在首选项→配置用户代码片段→python 然后再 Code/User/snippets/python.json文件中写入 {// Place your snippets for python here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the …

web server apache tomcat11-20-connectors 连接器

前言 整理这个官方翻译的系列,原因是网上大部分的 tomcat 版本比较旧,此版本为 v11 最新的版本。 开源项目 从零手写实现 tomcat minicat 别称【嗅虎】心有猛虎,轻嗅蔷薇。 系列文章 web server apache tomcat11-01-官方文档入门介绍 web…

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

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

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

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

景区文旅实景剧本杀小程序系统开发搭建

开发景区文旅实景剧本杀小程序系统需要以下步骤: 1. 确定需求和功能:根据景区文旅实景剧本杀的特点和需求,确定系统需要具备的功能,如实景探索、剧情互动、角色扮演、任务挑战等。 2. 设计系统架构:根据需求和功能&a…