前端数据的mock

1.首先下载npm包

npm i mockjs

2.创建moc.js文件夹，在里面创建js文件

var Mock = require('mockjs')

mock的数据规范

属性值是字符串 string

1.'name|min-max':string

const data = Mock.mock({'username'|1-10 :'*'})

通过重复string生成一个字符串，重复次数大于等于min，小于等于max

{usearname:'*****'}
生产1到10个'*'

2.‘name|count':'string'

const data = Mock.mock({'username|5' :'*'})

通过重复string生成一个字符串，重负次数等于counts

{usearname:'*****'}

属性值是数字 number

1.’age|min-max‘：number

const data = Mock.mock({'age|18-40' :0})

生成一个大于等于min，小于等于max的整数，属性值 number只能是用来确定类型

{age：18}
生成18到40中间的数字

数据占位符定义

@id():得到随机的id

@cname（）：随机生成中文名字

@date('yyyy-MM-dd'):随机生成日期

@paragraph():描述

@email ():生成邮箱

mock使用post小案例

路径：src/自定义mock文件/mock.js
 
import Mock from 'mockjs';
 
// 当用户ajax地址里面 有/api/login 的时候 返回如下数据
Mock.mock("/api/login",{
    下方为自定义的数据
    code:200,
    msg:"登录成功",
    user:{name:"彭于晏",age:18,rank:10},
    token:'joaaohiefuopieeaskfoefeop',//token随便乱写

使用mockjs数据的文件

export default {
    创建后调用mockjs请求数据
    created() {
        this.login()
    },
    methods: {
    定义请求方法
        login() {
    发送ajax请求
                              由于指定了默认的请求域名，此处的用户名与密码必须真实存在
            this.$axios.post("/api/login", { name: '彭于晏', password: 'pyy' })
                .then(res => {
    打印请求数据
                    console.log("login", res.data);
                })
                .catch(err =>
                    console.error(err)
                )
        }
    }
}

mock使用get案例

Mock.mock("/api/feed",
    //返回10条随机数据 
    Mock.mock({
        "data|10":[
            {
                name:"@cname",//随即中文名
                msg:"@cparagraph(2,3)",//随机段落
                date:"@datetime",//随机日期
            }
        ]
    })
)

使用get的文件

export default {
    创建后调用数据请求方法
    created() {
        this.getFeed()
    },
    methods: {
    定义请求方法
        getFeed() {
            this.$axios.get("/api/feed")
                .then(res => {
                    console.log(res.data)
                })
                .catch(err => {
                    console.error(err)
                })
        }
    }
}

模拟接受参数

Mock.mock(/\/api\/feed/, "get", function(config) {
	//console.log("config" , config );
	//通过config可以获取到前端发给服务器的数据
	var po = config.url.indexOf("?"); //获取问号的位置
	if (po != -1) {
		var query = config.url.slice(po + 1); //获取到查询参数current=4转换为{current: 4}
		var arr = query.split("&"); //按&分割为数组
		var search = {}; //定义个对象
		arr.forEach(item => {
			var temp = item.split("="); //把数组每个元素按等于分割[current,4]
			search[temp[0]] = temp[1]; //search[ "current"] =4
 
		})
	}
 
	// 返回一个随机数据
	return Mock.mock({
		"code": 0,
		"data|10": [{
			id: "@id",
			msg: "@cparagraph(2,3)", //段落2-3行
			name: "@cname", //随机中文名
			date: "@datetime" //随机日期
		}],
		"pagnation": {
			"total|10-25": 1,
			"size": 4,
			"pageTotal|4-10": 1,
			"current": search.current,
		}
	})
})

案例：

Mock.mock("/api/test", Mock.mock({
	name: "@cname", //随机中文名
	"age|100-200": 1, //100-200的随机数
	"price|10-50.2-5": 1, //10-50随机数 小数点2-5位
	"live|1-2": true, //随机true或false
	"start|1-5": "⭐", //把字符串重复1-5次
	"friend|2": ["小红", "小明", "小刚", "小白", "小蓝"], //1是挑一个大于1是重复n次
	"props|1-3": {
		name: "mm",
		age: 22,
		leg: 2,
		job: "web",
		eye: 2
	},
	"tel": /13\d{9}/,
	"des": function() {
		return `大家好，我的名字是${this.name}，今年${this.age}岁`
	},
	"data|10": [{
		"id|+1": 1024,
		"ID": "@id",
		date: "@date",
		time: "@time",
		datetime: "@datetime",
		name: "@cname",
		pic: "@dataImage('200x100')",
		description: "@cparagraph(1,3)",
		title: "@ctitle(8,12)",
		url: /http:\/\/www\.[a-z]{2,8}\.(com|cn|org)/,
		email: /[4-8]@\.(126|qq|163)\.(com|cn|org)/,
		address: "@county(true)", //省市区地址
	}]
}))