yapi 自动生成api代码

2,250 阅读1分钟

先推荐一个支持 swagger 和 apifox 的在线生成代码的工具 博客地址, 我真的很讨厌复制地址来写请求方法

yapi-generate


github仓库

基于nodejsYAPI转换成前端API代码的转化工具

生成的示例是我们自己公司基于axios二开开发框架,使用时候需要自定义一下

可能会遇到YAPI中定义的一些奇奇怪怪的接口(接口地址、名称等等)或者一些别的异常没有处理,要是遇到了请修改api.ts文件哦

目标

自动构建yapi-js代码

让前端开发更加的关心UI与交互

api为生成前端api的目录,vue文件夹是生成的vue代码片段的文件夹,后续会增加生成到指定目录 ,默认不生成vue代码片段

依赖

package.json

使用

npm install
npm run start

需要

下文需要的项目pid

项目的id

yapi的登录账号和密码

yapi对应项目的pid,在url中也可以看见

例子

const API = require('./api')

interface InterfaceLoginData {
    email: string;
    password: string
}

// YAPI地址
const host: string = 'http://127.0.0.1:3000'
<!-- 项目的id -->
const pid: number = 15

const loginData: InterfaceLoginData =  {
    email: '',
    password: ''
}

// 初始化
const tmp = new API(host, pid, {
    // prefix: '',
    pathFolder: __dirname + '\\api\\',
    space: 2,
    requestInstanceName: 'axios',
    requestImportName: 'axios',
    apiCondition:'查询', //一般需要生成表格文件的都是查询接口,这个是正则匹配的查询接口的文字
    createTemplate:false // 是否生成vue表格代码片段
})

// 登录
tmp.login(loginData).then(() => {
    // 开始转化任务
    tmp.startTask()
})

生成代码示例

import request from '@/utils/request'

/**
 * 查询疫苗课堂表 列表
 * YAPI: https://doc.jsxygkj.com/project/257/interface/api/4079
 * 备注:
 */
export function getAppArticleList(params, other = {}) {
  return request({
    url: `/appArticle/list`,
    method: 'GET',
    params,
    ...other
  })
}

/**
 * 查询预约首页轮播表 列表
 * YAPI: https://doc.jsxygkj.com/project/257/interface/api/4170
 * 备注:
 */
export function getAppSlideshowList(params, other = {}) {
  return request({
    url: `/appSlideshow/list`,
    method: 'GET',
    params,
    ...other
  })
}