先推荐一个支持 swagger 和 apifox 的在线生成代码的工具 博客地址, 我真的很讨厌复制地址来写请求方法
yapi-generate
基于
nodejs
的YAPI
转换成前端API
代码的转化工具
生成的示例是我们自己公司基于axios
二开开发框架,使用时候需要自定义一下
可能会遇到YAPI中定义的一些奇奇怪怪的接口(接口地址、名称等等)或者一些别的异常没有处理,要是遇到了请修改api.ts文件哦
目标
自动构建
yapi
-js
代码
让前端开发更加的关心UI
与交互
api为生成前端api的目录,vue文件夹是生成的vue代码片段的文件夹,后续会增加生成到指定目录 ,默认不生成vue代码片段
依赖
package.json
使用
npm install
npm run start
需要
下文需要的项目pid
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
})
}