mockjs的详细语法和使用

介绍：在后端未准备好接口文档的时候，前端可以通过mockjs参考j接口文档自己先模拟数据写业务代码，仅仅大大的推进项目的进度，不至于前端工作人员偷懒，哈哈哈。

1作用

它可以生成随机数据，拦截ajax请求，模拟数据

2、mockjs的安装

	cmd进入项目目录，输出

npm i mockjs -D

3 使用方法

	①在项目的utils中创建一个mock。js

//导入
import Mock from "mockjs";

//拦截ajax，生成伪数据，拦截地址
Mock.mock ("http://abc.com/v5/list",{
    name:"mumu",
    age:18,
})

②在main.js中导入mock
③在需要请求模拟数据的页面写入
④在页面进行渲染

<template>
  <div class="about">
	<h1>mock</h1>
	<div v-for="item in list" :key="item.id">
		<h3>{{item.name}}</h3>
		<h3>{{item.price}}</h3>
		<p>产地：{{item.add}}</p>
		<p>产地：{{item.score}}|{{item.day}}|{{item.tel}}</p>
		<p>{{item.title}}</p>
		<p>{{item.description}}</p>
		<img :src="item.avatar" alt="">
	</div>
  </div>
</template>
<script>
	//导入requset
	import requset from "@/utils/request"
	// import NavCom from  '@/components/NavCom.vue'
	export default {
		// 数据的接收方（注入数据）
		inject:["a"],
		// components:{
		// 	NavCom
		// },
		data(){
			return  {
			outNum:5,
			list:[]
			}
		},
		created(){
			requset.post("/v5/jok",{"id":25,key:"xyz"})
			.then(res=>{
				console.log("参数",res.data);
			})
			// console.log(this.$children)
			// console.log(this.$parent,"parent")
			// console.log(this.$root,"root")
			requset.get("http://abc.com/v5/list")
			.then(res=>{
				console.log("模拟数据",res.data);
			})
			.catch(err=>{
				console.log(err);
			})
			requset.post("/v5/user")
			.then(res=>{
				console.log("随机",res.data);
				console.log(res.data.data)
				this.list = res.data.data;
			})
		}
	}
</script>

4.mock.js的常用语法

Mock.mock(/\/v5\/user/,
{
    code:0,
    msg:"成功",
    "data|10":[
        {
            "name":"@cname",//字符串
            "age|1-100":20,//数字
            "price|25-50.2-5":1,//小数
            "title":"@title(8,14)",
            "description":"@cparagraph",
            "isLog|1":true,
            "friend|2-10":["雄安红","小明","小兰"],//数组
            "des|2":{"eye":1,"hand":2,"job":"teaacher"},//对象
            "tel":/1\d{10}/,//正则
            "email":/[a-z]{2,6}@(126|163|qq)\.(com|cn|net)/,//邮箱
            "canMerry":function(){//函数
                if(this.age>22){
                    return true;
                }else{
                    return false;
                }
            },
            //日期，地址，图片
            "day":"@date(yyyy-mm-dd)",
            "time":"@time(hh:mm:ss)",
            "add":"@county(true)",
            "avatar":"@dataImage('200x100','')"
        }
        

    ]
}
   
)

更多详情信息可参考mockjs官网http://mockjs.com/examples.html#Boolean