mock.js介绍
1、mock.js是用来模拟数据,可以拦截ajax请求,可以帮助前端开发者在没有后端接口的情况下独立开发
2、mock.js数据类型丰富,支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
3、可以生成模拟数据、模拟ajax请求并返回模拟数据
安装
mock.js官网: http://mockjs.com
npm install mockjs -D
创建mock文件
这里以vue项目为例,新建一个mock
文件,目录结构:
在mock.js
文件中写入以下代码:
import Mock from 'mockjs'
const Random = Mock.Random
// 模拟数据
let data = Mock.mock({ //生成数据模板
'array|1-10':[ //随机生成 1到10项的数组
{
'name|1':[ // 随机取一个值
'hello',
'mock.js',
'!'
]
}
],
'string|1-10':'a', //随机生成 1到10个由字符a 组成的字符串
'number|1-100':1, //随机生成 1到100的数字
'email':'@email', // 随机生成 邮箱地址
'boolean':'@boolean', //随机生成 boolean类型 true|false
'date':'@date(yyyy-MM-dd)', //随机生成 指定格式的日期类型 (yyyy-MM-dd => 2019-08-14)
'name':'@cname', //随机生成一个中文名
// ... 还可以生成许多其他类型,这里就不一一展示了,更多类型参考官方文档
})
//get请求 第一个参数:请求路径,第二个参数:请求方法,第三个参数:返回响应数据的函数
Mock.mock('/testGet',/get/,function (options) {
console.log(options);
return data
})
//post请求
Mock.mock('/testPost',/post/,function (options) {
console.log(options);
return data
})
更多数据模板类型参考官方文档:http://mockjs.com/examples.html
在main.js
中引入mock.js
文件
import Vue from 'vue'
import App from './App'
import axios from 'axios'
import './mock/mock' //引入mock.js
Vue.config.productionTip = false
Vue.prototype.$axios = axios // 这里引入了axios ,后面请求接口可以使用
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
在组件中使用ajax请求模拟数据
created(){
//get请求
this.$axios.get('/testGet').then(res =>{
console.log(res.data);
})
//post请求
this.$axios.post('/testPost').then(res =>{
console.log(res.data);
})
}
请求结果: