请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

亿仁网

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 5166|回复: 0

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

[复制链接]
  • TA的每日心情
    奋斗
    2019-3-14 22:24
  • 签到天数: 160 天

    [LV.7]常住居民III

    1074

    主题

    1139

    帖子

    1万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    18046
    发表于 2018-11-25 22:38:35 | 显示全部楼层 |阅读模式

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

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

    一般我们前后端通过各种平台或者工具来管理Api,比如免费的可视化Api管理平台 sosoApiYapi等,一般来说这些工具都可以生成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,这里提供一个封装:

    1. // utils/fetch.js
    2. import axios from 'axios'

    3. const service = axios.create({
    4.   baseURL: 'https://easy-mock.com/project/5bf6a23c92b5d9334494e884',
    5.   timeout: 5000
    6. })

    7. // request拦截器
    8. service.interceptors.request.use( config => {...},  err => {...})

    9. // respone拦截器
    10. service.interceptors.response.use( res => {...},  err => {...})

    11. export default service
    复制代码

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

    1. // api/index.js
    2. import fetch from 'utils/fetch';

    3. /* 活动查询 */
    4. const activityQuery = ({ activityDate }) => fetch({
    5.   method: 'get',
    6.   url: '/activity/query',
    7.   params: { activityDate }
    8. });

    9. /** 活动保存 */
    10. const activitySave = () => fetch({
    11.   method: 'post',
    12.   url: '/activity/save'
    13. });

    14. /** 活动提交 */
    15. const activitySubmit = ({ activityId, content }) => fetch({
    16.   method: 'post',
    17.   url: '/activity/submit',
    18.   data: { activityId, content }
    19. });

    20. export {
    21.   activityQuery,   // 活动查询
    22.   activitySave,    // 活动保存
    23.   activitySubmit   // 活动提交
    24. };
    复制代码

    然后在文件中就可以:

    1. import * as Api from 'api/index.js';
    2. // 调用
    3. Api.activitySubmit({ activityId: 2 })
    4.     .then(...)
    复制代码

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

    1. // .easy-mock.js 配置文件

    2. {
    3.   host: 'http://localhost:8080/',        // easy-mock的源,没有本地部署的话不用写,本地部署则填本地服务地址
    4.   output: "../",                       // 生成 API 的基础目录
    5.   template: "../",                       // 指定模板,这里用本地写的模板
    6.   projects: [                           // 可以有多个模板来源
    7.     {
    8.       "id": "你要创建的 Easy Mock 项目的 id",    // 刚刚记下来的 Project ID
    9.       "name": "api"                         // 生成的output目录下的文件名
    10.     }
    11.   ]
    12. }
    复制代码

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


    造物之前,必先造人。
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|亿仁网 ( 粤ICP备16098737  

    GMT+8, 2020-8-3 16:51 , Processed in 0.169215 second(s), 26 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表