前端根据@umijs/openapi+swagger生成接口方法

前端同学在项目中除了页面样式渲染、还有数据请求controller层整理；一般后端同学会提供好相应的接口文档例如 java & swagger Api 在一个需求进入开发之前前后端同学会在一起协商接口协议（所需参数业务接口）根据接口协议生成Web Api地址给到前端同学；按照往常前端同学根据后端同学提供的Web Api 地址去实现业务时间长了就会想诶有没有快速生成接口访问逻辑的代码工具？【偷懒和好奇】往往是第一生产力举个栗子🌰

@umijs/openapi方式

"@umijs/openapi" 是一个开源的 JavaScript 库，它提供了一组工具和功能，用于在 UmiJS 应用程序中生成 OpenAPI 规范。OpenAPI 规范是一种用于描述和定义 RESTful API 的标准格式，它使用 JSON 或 YAML 格式来提供 API 的结构化描述。通过使用 "@umijs/openapi"，开发人员可以轻松地为他们的 API 自动生成 OpenAPI 规范，从而提高 API 的文档、测试和交互的可用性。这有助于开发人员更好地理解和使用 API，并促进了团队之间的协作。

依赖安装：

sh 复制代码

npm i @umijs/openapi ts-node -D

shell 复制代码

npm i umi-request

openapi配置：

在项目根目录新建 openapi.config.js 添加以下内容

ts 复制代码

const { generateService } = require('@umijs/openapi')

generateService({
  schemaPath: 'http://xxx.com/springdoc/api-docs', // 可以是.json文件，也可以是远程json地址
  serversPath: './src/servers',
})

vite配置：

ts 复制代码

export default defineConfig({
  server: {
    proxy: {
      '^/api/': {
        target: 'http://xxx.com',
        changeOrigin: true
      },
    }
  },
}

package脚本配置：

ts 复制代码

{
  "scripts": {
    "openapi": "ts-node openapi.config.ts"
  }
}

运行命令生成文件：

shell 复制代码

npm run openapi

生成的接口文件修改：

因为生成的接口文档是通过 umi 导入的 request，但在 vite + typescript 环境中会提示 request 不在 umi 的导出模块里，所以这块需要修改掉，单独使用 umi-request 来处理接口请求，umi-request 结合了 fetch 和 axios 的特性进行封装，文件小且使用方便。

把

ts 复制代码

import { request } from 'umi'

替换成

ts 复制代码

import request from 'umi-request'

typings.d.ts 接口用到的所有模型定义

这里会提示找不到API命名空间

ts 命名空间 declare namespace

"declare" 是 TypeScript 中的一个关键字，用于声明变量、函数、类或类型而不进行实际的赋值或定义
TypeScript 中的命名空间（Namespace）是用于组织代码和避免命名冲突的一种方式。命名空间可以将相关的代码组织在一起，并且在不同的命名空间中可以使用相同名称的变量而不会产生冲突。在 TypeScript 中，命名空间是通过关键字 namespace 来定义的。

导出

有没有快速替换&修改的办法呢？上脚本

sh 复制代码

#!/bin/bash

old_text="import { request } from 'umi';"
new_text="import request from 'umi-request';"

file_pattern="./src/servers/java/api"

# 进入文件夹
cd "$file_pattern" || exit

for f in $(ls); do
    old_file=$(basename "$f")
    if [ $old_file = "typings.d.ts" ]; then
        echo "模型文件设置自动导出"
        new_file="${old_file%.*}_output.${old_file##*.}"
        # echo $old_file
        # echo $new_file
        
        input_file="$old_file"
        output_file="$new_file"
        sed "s/declare/export declare /g" "$input_file" > "$output_file"
        mv "$output_file" "$input_file"
        rm -f "${old_file%.*}_output.${old_file##*.}"
    else
        new_file="${old_file%.*}_output.${old_file##*.}"
        # echo $old_file
        # echo $new_file
        
        input_file="$old_file"
        output_file="$new_file"
        echo "import { API } from './typings';" > $output_file
        sed "s/$old_text/$new_text/g" "$input_file" >> "$output_file"
        mv "$output_file" "$input_file"
        rm -f "${old_file%.*}_output.${old_file##*.}"
    fi
done

结束！！！

参考文章（前端根据openapi+swagger生成接口方法）