mock.js的使用方法

在开发过程中，有很多的ajax请求，前后端分离开发你肯定遇到这样的问题，后台给你的接口文档，你需要在本地模拟数据返回，现在学会使用mock.js拦截ajax请求，更加方便的构造你需要的假数据。

一.简单示例

在这里我举的例子是在vue项目中如何使用mock.js。

• 安装mockjs

npm install mockjs --save-dev
//生产环境下安装

• 在项目中创建mock.js，并写一个简单的返回示例，后面拦截其他url的ajax请求直接参考这个示例。

//导入mockjs
var Mock = require('mockjs')
//或者使用 import Mock from 'mockjs'
Mock.mock(/api\/users/,{ //返回值
	msg:"成功",
	status:0,
	"list|10":[
		{
			"name":"@cname", //随机生成中文名字
			"id|+1":996, //从996开始生成一个数
			"age|16-80":1,//随机生成一个16-18的数字
			"gender|1":[1,2,3], //取1,2，3中的一个
			"salary|7000-15000.2":1, //取7000-15000之间的一个数，保留2位小数
			"pic":function(){ 
				return Mock.Random.dataImage("200x100",this.name); //带有上方随机生成名字的200*100的图片
				},
			"tel":/1\d{10}/,
			"email":/[a-z]{2,10}@(126|163|qq|gmail)\.com/,
			// "email":"@email" 
			"address":"@county(true)", //产生随机的地址
			"motto":"@csentence", //随机的一句话
			"qq":/\d{5,12}/ //正则表达式
			 
		}
	]
	
})

• main.js里面引入该文档

import './assets/js/mock'//此部分引入的是我们所编写的mockjs文档`

• xxx.vue文件中调用mock.js中模拟的数据接口，这时返回的response就是mock.js中用Mock.mock(‘url’,data）中设置的data了。

methods:{
			getUsers(){
			//$http是在main.js中通过
			//import axios from 'axios';
			//Vue.prototype.$http = axios; //所有vue的实例都将拥有一个叫$http的方法
				this.$http.get("http://www.mi.com/api/users")
				.then(res=>{
					console.log(res.data.list);
					this.users=res.data.list})
				.catch(err=>console.log(err))
			},
			}
created(){
			this.getUsers();//获取用户列表
			
		},

二.拦截数据的方法Mock.mock()