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;

使用实例

clike 复制代码

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

3、创建mock

在mock文件夹下创建json文件和mock服务器

banner.json：（轮播图数据）

clike 复制代码

[
  {
    "id": "1",
    "imgUrl": "/images/banner1.jpg"
  },
  {
    "id": "2",
    "imgUrl": "/images/banner2.jpg"
  },
  {
    "id": "3",
    "imgUrl": "/images/banner3.jpg"
  },
  {
    "id": "4",
    "imgUrl": "/images/banner4.jpg"
  }
]

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

mockServe.js

clike 复制代码

import Mock from 'mockjs'

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

// 设置响应
Mock.mock('/mock/banner',{
    data: banner,    
})

4、引用mock服务

clike 复制代码

import '@/mock/mockServe'

5、新建网络请求 mockRequests.js

clike 复制代码

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;

6、创建网络请求函数

clike 复制代码

import mockRequests from './mockRequests'

// mock 接口
export const reqgetBannerList = function() {
    return mockRequests.get('/banner');
}

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

clike 复制代码

import { reqgetBannerList } from '@/api'

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

    if(result) {
        console.log(result.data)
    }
}