mockjs

定义

        当前端开发程序员写好了接口文档，后端还没有实现接口文档的时候，用于自己造数据，模拟后端，方便继续开发前端的功能

后端接口做好后，和后端联调，更改baseURL即可实现切换接口服务器

具体效果

        1、拦截ajax

        2、生成随机数据

安装

npm i mockjs -D

使用

        1.定义mock.js

 

        2.在main.js导入

 

 import '@/mock/mock.js'

导入mock

 

import Mock from 'mockjs'

方法

Mock(url,methods,data)

Mock(url,data)

Mock(url,methods,function(option){

return {data数据}

})

实例演示 

// 导入mockjs
import Mock from 'mockjs';
import qs from 'qs'
// 拦截 接口地址/api/getData  拦截get方法
// 并返回数据
Mock.mock(/\/api\/random/,function(options){
	// console.log(options,"options");
	var str = options.url.slice(options.url.indexOf("?")+1);
	var elem = qs.parse(str);
	// 获取问号后面内容
	console.log(str);
	return Mock.mock({
		status:0,
		name:elem.name,
		"list|10":[{
			"id|+1":1234,
			"name":"@cname",//随机中文名
			"age|1-200":1,//生成1-200的随机数
			"price|200-500.2-5":1,//生成小数
			"star|1-5":"★",//字符串随机
			"chart|2":"我爱我的祖国",
			"love|1":true,//随机布尔值
			"girl|2":["小红","小黄","小梅","兰姐"],//随机数组（1随机1个,2复制2份）,
			"wife":{"h|150-190":1,"w":45,"weight|85-150":1,"money|1000-9999":1},//对象
			"aprice":function(){return this.price+this.name}, //函数
			"tel":/1\d{10}/,//1开头的随机号码
			"pic":function(){return Mock.Random.dataImage('200x100', this.name)},//生成内容为名字的随机图片
			"date":"@date('yyyy/MM/dd')",//随机日期
			"time":Mock.Random.time(),//随机时间
			"pdate":"@datetime()",//随机日期+时间
			"now":"@now()",//当前日期时间
			"des":"@cparagraph(1,3)",
			"keyword":"@cword(3,5)",
			"title":"@ctitle(5,10)",
			"url":"@url()",
			"email":/[a-z]{4,12}@\.(126|163|qq)\.(com|cn|org)/,
			"ip":"@ip",
			"add":"@county(true)",
		}]
	})
})