mockjs使用入门

本文是经过参考其他大佬博客整理，因代码提前拷贝出来了，未能记下原文链接，无法给出原文链接。

为什么要用mockjs

前后端分离项目在开发时，在后端接口未完成时，前端开发手动模拟接口，完成数据请求页面渲染，待后端接口完成后可提高联调效率。

mockjs安装

npm install mockjs
npm install axios --save （已安装？请忽略）

目录结构

个人用法，供参考，可能不标准
/src/mock/index.js
/src/mock/user.js

user.js

import Mock from "mockjs"; // 引入mockjs
const Random = Mock.Random; // Mock.Random 是一个工具类，用于生成各种随机数据

//模拟获取用户列表
export const user_list = (params)=>{
    let list = []; 
    doCustomTimes(10,()=>{
        list.push(Mock.mock({           

            //basic
            'boolean': Random.boolean(), // 返回一个随机的布尔值。
            'natural': Random.natural(1,100), // 返回一个随机的自然数（大于等于 0 的整数）
            'integer': Random.integer(1, 100), // 生成1到100之间的整数
            'float': Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位
            'character': Random.character(), // 生成随机字符,可加参数定义规则
            'string': Random.string( '壹贰叁肆伍陆柒捌玖拾', 3, 5 ),//返回一个随机字符串。
            'range': Random.range(0, 10, 2), // 生成一个随机数组

            //date
            'date': Random.date('yyyy-MM-dd'), // 生成一个随机日期,可加参数定义日期格式
            'time': Random.time('HH:mm:ss'), //获取一个随机时间
            'datetime': Random.datetime(), // 返回一个随机的日期和时间字符串。
            'now': Random.now(), // 返回当前的日期和时间字符串。

            //image
            'image': Random.image('200x100', '#00405d', '#FFF', 'Mock.js') ,//生成一个随机的图片地址。
            'dataImage':Random.dataImage( Random.size, 'hello' ),//生成一段随机的 Base64 图片编码。

            //color
            'color': Random.color(),//随机生成一个有吸引力的颜色，格式为 '#RRGGBB'。
            'hex': Random.hex(), //随机生成一个有吸引力的颜色，格式为 '#RRGGBB'。
            'rgb':Random.rgb(), //随机生成一个有吸引力的颜色，格式为 'rgb(r, g, b)'。
            'rgba': Random.rgba(), //随机生成一个有吸引力的颜色，格式为 'rgba(r, g, b, a)'。
            'hsl': Random.hsl(), //随机生成一个有吸引力的颜色，格式为 'hsl(h, s, l)'。

            //text
            'paragraph': Random.paragraph( 3, 7 ), // 随机生成一段文本。
            'cparagraph': Random.cparagraph( 1, 3 ), // 随机生成一段中文文本。
            'sentence': Random.sentence( 1, 3 ), // 随机生成一个句子，第一个单词的首字母大写。
            'csentence': Random.csentence( 1, 3 ),// 随机生成一段中文文本。
            'word': Random.word( 1, 3 ),// 随机生成一个单词。
            'cword': Random.cword('零一二三四五六七八九十', 10,15),//生成中文10到15个
            'title': Random.title( 3, 5 ), // 随机生成一句标题，其中每个单词的首字母大写。
            'ctitle': Random.ctitle( 3, 7 ), // 随机生成一句中文标题。

            //name
            'first': Random.first(),// 随机生成一个常见的英文名。
            'last': Random.last(),// 随机生成一个常见的英文姓。
            'name': Random.name(),// 随机生成一个常见的英文姓名。
            'cfirst': Random.cfirst(),// 随机生成一个常见的中文名。
            'clast': Random.clast(), // 随机生成一个常见的中文姓。
            'cname': Random.cname(),//随机生成一个常见的中文姓名。

            //web
            'url': Random.url('http','baidu.com'), // 随机生成一个 URL。
            'protocol': Random.protocol(), //随机生成一个 URL 协议
            'domain': Random.domain(), //随机生成一个域名。
            'tld': Random.tld(), //随机生成一个顶级域名
            'email':Random.email('qq.com'),//随机生成一个邮箱
            'ip':Random.ip(),//随机生成一个 IP 地址。

            //address
            'region':Random.region(),//随机生成一个（中国）大区。
            'province':Random.province(),//随机生成一个（中国）省（或直辖市、自治区、特别行政区）
            'city':Random.city(true),//布尔值。指示是否生成所属的省。
            'county':Random.county(true),//随机生成一个（中国）县。
            'zip':Random.zip(),//随机生成一个邮政编码（六位数字）
            'address': Random.province(), // 生成地址

            //helper
            'capitalize': Random.capitalize('hello'),//把字符串的第一个字母转换为大写。
            'upper': Random.upper( 'hello' ),//把字符串转换为大写。
            'lower': Random.lower( 'HELLO' ),//把字符串转换为小写。
            'pick': Random.pick( ['a', 'e', 'i', 'o', 'u'] ),//从数组中随机选取一个元素，并返回。
            'shuffle': Random.shuffle( ['a', 'e', 'i', 'o', 'u'] ), //打乱数组中元素的顺序，并返回。

            //miscellaneous
            'guid': Random.guid(), //随机生成一个 GUID。
            'id': Random.id(), //随机生成一个 18 位身份证。
            'increment': Random.increment(2), //生成一个全局的自增整数。自增为2
        }));

    });
    return list;
}

export const user_info = (param)=>{
    let list = [];
    doCustomTimes(4,()=>{
        list.push(Mock.mock({
            "name":Random.cname(),
            "id":Random.id(),
            "mobileNumber":randomPhoneNum()
        }));
    });

    return list
}
/**
 * @param {Number} times 回调函数需要执行的次数
 * @param {Function} callback 回调函数
 */
export const doCustomTimes = (times, callback) => {
    let i = -1
    while (++i < times) {
        callback(i)
    }
}
//随机生成手机号
export const randomPhoneNum = ()=>{
    var numArray = new Array("139","138","137","136","135","134","159","158","157","150","151","152","188","187","182","183","184","178","130","131","132","156","155","186","185","176","133","153","189","180","181","177");
    console.log()
    var lastArray = Math.random().toString().substring(2,10)
    var phoneNumber = numArray[Math.floor(Math.random()*(numArray.length))].toString() + lastArray
    return phoneNumber
}

index.js

import Mock from 'mockjs'

import { user_list , user_info } from "./user";


// 配置Ajax请求延时，可用来测试网络延迟大时项目中一些效果
Mock.setup({
    timeout: 1000
})

//接口
Mock.mock('/user/list', user_list)

Mock.mock('/user/info', user_info)


export default Mock

在使用的vue文件里直接请求即可

created() {
    this.$axios.get('/user/info',{page:1,pagesize:10}).then(res=>{
    console.log(res)
})

遇到有用的知识，存起来，已备不时之需。