search

CntChen / cntchen.github.io

CntChen Blog
https://github.com/CntChen/cntchen.github.io/issues
732 stars 64 forks source link

前后端分离开发模式的 mock 平台预研 #1

Open CntChen opened 7 years ago

CntChen commented 7 years ago

tags: 前后端分离 mock AJAX 工作流 前端

引入

mock（模拟）: 是在项目测试中，对项目外部或不容易获取的对象/接口，用一个虚拟的对象/接口来模拟，以便测试。

背景

前后端分离

前后端分离.png

开发流程

开发流程.png

面临问题

解决方法

接口文档服务器

功能

接口编辑功能

接口查看功能

用法

优点

前端 mock 方法回顾

前端开发过程中，使用 mock 数据来模拟接口的返回，对开发的代码进行业务逻辑测试。解决开发过程中对后台接口的依赖。

硬编码数据

将 mock 数据写在代码中。

示例

// $.ajax({
//   url: ‘https://cntchen.github.io/userInfo’,
//   type: 'GET',
//   success: function(dt) {
    var dt = {
      "isSuccess": true,
      "errMsg": "This is error.",
      "data": {
        "userName": "Cntchen",
        "about": "FE"
      },
    };
    if (dt.isSuccess) {
      render(dt.data);
    } else {
      console.log(dt.errMsg);
    }
//   },
//   fail: function() {}
// });

优点

痛点

请求拦截 & mock 数据

hijack（劫持）接口的网络请求，将请求的返回替换为代码中的 mock 数据。

实例

jquery-mockjax

The jQuery Mockjax Plugin provides a simple and extremely flexible interface for mocking or simulating ajax requests and responses

优点

痛点

本地 mock 服务器

将 mock 数据保存为本地文件。在前端调试的构建流中，用 node 开本地 mock 服务器，请求接口指向本地 mock 服务器，本地 mock 服务器 response mock 文件。

mock 文件

.mock
├── userInfo.json
├── userStars.json
├── blogs.json
└── following.json

接口调用

https://github.com/CntChen/userInfo --> localhost:port/userInfo

优点

痛点

代理服务器

map local

map local.png

map remote

rewrite

优点

痛点

mock 平台

接口文档服务器

使用接口文档服务器来定义接口数据结构

接口服务器.jpg

mock服务器

mock 服务器根据接口文档自动生成 mock 数据，实现了接口文档即API

mock服务器.jpg

优点

缺点

业界实践

公司实践

没有找到公司级别的框架，除了阿里的 RAP。可能原因：

github 开源库

商业化方案

其他实践

API Evangelist(API 布道者)

总结

对于前后端分离开发方式，已经有比较成熟的 mock 平台，主要解决了2个问题：

后记

预研时间比较有限，有一些新的 mock 模式或优秀的 mock 平台没有覆盖到，欢迎补充。 笔者所在公司选用的平台是 RAP，后续会整理一篇 RAP 实践方面的文章。 问题来了：你开发中的 mock 方式是什么？

References

END

ufologist commented 7 years ago

与作者感同身受, 于是开发了 puer-mock 让你可以快速定义后端接口, 生成接口的 mock 数据, 并提供在线接口文档便于前后端协作

为什么你需要一个 mock server

kk8686 commented 7 years ago

https://github.com/kk8686/xoa 我是自主开发的mock服务器，以上是我的示例项目，里面带了构建包，解压即可见到，200行代码不到，还可以进一步解决文档更新变化的问题 不过已经打算改用RAP了

CntChen commented 7 years ago

RAP 我司一直在用，不过中台同事打算换了，因为交互编辑效率太低。 使用文本编辑的方式，然后生成接口文档输出，是比较合适的方式。 @ufologist 的项目就很赞。 另外一个障碍是文本编辑的接口文档，怎么做模块化，版本控制等。

kk8686 commented 7 years ago

@CntChen 噢，我反正也先试试吧，会多参考的，目前项目规模还算小，用哪个都不会有影响，正好有未来做准备

durriyaa commented 6 years ago

这篇文章太有用了，感谢！！！

wangfengcool commented 6 years ago

eolinker

wangfengcool commented 6 years ago

eolinker 了解一下

tianxuzhang commented 6 years ago

http://mockjs.com/

rawbin- commented 5 years ago

大佬 图用什么工具画的

CntChen commented 5 years ago

呵 用 PowerPoint 画的 @rawbin-

wenshan commented 5 years ago

swagger这个文档接口管理工具太大了，提供一套语法普片开发人员不会使用，RAP1 相对稳定，但有点太老，提供功能不够全面，RAP2 阿里妈妈团队node重构，代码质量以及BUG等等一大堆，用起来真是又爱又恨。

kk8686 commented 5 years ago

@wenshan 网易NEI文档平台我觉得很不错

wenshan commented 5 years ago

@kk8686 谢谢，NEI 是没法私有化的，对一些中型公司不可能使用第三方的接口文档等管理工具的，现在着手改造RAP2的