当前位置:首页 » 《资源分享》 » 正文

基于swagger自动生成前端接口

9 人参与  2024年11月26日 18:01  分类 : 《资源分享》  评论

点击全文阅读


官网: SWAGGER2 | vue-helper

视频教程: 选你所想,一键触达-龙之娇子1021-vue-helper-哔哩哔哩视频

问题​

联调好痛苦,老费时间?我有接口命名困难症,接口命名想半天?接口请求方式GET、POST老搞错?接口字段老拼错?接口参数老不对,老调不通?

来试试这个接口自动生成功能,一招帮你搞定。

使用​

1、配置接口地址​

目录下的helper.json为vue-helper的工程配置文件,用于配置本工程相关功能的配置项。
 

config

① path下面的api为生成接口放置目录。
如果api为目录,则生成接口会放置在第一级接口路径下。
如果api为文件,如 src/api/api.js,则所有生成的接口会全部生成在文件里。
② path下面的request为接口请求文件路径地址。
③ api为放置swagger地址的位置,支持放置多个。

配置完成后,即可使用api相关的功能。

提示

为防止打扰用户,helper.json只有在申请试用,重启vscode才会生成。

api-trail

2、单个接口自动生成​

在需要引入的地方直接输入get/post/delete/put等请求方式开头的关键字,vue-helper会自动提示相关接口信息。
插件会自动生成接口、生成导入、生成接口使用以及相关参数。

single

接口命名规则:​

请求方式 + 接口最后一段路径为接口名称。如下面的生成接口为 postSendSms
如果存在重复的接口的话,则会往前加一级路径。则接口为 postSmsTemplateSendSms
以此类推

api-demo

如果存在路径变量,则已by连接,那么下面接口为 getByConfigId

api-demo2

3、接口一键生成​

点击api下的一键生成,就可以一次性生成所有接口。
生成所有接口后,在需要引入的地方同样可以和单个接口生成的方式进行接口引入。

api-all

4、字段自提示​

swagger接口中的字段可直接进行提示。 windows上系统触发建议快捷键为 [ ctrl + i ]

api-field

5、更新接口​

如果引入后,后端api内容发生变化,可以通过更新按钮,同步后端接口。

api-update

6、api地址访问​

当想查看api的详细接口信息时,可以直接打开swagger地址.

api-visit

7、配置api​

当要配置api地址时,可直接点击设置按钮即可打开配置文件。

api-setting


点击全文阅读


本文链接:http://zhangshiyu.com/post/192453.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1