从零开始打造 Mock 平台 - 核心篇

前言

最近一直在捣鼓毕设，准备做的是一个基于前后端开发的Mock平台，前期花了很多时间完成了功能模块的交互。现在进度推到如何设计核心功能，也就是Mock数据的解析。

根据之前的需求设定加上一些思考，用户可以像写json一般轻松完成数据的mock，也可以通过在mock数据模型之上进行构建出复杂的数据模型并在项目中引用。

这看似简单的需求其实需要处理几个不同的模块功能以及交互设计。该如何处理解析不同mock数据并进行构造？前端交互中模拟数据该如何处理？数据构造时如何加载用户设定的数据模型？错误捕捉与处理？

这些都暂时没有一个好的处理结果。因此想要完成核心功能我们需要明确需求，并且通过同类产品是如何处理的，通过阅读它们的源码来学习思想并加入。

明确需求

在明确该功能模块之前我们可以通过模拟流程来明确。

用户 -> 添加数据模型 - > 实时看到构造结构

用户 -> 添加接口 -> 构造json格式返回参数 -> 预览

构造json格式返回参数 不仅包含返回的正文，同时也设定了 header 和 method。

阅读源码

符合大部分需求的开源项目有

  1. mock.js
  2. easy-mock
  3. eolinker
  4. YAPI
  5. DOCCLEVER

MOCK.JS篇

首先我们需要明确现阶段大部门的 Mock 平台或多或少都是受到 Mock.js 的思想或者是其增强版。

我们可以用下面简单的 json 通过 Mock.js来构造数据:


example:

{
    "status|0-1": 0, //接口状态
    "message": "成功", //消息提示
    "data": {
        "counts":"@integer", //统计数量
        "totalSubjectType|1-4": [ //4-10意味着可以随机生成4-10组数据
            {
              "subjectName|regexp": "大数据|机器学习|工具", //主题名
              "subjectType|+1": 1 //类型
            }
        ],
        "data":[
            {
                "name": "@name", //用户名
                "cname":"@cname",
                "email": "@email", //email
                "time": "@datetime" //时间
            }
        ]}
}

返回结果


{
    "status": 0,
    "message": "成功",
    "data": {
        "counts": 2216619884890228,
        "totalSubjectType": [
            {
                "subjectNameregexp": "大数据|机器学习|工具",
                "subjectType": 1
            },
            {
                "subjectNameregexp": "大数据|机器学习|工具",
                "subjectType": 2
            },
            {
                "subjectNameregexp": "大数据|机器学习|工具",
                "subjectType": 3
            },
            {
                "subjectNameregexp": "大数据|机器学习|工具",
                "subjectType": 4
            }
        ],
        "data": [
            {
                "name": "Ruth Thompson",
                "cname": "鲁克",
                "email": "[email protected]",
                "time": "1985-02-06 05:45:21"
            }
        ]
    }
}

而且可以通过其 Mock.Random.extend() 来扩展自定义占位符.


example:

Random.extend({
    weekday: function(date) {
        var weekdays = [‘Sunday‘, ‘Monday‘, ‘Tuesday‘, ‘Wednesday‘, ‘Thursday‘, ‘Friday‘, ‘Saturday‘];
        return this.pick(weekdays);
    },
    sex: function(date) {
        var sexes = [‘男‘, ‘女‘, ‘中性‘, ‘未知‘];
        return this.pick(sexes);
    }
});

console.log(Random.weekday());  // 结果: Saturday
console.log(Mock.mock(‘@weekday‘));  // 结果: Tuesday
console.log(Random.sex());  // 结果: 男
console.log(Mock.mock(‘@sex‘));  // 结果: 未知

来延伸所需进的拓展。

这个可以将自定义数据模型先进行解析，然后通过extend将其加入。

easy-mock

easy-mock 是我参考的主要项目之一，它的UI交互非常符合我的设定，而且作为开源项目可以从它的源码中学到很多。

