前端根据@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，并促进了团队之间的协作。

依赖安装：

• @umijs/openapi
• ts-node
• umi-request

npm i @umijs/openapi ts-node -D

npm i umi-request

openapi配置：

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

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

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

vite配置：

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

package脚本配置：

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

运行命令生成文件：

npm run openapi

生成的接口文件修改：

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

把

import { request } from 'umi'

替换成

import request from 'umi-request'

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

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

ts 命名空间 declare namespace

"declare" 是 TypeScript 中的一个关键字，用于声明变量、函数、类或类型而不进行实际的赋值或定义

TypeScript 中的命名空间（Namespace）是用于组织代码和避免命名冲突的一种方式。命名空间可以将相关的代码组织在一起，并且在不同的命名空间中可以使用相同名称的变量而不会产生冲突。在 TypeScript 中，命名空间是通过关键字 namespace 来定义的。

导出

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

#!/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生成接口方法）