使用Mock.js

        打开官网http://mockjs.com/，映入眼帘的就是“生成随机数据，拦截 Ajax 请求”。Mock.js就是一款方便进行前后端分离开发的工具，能够拦截Ajax请求，并返回模拟数据，保证前端工程师们的开发不依赖于后端开发进度。具有：前后端分离、开发无侵入、数据类型丰富、用法简单、方便拓展的特点。

1.示例

在这里我使用vue-cli脚手架的spa项目做栗子：

首先下载mockjs

E:\VueProject\medpro>npm i mockjs -D

npm i mockjs -D我们只在开发环境下使用

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

//导入mockjs
var Mock = require('mockjs')
//或者使用 import Mock from 'mockjs'
Mock.mock("http://localhost:8088/userAction.action/userLogin",{//返回值
	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(){ //带有上方随机生成名字的200*100的图片
				return Mock.Random.dataImage("200x100",this.name);
				},
			"email":/[a-z]{2,10}@(126|163|qq|gmail)\.com/, // "email":"@email"
			"address":"@county(true)", //产生随机的地址
			"motto":"@csentence", //随机的一句话
			"qq":/\d{5,12}/ //正则表达式

		}
	]
});

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://localhost:8088/userAction.action/userLogin")
				.then(res=>{
					console.log(res.data.list);
					this.users=res.data.list})
				.catch(err=>console.log(err))
			},
			}
created(){
			this.getUsers();//获取用户列表
			
		}