直接来看它提供接口编辑的页面


{
  data: {
    img: function({
      _req,
      Mock
    }) {
      return _req.body.fileName + ‘_‘ + Mock.mock(‘@image‘)
    }
  }
}

可以从上得之它既可以处理Mock数据模拟也可以处理函数，而且它内部有一套能处理req的内容。

先是在源码中找了一下，找到几个疑似点，但是不确定，还是在本地装好环境,主要是需要按照redis.然后启动服务去打几个断点输出。

根据经验先确定 controllers\mock.js 应该是处理数据模拟的地方。通过浏览源码并分析，最终定位于 297行处的代码


    await redis.lpush(‘mock.count‘, api._id)
    if (jsonpCallback) {
      ctx.type = ‘text/javascript‘
      ctx.body = `${jsonpCallback}(${JSON.stringify(apiData, null, 2)})`
        .replace(/\u2028/g, ‘\\u2028‘)
        .replace(/\u2029/g, ‘\\u2029‘) // JSON parse vs eval fix. https://github.com/rack/rack-contrib/pull/37
    } else {
      ctx.body = apiData
    }

首先是看到最终返回的 apiData 。用过 koa 或者 express 都应该清楚 ctx.body 的含义。然后我在上面写了句 console.log(apiData)。

然后在浏览器端发送请求。看下 node 端输出和浏览器端拿到的数据，基本可以肯定最终输出就是这个。

然后我们往上翻，可以看到这么一段代码:


 const vm = new VM({
        timeout: 1000,
        sandbox: {
          Mock: Mock,
          mode: api.mode,
          template: new Function(`return ${api.mode}`) // eslint-disable-line
        }
      })
      console.log(‘数据验证‘)
      console.log(mode)
      vm.run(‘Mock.mock(new Function("return " + mode)())‘) // 数据验证，检测 setTimeout 等方法
      apiData = vm.run(‘Mock.mock(template())‘) // 解决正则表达式失效的问题

通过查询了解到 VM 是一个沙盒，可以运行不受信任的代码。

大概就能了解 easy-mock 通过 vm 沙盒模式运行 mode 代码解析后返回结果。

核心代码就是 Mock.mock( template ) 这么一句。根据数据模板生成模拟数据。

通过查文档了解 template 是可以直接内部写函数然后执行的。

这样解析的难度大大下降，发现原来并没有特别复杂的，依旧是依赖了 Mock.js 的原生方法。

然后我们可以看到 easy-mock 另一的操作就是可以获取 请求参数_req。也就是可以通过以下代码来根据请求参数返回指定数据。


{
  success: true,
  data: {
    default: "hah",
    _req: function({
      _req
    }) {
      return _req
    },
    name: function({
      _req
    }) {
      return _req.query.name || this.default
    }
  }
}

_req 一看就是从请求参数中获得的对象。

Mock.js是没有这个对象的，我们来找找源码中是哪里注入了这个对象。

还是在 mock.js 这个文件中第234行处找到


   Mock.Handler.function = function (options) {
      const mockUrl = api.url.replace(/{/g, ‘:‘).replace(/}/g, ‘‘) // /api/{user}/{id} => /api/:user/:id
      options.Mock = Mock
      options._req = ctx.request
      options._req.params = util.params(mockUrl, mockURL)
      options._req.cookies = ctx.cookies.get.bind(ctx)
      return options.template.call(options.context.currentContext, options)
    }

通过阅读 MockJS 的源码，了解到 Handler是处理数据模板的地方，打个断点再输出一次可以发现其实是在 Mock.mock(new Function("return " + mode)())‘ 之后传入的参数。

options._req = ctx.request 这句代码告诉了我们所谓的 _req是从哪里来的。

因此这个技术点我们也了解了是怎么做的，那么剩下一个灵活的支持 restful 通过阅读源码发现其实也没怎么处理，只是用 pathToRegexp 进行了一次验证。它先是在 middlewares/index.js 中 的 mockFilter 进行了路径正则。


