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 < 20; i++) {
	list.push({
        //序号
		id: i + 1,
        //日期
		date: Random.date(),
        //姓名
		name: Random.cname(),
        //地址,这里的address()是从另一个mock文件中引入的（my-radom）。
		address: Random.address(),
        //爱好
		likes: Random.likes()
	})
}

// 获取列表
Mock.mock('/list', 'get', options => {
	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