使用API自动生成工具优化前端工作流

在工作中，我们的前端工作流一般开始于前后端协商好Api文档之后，再针对这个Api文档做mock模拟数据，然后用做好的mock进行开发，后端开发完毕之后再改一下API数据的BaseURL切换到正式API进行联调；这个方法的主要思路就是开发人员在某个api工具中按要求填好文档，然后导出swagger.json配置文件，再把这个配置文件导入到easy-mock中，再用工具自动生成前端api的js文件以供调用。

1. 使用Api管理平台导出swagger.json文件

一般我们前后端通过各种平台或者工具来管理Api，比如免费的可视化Api管理平台 sosoApi、Yapi等，一般来说这些工具都可以生成swagger.json的Api，我们可以用它来直接生成一个漂亮的可视化Api文档，也可以用它来作为配置文件导入其他工具中，比如Easy-mock；

2. 使用swagger.json导入easy-mock

Mock平台我们可以使用Easy-mock，轻量又简洁，虽然没有Api的分组功能，但平时应付应付不太大的应用、个人应用等场景足够了；Easy-mock官网的服务被不少人直接拿到开发环境用，经常被挤爆，这个情况可以用本地部署来解决这个问题，我们将Api管理平台中导出的swagger.json文件在新建project的时候导入，这样刚刚Api平台中配置的Api就被同步到我们的Easy-mock配置中，easy-mock项目面板上面会有个 Project ID。

3. 使用easy-mock-cli生成js格式Api

有了easy-mock之后一般情况下我们要写前端的api文件了，一般api工具用axios，这里提供一个封装：

我们可以用easy-mock-cli来生成api，模板文件如果不想用原来的模板的话，可以使用我fork之后改写的一个模板easy-mock-api-template，生成的Api文件是这样的：

然后在文件中就可以：

import * as Api from 'api/index.js';

Api.activitySubmit({ activityId: 2 }) // 调用

.then(...)

简单介绍一下配置文件，更复杂的配置要参考原来的文档；

然后npm run create-api就可以在根目录下生成一个api/index.js文件。