static mockFilter (ctx, next) {
    console.log(ctx.path)
    const pathNode = pathToRegexp(‘/mock/:projectId(.{24})/:mockURL*‘).exec(ctx.path)
    console.log(pathNode)
    if (!pathNode) ctx.throw(404)
    if (blackProjects.indexOf(pathNode[1]) !== -1) {
      ctx.body = ctx.util.refail(‘接口请求频率太快，已被限制访问‘)
      return
    }
    console.log(‘通过筛选‘)

    ctx.pathNode = {
      projectId: pathNode[1],
      mockURL: ‘/‘ + (pathNode[2] || ‘‘)
    }

    return next()
  }

然后通过存在 redis 里的接口内容再进行了验证匹配。


const { query, body } = ctx.request
    const method = ctx.method.toLowerCase()
    const jsonpCallback = query.jsonp_param_name && (query[query.jsonp_param_name] || ‘callback‘)
    let { projectId, mockURL } = ctx.pathNode
    console.log(‘ctx.pathNode‘, ctx.pathNode)
    const redisKey = ‘project:‘ + projectId
    let apiData, apis, api
    console.log(‘通过URL匹配检验‘)
    apis = await redis.get(redisKey)
    console.log(apis)
    if (apis) {
      apis = JSON.parse(apis)
      console.log(‘pure apis‘, apis)
    } else {
      apis = await MockProxy.find({ project: projectId })
      console.log(‘find projectId‘, apis)
      if (apis[0]) await redis.set(redisKey, JSON.stringify(apis), ‘EX‘, 60 * 30)
    }

    if (apis[0] && apis[0].project.url !== ‘/‘) {
      mockURL = mockURL.replace(apis[0].project.url, ‘‘) || ‘/‘
    }

    api = apis.filter((item) => {
      const url = item.url.replace(/{/g, ‘:‘).replace(/}/g, ‘‘) // /api/{user}/{id} => /api/:user/:id
      return item.method === method && pathToRegexp(url).test(mockURL)
    })[0]
    console.log(‘api‘,api)

    if (!api) ctx.throw(404)

基本不匹配的路径请求都是在 item.method === method && pathToRegexp(url).test(mockURL) 这句代码里被拦截的。

非常优秀的代码。通读下来，加上断点对其思路逻辑学到了很多。

eolinker

它的后端代码是 PHP 的，这就略过不看了。

YAPI

它的核心后端处理代码是在 mockServer.js 里

