如何在vue项目中结合mockjs模拟假数据

安装

使用之前，我们需要先安装一下mockjs

npm install mockjs --save-dev

使用mockjs模拟数据

安装完成之后，我们在项目的src目录下新建mock.js文件，并引入mockjs:

import Mock from 'mockjs'

引入之后，我们就可以直接在mock.js中模拟我们想要的数据啦，示例如下：

import Mock from 'mockjs'

const Random = Mock.Random;

function getData(){
  let datalist= [];
  for (let i = 0; i < 100; i++) {
    let newData = {
      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() 返回一个随机的时间字符串
    }
    datalist.push(newData)
  }
  return {
    data: datalist
  }
}
const data = Mock.mock('/msg1',getData)
export default {data};

…
上面代码中的
getData()函数是用来批量生成数据的
Mock.mock()函数的第一个参数是被请求的url
第二个参数是后端要返回给前端的数据，写好之后我们将该接口导出。

导入模拟好的数据接口

模拟好假数据接口之后，我们还要在main.js中将接口导入，这样在项目中任意组件内都可以请求这些接口了：

import mockdata from './mock'

//main.js 入口文件
// console.log('OK')
import  Vue from 'vue'

import mockdata from './mock/mock'

//导入App组件
import app from './App.vue'

// 导入vue-resource
import VueResource from 'vue-resource'
Vue.use(VueResource)

var vm = new Vue({
  el:'#app',
  render:c => c(app),
  mockdata
})

测试模拟好的接口

到此，我们就已经完成数据接口的模拟，我们可以来测试一下，看看接口效果。我们在任意组件内，对写好的接口url发起请求，看看返回的数据，代码如下：

<template>
	<div>
			<button @click="fasong">fasong</button>
	
	</div>
</template>

<script>
export default {
	methods:{
			fasong(){
				this.$http.get('/msg1').then(result => {
					console.log(result)
				})
			}
		}
}
</script>

运行结果

控制台打印的请求返回数据如图：