npm install mockjs
在vue项目中新建一个为mock.js
代码为:
`//引入 mockjs 模块
import Mock from "mockjs";
Mock.mock("myList", {
"list|5": [ //对象 5是固定值 可以设置1-20 随机
//随机返回5项
{
// title: "@ctitle(5,20)",
// url: "@url", //随机生成url
// "xx|1-5":"★", //string
// "xxx|3":"★",
// 'id|+1':1, //number id自增一
// 'number|1-100':100, //number 1-100的随机数
// "number2|123.2":1, //number 123固定 .后面是2位小数 随机;
// "boolean|1":true, //boolean 随机
// "arr|+1":["1","2","3"], //数组自加1
// "arr|1-2":["1","2","3"], //数组 数组*1或2
// "string1":'123', //字符串 固定名字
// 'regexp': /\d{5,10}/, //正则随机数 跟上面的number 差不多
// "absolutePath": "@xx @url" //根据@和路劲(/(前进) 或者 ../(回退)) @就是查找的意思
// "boolean":'@boolean()', //@boolean() 随机 bool(true/false)
// "number3":'@natural()', //@natrural() 随机数
// "number4":'@natural(10000)', //@natrural() 随机数 没有测试到位这个1000 是什么结果
// "number5":'@natural(1,100)', //@natrural(min,max) 随机数 min 最小值, max最大值;
// "javaFloat":'@float(60,100,1,3)', //@float(min,max,xsmin,xsmax) min 最小值 max最大值 xsmin小数最小值 xsmax 小数最大值 float是java类型的浮点类型
// "character":'@character(upper)', //@character 应该是单个字符串 里面参数有4钟character( 'lower/upper/number/symbol' )lower:小写英文 upper:大写英文 number:数字 symbol:符号
// "string1":'@string(5)', //随机五个字符串和符号
// "string2":'@string(number,5)', //随机字符串数字五个 形参1可以为:lower/upper/number/symbol/iioopp(随便给) 形参2为:数字
// "string3":'@string(1,5)', //随机字符串一到五
// "string4":'@string(number,1,5)', //随机字符串数字一到五
// "range1":'@range(5)', //数组顺序五个
// "range2":'@range(1,15,3)', //数组顺序 以三自增
// "date1":'@date()', //@date 日期 2016-09-09
// "date2":'@date(yyyy-MM-dd)', //@date 日期 2002-03-30
// "date3":'@date(yy-MM-dd)', //@date 日期 91-09-13
// "date4":'@date(yyyy-MM-dd MM M dd d)', //@date 日期 2013-03-29 03 3 29 29
// "time1":'@time()', //时间
// "time2":'@time(A HH:mm:ss)', //时间
// "time3":'@time(HH:mm:ss)', //时间
// "time4":'@time(H:m:s)', //时间
// "dateTime1":'@datetime()', //日期时间
// "dateTime2":'@datetime(yyyy-MM-dd HH:mm:ss)', //日期时间
// "dateTime3":'@datetime(y-M-d H:m:s)', //日期时间
// "dateTime4":'@datetime(yyyy yy y MM M dd d HH H hh h mm m ss s SS S A a T)', //日期时间
// "now1":'@now()', //当前时间 2021-01-11 14:16:43
// "now2":'@now(year)', //当前时间 2021-01-01 00:00:00
// "now3":'@now(month)', //当前时间 2021-01-01 00:00:00
// "now4":'@now(day)', //当前时间 2021-01-11 00:00:00
// "now5":'@now(hour)', //当前时间 2021-01-11 14:00:00
// "now6":'@now(minute)', //当前时间 2021-01-11 14:16:00
// "now7":'@now(second)', //当前时间 2021-01-11 14:16:43
// "now8":'@now(yyyy-MM-dd HH:mm:ss SS)', //当前时间 2021-01-11 14:16:43 437
// "img1":"@dataImage(200x100,'hello')", //图片@dataImage(size,text) size:图片的长框 text:图片内容
// "color1":'@color()', //@color 颜色随机
// "color2":'@rgba()', //@rgba 颜色随机
// "text":'@paragraph(1,3)', //text
// "sentence":"@sentence(3.5)", // 3-5为一中心 随机3-5个英文字母
// "word":"@word(3,5)", // 3-5为一中心 随机3-5个英文字母
// "title":'@title(3.5)', // 3-5为一中心 随机3-5个英文字母
// "cparagraph":'@cparagraph(1,5)', //3-5为一个中心句号结束 随机3-5个中文
// "csentence":'@csentence(3,5)', //3-5个中文字母 句号结束
// "cword1":'@cword()', //1个中文 没有句号结束
// "cword2":'@cword(3,5)', //3-5个中文 没有句号结束
// "cword3":'@cword(零一二三四五六七八九十, 3, 5)', //3-5个中文 没有句号结束
// "ctitle1":'@ctitle()', //@ctitle 随机中文 没有句号结束;
// "ctitle2":'@ctitle(3,5)', //@ctitle 3-5个中文 没有句号结束;
// "ctitle3":'@ctitle(5)', //@ctitle 5个中文 没有句号结束;
"namne1":'@first()', // 英语的名称
"namne2":'@last()', // 英语的名称
"namne3":'@name()', // 英语的名称 2个
"cnamne1":'@cfirst()', // 中文的名称
"cnamne2":'@clast()', // 中文的名称
"cnamne3":'@cname()', // 中文的名称 2个
"url":'@url()', //web 地址
"email":'@email()', //邮箱
"region":'@region()', //华南地区
"province":'@province()', //省份
"city1":'@city()', //城市 深圳市
"city2":'@city(true)', //城市 广东省 深圳市
"id":'@id()' //id 随机
}
]
});
然后在mianjs
引用刚刚配置好的mock.js文件
import mock from './uitle/mock.js'
然后在随便一个vue文件当中使用axios , //这边默认当前都安装axios
vue文件读取:
axios.get('myList').then(res =>{
console.log(res);
})
最后有一个问题是:
如果有真实数据的情况下 访问真实数据
没有真实数据的情况下 访问mockjs数据；
不使用if判断是否能来回切换呢？