有了之前的阅读经验很快找到处理 Mock 数据的地方


  let res;

        res = interfaceData.res_body;
        try {
            if (interfaceData.res_body_type === ‘json‘) {
                res = mockExtra(
                    yapi.commons.json_parse(interfaceData.res_body),
                    {
                        query: ctx.request.query,
                        body: ctx.request.body,
                        params: Object.assign({}, ctx.request.query, ctx.request.body)
                    }
                );
                try {
                    res = Mock.mock(res);
                } catch (e) {
                    yapi.commons.log(e, ‘error‘)
                }
            }

非常简单粗暴的处理方法。。。

对增强功能比较好奇在, 于是在 common\mock-extra.js 里找到了 mock(mockJSON, context) 方法。根据参数其实就能了解绑定上下文然后做了一些动作。这里就不展开详细。等之后开发的时候用到再去细读。因为这是做了其自己的增强的Mock功能,而暂时不需要这方面的考虑。

DOClecer

这个项目是国内一个创业团队做的，我也加入了其官方群。虽然还没有用过。不过不妨碍阅读其源码了解思路。不过讲道理这个代码组织风格是挺糟糕的。。。

而且源码中不止一次出现了eval... 于是放弃参考。

写个小模块开心一下

通过阅读以上项目的源码，其实主要是前三个，感觉可以完成自己想要的需求了。那么先写一个小的来作为基础模块。


export const mock = async(ctx: any) => {
  console.log(‘mock‘)
  console.log(ctx)
  console.log(ctx.params)
  const method = ctx.request.method.toLowerCase()
  // let { projectId, mockURL } = ctx.pathNode
  // 获取接口路径内容
  console.log(‘ctx.pathNode‘, ctx.pathNode)
  // 匹配内容是否一致
  console.log(‘验证内容中...‘)
  // 模拟数据
  Mock.Handler.function = function (options: any) {
    console.log(‘start Handle‘)
    options.Mock = Mock
    // 传入 request cookies，方便使用
    options._req = ctx.request
    return options.template.call(options.context.currentContext, options)
  }
  console.log(‘Mock.Handler‘, Mock.Handler.function)
//   const testMode = `{
//     ‘title‘: ‘Syntax Demo‘,
//     ‘string1|1-10‘: ‘★‘,
//     ‘string2|3‘: ‘value‘,
//     ‘number1|+1‘: 100,
//     ‘number2|1-100‘: 100,
//     ‘number3|1-100.1-10‘: 1,
//     ‘number4|123.1-10‘: 1,
//     ‘number5|123.3‘: 1,
//     ‘number6|123.10‘: 1.123,
//     ‘boolean1|1‘: true,
//     ‘boolean2|1-2‘: true,
//     ‘object1|2-4‘: {
//         ‘110000‘: ‘北京市‘,
//         ‘120000‘: ‘天津市‘,
//         ‘130000‘: ‘河北省‘,
//         ‘140000‘: ‘山西省‘
//     },
//     ‘object2|2‘: {
//         ‘310000‘: ‘上海市‘,
//         ‘320000‘: ‘江苏省‘,
//         ‘330000‘: ‘浙江省‘,
//         ‘340000‘: ‘安徽省‘
//     },
//     ‘array1|1‘: [‘AMD‘, ‘CMD‘, ‘KMD‘, ‘UMD‘],
//     ‘array2|1-10‘: [‘Mock.js‘],
//     ‘array3|3‘: [‘Mock.js‘],
//     ‘function‘: function() {
//         return this.title
//     }
// }`
const testMode = `{success :true, data: { default: "hah", _req: function({ _req }) { return _req }, name: function({ _req }) { return _req.query.name || this.default }}}`
  const vm = new VM({
    timeout: 1000,
    sandbox: {
      Mock: Mock,
      mode: testMode,
      template: new Function(`return ${testMode}`)
    }
  })
  vm.run(‘Mock.mock(new Function("return " + mode)())‘) // 数据验证，检测 setTimeout 等方法, 顺便将内部的函数执行了
  // console.log(Mock.Handler.function(new Function(‘return ‘ + testMode)()))
  const apiData = vm.run(‘Mock.mock(template())‘)
  console.log(‘apiData2333‘ , apiData)
  let result
  switch (method) {
    case ‘get‘:
      result = success({‘msg‘: ‘你调用了get方法‘})
      break;
    case ‘post‘:
      result = success({‘msg‘: ‘你调用了post方法‘})
      break;
    case ‘put‘ :
      result = success({‘msg‘: ‘你调用了put方法‘})
      break;
    case ‘patch‘ :
      result = success({‘msg‘: ‘你调用了patch方法‘})
      break;
    case ‘delete‘ :
      result = success({‘msg‘: ‘你调用了delete方法‘})
      break;
    default:
      result = error()
  }
  // console.log(result)
  return ctx.body = result
}

这里调试的遇到一些问题，主要是一开始测试的时候发现 Mock 只将规则的数据模拟出，发现 function 类型的函数都没执行，一开始定位以为是Mock.Handler.function 在 ts 中未执行。于是在里面写了一个输出，发现的确没有。经过各种猜想和测试，发现是模拟mode有问题。

一开始我是这么写的


const testcode = {
    ‘array1|1‘: [‘AMD‘, ‘CMD‘, ‘KMD‘, ‘UMD‘],
    ‘array2|1-10‘: [‘Mock.js‘],
    ‘array3|3‘: [‘Mock.js‘],
    ‘function‘: function() {
        return this.title
    }
}

事实上应该这么写


const testcode = `{
    ‘array1|1‘: [‘AMD‘, ‘CMD‘, ‘KMD‘, ‘UMD‘],
    ‘array2|1-10‘: [‘Mock.js‘],
    ‘array3|3‘: [‘Mock.js‘],
    ‘function‘: function() {
        return this.title
    }
}`

参照 easy-mock 的思路可以实现一个基础的 Mock数据解析器，而且可以根据 koa 的特性同时支持 _req 的一些参数，这里先不加进去。

如何支持自定义的数据模型也有了基本的思路，在之前没有考虑 redis 情况下还是用传统的数据库查询。具体实现等后期再捣鼓出来再写出来。

结尾

通过这两天的学习，总算把一个Mock的核心模块该如何实现的思路给理顺了。

其实无论你是用户自定义数据,比如


{
  ‘user‘: User, // User是用户自定义的数据类型
   ‘string2|3‘: ‘value‘,
   ‘number1|+1‘: 100,
    _req: function({
      _req
    }) {
      return _req
    },
    name: function({
      _req
    }) {
      return _req.query.name || this.default
    }
}

还是 Mock.js 原生的语法，你最终转换过来需要执行的是一样的内容，无非是在其转换前需要做一定的处理。只有搞懂了基本的数据模拟实现，基本上你可以将各个参数都做定制化。比如有的平台会将用户自己编写的函数一起和 json 拼接。其实用的最终核心思路还是一样的。

参考资料

Mock.js使用

mockjs官方文档

原文地址：https://www.cnblogs.com/baimeishaoxia/p/12036693.html

时间： 2024-08-11 16:37:30

从零开始打造 Mock 平台 - 核心篇的相关文章

[转] 前后端分离开发模式的 mock 平台预研

引入 mock(模拟): 是在项目测试中,对项目外部或不容易获取的对象/接口,用一个虚拟的对象/接口来模拟,以便测试. 背景 前后端分离 前后端仅仅通过异步接口(AJAX/JSONP)来编程 前后端都各自有自己的开发流程,构建工具,测试集合 关注点分离,前后端变得相对独立并松耦合 开发流程 后台编写和维护接口文档,在 API 变化时更新接口文档 后台根据接口文档进行接口开发 前端根据接口文档进行开发 开发完成后联调和提交测试 面临问题 没有统一的文档编写规范,导致文档越来越乱,无法维护和阅读 开

ubuntu下搭建android开发环境（四）核心篇安装AndroidStudio、sdk、jdk（by 星空武哥）

转载请标注原创地址:http://blog.csdn.net/lsyz0021/article/details/52215996 所有的软件均在ubuntu 14.04 LTS下测试 ubuntu下搭建android开发环境(一)安装ubuntu系统 ubuntu下搭建android开发环境(二)设置ubuntu的root管理员密码 ubuntu下搭建android开发环境(三)ubuntu安装搜狗输入法 ubuntu下搭建android开发环境(四)核心篇安装AndroidStudio.sdk

珠海有轨电车打造“微信+”平台提升服务水平

近年来轨道交通行业尤其是有轨电车建设在全国各地蓬勃发展,珠海有轨电车作为国内率先开通有轨电车运营的城市,有轨电车运营管理服务也朝着标准化.信息化.精细化的方向发展. 在运营管理信息化方面,珠海城建现代交通公司在有轨电车试运营前期,通过整合各专业业务需求,规划了公司信息化的整体方案,通过统一规划.分步实施的原则进行建设.其中: 1)内部信息化针对运营维护管理的生产主线,通过信息化项目第一期的建设,已上线使用了财务.供应链.维修管理.资产管理.施工调度.运营生产门户.乘客服务综合管理等系统. 2)对

