mockjs运用

[1019483075]

（一）了解mockjs

---

什么是mockjs？

mockjs就是一个模拟数据，生成随机数据，拦截ajax请求。

为什么要使用mockjs？

• 后端给不了数据
• 数据太长，将数据放在js文件里面，完成后挨个改url
• 还原真实数据
• 特殊格式 ip 随机数 图片 地址
• 分页显示
  

mockjs的功能

• 生产数据:通过mockjs提供的方法,你可以轻松地创造大量随机的文本,数字,布尔值,日期,邮箱,链接,图片,颜色等. 
• 强大的拦截功能:mockjs可以进行强大的ajax拦截.能判断请求类型,获取到url,请求参数等.然后可以返回mock的假数据,或者你自己编好的json文件.功能强大易上手.
  

（二）mockjs语法规则

---

mockjs可以模拟那些数据？

• string
• number
• bool
• array
• object
• guid
• id
• title
• paragraph
• images
• address
• date
• time
• url
• email
• ip
• regexp
  

mockjs语法规范包含的两层规范

• 数据模板（DTD）
• 数据占位符（DPD）
  

数据模板（DTD）规范

数据模板中的每个属性由三部分构成：属性名、生产规则、属性值

// 格式
'name| rule:value'
name: 属性名
rule: 生成规则
value: 属性值

属性名和生成规则之间用竖线|分割。生成规则是可选的。生成的规则有一下7中方式

1）'name|min-max': value
2）'name|count': value
3）'name|min-max.dmin-dmax': value
4）'name|min-max.dcount': value
5）'name|count.dmin-dmax': value
6）'name|count.dcount': value
7）'name|+step': value

生成规则的含义 需要依赖  属性值  才能确定
属性值  中可以含有占位符
属性值   还可以指定最终值 初始值和类型

生成规则和具体案例

• 属性值是字符串String

1）'name|min-max': 'value'   通过重复'value' 生成一个字符串，重复次数大雨等于min，小于等于max

Mock.mock("/testString", "get", {
  "demo1|1-10": "*"
});

打印结果

2）'name|count': 'value' ：通过重复 'value' 生成一个字符串，重复次数等于 count

Mock.mock("/testString", "get", {
  "demo1|1-10": "*"
});

打印结果

• 属性值是数字number

1）'name|min-max':value ：生成一个大于等于min，小于等于max的整数，属性值value只用来确定类型

Mock.mock("/testNumber", "get", {
  "demo1|1-100": 100
});

打印结果

2）'name|+step':value ：属性值自动加step，初始值为value

Mock.mock("/testNumber", "get", {
   "list|5": [
    {
      "id|+1": 1
    }
  ]
});

打印结果

3）'name|min-max.dmin-dmax':value 生成一个浮点数，整数部分大雨等于min，大于等于max，小数部分保留dmin-dmax

Mock.mock("/testNumber", "get", {
  "demo3|1-100.1-10": 100
});

打印结果

4）'name|min-max.dcount':value 生成一个浮点数，整数部分大于等于min，小于等于max，小数部分保留dcount

Mock.mock("/testNumber", "get", {
  "demo6|1-100.1": 1
});

打印结果

5）'name|count.dmin-dmax':value 生成一个浮点数，整数部分为count，小数部分保留dmin-dmax

Mock.mock("/testNumber", "get", {
"demo7|23.1-10": 100
});

打印结果

• 属性值是布尔

1）'name|count':value 随机生成一个布尔值，值为value的概率为count/(1+count)，值不为value的概率为1/(1+count)

Mock.mock("/testBoolean", "get", {
  "demo|3": true 
});

打印结果

2）'name|min-max':value ：随机生成一个布尔值，值为value的概率是min/(min+max)，值不为value的概率是max/(min+max)

Mock.mock("/testBoolean", "get", {
 "demo10|1-10": true
});

打印结果

• 属性值是object

1）'name|min-max': {} 从属性值{} 中随机选取min-max个属性

Mock.mock("/testObject", "get", {
  "demo11|2-4": {
    "110000": "北京市",
    "120000": "天津市",
    "130000": "河北省",
    "140000": "山西省",
    "150000": "宁夏省",
    "160000": "陕西省"
  }
});

运行结果

2）'name|count"  从属性值{}中随机选取count个属性

Mock.mock("/testObject", "get", {
"demo12|2": {
    姓名: "张三",
    性别: "男",
    年龄: "32",
    爱好: "敲代码"
  }
});

运行结果

• 属性值是数组

