mock.js的简单使用~

1、什么是 mock?

mock.js: 是一款模拟数据生成器，可以生成随机数据，拦截 Ajax 请求.

2、mock 的作用。

可以通过 mock 来模拟后端接口，可随机生成所需数据，模拟对数据的增删改查。并且截 Ajax 请求不需要修改既有代码就可以拦截，返回模拟的响应数据。

3、mock 的使用。

1、mock.js 安装

npm install mockjs

2、在 src 目录下创建 mock 目录，定义 mock 主文件 index.js，并在该文件中存放我们的 mock 数据。

3、在 main.js 引入 mock 文件，方便在其他文件中使用。

import "@/mockjs/index";

4、在 mock 文件夹的 index 文件中定义 mock 数据。

Mock.mock(url, type, template)

第一个参数 url 为请求路径，

第二个参数 type 为请求类型 如：get、popst、delete、put 等

第三个参数是生成的数据，作为响应数据返回。可以为对象，也可以为函数，函数需要 return

index.js 

// 引用 Mock
const Mock = require('mockjs')
// 引入另一个 mock 文件 my-radom
require('./my-radom')

//Mock.Random 是一个工具类，用于生成各种随机数据
const Random = Mock.Random

// 创建模拟数据
const list = []

for (let i = 0; i  {
	const {current} = JSON.parse(options.body)
	return list.slice(((current - 1) * 10), current * 10)
})

my-radom.js

// 使用 Mock
var Mock = require('mockjs')

Mock.Random.extend({likes: function () {
    const likes = [
      '喜欢打游戏，看电影，尤其是英雄联盟和欧美大片。',
      '喜欢做饭，尤其是西餐，喜欢做甜点，自己每次都吃得饱饱的。',
      '我最爱去游泳了，当然也喜欢潜水，在海底下看各种好看的鱼鱼。',
      '我最最喜欢的就是去旅游了，看沿途的风景，真是美呆了。',
      '我的爱好是打篮球，我很喜欢打篮球，我的偶像是科比。',
      '我超喜欢去蹦迪了，感觉整个身体都在那里放松了。',
      '哈哈哈，我喜欢的是和女孩子一起玩，因为男女搭配，干活不累嘛。',
      '我没啥爱好，唯一的爱好就是宅。',
      '我喜欢看动漫，更喜欢日漫，我可是一个二次元哦。',
      '我喜欢 cosplay，喜欢 cos 动漫里的每一个角色。'
    ]
    return this.pick(likes)
  }
})
Mock.Random.extend({address: function () {
    const address = [
      '深圳市南山区科技园南区 R2- B 三楼',
      '深圳南山区科技园汇景豪苑海欣阁',
      '深圳市南山区白石洲中信红树湾',
      '上海市普陀区金沙江路 1517 弄',
      '四川成都市中德英伦联邦 C 区',
      '北京市中南海老四合院靠左',
      '广州市中心中央银行 33 号'
    ]
    return this.pick(address)
  }
})

5、更多的 mock 随机数。

