Mock的基本使用

Mock.js是一款模拟数据生成器，旨在帮助前端攻城狮独立于后端进行开发，帮助编写单元测试。提供以下模拟功能：

• 根据数据模板生成模拟数据
• 模拟Ajax请求，生成并返回模拟数据
• 基于HTML模板生成模拟数据

总之，使用Mock.js可以前后端进行并行开发，提高效率，是前端工程师必掌握的一个工具
以下介绍使用步骤：

• 首先下载相关依赖包

npm install -S axios//因为模拟网络请求，最好也将axios库安装
npm install -D mockjs

• 在项目目录下创建mock.js文件，用于定义模拟数据接口
• 假设需要有获取用户信息的接口，现在我们模拟用户信息

//使用mock模拟数据
import Mock from 'mockjs' //引入mockjs
const Random = Mock.Random //获取mock.Random对象

const userList = function(){    
	let newList = []    
	//模拟10条数据
	for(let i = 0; i < 10; i++){
		//用户信息        
		let newNewsObject = {            
			userid: i+1, //用户编号            
			name: Random.cname(), //用户姓名            
			gender: Random.string('01',1,1),//性别            	
			phone: Random.string('number',8,11),//电话号码   
			birth: Random.date(),//生日            
			mail:Random.email() //邮箱
		}        
		newList.push(newNewsObject)    
	}    
	return newList
}

//请求url，就可以返回userList
Mock.mock('/mock/userList', userList)

• 在main.js中引入该mock.js文件，表示我们使用这里产生的数据

//引入mock
require('@/mock.js')

• 在你需要的地方发送get网络请求获取数据

// App.vue
<template> 
	<div id="#app"></div>
</template>

<script>
import axios from 'axios' // 引入axios
export default { 
// 挂载的时候获取用户列表 
mounted() { 
	axios.get('/mock/news').then(res => 
	{ // url即在mock.js中定义的 
		console.log(res.data) // 打印一下响应数据 
	}) 
}}
</script>

Mock详细用法参考