前端开发的接口管理工具DOClever使用教程
《一统江湖的大前端》系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新。如果你对前端的理解还是写写页面绑绑事件,那你真的是有点OUT了,前端能做的事情已经太多了,
手机app开发
,桌面应用开发
,用于神经网络人工智能的库
,页面游戏
,数据可视化
, 甚至嵌入式开发
,什么火就搞什么,活脱脱一个蹭热点小能手。如果你也觉得前端的日常开发有些枯燥,不妨一起来看看前端的另一番模样。
Mock服务器 + Excel怎么了
如果你的开发进度还在被后端开发人员牵着鼻子走,请参考《一统江湖的大前端(2)—— Mock.js+Node.js如何与后端潇洒分手》,优化自己的开发工作流
有了Mock服务器和Excel的文档说明后,相信大家的沟通效率会比以前提升很多,但仍然被沟通占据着绝大部分开发时间,常常遇到的情况会有:
-
没有注释信息,字段不宜对齐
Mock服务器返回的只有数据,没有注释信息,即便后端开发人员有心把查到的信息重组为你需要的字段,但仍有可能因为无法对号入座而作罢。 -
接口数量增加后难以管理
简易的Mock服务器无法提供相应的接口文档,随着接口数量的增加,分分钟乱成一锅粥,总不能每次查个接口都是跑去翻Mock服务器的源代码然后看注释吧 -
无测试支持
MockJs只生成模拟数据,并无任何对自动化测试的支持 -
满怀热情写了API文档,But没人看
程序员大多没有Excel习惯,而且大家都很忙,忙到即便你提供了Mock接口以及相关的API说明,他们还是会再问你一遍关于接口的信息程序员习惯以自己熟悉的方式进行工作,而且一般默认这种效率最高。 -
Excel版本的API文档方便交流,但不易更新
一对一联调时候还好,但如果项目组内协作人员较多时,麻烦就来了,每当你更新或是增加接口信息时,就要重新给所有相关人员发送一次新的Excel文件,很不方便。
DOClever——前端开发的接口管理工具
Java开发人员有Swagger
,无严格保密性要求的可以尝试阿里的RAP
,都是专业且强大的接口管理工具。当我们仅希望在内网中使用,或仅仅处于优化个人工作流的目的时,强烈推荐这块开源接口管理软件——DOClever
,DOClever
非常适合前端人员使用,VUE+express+mongodb
编写,纯前端技术栈,能够实现团队管理
,接口管理
,文档管理
,自动化测试
等功能,甚至可以根据接口返回数据自动生成接口文档的结构,方便智能。
无论你当前在做的项目是否有管理好相关的接口文档,作为开发人员,你都应该有自己的方式来管理好所有出自你手的接口
MockJs尚未失宠
- 特殊场景
DOClever
自带的Mock工具可以按参数类型生成虚拟数据,对于开发人员交流已经够用了,但如果前台需要多条模式相同
的数据时,就需要用到上一篇博客中提到的MockJs来生成,(DOClever
自带的Mock语法貌似尚未支持循环生成雷同数据,除了自己修改源代码外,如果还有其他更方便的实现方法也请不吝赐教~),DOClever
中可以设置多台Mock服务器的url地址,常见的协作需求中,两套数据基本够用了,一套方便快捷,配合核对接口,另一套需要自定义开发,配合实现各种前端展示需求。
DOClever的安装
安装需要的东西真的比较多,尤其是对于非前端人员而言。
- 1.安装nodejs
上一篇博客的附件中有nodejs V8.9
的安装包 - 2.安装mongodb
mongodb的安装可以参考Windows环境下如何安装mongodb - 3.安装mongodb可视化管理工具(个人推荐robot3T)[可选]
- 4.安装DOClever
由于是开源项目,直接在github上下载DOClever,使用方法主页有很详细的说明,按步骤来部署就可以了。
自己部署的图:
开始DOCLever
- 可视化的管理API
- 界面左侧树形图式管理所有相关API,方便查找
- 可视化界面直接填写API相关信息
- 参数化填写request请求体
- 参数化编写响应数据,支持无限层次嵌套
- 方便的Mock数据获取
- 直接选择DOClever自带的mock服务器,可以方便地与协作人员沟通接口字段和结构
- 选择自己搭建的Mock服务器,可以方便地获得更多模式相同的响应数据
- 自动化接口测试
- 简易的自动化测试语法
- 自动化测试集计划任务
- 定时跑任务自动化测试用例集
- 定时跑任务自动化测试用例集
后记
别人开发的代码你可以不管,但出自你手的代码, 愿它们都是精品,易于查询,易于管理。
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Java常用并发容器总结(四)
- Js常见点击跳转方式
- Js获取域名地址并截取
- 引用lib-flexible导致第三方Ui库缩小
- Spring 定时任务框架详解(1)——快速入门
- Css实现圆形动态波浪
- Css实现一行或多行溢出显示省略号
- Spring 定时任务框架详解(3)——源码分析
- html2cavas实现生成图片
- ElasticSearch学习笔记(1)——简介
- ElasticSearch学习笔记(2)——插件安装和集群搭建
- Echartsjs图表的使用
- ElasticSearch学习笔记(3)——基础概念
- jQueryWEUI解决input框调起的软键盘和选择器重叠的问题
- (31)字符处理命令