// 生成随机字符串 长度为 5
      "string": Random.string(5), // "jPXEu"
      "string2": '@string(5)', // "jPXEu"
      // 生成随机邮箱地址 可以指定域名，例如 163.com
      "email": Random.email('163.com'), // "l.fvilfpz@163.com"
      "email2": '@email()', // "l.fvilfpz@163.com"
      // 返回一个随机的布尔值。"boolean": Random.boolean(), // true
      "boolean2": '@boolean()', // true
      // 生成 60-100 随机整数
      "point": Random.integer(60, 100), // 69
      "point2": '@integer(60, 100)', // 98
      // // 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 3 到 5 位。"floatNumber": Random.float(1, 100, 3, 5), // 60.695
      "floatNumber2": '@float(1, 100, 3, 5)', // 19.29368
      // 随机日期
      "date": Random.datetime('yyyy-MM-dd'), // "2017-05-01"
      "date2": "@datetime()", // "1973-06-12 13:05:18"
      // 随机时间
      "time": Random.time(), // "21:33:01"
      "time2": "@time()", // "21:33:01"
      // 当前日期
      "now": Random.now('year'), // "2023-01-01 00:00:00"
      "now2": "@now('year')", // "2023-01-01 00:00:00"
      // 随机生成图片 Random.image(size, background, foreground, format, text)
      "img": Random.image('200x100', '#16d46b', '#fff', 'png', 'Hello'), // "http://dummyimage.com/200x100/16d46b/fff.png&text=Hello"
      // 随机生成颜色, 格式为 '#RRGGBB'。"color": Random.color(), // "#94f279"
      "color2": '@color()', // "#94f279"
      // 随机生成颜色, 格式为 'rgb(r, g, b, a)'。"rgbaColor": Random.rgba(), // "rgba(242, 121, 183, 0.22)"
      // 随机生成一段文本 文本中句子的个数为 2 到 5。默认值为 3 到 7
      "paragraph": Random.paragraph(2, 5), // "Ymkp nvyryy vieq hlqdb pplbbikbd mtqiq uue jdufhkxy wpybjqi djico jxqkwvw kbmsscpfw owtgsqwn."
      "paragraph2": '@paragraph(2, 5)',  // "Ymkp nvyryy vieq hlqdb pplbbikbd mtqiq uue jdufhkxy wpybjqi djico jxqkwvw kbmsscpfw owtgsqwn."
      // 随机生成一段中文文本 参数同 Random.paragraph(min?, max?)
      "cparagraph": Random.cparagraph(), // "重工边政应信江半实金改北反调程五八。张资圆向规成新家天交对传许。军较军七养多认维市般况验式华行证。"
      "cparagraph2": '@cparagraph(2, 5)', // "重工边政应信江半实金改北反调程五八。张资圆向规成新家天交对传许。军较军七养多认维市般况验式华行证。"
      // 随机生成一个句子，第一个单词的首字母大写。句子中单词的个数为 2 到 5。默认值为 12 到 18
      "sentence": Random.sentence(2, 5), // "Yyfvs genrdeiyf."
      "sentence2": '@sentence(2, 5)', // "Yyfvs genrdeiyf."
      // 随机生成一段中文文本，参数同 Random.sentence(min?, max?)
      "csentence": Random.csentence(2, 5), // "积现。"
      "csentence2": '@csentence(2, 5)', // "积现。"
      // 随机生成一个单词，单词中字符的个数为 2 到 5 个。默认值为 3 到 10
      "word": Random.word(2, 5), // "nlgcl"
      "word2": '@word(2, 5)', // "nlgcl"
      // 随机生成一个汉字，汉字中字符串的长度为 2 到 5 个。默认值为 1
      "cword": Random.cword(2, 5), // "系即感"
      "cword2": '@cword(2, 5)', // "系即感"
      // 随机生成一句标题，其中每个单词的首字母大写。单词中字符的个数为 2 到 5。默认值为 3 到 7
      "title": Random.title(2, 5), // "Vmpx Rizds Smguoqki"
      "title2": '@title(2, 5)', // "Vmpx Rizds Smguoqki"
      // 随机生成一句中文标题，参数同 Random.title(min?, max?)
      "ctitle": Random.ctitle(2, 5), // "其感期"
      "ctitle2": '@ctitle(2, 5)', // "其感期"
      // 随机生成一个常见的英文名
      "firstName": Random.first(), // "Michelle"
      "firstName2": '@first()', // "Jose"
      // 随机生成一个常见的英文姓。"lastName": Random.last(), // "Taylor"
      "lastName2": '@last()', // "Clark"
      // 随机生成一个常见的英文姓名。括号里的布尔值，指示是否生成中间名（可选）。"name": Random.name(true), // "Donald Eric Jackson"
      "name2": '@name(true)', // "Donald Eric Jackson"
      // 随机生成一个常见的中文姓
      "cfirstName": Random.cfirst(), // "任"
      "cfirstName2": '@cfirst()', // "郭"
      // 随机生成一个常见的中文名。"clastName": Random.clast(), // "芳"
      "clastName2": '@clast()', // "芳"
      // 随机生成一个常见的中文姓名。"cname": Random.cname(), // "程强"
      "cname2": '@cname()', // "程强"
      // 随机生成一个 URL。可以指定 url 协议，域名和端口号。例如 'http' nuysoft.com。'url': Random.url('http', 'nuysoft.com'), // "http://nuysoft.com/ysq"
      'url2': '@url()', // "http://nuysoft.com/ysq"
      // 随机生成一个 IP 地址
      'IP': Random.ip(), // "112.127.151.37"
      'IP2': '@ip()', // "233.144.17.219"
      // 随机生成一个（中国）大区。"region": Random.region(), // "华北"
      "region2": '@region()', // "华北"
      // 随机生成一个（中国）省（或直辖市、自治区、特别行政区）。"province": Random.province(), // "澳门特别行政区"
      "province2": '@province()', // "澳门特别行政区"
      // 随机生成一个（中国）市。括号里的布尔值，指是否生成所属的省（可选）"city": Random.city(true), // "广东省 肇庆市"
      "city2": '@city()', // "广东省 肇庆市"
      // 随机生成一个（中国）县。括号里的布尔值，指是否生成所属的省、市（可选）"county": Random.county(true), // "江苏省 常州市 其它区"
      "county2": '@county()', // "江苏省 常州市 其它区"
      // 随机生成一个邮政编码（六位数字）。"zip": Random.zip(), // "806124"
      "zip2": '@zip()', // "806124"
      // 把字符串的第一个字母转换为大写。"capitalize": Random.capitalize('hello'), // "Hello"
      "capitalize2": '@capitalize("hello")', // "Hello"
      // 把字符串转换为大写。"upper": Random.upper('hello'), // "HELLO"
      "upper2": '@upper("hello")',  // "HELLO"
      // 把字符串转换为小写。"lower": Random.lower('HELLO'), // "hello"
      "lower2": '@lower("HELLO")', // "hello"
      // 从数组中随机选取一个元素并返回。"pick": Random.pick(['a', 'e', 'i', 'o', 'u']), // "e"
      "pick2": '@pick(["a","e","i","o","u"])', // "e"
      // 打乱数组中元素的顺序，并返回。"shuffle": Random.shuffle(['a', 'e', 'i', 'o', 'u']), // ['o', 'a', 'i', 'e', 'u']
      "shuffle2": '@shuffle(["a","e","i","o","u"])', // ['o', 'a', 'i', 'e', 'u']
      // 随机生成一个 18 位身份证。"id": Random.id(), // 112.127.151.37
      "id2": '@id()' // 97.46.129.222