摘要：在工作中，我们的前端工作流一般开始于前后端协商好文档之后，再针对这个文档做模拟数据，然后用做好的进行开发，后端开发完毕之后再改一下数据的切换到正式进行联调如下本文介绍的一个工具或者说方法，来将这个工作流优化一下，也是我平时工作正在用的方法，
在工作中，我们的前端工作流一般开始于前后端协商好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-mockMock平台我们可以使用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：欢迎大家关注我的公众号【前端下午茶】，一起加油吧~
另外可以加入「前端下午茶交流群」微信群，长按识别下面二维码即可加我好友，备注加群，我拉你入群～
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/108818.html
摘要：其标准为前身是，提供强大的在线编辑功能，包括语法高亮错误提示自动完成实时预览，并且支持用户以格式撰写导入导出转换文档。 团队内部RestAPI开发采用设计驱动开发的模式，即使用API设计文档解耦前端和后端的开发过程，双方只在联调与测试时耦合。在实际开发和与前端合作的过程中，受限于众多因素的影响，开发效率还有进一步提高的空间。本文的目的是优化工具链支持，减少一部分重复和枯燥的劳动。 现状...
摘要：前端每周清单第期与模式变迁与优化界面生成作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 showImg(https://segmentfault.com/img/remote/1460000013279448); 前端每周清单第 51 期: React Context A...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
摘要：如果你的运行缓慢，你可以考虑是否能优化请求，减少对的操作，尽量少的操，或者牺牲其它的来换取性能。在认识描述这些核心元素的过程中，我们也会分享一些当我们构建的时候遵守的一些经验规则，一个应用应该保持健壮和高性能来维持竞争力。 一个开源的前端错误收集工具 frontend-tracker，你值得收藏~ 蒲公英团队最近开发了一款前端错误收集工具，名叫 frontend-tracker ，这款...
阅读 2365·2023-04-25 20:05
阅读 2709·2023-04-25 17:56
阅读 2027·2021-10-14 09:49
阅读 2506·2019-08-29 15:10
阅读 2787·2019-08-29 12:25
阅读 279·2019-08-28 18:23
阅读 570·2019-08-26 13:26
阅读 1251·2019-08-23 18:21
