使用 API 自动生成工具优化前端工作流
文章目录
- 1. 使用Api管理平台导出swagger.json文件
- 2. 使用swagger.json导入easy-mock
- 3. 使用easy-mock-cli生成js格式Api
在工作中,我们的前端工作流一般开始于前后端协商好Api文档之后,再针对这个Api文档做mock模拟数据,然后用做好的mock进行开发,后端开发完毕之后再改一下API数据的BaseURL切换到正式API进行联调;如下
本文介绍的一个工具(或者说方法),来将这个工作流优化一下,也是我平时工作正在用的方法,当做自己的笔记,也跟大家一起分享一下~
这个方法的主要思路就是开发人员在某个api工具中按要求填好文档,然后导出swagger.json配置文件,再把这个配置文件导入到easy-mock中,再用工具自动生成前端api的js文件以供调用。
本文中所使用的工具:sosoApi、Easy-mock、Swagger、Easy-mock-api-template、axios
感兴趣的同学可以加文末的微信群,一起讨论吧~
1. 使用Api管理平台导出swagger.json文件
一般我们前后端通过各种平台或者工具来管理Api,比如免费的可视化Api管理平台 sosoApi、Yapi等,一般来说这些工具都可以生成swagger.json
的Api,我们可以用它来直接生成一个漂亮的可视化Api文档,也可以用它来作为配置文件导入其他工具中,比如Easy-mock;
比如在sosoApi中就可以导出为swagger文档(swagger.json
):
我们先导出一个swagger.json
备用;
2. 使用swagger.json导入easy-mock
Mock平台我们可以使用Easy-mock,轻量又简洁,虽然没有Api的分组功能,但平时应付应付不太大的应用、个人应用等场景足够了;Easy-mock官网的服务被不少人直接拿到开发环境用,经常被挤爆,这个情况可以用本地部署来解决这个问题,参考 windows本地安装部署 Easy Mock 。
我们将Api管理平台中导出的swagger.json
文件在新建project的时候导入:
这样刚刚Api平台中配置的Api就被同步到我们的Easy-mock配置中了,比如sosoApi的示例项目导出的结果就是:
这时我们就可以用它来进行数据mock了,怎么样,是不是很轻松~
easy-mock项目面板上面会有个 Project ID,这个记下来后面要用;
3. 使用easy-mock-cli生成js格式Api
有了easy-mock之后一般情况下我们要写前端的api文件了,一般api工具用axios,这里提供一个封装:
// utils/fetch.js
import axios from 'axios'const service = axios.create({baseURL: 'https://easy-mock.com/project/5bf6a23c92b5d9334494e884',timeout: 5000
})// request拦截器
service.interceptors.request.use( config => {...}, err => {...})// respone拦截器
service.interceptors.response.use( res => {...}, err => {...})export default service
我们可以用easy-mock-cli来生成api,模板文件如果不想用原来的模板的话,可以使用我fork之后改写的一个模板easy-mock-api-template,生成的Api文件是这样的:
// api/index.js
import fetch from 'utils/fetch';/* 活动查询 */
const activityQuery = ({ activityDate }) => fetch({method: 'get',url: '/activity/query',params: { activityDate }
});/** 活动保存 */
const activitySave = () => fetch({method: 'post',url: '/activity/save'
});/** 活动提交 */
const activitySubmit = ({ activityId, content }) => fetch({method: 'post',url: '/activity/submit',data: { activityId, content }
});export {activityQuery, // 活动查询activitySave, // 活动保存activitySubmit // 活动提交
};
然后在文件中就可以:
import * as Api from 'api/index.js';// 调用
Api.activitySubmit({ activityId: 2 }).then(...)
简单介绍一下配置文件,更复杂的配置要参考原来的文档;
// .easy-mock.js 配置文件{host: 'http://localhost:8080/', // easy-mock的源,没有本地部署的话不用写,本地部署则填本地服务地址output: "../", // 生成 API 的基础目录template: "../", // 指定模板,这里用本地写的模板projects: [ // 可以有多个模板来源{"id": "你要创建的 Easy Mock 项目的 id", // 刚刚记下来的 Project ID"name": "api" // 生成的output目录下的文件名}]
}
然后
npm run create-api
就可以在根目录下生成一个api/index.js
文件了~
网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~
参考:
- 用swagger.json自动生成axios api访问代码 - 简书
- Easy-mock-cli/README.md
推介阅读:
- windows本地安装部署 Easy Mock - 掘金
PS:欢迎大家关注我的公众号【前端下午茶】,一起加油吧~
另外可以加入「前端下午茶交流群」微信群,长按识别下面二维码即可加我好友,备注加群,我拉你入群~
使用 API 自动生成工具优化前端工作流相关推荐
- 用java写ods系统_基于数据库的代码自动生成工具,生成JavaBean、生成数据库文档、生成前后端代码等(TableGo v7.0.0版)...
TableGo是基于数据库的代码自动生成工具,低代码编程技术的实现,可以零代码自动生成SpringBoot项目工程.生成JavaBean.生成前后端分离的CRUD代码.生成MyBaits的Mapper ...
- java生成iso9660工具_基于数据库的代码自动生成工具,生成JavaBean、生成数据库文档、生成前后端代码等(TableGo v7.0.0版)...
TableGo_20210212 v7.0.0 正式版发布,此次版本更新如下: 1.新增对DB2数据库的支持 2.新增按字段生成文件,支持把字段.JSON.XML数据转换成任何代码 3.新增大量新的自 ...
- freemarker mysql 生成bean_基于数据库的代码自动生成工具,生成JavaBean、生成数据库文档、生成前后端代码等(v6.6.6版)...
TableGo_20191026 v6.6.6 正式发布,此次版本更新如下: 1.新增通过自定义模板生成Word文档的功能,可以使用FreeMarker模板生成自定义格式的数据库文档. 2.新增 Sw ...
- 基于数据库的代码自动生成工具,生成JavaBean、生成数据库文档、生成前后端代码等(v6.9.0版)
TableGo_20200520 v6.9.0 正式版发布,此次版本更新如下: 1.新增对JDK9及以上版本Java环境的支持 2.生成JavaBean更名为生 ...
- 基于数据库的代码自动生成工具,生成JavaBean、生成数据库文档、生成前后端代码等(TableGo v7.4.0版)
TableGo_20210921 v7.4.0 正式版发布,此次版本累计更新如下: 1.新增企业或个人的简单定制版本,为企业和个人提供软实力的增值 2.新增导入 ...
- mysql javabean 工具_基于数据库的代码自动生成工具,生成JavaBean、生成数据库文档、生成前后端代码等(v6.9.0版)...
TableGo_20200520 v6.9.0 正式版发布,此次版本更新如下: 1.新增对JDK9及以上版本Java环境的支持 2.生成JavaBean更名为生成数据模型并且提供了C#.C++.Gol ...
- 自动产生fsm代码的工具_代码自动生成工具
构建支持多种数据库类型的代码自动生成工具 背景: 一般的业务代码中写来写去,无外乎是先建好model,然后针对这个model做些CRUD的操作.(主要针对单表的业务操作)针对于数据库dao.mappe ...
- 应用在核电站DCS系统的代码自动生成工具ModelCoder
对标航空航天领域,核电新型号作为典型复杂系统在未来的发展趋势和任务变得十分明确,即正规化.标准化地应用MBSE从概念设计.初步设计.持续贯穿至详细设计.施工.调试.运维.退役的全生命周期各阶段,开发出 ...
- 国产自主可控的代码自动生成工具SkyEye
传统的系统开发过程,都是由工程师根据项目需求书来编写代码完成系统的开发,但随着功能的扩充和版本的迭代,系统中庞大的代码量很难确保正确无误,给后期测试和仿真带来了很大的压力和成本,在航空航天.卫星系统. ...
最新文章
- jQuery属性操作
- flex属性值----弹性盒子布局
- 《吃土》全书笔记整理
- 【原理+实战+视频+源码】docker映射端口教程
- 力扣90. 子集 II(JavaScript)
- 线程的生命周期图(附多线程)
- MTK:UART串口收发数据
- R绘图 第九篇:绘制散点图和气泡图(ggplot2)
- java gson解析JSON
- 关于等价鞅、反等价鞅、剀利公式、赌徒输光定理
- Air202学习 四 (模块mqtt通信控制继电器)
- c语言解一元二次方程虚根oj,OJ 1040 Problem J 求一元二次方程的根
- JDK8中String的intern()方法详细解读【内存图解+多种例子+1.1w字长文】
- CRM项目(idea)-1-环境搭建.
- 六自由度工业机器人 机械手臂 3D2D结构图纸 工业机器人
- java pdf输出图片_Java PDF转换成图片并输出给前台展示
- 1]解决java.util.concurrent.RejectedExecutionException
- 如何使用WordPress建立一个博客、网站和论坛
- 数据挖掘期末复习--上篇
- 网中网B2C分销商城系统有哪些优势?实现哪些功能?
热门文章
- android仿微信识别相册中二维码图片信息
- 研究生SLAM论文阅读汇总(一)
- Vue2 开发必备的 VSCode 插件
- 小程序消息推送配置 Token校验失败,请检查确认
- 在Microsoft Excel中如何快速将上下两行数据合并为一行?
- CodeSmith for MySQL template
- html怎么使图片自动填充,CSS怎么将img图片填满父容器div自适应容器大小
- WPS表格------函数使用入门(善用帮助文档)
- batis.binding.BindingException: Invalid bound statement (not found)
- 74HC595驱动八段共阴数码管工程文件