後端新增內容

我明白你的应用场景了，

我给你一个简单的示例：

这个是swagger，下面使用@hey-api/openai-ts为其产生Interface与API： 

这个假设是你们后端产生swagger：

    https://raw.githubusercontent.com/swagger-api/swagger-petstore/master/src/main/resources/openapi.yaml

    下面配置项目：

    1. 安装依赖：

    pnpm install @hey-api/openapi-ts -D

pnpm install axios // 因为后面我们需要使用axios作为客户端

    2. 创建配置文件openapi-ts.config.ts：

    import { defineConfig } from '@hey-api/openapi-ts';

export default defineConfig({
    base: 'https://petstore3.swagger.io/api/v3',
    client: 'axios',  // 修改这里可以使用不同client，可以选择：node,xhr,axios,fetch,angular
    format: 'prettier',
    input:'https://raw.githubusercontent.com/swagger-api/swagger-petstore/master/src/main/resources/openapi.yaml',
    output: './src/client',
});

    3. 修改package.json的配置：

    "scripts": {
    "openapi-ts": "openapi-ts"
},

    4. 获取接口

    npm run openapi-ts

形成文件：

    5. 接口请求示例：

<script setup lang="ts">
import { ref } from 'vue';
import { OpenAPI } from './client/core/OpenAPI';
import { PetService } from './client';

const pet = ref();

const handleClick = async () => {
    pet.value = await PetService.getPetById({
        // random id 1-10
        petId: Math.floor(Math.random() * (10 - 1 + 1) + 1),
    });
};

OpenAPI.interceptors.response.use((response: any) => {
    if (response.status === 200) {
        console.log(`request to ${response.url} was successful`);
    }
    return response;
});
</script>

<template>
<div>
    <div>pet: {{ pet }}</div>
    <button @click="handleClick">Click测试</button>
</div>
</template>

这个是OpenAPI的配置类型：

export const OpenAPI: OpenAPIConfig = {
    BASE: 'https://petstore3.swagger.io/api/v3',
    CREDENTIALS: 'include',
    ENCODE_PATH: undefined,
    HEADERS: undefined,
    PASSWORD: undefined,
    TOKEN: undefined,
    USERNAME: undefined,
    VERSION: '1.0.20-SNAPSHOT',
    WITH_CREDENTIALS: false,
    interceptors: {
        request: new Interceptors(),
        response: new Interceptors(),
    },
};

vue项目代码：https://git.imooc.com/class-163/openapi-ts-demo，另react示例代码：https://stackblitz.com/edit/hey-api-example

PS: 你是台湾还是广东&港澳的小伙伴？习惯用繁体~~ ^_^，看来我的受众很广泛

swagger会有，后面会有Nestjs的集成。

openapi-typescript-codegen你的应用场景是什么？创建axios一类基于json的client端吗？

PS: openapi-typescript-codegen这个项目目前不再维护，目前官方仓库上推荐是@hey-api/openai-ts，