mockJs -- vue中常用数据模拟

mockJs – vue中常用数据模拟

import Mock from "mockjs"; // 引入mockjs
const Random = Mock.Random; // Mock.Random 是一个工具类，用于生成各种随机数据
mock.mock("msg", function(){ //循环随机生成100条数据
	let result = [];
	for( let i=0;i< 100; i++){
		let obj = {
			//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
		}
		result.push(obj);
	}
	return result
})

在使用数据的地方请求

import axios from 'axios'
export default{
	methods:{
		getData(){ 
			axios.get('msg') //使用axios请求msg，mock拦截返回数据
			.then(res=>{
				this.list = res.data
				
			})
			.catch(err=>{
				console.log(err)
			})
		},
	}
}