前端接口生成利器--OpenApi

基于Swagger接口文档，使用OpenApi自动生成前端api。

配置Swagger可以看另一篇Swagger接口文档 | Z Blog (oschina.io)

这里使用Knife4j，可以认为是Swagger的升级。

参考文章：OpenAPI 自动生成接口请求代码 - 掘金 (juejin.cn)

1.打开后端Swagger文档

根据自己的项目配置打开接口文档，这里我打开的是 localhost:8101/api/doc.html

一般就是在项目地址的后面加上**/doc.html**

找到“分组Url”，复制下来

2.前端配置（Vue3）

安装依赖

yarn add @umijs/openapi -D

新建配置文件

在根目录新建文件夹 script

在 script 下新建 config.js 和 openapi.js

config.cjs

//根目录新建 script/config.cjs
module.exports = {
    openApi: [{
        // 想怎么引入封装请求方法
        requestLibPath: "import request from '../../utils/request'", 
        // openAPI规范地址
        // 也就是刚才从接口文档里复制下来的“分组Url”
        schemaPath: 'http://localhost:8101/api/v2/api-docs', 
        // 生成到哪个目录内
        projectName: 'open-bff-patent', 
        // 需不需要增加前缀
        apiPrefix: '"/open-bff-patent"', 
        // 生成代码到哪个目录
        serversPath: './src/service', 
    }],
};

openapi.cjs

//根目录新建 script/openapi.cjs
const { generateService } = require('@umijs/openapi')
const { openApi } = require('./config.cjs')

async function run() {
    for (let index = 0; index < openApi.length; index++) {
        await generateService(openApi[index])
    }
}

run()

package.json中新增scripts

"scripts": {
  "openapi": "node ./script/openapi.js"
}

执行命令

yarn openapi

3.使用

在执行完生成的命令后可以在src中找到service\open-bff-patent目录

调用

比如我需要这个接口

那就直接在页面中导入它，然后直接调用就可以了

<script>
import getInterfaceInfoListUsingGet from '../service/open-bff-patent/jiekouxinxixiangguan'
</script>

<template>
	<button @click=getInterfaceInfoListUsingGet()>test</button>
</template>