当前位置: 首页 > news >正文

使用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文件了~


网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~

参考:

  1. 用swagger.json自动生成axios api访问代码 - 简书
  2. Easy-mock-cli/README.md

推介阅读:

  1. windows本地安装部署 Easy Mock - 掘金

相关文章:

  • dos基本命令
  • vue双向绑定原理及实现
  • Ubuntu
  • 阿里五年Java程序员的总结,献给还在迷茫中的你!
  • log4net配置
  • vue-cli在webpack的配置文件探究
  • oracle重命名数据库
  • C语言变长数组之剖析
  • pt-tools系列:pt-online-schema-change 最佳实践
  • 项目--HTML Canvas 和 jQuery遍历
  • 美团即时物流的分布式系统架构设计
  • java虚拟机运行机制
  • 20181124ACL的高级特性mask
  • ios的@property属性和@synthesize属性(转)
  • 如何在无头模式下运行WebDriver ?
  • ES6指北【2】—— 箭头函数
  • 2017年终总结、随想
  • CSS 提示工具(Tooltip)
  • PhantomJS 安装
  • Spring框架之我见(三)——IOC、AOP
  • Synchronized 关键字使用、底层原理、JDK1.6 之后的底层优化以及 和ReenTrantLock 的对比...
  • 对话 CTO〡听神策数据 CTO 曹犟描绘数据分析行业的无限可能
  • 缓存与缓冲
  • 基于HAProxy的高性能缓存服务器nuster
  • 前端临床手札——文件上传
  • 区块链技术特点之去中心化特性
  • 听说你叫Java(二)–Servlet请求
  • 吐槽Javascript系列二:数组中的splice和slice方法
  • 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
  • 中文输入法与React文本输入框的问题与解决方案
  • 交换综合实验一
  • 教程:使用iPhone相机和openCV来完成3D重建(第一部分) ...
  • (14)目标检测_SSD训练代码基于pytorch搭建代码
  • (JSP)EL——优化登录界面,获取对象,获取数据
  • (pojstep1.1.2)2654(直叙式模拟)
  • (论文阅读笔记)Network planning with deep reinforcement learning
  • (排序详解之 堆排序)
  • (四)汇编语言——简单程序
  • (四)图像的%2线性拉伸
  • (算法二)滑动窗口
  • (转)EOS中账户、钱包和密钥的关系
  • (轉貼) 資訊相關科系畢業的學生,未來會是什麼樣子?(Misc)
  • ***监测系统的构建(chkrootkit )
  • .NET Core实战项目之CMS 第十二章 开发篇-Dapper封装CURD及仓储代码生成器实现
  • .NET gRPC 和RESTful简单对比
  • .NET 实现 NTFS 文件系统的硬链接 mklink /J(Junction)
  • .NET正则基础之——正则委托
  • .NET中GET与SET的用法
  • .考试倒计时43天!来提分啦!
  • :O)修改linux硬件时间
  • :中兴通讯为何成功
  • @Transactional注解下,循环取序列的值,但得到的值都相同的问题
  • @Validated和@Valid校验参数区别
  • [14]内置对象
  • [C#]C# winform实现imagecaption图像生成描述图文描述生成