Mockjs简介
之前,前端在开发时,需要等后端把接口完成,前端再把接口接入,获取数据。这样前端一般会遇到一个问题:PI接口未及时输出时,前端开发进度会被延误。这个时候就需要前端端分离了,后接未输出API接口时,你也要使用工具来模拟API接口生成数据。这个工具就是Mockjs,你也可以使用Easy-mock。
特征
- 根据数据模板生成模拟数据
- 为ajax请求提供请求/响应模拟
1. mockjs的安装:
npm install mockjs --save-dev
2. 配置
为了只在开发环境使用mock.js
,而打包到生产环境时自动不使用mock.js
,做以下配置:
config
目录下dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
Mock: true
})
config
目录下prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"',
Mock: false
}
src
目录下main.js
process.env.Mock && require('./mock/mock.js')
3. 新建一个mock.js的文件
![5ea0e098e4854f15e59bf70865687cc3.png](https://i-blog.csdnimg.cn/blog_migrate/de786859ff95bff29813d6a8570f8e38.png)
4. 在mock.js文件中编写响应数据
// 引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random
// mock一组数据
const produceNewsData = function () {
let articles = []
for (let i = 0; i < 100; i++) {
let newArticleObject = {
title: Random.csentence(5, 30), // Random.csentence( min, max )
thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串
}
articles.push(newArticleObject)
}
return {
data: articles
}
}
// 拦截ajax请求,配置mock的数据
Mock.mock('/api/test', 'get', produceNewsData)
设置请求延迟时间
// 设置请求延时时间
Mock.setup({
timeout:2000
})
5. 使用axios请求数据
<script>
export default {
mounted: function() {
this.getTest();
},
methods: {
getTest(){
this.$http.get('/api/test').then(function(res){
console.log(res.data);
});
}
}
};
</script>
![27aff5ebef06a094e227253146ebab1c.png](https://i-blog.csdnimg.cn/blog_migrate/cc6e762428f679e9af3e09fcccd91cce.jpeg)
通过这个例子,你已经会使用Mockjs了,你可以了解一下官方文档的数据模板定义和数据占位符定义,知道用这个东西,要用的时候去查就好了。
Mock.jsmockjs.com下一篇,我们来封装一个axio接口,并配合mockjs使用吧