概述

  • 首先啦,我不认识mock.js的作者,带着需求找到mock.js让我觉得很惊艳。
  • 相对于其他同类的框架的实现,mock.js超出了我的意料。
    • 基于 数据模板 生成模拟数据。
    • 基于 HTML模板 生成模拟数据。
    • 拦截并模拟 ajax 请求。
  • 是的,mock.js只做上述的几件事,但做的足够出色。

解决的问题

开发时,后端还没完成数据输出,前端只好写静态模拟数据。

  • 数据太长了,将数据写在js文件里,完成后挨个改url。
  • 某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。
  • 想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据。
  • 特殊的格式,例如IP,随机数,图片,地址,需要去收集。
  • 超烂的破网速…

使用过程中遇到的问题及相应解决方案

1.项目基于seajs开发,所以不能根据 URL 中是否含有参数 mock 动态加载数据模板。

  • 代码示例:

    ~location.search.indexOf('mock') && require('mock/index');
  • 背景:为了灵活控制是否启用模拟数据我们会在url上新增mock参数,有mock就会加载数据模板,没有就不会加载,但是上面代码没有达到这一目的,不管url上有无mock参数,都会加载数据模板
  • 原因:因为seajs内部的预加载机制,只要代码里进行了require某个文件,它都会解析文件依赖关系,从而下载这些文件;
  • 解决办法:
    var module = ['page/index/index'];
    if (~location.search.indexOf('mock'))
    module.push('mock/index'); seajs.use("business/router", function (router) {
    router.ready(function (params, index) {
    index.init(params);
    }, module);
    });

    这里,我们在html页面入口部分,根据url是否含有mock来动态选择需要异步加载的模块,从而解决了这一问题。

2.一个项目cgi名称和模块名相同,不同接口使用method来区分,通过method无法区分不同接口和拦截ajax请求。

  • 代码示例:

    Mock.mock(/getInviteList/, {
    result: 0,
    errmsg: 'ok',
    data: {
    'list|0-10': [{
    'icon': '@image',
    'nick': '@name',
    'inviteTime': '@date'
    }],
    'hasMore|0-1': 1,
    'invitePeopleNum|1-50': 20,
    'getAwardNum|10-600': 12,
    'hasAward|0-1': 1
    }
    }); $.ajax({
    url: 'http://gift.gamecenter.qq.com/cgi-bin/gc_invite_chest_box_fcgi',
    data: {
    module: "invite_chest_box",
    method: "GetInviteList",
    param: {
    "tt": "2",
    "appId": "1000001034",
    "pageNo": 0,
    "pageCount": 10
    }
    },
    cache: false,
    dataType: 'json',
    success: function (json) { //成功之后回调
    console.log(json)
    }
    });

    Mock.mock的第一个参数为匹配的规则,可以是字符串,也可以是正则,这里我们用cgi的method来匹配当前cgi,但是可惜的是没有匹配到

  • 原因:

    查看源码我们发现,当匹配规则为字符串时,匹配规则必须要与请求url完全一致才行,当匹配规则为正则时,需要在请求url上检查是否存在满足的匹配,所以不管是字符串匹配还是正则匹配,都只是在url上查找匹配,并不能匹配data内部的参数(比如method:GetInviteList)

  • 解决方案:

这里将options里面的data对象也都纳入检查匹配的范畴,都是将两处的匹配检查都改成了正则匹配,都是忽略字母大小写,这样,我们就可以根据data内部的任意参数来匹配不同的cgi请求,大大提高了匹配的灵活性。

查看响应的结果

{
"result": 0,
"errmsg": "ok",
"data": {
"list": [
{
"icon": "http://dummyimage.com/120x600",
"nick": "Charles Hernandez",
"inviteTime": "1988-09-26"
},
{
"icon": "http://dummyimage.com/120x60",
"nick": "Linda Garcia",
"inviteTime": "1991-09-14"
}
],
"hasMore": 0,
"invitePeopleNum": 45,
"getAwardNum": 511,
"hasAward": 0
}
}

