Mock安装及应用

1、安装
npm install mockjs
2、Mock.Random属性
该属性是一个工具类，用于生成各种随机数据。它提供的方法如下：
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,tId;
Address:area,region;
Helper: capitalize,upper,lower,pick,shuffle;
Miscellaneous: guid,id;
使用实例

const Random = Mock.Random
// 1. 随机布尔值
console.log('随机布尔值', Random.boolean());
 
// 2. 随机一个整数 - Random.integer(min, max)
console.log('随机整数', Random.integer());
console.log('随机整数', Random.integer(9,90));
 
// 3. 随机一个字符 - Random.character(pool?)
console.log('随机字符 英文大小写/数字/特殊字符', Random.character());
console.log('随机字符', Random.character('ab139$'));
 
// 4. 返回一个整型数组 - Random.range(起始值?, 终止值, 步长 = 1)
console.log('数字数组', Random.range(4));
console.log('数字数组', Random.range(4,9));
console.log('数字数组', Random.range(12,23,2));
 
// 5. 日期 - Random.date/time/datetime(日期格式)
console.log('随机年月日', Random.date());
console.log('随机时分秒', Random.time());
console.log('随机年月日 时分秒', Random.datetime());
console.log('随机年月日 时分秒', Random.date('yyyy-M-d hh:mm:ss'));
 
console.log('当前时间带格式', Random.now('yyyy-MM-dd'));
 
// 6. 随机图片 - Random.image(尺寸, 背景色, 文字颜色, 图片类型, 文本)
// Random.dataImage(尺寸, 内容)
this.randomSrc1 = Random.image('100x100', '#f00', '#0f0', 'png', '李白')
this.randomSrc2 = Random.dataImage('100x100', '张飞')
 
// 7. 随机颜色 - Random.hex/rgb/rgba/hsl()
console.log('随机颜色', Random.hex());
console.log('随机颜色', Random.rgb());
console.log('随机颜色', Random.hsl());
 
// 8. 文本
// Random.cparagraph(min, max)  段落 - 语句长度设置
this.paragraph = Random.cparagraph()
// this.paragraph = Random.cparagraph(5) // 固定句号5个
// this.paragraph = Random.cparagraph(5, 10)// 句号个数 5-10个
 
// Random.ctitle(min, max) 标题 - 长度设置
this.title = Random.ctitle(3,6)
 
// Random.csentence(min, max) 句子 - 字符默认12-18个
 
// Random.cword(汉字池, min, max) 
console.log(Random.cword('男女'));
 
// 9. 名字 - Random.clast/cfirst/cname()
console.log('随即姓名', Random.cname());
 
// 10. web相关
// - Random.url(协议?, 源?)
console.log('随机网址', Random.url('https', 'qq.com'));
// - Random.email( domain? )
console.log('随机QQ邮箱', Random.email('qq.com'));
console.log('随机网易邮箱', Random.email('163.com'));
// - Random.ip() ipv4
console.log('随机IP', Random.ip());
 
// 11. 地址
// - Random.region() 随机大区（华东/南/西/北/中）
// - Random.province()/city/county(true - 是否将前面的内容显示出来)
console.log('随机省', Random.province());
console.log('随机市', Random.city());
console.log('随机县', Random.county(true));
 
// 12. 简化JS操作的方法
// - Random.capitalize(word)  首字母大写
console.log(Random.capitalize('hello'));
 
// - Random.pick(arr) 数组随机取值
console.log(Random.pick([true, 'hello', 12, 23, 'world']));
 
// - Random.shuffle() 打乱数组
console.log('数组乱序', Random.shuffle([1,2,3,4,5]));
 
// 13. 随机身份ID
// - Random.guid()  返回uuid
console.log('随机用户id', Random.guid());
 
// - Random.id()  随机身份证号
console.log('随机身份证号', Random.id());
 
// - Random.increment('步长')
console.log('规律id', Random.increment());
console.log('规律id', Random.increment());
console.log('规律id', Random.increment());
console.log('规律id', Random.increment(10));
console.log('规律id', Random.increment(20));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

3、创建mock
在mock文件夹下创建json文件和mock服务器
banner.json：（轮播图数据）

[
  {
    "id": "1",
    "imgUrl": "/images/banner1.jpg"
  },
  {
    "id": "2",
    "imgUrl": "/images/banner2.jpg"
  },
  {
    "id": "3",
    "imgUrl": "/images/banner3.jpg"
  },
  {
    "id": "4",
    "imgUrl": "/images/banner4.jpg"
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

创建mock服务器，设置响应体，就用数据
mockServe.js

import Mock from 'mockjs'

// 引入 json 数据
import banner from './banner.json'

// 设置响应
Mock.mock('/mock/banner',{
    data: banner,    
})
1
2
3
4
5
6
7
8
9

4、引用mock服务

import '@/mock/mockServe'
1

5、新建网络请求 mockRequests.js

import axios from 'axios';

// 进度条
import nprogress from 'nprogress'
import 'nprogress/nprogress.css';

const mockRequests = axios.create({

    //基础路径 请求url默认开头会加上baseURL
    baseURL: "/mock",
    
    //请求不能超过5S
    timeout: 5000,

});

//请求拦截器----在项目中发请求前执行的函数
mockRequests.interceptors.request.use(function(config) {

    // 加载进度条
    nprogress.start();

    return config;
})

//响应拦截器----当服务器响应请求后的回调函数
mockRequests.interceptors.response.use(
    // 成功回调
    function(res) {
        // 进度条结束
        nprogress.done();

        // 直接返回响应体的 data 作为 promise对象 的value
        return res.data
    },

    // 失败回调
    function(err) {
        nprogress.done();

        console.log('mock数据请求失败');
        return err;
    }
)

export default mockRequests;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

6、创建网络请求函数

import mockRequests from './mockRequests'

// mock 接口
export const reqgetBannerList = function() {
    return mockRequests.get('/banner');
}
1
2
3
4
5
6

7、在组件中发送mock请求（譬如调用调用 reqgetBannerList 函数）

import { reqgetBannerList } from '@/api'

async updataBannerList(context) {
    let result = await reqgetBannerList();

    if(result) {
        console.log(result.data)
    }
}
1
2
3
4
5
6
7
8
9