1）'name|1':["",""]或'''name|1':[{}, {} ...] 从属性值[]中随机选取1个元素，作为最终值

Mock.mock("/testArray", "get", {
  "demo13|1": ["AMD", "CMD", "UMD"]
});

运行结果

2）'name|count': [' ', ' ' ...]              或           'name|count': [{}, {} ...] 通过重复属性值[]生成一个新数组，重复次数为count次

Mock.mock("/testArray", "get", {
  "demo15|3": ["AMD", "CMD", "UMD"]
});

运行结果

3）'name|min-max':[' ', ' ' ...]  或  'name|min-max':[{}, {} ...]通过重复属性值[]生成一个新数组，重复次数为min-max次

Mock.mock("/testArray", "get", {        
  "demo16|1-1": ["AMD", "CMD", "UMD"]
});

运行结果

• 属性值是函数Function

1）'name':function(){} 执行函数function(){}取其返回值作为最终的属性值，上下文为'name'所在属性

Mock.mock("/testFunction", "get", {
  foo: "Demo",
  demo17: function() {
    return this.foo;
  }
});

打印结果

• 属性值是函数(RegExp)

1）根据正则表达式regexp反向生成可以匹配他的字符串。用于生成自定义格式的字符串。

Mock.mock("/testRegExp", "get", {
  regexp1: /[a-z][A-Z][0-9]/,
  regexp2: /\w\W\s\S\d\D/,
  regexp3: /\d{5,10}/
});

打印结果

• 属性值是路径(Path)

1）匹配当前元素的上下文所在的绝对路径，返回对应值

Mock.mock("/testPath", "get", {
  foo: "hello",
  nested: {
    a: {
      b: {
        c: "Mock.js"
      }
    }
  },
  demo21: "@/foo @/nested/a/b/c"
});

打印结果

数据占位符定义规范PDP

Mock.Random是一个工具类，用于生成各种随机数据
Mock.Random的方法在数据模板中成为[占位符]，书写格式为@占位符（参数[,参数]）
注意：

• 用@来标识其后的字符串是占位符
• 占位符引用的是Mock.Random中的方法
• 通过Mock.Random.extend()来拓展自定义占位符
• 占位符也可以引用数据模板中的属性
• 占位符会用先引用数据模板中的属性
• 占位符支持相对路径和绝对路径
  内置方法列表：
  | Type | Method | |
  | --- | --- | --- |
  | Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now | |
  | image | image,dataImage | |
  | Color | color | |
  | Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle | |
  | Name | first,last,name,cfirst,clast,cname | |
  | Web | url,domain,email,ip,tld | |
  | Address | area,region | |
  | Helper | capitalize, upper, lower, pick, shuffle | |
  | Miscellaneous | guid,id | |

内置方法的使用：

• 基本方法  String integer date

打印结果

拓展

Mock.Random中的方法与数据模板的@占位符一一对应，在需要时还可以为Mock.Random拓展方法，然后在数据模板中通过@拓展方法引用。

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());

运行结果

（三）Mockjs在vue项目中的运用

安装

npm install mockjs --save-dev
npm install axios --save

目录结构

src/mock.js  mock文件存放目录
src/main.js  引入mockjs  

在src/mock.js

// 引入mockjs
const Mock = require("mockjs");
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceNewsData = function() {
  let articles = [];
  for (let i = 0; i < 10; i++) {
    let newArticleObject = {
      title: Random.csentence(5, 30), //  Random.csentence( min, max )
      thumbnail_pic_s: Random.dataImage("300x250", "mock的图片1"), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
      author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
      date: Random.date() + " " + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
    };
    articles.push(newArticleObject);
  }
  return {
    code: 0,
    data: {
      articles: articles
    }
  };
};
// Mock.toJSONSchema(produceNewsData);
// Mock.mock( url, post/get , 返回的数据)；
Mock.mock("/news/index", "get", produceNewsData);

在src/main.js

if (process.env.NODE_ENV !== "production") { // 判断只在生产环境下使用
  require("./mock");
}

在xxx.vue中引用

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <img :src="item.thumbnail_pic_s" alt>
      </li>
    </ul>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import axios from "axios";
// import { constants } from 'crypto';
export default {
  name: "app",
  components: {
    HelloWorld
  },
  data() {
    return {
      list: []
    };
  },
  created() {
    axios.get("/news/index").then(res => {
      console.log(res.data.data.articles);
      this.list = res.data.data.articles;
    })；
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

响应结果：

（四）使用总结：

优点
前后端分离：让前端攻城师独立于后端进行开发。
增加单元测试的真实性：通过随机数据，模拟各种场景。
开发无侵入：不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
用法简单：符合直觉的接口。
数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则。
缺点
Mock也不是silver bullet，所以根据项目实际情况和具体需要来确定是否选用Mock；
测试过程中如果大量使用Mock，mock测试的场景失去了真是性，可能会导致在后续的系统性测试时才发现bug，使得缺陷发现的较晚，可能会造成后续修复成本更大；