mock.js-无需等待,让前端独立于后端进行开发的更多相关文章

  1. 让前端独立于后端进行开发,模拟数据生成器Mock.js

    让前端独立于后端进行开发,模拟数据生成器Mock.jsMock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. Home · nuysoft/Mock Wiki ...

  2. mock.js-无需等待,随机产生数据,让前端独立于后端进行开发

    mock.js所做的 基于 数据模板 生成模拟数据. 基于 HTML模板 生成模拟数据. 拦截并模拟 ajax 请求. Mock.js官方网址:http://mockjs.com/ 1.Mock.js ...

  3. 让前端攻城师独立于后端进行开发: Mock.js

    一.Mock.js是什么? 目前的大部分公司的项目都是采用的前后端分离, 后端接口的开发和前端人员是同时进行的. 那么这个时候就会存在一个问题, 在页面需要使用大量数据进行渲染生成前, 后端开发人员的 ...

  4. 前端开发:mock.js的简单应用(生成随机数据,拦截 Ajax 请求)

    摘要 在前端开发过程中,后端接口还没有完全开发完成时,前端开发人员就需要学会自己模拟后端接口数据,更快更好的完成开发任务.模拟后端接口数据的js库有很多,今天就简单就简单的分享下mock.js在前端开 ...

  5. 使用 mock.js 让前端开发与后端独立

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. 玩转【Mock.js】,前端也能跑的很溜

    现在开发已经是前后端分离了,前端和后端可以同时进行开发,互不影响,但是有些时候后端开发的接口慢于前端,导致前端需要等待后端的接口完成才能完成前后端对接,为了解决这个痛点,出现了模拟接口数据的方案,目前 ...

  7. Mock.js 与 fiddler 前端模拟数据与拦截请求

    最近 工作需要  接触了Mock.js. Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: 根据数据模板生成模拟数据 模拟 Ajax ...

  8. Mock.js简易教程,脱离后端独立开发,实现增删改查功能(转)

    在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢, ...

  9. 前端笔记之Vue(七)Vue-router&axios&Vue插件&Mock.js&cookie|session&加密

    一.Vue-router(路由) 1.1路由创建 官网:https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...

随机推荐

  1. 谈谈favicon和他带来的问题

    favicon.ico介绍 favicon.ico是个什么东西呢,也许见得太多都习以为常了(我就是这样,直到写这篇文章之前才知道),看看维基百科的解释: Favicon是favorites icon的 ...

  2. sublime配置java编译环境

    Windows下配置Sublime Text3的Java环境 字数507 阅读2301 评论2 喜欢2 Sublime Text3是一个比较好用的IDE.截图如下: java环境截图 下面就简单介绍下 ...

  3. English Snippets

    There is no Zen master to prod you with a stick, but I have some questions for you. Your answers wil ...

  4. K米测评

    第一部分 调研,评测 K米APP使用体验 从小五音不全,所以KTV这类地方我是能不去就不去的,更别说为了点个歌去下个APP,所以K米是我第一个点歌类APP.说说第一次上手的体验吧,APP颜值一般吧,U ...

  5. 【转载】Linux 与 BSD 有什么不同?

    原创:Linux中国 https://linux.cn/article-3186-1.html 原创:LCTT https://linux.cn/article-3186-1.html 本文地址:ht ...

  6. JAVA内存机制

    Java程序运行时,数据会分区存放,JavaStack(Java栈). heap(堆).method(方法区). 一.JVM内存模型 1.Java栈Java栈的区域很小,只有1M,特点是存取速度很快, ...

  7. Android Studio MultiDex 分包碰到的坑

    前天准备发包了,测试完毕,打好正式签名包,装到手机上,运行不起来. 网上查了大量资料,都没有解决方案. log显示如下: 04-26 10:07:57.727 1538-1538/? I/MultiD ...

  8. 细说Linux下软件包的安装与管理

    一 源码安装方式      由于linux操作系统开放源代码,因而在其上安装的软件大部分也都是开源软件,例如apache.tomcat.php等软件.开源软件基本都提供源码下载,源码安装的方式:源码安 ...

  9. phpexcel操作

    <?php include './PHPExcel/PHPExcel.php'; include './PHPExcel/PHPExcel/Writer/Excel2007.php'; //或者 ...

  10. Centos 6.0将光盘作为yum源的设置方法

    在使用Centos 的时候,用yum来安装软件包是再方便不过了,但是如果在无法连接互联网的情况下,yum就不好用了. 下面介绍一种方式,就是将Centos安装光盘作为yum源,然后使用yum来安装软件 ...