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-request
    schemaPath: 'http://***/v2/api-docs',//上面提到的swagger 的地址
    serversPath: './servers',//生成api 存放路径
})
  • 安装yarn add umi-request

拓展:

  • commander github 地址
  • openapi github 地址

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud基础 Consul的引入

前言 首先是为什么引入consul这个组件 我们知道微服务分为很多个模块,这里模块中相互调用,我使用硬编码的模式是不好的 比如微服务模块需要更新的时候,我们使用硬编码的方式可能需要修改很多个地方 但是使用consul之后,就引入了注册中心,我们只需要将对应的服务注册为节点 这样…

重生奇迹MU召唤术师攻略(重生奇迹MU召唤技能)

1、召唤术师,重生奇迹MU的强力职业之一。跟格斗家一样,需要RMB购买资格证才能够使用的一个职业,召唤术师可以说是对于玩家将职业玩法的一种总结性职业,这个职业虽然叫做召唤术师,但是整个重生奇迹MU里唯一能够召唤宝宝…

SpringBoot3 + Kotlin + mybatis-plus + Swagger3后端开发样例

前言: Kotlin 是一种在 JVM(Java 虚拟机)、Android 和浏览器端运行的静态类型编程语言。以下是关于 Kotlin 的总结介绍: 1、语言特性: 简洁性:Kotlin 旨在提供简洁且安全的代码,同时保持与 Jav…

解决“ImportError: DLL load failed while importing _rust: 找不到指定的程序的问题

运行 scrapy startproject wikiSpider 报错:ImportError: DLL load failed while importing _rust: 找不到指定的程序。 经过尝试 可以更换Python解释器版本来解决 1、点击crtlalts打开设置 点击项目>解释器 选择3.11解释器 (我原来报错用的3.9的解…

C++11(第一篇)【C/C++复习版】

目录 1、统一的列表初始化 2、所有容器新增initializer_list构造 3、auto、decltype和typeid 4、nullptr 5、 范围for 6、STL中的变化 array(新容器) forward_list(新容器) cbegin、cend、crbegin、crend(新方法…

WEB网站服务器安全漏洞扫描环境搭建及漏洞工具扫描

一、适用环境 1、企业自建有门户网站; 2、使用Struts框架的WEB网站; 3、网站服务器涉及有数据库之类的项目,如:微信登录、手机登录、充值、收费等。 4、使用安卓版、苹果版、电脑版结合的缴费类网站平台。 5、方便但需提高安全性…

linux-centos修改时区时间

修改时区为北京时间 先输入tzselect,输入5,再输入9,再输入1,最后再输入1就行了 修改系统时间和硬件时间 查看当前时间 命令date修改系统时间 命令date -s "2024-04-21 18:30:30"查看硬件时间 命令hwclock --show修改…

AIGC Chat GPT 用思维导图总结,数据分析所需要掌握的Excel知识

你还不会制作思维导图吗? 现在已经可以零门槛一键生成,只需跟AI说一句话,就能完成!!! 生成一个思维导图,主题是数据分析师需要掌握的Excel知识,在新窗口生成思念导图。 AIGC ChatG…

ONES 功能上新|ONES Wiki 新功能一览

支持在 ONES Wiki 页面中使用分栏进行横向排版,丰富排版方式,帮助用户以更丰富的版式展示内容。 应用场景: 页面的布局对内容的阅读有很大的影响。当页面中有图文混排的需求时,可以通过分栏来组织页面结构,以更清晰、更…

倾囊相授,ChatGPT干货技巧全在这里!如果没有这个方法我不可能学好ChatGPT

ChatGPT虽然已经问世一年多,但不少朋友还处于刚接触的阶段。于是,我们特别梳理了一些常见问题,尝试着用通俗的语言解释清楚这些内容。 1. ChatGPT的官方网址 https://www.chatgpt.com 你只要Google搜索能打开,这个网址肯定能打开。…

2024年成都市“蓉贝”软件人才年度评估及资金支持申报对象内容、材料要求

一、申报对象 经2023年评估合格的第一批(2019年评聘)、第二批(2020年评聘)、第三批(2021年评聘)“蓉贝”软件人才,2022年评聘的第四批“蓉贝”软件人才。 二、评估内容 (一&#…

java和python刷题的一些语法规则总结(未完成)

语法总结 Java篇1、代码补全2、编程题中常用头文件3、编程题常用的内置方法4、模版 Python篇1、2、编程题中常用的头文件3、编程题中常用的内置方法4、伪代码模版 去哪练习? 1、LeetCode上有个面试模拟 2、牛客公司真题(ACM模式) ⚠️ 笔试均…

AI-数学-高中-44导数的运算法则

原作者视频:【导数】【一数辞典】3导数的运算法则(略难)_哔哩哔哩_bilibili 三种求导表达方式一样的,中间的比较常用: 链式法则:从外向内:

Vue3 实现 Three.js粒子特效

效果 <template><div id"waves" /> </template><script setup> import { ref, onMounted, onUnmounted } from "vue"; import * as THREE from "three";const amountX ref(50); const amountY ref(50); const color …

MATLAB实现蚁群算法栅格路径优化

蚁群算法是一种模拟自然界中蚂蚁觅食行为的优化算法&#xff0c;常用于解决路径规划问题。在栅格路径优化中&#xff0c;蚁群算法可以帮助找到从起点到终点的最优路径。以下是蚁群算法栅格路径优化的基本流程步骤&#xff1a; 初始化参数&#xff1a; (1)设置蚂蚁数量&#xff…

JavaScript实现代码雨

一、功能描述 使用canvas实现一个代码雨的功能&#xff0c;炫一个~~~ 二、上码 html <canvas id"canvas"></canvas> js let canvas document.querySelector(canvas);let ctx canvas.getContext(2d);// screen.availWidth:可视区域的宽度canvas.width…

Blender游戏资产优化技巧

创建视频游戏资产既具有挑战性又富有回报。 经过一些研究并根据我的经验&#xff0c;这里有三个技巧可以帮助你使用 Blender 优化游戏资产。 在 Blender 中优化游戏资源的三种技术可以归结为拥有高效的 3D 模型拓扑、通过烘焙优化纹理&#xff0c;以及最后通过 Blender 节点的…

【Spring AI 来了】

spring官方已经有Spring AI 插件&#xff0c;每个程序员必定拥抱AI&#xff0c;也意味着不就以后AI的open API 会成为我们开发成的基础jdk。 下面的内容也是AI直接根据网址给我翻译的&#xff0c;连格式都是生成的。AI应用已经渗透到各行各业了&#xff0c;并且会改变我们每个…

【八股】Java基础、集合、JVM

面向对象三大特性 1 封装&#xff1a; 将 方法 和 属性 写到同一个类中&#xff0c;并将属性 私有化&#xff0c;生成 get set方法&#xff0c;外部访问属性需要通过get和set方法,内部可以直接访问属性&#xff0c;这样的一个类我们认为它完成了封装。 2 继承&#xff1a; 子…

神经网络手写数字识别

⚠申明&#xff1a; 未经许可&#xff0c;禁止以任何形式转载&#xff0c;若要引用&#xff0c;请标注链接地址。 全文共计4077字&#xff0c;阅读大概需要3分钟 &#x1f308;更多学习内容&#xff0c; 欢迎&#x1f44f;关注&#x1f440;【文末】我的个人微信公众号&#xf…