教你如何一键批量生成前端api方法
我们通常都有个场景,后端swagger文档接口里有上百个,有时候我们需要一个一个复制到自己的前端项目里面,效率极其低效且容易出错,所以本文教你如何基于swagger编写前端api模板来批量生成!
效果图
✨ Features
- 简单易用,一键转化
- 模板支持,易用扩展
- 注释生成, 容易辨识
???? Install
npm install create-sw-api -g npm install create-sw-api -D
???? Command
$ sw-api Usage: sw-api [options] [command] Options: -V, --version output the version number -h, --help display help for command Commands: url resolve url path resolve path help [command] display help for command Explames: sw-api url <api-docs-url> sw-api path <file-path>
???? Usage
模板变量名 | 含义 |
---|---|
apiname | 最后生成的api名称 |
params | 解构出来的参数对象 |
method | 方法名称比如get,post等 |
url | url |
query | get的query参数放在对象里面 |
body | 如果该方法没有body参数则渲染一个空对象 (暂时没想到一个好方案) |
// example // tpl.js module.exports = ` export const {{apiname}} = ({{params}}) => request('{{url}}', {{{query}}}, { method: '{{method}}', body: {{body}}, }); `
???? step
- 可以全局也可以是局部下载。
npm install create-sw-api -g // 直接输入 sw-api 唤醒命令 npm install create-sw-api -D // 如果安装在项目需要使用 npx sw-api 这个命令驱动
- 准备模版文件,根据你的业务不一样,编写自己的模板代码,比如我现在创建一个tpl.js
// example // tpl.js module.exports = ` export const {{apiname}} = ({{params}}) => request('{{url}}', {{{query}}}, { method: '{{method}}', body: {{body}}, }); `
- 谷歌浏览器打开swagger文档地址, 打开调试模式的Network面板,查看其中api-docs名称的地址,并且复制下来
- 输入命令sw-api url api-docs名称的地址
sw-api url <api-docs> //全局安装 sw-api url <api-docs> //局部安装 npx命令 or package.json的script命令唤醒
- 然后命令行提示输入刚刚我们新创建的模板文件
please enter your func-api template name ? tpl
- 自动生成完毕????
????Advanced usage
模板文件除了默认返回字符串模板,还能返回一个对象。
module.exports = { template:``, header:`import {request} from './api'`, mapFileName:['error','yizhangtu','xialaguanli','jidu'] }
参数名称 | 含义 |
---|---|
template | 模板字符串 |
header | 渲染模板的头部 |
footer | 渲染模板的尾部 |
mapFileName | 文件名称渲染映射 |
????Q&A
1. 默认渲染的文件名称太长了有什么方法呢?
请参考高级用法的mapFileName参数,默认是按照swagger的顺序映射的,如果没有映射到的就采取默认的策略。