通过swagger在线地址生成前端接口调用

下载模块
npm install fs
npm install path-browserify
npm install http
新建autoGen.js文件

const fs = require('fs');
const path = require('path-browserify');
let apiData = {} // 访问swagger.json的数据
const http = require('http');
 
const apiUrl = 'http://localhost:8001/swagger/v1/swagger.json' // swagger.json的地址,这里是本地的,可以替换成你的地址,有个问题是目前只能是http,https的不行,https会报一个证书错误
 
// 生成api文件的目录
function mkdirsSync(dirname) {
  if (fs.existsSync(dirname)) {
    return true
  } else {
    if (mkdirsSync(path.dirname(dirname))) {
      fs.mkdirSync(dirname)
      return true
    }
  }
}
 
function getPath(pathUrl) {
  return path.resolve(__dirname, pathUrl)
}
 
let dataList = [] // 真正要处理的数据
 
// 将swagger.json中的数据转换成我们需要的数据
function getDataList() {
  // 遍历apiData.paths
  for (const key in apiData.paths) {
    let routeData = {}
    routeData.api = key
    console.log('path================ ' + key)
    // 遍历apiData.paths[key]
    for (let key2 in apiData.paths[key]) {
      routeData.method = key2
      console.log('methods============== ' + key2)
 
      let tag = apiData.paths[key][key2].tags[0]
      console.log('tag=====' + tag)
      routeData.controller = tag
      let params = apiData.paths[key][key2].parameters
      if (params) {
        routeData.bodyType = 'query'
        routeData.params = apiData.paths[key][key2].parameters
      } else {
        routeData.params = []
        if (key2 === 'post' && key2 !== 'get') {
          routeData.bodyType = 'body'
          let requestBody = apiData.paths[key][key2].requestBody
          if (requestBody) {
            let content = requestBody.content
            if (content) {
              let applicationJson = content['application/json']
              if (applicationJson) {
                let schema = applicationJson.schema
                if (schema) {
                  let properties = schema.$ref
                  if (properties) {
                    let ref = properties.split('/')
                    let refName = ref[ref.length - 1]
                    let refData = apiData.components.schemas[refName]
                    if (refData) {
                      let refProperties = refData.properties
                      if (refProperties) {
                        for (let key3 in refProperties) {
                          let param = {}
                          param.name = key3
                          param.in = 'body'
                          param.required = true
                          param.schema = refProperties[key3]
                          routeData.params.push(param)
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      //遍历apiData.paths[key][key2]
      for (let key3 in apiData.paths[key][key2]) {
        // console.log('tags===========' + key3)
        if (key2 === 'get') {
          //routeData.params = apiData.paths[key][key2][key3].parameters
        }
        //routeData.other = apiData.paths[key][key2][key3]
        console.log(apiData.paths[key][key2][key3])
      }
      console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
    }
    dataList.push(routeData)
  }
  console.log(dataList)
}
 
// 获取远程swagger.json的数据
function httpGetJson(url) {
  return new Promise((resolve, reject) => {
    http.get(url, (res) => {
      const { statusCode } = res
      const contentType = res.headers['content-type']
      let error
      if (statusCode !== 200) {
        error = new Error('请求失败。\n' + `状态码: ${statusCode}`)
      } else if (!/^application\/json/.test(contentType)) {
        error = new Error('无效的 content-type.\n' + `期望 application/json 但获取的是 ${contentType}`)
      }
      if (error) {
        console.log('error')
        // 消耗响应数据以释放内存
        console.error(error.message)
        res.resume()
        return
      }
      res.setEncoding('utf8')
      let rawData = ''
      res.on('data', (chunk) => {
        rawData += chunk
      })
      res.on('end', () => {
        try {
          const parsedData = JSON.parse(rawData)
          resolve(parsedData)
        } catch (e) {
          reject(`错误: ${e.message}`)
        }
      })
    }).on('error', (e) => {
      reject(`错误: ${e.message}`)
    })
  })
}
 
// 生成http请求js文件
async function createHttpJsFile() {
  console.log('start')
  apiData = await httpGetJson(apiUrl)
  getDataList()
  console.log(dataList)
  debugger
  if (dataList.length === 0) {
    console.log('请先点击getUsers按钮')
    return
  }
  let httpJs = "import { get, post, deletedata, put, getblob} from './http'\n"
        httpJs += "const baseURL = $gloableConfig.baseURL;\n";
        httpJs += "const Token = '';\n";
        httpJs += "export default\n";
        httpJs += "{\n";
        httpJs += "baseURL,//服务器地址\n";
        httpJs += "Token,\n";
        httpJs += "}\n";
  if (dataList.length > 0) {
    const dirPath = '/src/api'
    // dataList根据controller去重
    const controllerList = []
    for (let i = 0; i < dataList.length; i++) {
      const routeData = dataList[i]
      const controller = routeData.controller
      if (controllerList.indexOf(controller) === -1) {
        controllerList.push(controller)
      }
    }
 
    // 生成http请求js文件
    for (let i = 0; i < controllerList.length; i++) {
      // 查找dataList里与 controllerList[i]相同的数据 (同一个controller的api放在一起)
      const controllerDataList = dataList.filter(item => item.controller === controllerList[i])
      console.log(controllerDataList)
 
      for (const data of controllerDataList) {
        const api = data.api // /api/user/getUserList
        // 取出api中最后一个斜杠后面的内容
        const apiName = api.substring(api.lastIndexOf('/') + 1)
        if (data.method === 'get') {
          httpJs += `export const ${apiName} = (data) =>  get(baseURL +'${data.api}', data, Token);//${data.controller}`
          httpJs += `\n`
        } else if (data.method === 'post') {
          httpJs += `export const ${apiName} = (data) =>  post(baseURL +'${data.api}', data, Token);//${data.controller}`
          httpJs += `\n`
        }
      }
      
    }
    // 生成js文件
    mkdirsSync(getPath(`..${dirPath}/`))
    fs.writeFileSync(getPath(`..${dirPath}/api.js`), httpJs)
    httpJs = ''
  }
}
createHttpJsFile();
 

package.json文件新增配置
node后面是autoGen.js文件目录

"scripts": {
    "swagger": "node src/genSwagger/autoGen.js"
  },

完成之后执行指令

npm run swagger

模板需要根据自己的使用需要修改

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
VSCode是一款非常流行的轻量级的开源代码编辑器,它有许多功能强大的插件,可以满足程序员的各种需求。对于前端开发人员来说,VSCode 是一款非常好用的开发工具。 Vue是一个渐进式JavaScript框架,用于构建用户界面。它非常适合用于构建单页应用程序,具有简单易用、高效灵活和出色的性能等特点。 Swagger是一种用于描述、构建、查找、消费和可视化 RESTful API 的工具集。它提供了一种标准化的方式来定义 API,并生成交互式的 API 文档。Swagger 能够自动生成客户端代码和服务器存根代码,简化了与后端开发团队之间的协作。 在前端开发中,我们可以将这三个工具很好地结合在一起使用。首先,我们可以使用VSCode的Vue插件来提供对Vue项目的智能语法高亮、自动完成和调试等功能的支持,大大提高了编码效率和开发体验。 其次,我们可以使用Swagger来定义和管理前端需要调用的后端接口。通过Swagger,我们可以很方便地编写接口文档,并使用它提供的交互式界面来调试和测试接口。在前端开发过程中,我们可以通过Swagger快速了解后端接口的参数和返回类型等信息,并根据接口文档进行开发,提高了前后端协作的效率和准确性。 最后,我们可以使用VSCode中的插件集成Swagger编辑器,实现直接在编辑器中编辑和查看Swagger文档,避免了频繁切换窗口的麻烦,提高了开发效率。 综上所述,VSCode、Vue和Swagger前端开发中非常有用的工具。通过它们的集成和结合使用,我们能够更高效地进行前端项目的开发和接口管理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

伴之则安博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值