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>