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

1.前言

在如今前后端分离的开发方式已被广泛采用的今天，前端同学和后端同学各自独立开发，后端提供数据接口，前端调用接口获取数据渲染页面。但是在实际开发中，后端开发由于逻辑相对复杂接口迟迟提供不到位，而前端正着急着调用接口来测试页面是否能够正常渲染，这就造成开发进度阻塞。幸好，我们有mockjs这个插件可以完美的解决这个问题，该插件可以非常方便的模拟后端提供接口以供调用，并且在后续后端真实接口提供以后，我们只需将创建的模拟数据文件删掉即可，丝毫不会对我们的项目造成污染。下面我们将介绍一下如何在vue-cli项目中结合mockjs模拟后端接口和数据。

2.安装

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

npm install mockjs --save-dev

3.使用mockjs模拟数据

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

import Mock from 'mockjs'

引入之后，我们就可以开始模拟我们想要的数据啦，示例如下：

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('/data',getData)
export default {data};

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

4.导入模拟好的数据接口

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

import mockdata from './mock'

5.测试模拟好的接口

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

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

methods:{
    fasong(){
      this.$http.get('/msg1').then(function (res) {
        console.log(res)
      })
    }
  }

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

OK，完美！

6.总结

当后端写好真实接口以后，我们只需删掉创建的mock.js文件和在main.js中导入假数据的那行代码即可，其余都不用动，简直不能更方便哈！

（完）