面试 -- 核心篇 -- 中间件（消息)

面试 -- 核心篇 -- 中间件(消息) 消息队列的应用场景 参考网址:消息队列的四种应用场景         消息队列设计思路 (1)异步处理 用户注册时,可以同时将 发送邮件 和 发送短信 功能放到消息队列中实现.可以提高用户响应时间,提高系统吞吐量. (2)应用解耦 用户下单和库存扣账中使用消息,可以防止库存系统出问题后,导致用户下单失败. (3)流量削峰 秒杀活动中,由于瞬间吞吐量很大,那么可以在客户端和业务处理中间加入消息队列,限制人数,丢弃掉过多的用户请求.这样可以防止流量暴增导致服

从零开始打造一个Android 3D立体旋转容器

本文地址,转载请注明 http://blog.csdn.net/mr_immortalz/article/details/51918560 嗯,2个月没有写博客,是要好好反省下,趁着放暑假把这两个月看的东西好好沉淀下.嗯,就立下这个Flag,希望不要自己再打自己脸. 1.概述 回到正题,这次带来的效果,是一个Android 的3D立体旋转的效果. 当然灵感的来源,来自早些时间微博上看到的效果图. 非常酷有木有!作为程序猿我当然要把它加入我的下一个项目中啦! 原效果 我们实现的效果: (为了更加可

