我们通常都有个场景，后端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- 自动生成完毕😄
如果有帮助的话记得去 github.com/wen-haoming… 点个小星星 后面会加入typescript的功能哟！
📝Advanced usage
模板文件除了默认返回字符串模板,还能返回一个对象。
module.exports = {
template:``,
header:`import {request} from './api'`,
mapFileName:['error','yizhangtu','xialaguanli','jidu']
}| 参数名称 | 含义 |
|---|---|
| template | 模板字符串 |
| header | 渲染模板的头部 |
| footer | 渲染模板的尾部 |
| mapFileName | 文件名称渲染映射 |
😘Q&A
1. 默认渲染的文件名称太长了有什么方法呢？
请参考高级用法的mapFileName参数,默认是按照swagger的顺序映射的，如果没有映射到的就采取默认的策略。
