根据spring boot后端 提供的 OpenAPI 来生成代码

后档文档搭建

首先需要搭建一个springboot 的knife4j 项目

在pom 中引入

<dependency>
    <groupId>com.github.xiaoymin</groupId>
    <artifactId>knife4j-spring-boot-starter</artifactId>
    <version>3.0.3</version>
</dependency>

主注意高版本的spring boot 需要在yml 中配置 以下内容

spring:
  mvc:
    pathmatch:
      matching-strategy: ANT_PATH_MATCHER

编写knife4j 配置类

@Configuration
public class Knife4jConfiguration {

    @Bean(value = "defaultApi2")
    public Docket defaultApi2() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(new ApiInfoBuilder()
                        //.title("swagger-bootstrap-ui-demo RESTful APIs")
                        .description("# swagger-bootstrap-ui-demo RESTful APIs")
                        .termsOfServiceUrl("http://www.xx.com/")
                        .version("1.0")
                        .build())
                //分组名称
                .groupName("2.X版本")
                .select()
                //这里指定Controller扫描包路径
                .apis(RequestHandlerSelectors.basePackage("com.example.knife4j.controller"))
                .paths(PathSelectors.any())
                .build();
    }
}

controller

@Api(tags = "首页模块")
@RestController
@RequestMapping("/user")
public class UserController {

    @ApiImplicitParam(name = "name",value = "姓名",required = true,dataTypeClass=String.class)
    @ApiOperation(value = "向客人问好")
    @GetMapping("/sayHi")
    public Result<User> sayHi(@RequestParam(value = "name")String name){
        Result<User> result = new Result<>();
        return result;
    }
}

Result

@Data
@ApiModel
public class Result<T> {
    private Integer code;
    private String msg;
    private T data;

}

@Data
@ApiModel
public class User {
    @ApiModelProperty
    private Integer id;
    @ApiModelProperty
    private String name;
}

这样就有一个最简单的接口,包含请求参数,和返回值

启动项目看是否能正常访问 http://127.0.0.1:8080/doc.html#/home

在knife4j 的接口文档的左侧菜单中,找到 文档管理->离线参数

有一个OpenApi 选项,点击即可下载一个json 文件,该文件夹则就是openapi 描述文件,后续前端,需要用这个json 文件,来生成接口代码

至此,已完成,后端接口文档的创建

前端代码生成

选择以下包管理工具创建一个项目,项目需要选择ts 支持

npm init vite@latest

yarn create vite

pnpm create vite

你可以选择你常用的,这个不重要

安装 axios

接着安装代码生成

npm install openapi-typescript-codegen --save-dev

在 package.json 中添加生成脚本

"generated": "openapi --input ./openAPI.json --output ./src/api --client axios"

这里的openAPI.json 文件则是指刚才下载好的文件,将它移动到前端项目中

之后,运行该脚本, 则会在src/api 中生成接口代码

// 在index.ts 中 Service 则是调用接口的通用模块, 直接 Service. 就可以看到可以调用哪些接口以及参数,类型等等内容
export { Service } from './services/Service';

调用方式

Service.sayHiUsingGet("dsa").then(res=>{
 const data  =  res.data
})

可以简单查看下代码生成暴露出来的对象,有些是配置url 等等内容