从零开始学习jQuery (一) 入门篇

一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何编写jQuery代码以及搭建开发环境. 详细讲解了如何在Visual Studio中配合使用jQuery. 转载请注明子秋出品!博客园首发! 二.前言 首先道个歉! "从零开始学习ASP.NET MVC"系列文章在即将介绍Filter时就没有更新了, 原因就是

【VMCloud云平台进阶篇】Monitor监控（一）

终于到了这一篇,从数据层到应用层都是完全基于QCloud平台优化,完全将微软系应用架构搬到了国内云平台上,也算是国内第一例了. 牛皮吹完,说说正事儿,QCloud的监控虽然看起来非常"丰富": 而且似乎没有统一的监控界面: 但实际上能够支持Windows企业级应用(前几篇构建的应用架构已经属于典型的传统应用,重数据层.重应用层),比如iis上的.net缓冲池.错误连接等,所以能够深入以业务级别来监控还需要专业的监控,而目前来说Windows方面最最专业的肯定不是Zabbix(至少开发成

亚马逊无货源打造爆款核心要素让你轻松赢得老外的心！

无数的亚马逊卖家都希望能够打造出爆款,让产品在官方首页上得以展示,但这不意味着能够得到更多的订单,赚取更多的利润,同时还有可能远超竞争对手,拥有进人壁垒,保护市场占有率上的优势.既然打造亚马逊爆款如此重要.那么需要卖家做些什么呢? 一.亚马逊对于卖家的要求亚马逊作为知名的国际性电商平台,目前不但对申请入驻的新卖家的审核标准越来越高,同时对已人驻的老卖家的考核指标越来越高.非常明显的一个趋势就是要卖家实现品牌化,要卖家精细化运营"小面美"的店铺,卖家要想在亚马逊上打造爆款就必须是迎合这种

实时平台-Flink篇

Flink任务统一通过实时平台统一管理的好处不用多说,这里简单介绍下实时平台-Flink模块的功能以及实现. 主要分为两大块 一.任务管理 任务管理主要包括任务的提交.暂停.下线.重启.历史版本回滚.checkpoint/savepoint管理.监控信息以及任务自动拉起等功能.运行的每个任务信息(AppId,JobId等)都会被保存起来,所以,任务重启的时候可以很轻松的根据自己的业务需求选择从哪个任务的哪个CheckPoint开始启动. 二.任务保障 任务保障主要从三个方面入手 1.Flink应