spring boot 自动生成前端axios请求文件 前端更方便调用

springboot 自动生成前端axios请求文件

• 实现思路
  • spring boot导入swagger编写接口
  • 通过swagger内置的接口**/v2/api-docs**,获取swagger的接口json
  • 使用node调用接口获取数据,并解析json
  • 准备一个axios访问接口的hbs模板(这个根据自己项目调用接口定)
  • 使用node将解析到的json填入到hbs模板中,并生成文件
  • 拿到文件后上传到自己的npm库中
• 使用
  • vue项目使用时只需要npm 导入你生成的那个文件
  • 接下来调用接口，只需要调用模板里的方法即可

1、spring boot准备工作

• pow导入相应包

<!--        web-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--        引入swagger2-生产接口文档-->
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger2</artifactId>
    <version>2.9.2</version>
</dependency>
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger-ui</artifactId>
    <version>2.9.2</version>
</dependency>

• 配置swagger

//首先在入口文件中加入注解
//@EnableSwagger2//开启swagger注解
//-------------------------------------
@Configuration
@EnableSwagger2
public class SwaggerConfig {

    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .pathMapping("/")
                .select() // 选择那些路径和api会生成document
                .apis(RequestHandlerSelectors.any())// 对所有api进行监控
                .apis(RequestHandlerSelectors.basePackage("com.xxxx"))
                .build();

    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("vue-admin-接口文档") //设置文档的标题
                .description("文档描述") // 设置文档的描述
                .version("1.0.0") // 设置文档的版本信息-> 1.0.0 Version information
                .termsOfServiceUrl("http://baidu.com") // 设置文档的License信息->1.3 License information
                .build();
    }
}

• 测试使用 xxxx/v2/api-docs 是否可以获取接口json数据

• 创建一个node.js服务调用接口，获取json数据后，解析并生成文件

//这里因为每个人的项目中的swagger编写模式不一样，就大概写下思路
//主要解析看自己的接口模式
//通过接口接收swagger json数据
const api = 'swagger'
const express = require('express')
const app = express() //实例化
const swaggerGen = require('./index')
const fs = require('fs')
const path = require('path')
const axios = require('axios')
//调用接口会返回一个buffer文件
app.get('/toSdk', (req, res) => {
  const { swaggerPath } = req.query
  if (!swaggerPath) res.send({ code: 400, msg: '生成失败-缺少参数' })
  //访问接口,并返回sdk
  axios
    .get(swaggerPath)
    .then((data) => {
      //此时生成sdk
      let opt = {
        swagger: data.data
      }
      //生成代码
      const codeResult = swaggerGen(opt)
      //写出文件
      fs.writeFileSync(path.join(__dirname, `./example/${api}.js`), codeResult)
      //返回用一个 buffer文件
      fs.readFile(path.join(__dirname, `./example/${api}.js`), function (error, file) {
        res.send(file)
      })
    })
    .catch((e) => {
      res.send({ code: 400, msg: '生成失败-' + String(e) })
    })
})
//启动服务
app.listen(8600, () => {
  console.log('swagger-to-sdk:8600')
})

• 获取的json填入模板（生成后）

...略-访问模板自己定义

• 这个是我生成后的，只是个例子，具体看自己的模板
• 这里我可能不能把解析的逻辑放出来，因为不是一个人写的

• 拿到生成后的文件上传到npm

2、vue项目中使用

• npm i 上传的npm项目
• 导入，并拿到自己需要调用的方法

import { getAxiosInstance, setDomain, saveShopping } from 'hc--shopping-api'
import { setApi } from './index'

//设置请求头
setApi(getAxiosInstance, setDomain, '')

const SaveShopping = params => {
    return saveShopping(params)
}

export default {
    SaveShopping
}

• 调用接口

//根据自己放入的目录导入
import Api from '@/api'
//调用
Api.SaveShopping().then(res => {

})
.catch(e=>{
    
})