mock.js那点事(上)

时间 2019-11-15

标签 mock.js mock 那点栏目 JavaScript 繁體版

原文原文链接

耐心看完，我保证十五分钟就能学会mock.jsjavascript

什么是Mock.js

Mock.js是一个模拟数据生成器，帮助前端开发和原型与后端进度分离，减小一些单调，特别是在编写自动化测试时。css

Mock.js能作什么前端

提供了如下模拟功能：java

根据数据模板生成模拟数据
模拟 Ajax 请求，生成并返回模拟数据

为何咱们要用Mock.jsnode

开发时，后端还没完成数据输出，前端也能根据模拟的数据开发。
想要尽量还原真实的数据。
图片,url格式数据难以模拟。

首先咱们配置一下咱们的环境jquery

Bower

npm install -g bower
bower install --save mockjs复制代码

src="./bower_components/mockjs/dist/mock.js"></script>复制代码

node

npm install express-generator -g
 express myapp
 cd myapp 
 npm install
 npm start
 而后在浏览器中打开 http://localhost:3000/ 网址就能够看到这个应用了。i
 express项目中 npm install mockjs --save复制代码

//打开routes/index.js ,添加一个路由
 router.get('/mockjs', function (req, res, next) {
    var Mock = require('mockjs')
    var data = Mock.mock({
        // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
        'list|1-10': [{
            // 属性 id 是一个自增数，起始值为 1，每次增 1
            'id|+1': 1
        }]
    })
    var net = JSON.stringify(data, null, 4)
    res.render('index', {title: net});
});复制代码

语法

最基本的环境搞好了以后，咱们来学习下语法，语法主要分红两类数据模板定义和数据占位符定义git

数据模板定义

String

String

'name|min-max': 'value' 经过重复 'value' 生成一个字符串，重复次数大于等于 min，小于等于 max。复制代码

Mock.mock({                  =>  {
       "string|1-10": "★"              "string": "★★★★★★"
      })//随机出现1到10个字符"★" }复制代码

'name|count': 'value' 经过重复 'value' 生成一个字符串，重复次数等于 count复制代码

Mock.mock({                =>   {
        "string|3": "★★★"              "string": "★★★★★★★★★"
      })                              }复制代码

Numbergithub

'name|min-max.dmin-dmax': number复制代码

Mock.mock({                      =>{
"number|1-100.1-10": 1              "number": 75.75862
})                                  }    
// num|1-5.1-3'
//1到5范围.小数点一道三个 前面是范围，后面是个数，数字是多少没意义复制代码

Booleanajax

'name|1': boolean                       { 
  Mock.mock({                  =>       "boolean": false
    "boolean|1": true                   }     
  }) //true和false出现的概率是二分之一 

'name|min-max': boolean =>        { 
    Mock.mock({                          "boolean": true
    "boolean|1-2": true                 }
  }) // value 的几率是 min / (min + max)，值为 !value 的几率是 max / (min + max)。复制代码

Object

'name|count': object
'name|min-max': object
//原理同字符串复制代码

Arrayexpress

'name|1': array
'name|min-max': array
'name|count': array复制代码

最后咱们来一波厉害点的例子, 先看题，再看答案

{
  '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
  }
}
=>
{
  "title": "Syntax Demo",
  "string1": "★★★",
  "string2": "valuevaluevalue",
  "number1": 100,
  "number2": 21,
  "number3": 90.4741515,
  "number4": 123.2,
  "number5": 123.773,
  "number6": 123.1239086072,
  "boolean1": false,
  "boolean2": false,
  "object1": {
      "120000": "天津市",
      "130000": "河北省",
      "140000": "山西省"
  },
  "object2": {
      "320000": "江苏省",
      "330000": "浙江省"
  },
  "array1": "UMD",
  "array2": [
      "Mock.js",
      "Mock.js",
      "Mock.js",
      "Mock.js",
      "Mock.js",
      "Mock.js"
  ],
  "array3": [
      "Mock.js",
      "Mock.js",
      "Mock.js"
  ],
  "function": "Syntax Demo"
}复制代码

上面都是最经常使用的几种类型，固然还有一些不经常使用的没有列出，有兴趣移步官网

数据占位符定义

若是你掌握了上面的数据模板定义，那这个五分钟不用你就能掌握数据占位符定义,由于都是同样的

数据占位符定义也分为不少类型，比数据模板定义多不少，并且写法不同，可是效果都是模拟数据

{
    "天然数": "@natural",
    "浮点数": "@float",
    "日期": "@date",
    "时间": "@time",
    "标题": "@title",
    "中文名字": "@cname",
    "网址": "@url",
    "域名": "@domain",
    "邮箱": "@email",
    "段落": "@paragraph",
    "句子": "@sentence"
}
=>
{
    "天然数": 8077114183372796,
    "浮点数": -7509349163912364,
    "日期": "1970-03-14",
    "时间": "05:25:05",
    "标题": "Qgspmo Lcqiquof Kawo",
    "中文名字": "尤全信",
    "网址": "http://jcdtn.com/ppke",
    "域名": "chqykiyyq.co.uk",
    "邮箱": "c.lee@jackson.gov",
    "段落": "Ayooiokf llyhmsi owesieea yyishuzr rdnsl jexu vfrkrvuq icsb cclmce oofwykv qtcupiwv mgcclzb knltrto nhkg. Tcri rnxhtkj lzkoitbrg jss kxbtymnd ryyivbqn yjfv yydsldmw zuoy abfduhf chkbzzltdr tsfoh arkhtmbi. Hegjcqn vufnifrf opfxhbm nqkuoh chgclqvf irjpji uafmxjt fjhpjtby sybvjo xhstbpi tebcv pvfexmwgxx xfacci xnkqnij yysrepxvbr uermcpl cpoxyqzacm.",
    "句子": "Avtigmpj rgfocf iefnjw atuceo ild bledzp bwldvxihuh ledwbwpoo xrrdb kwewsm uoffu ymffqdwlk lidf qvdrpnc xmu txg mpheymd."
}复制代码

就是这么简单，不要怀疑本身的智商，不过还有一些模拟图片之类的我没有举例出来，由于渲染不出来.

拦截/模拟ajax请求

Mock.mock( rurl, template )

记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并做为响应数据返回。

Mock.mock( rurl, rtype, template )

记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并做为响应数据返回。

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src='./node_modules/mockjs/dist/mock.js'></script>
<script type="text/javascript">
    //调用mock方法模拟数据
    Mock.mock(/\.json/, {
        'list|1-10': [{
            'id|+1': 1,
            'email': '@EMAIL'
        }]//全部ajax地址以.json结尾的都被拦截，而且返回数据
    })
    $.ajax({
        url: 'hello.json',
        dataType: 'json'
    }).done(function(data, status, jqXHR){
        $('<pre>').text(JSON.stringify(data, null, 4))
            .appendTo('body')
    })
</script>复制代码

参考官方连接github.com/nuysoft/Moc…