如何在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('/msg1',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中导入假数据的那行代码便可，其他都不用动，简直不能更方便哈！

（完）