在工做中,咱们的前端工做流通常开始于先后端协商好Api文档以后,再针对这个Api文档作mock模拟数据,而后用作好的mock进行开发,后端开发完毕以后再改一下API数据的BaseURL切换到正式API进行联调;以下前端
本文介绍的一个工具(或者说方法),来将这个工做流优化一下,也是我平时工做正在用的方法,当作本身的笔记,也跟你们一块儿分享一下~ios
这个方法的主要思路就是开发人员在某个api工具中按要求填好文档,而后导出swagger.json配置文件,再把这个配置文件导入到easy-mock中,再用工具自动生成前端api的js文件以供调用。git
本文中所使用的工具:sosoApi、Easy-mock、Swagger、Easy-mock-api-template、axiosgithub
感兴趣的同窗能够加文末的微信群,一块儿讨论吧~npm
通常咱们先后端经过各类平台或者工具来管理Api,好比免费的可视化Api管理平台 sosoApi、Yapi等,通常来讲这些工具均可以生成swagger.json
的Api,咱们能够用它来直接生成一个漂亮的可视化Api文档,也能够用它来做为配置文件导入其余工具中,好比Easy-mock;json
好比在sosoApi中就能够导出为swagger文档(swagger.json
):axios
咱们先导出一个swagger.json
备用;windows
Mock平台咱们可使用Easy-mock,轻量又简洁,虽然没有Api的分组功能,但平时应付应付不太大的应用、我的应用等场景足够了;Easy-mock官网的服务被很多人直接拿到开发环境用,常常被挤爆,这个状况能够用本地部署来解决这个问题,参考 windows本地安装部署 Easy Mock 。后端
咱们将Api管理平台中导出的swagger.json
文件在新建project的时候导入:api
这样刚刚Api平台中配置的Api就被同步到咱们的Easy-mock配置中了,好比sosoApi的示例项目导出的结果就是:
这时咱们就能够用它来进行数据mock了,怎么样,是否是很轻松~
easy-mock项目面板上面会有个 Project ID,这个记下来后面要用;
有了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
文件了~
网上的帖子大多深浅不一,甚至有些先后矛盾,在下的文章都是学习过程当中的总结,若是发现错误,欢迎留言指出~
参考:
推介阅读:
PS:欢迎你们关注个人公众号【前端下午茶】,一块儿加油吧~
另外能够加入「前端下午茶交流群」微信群,长按识别下面二维码便可加我好友,备注加群,我拉你入群~