vue+mockjs前后端分离mock数据

          在前后端分离开发过程中，后端接口没有开发完成之前，前端可以用已有的接口文档，在真实的请求上拦截ajax，并根据mockjs的mock数据的规则，模拟真实接口返回的数据，并将随机的模拟数据返回参与相应的数据交互处理，这样真正实现了前后台的分离开发。

        与以往的自己模拟的假数据不同，mockjs可以带给我们的是：在后台接口未开发完成之前模拟数据，并返回，完成前台的交互；在后台数据完成之后，你所做的只是去掉mockjs：停止拦截真实的ajax，仅此而已。

第一步：安装mockjs

npm install mockjs --save-dev

第二步：在src下添加mock.js，主要用来随机生成我们想要的数据

// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceNotifysData= function () {
  let articles = [];
  for (let i = 0; i < 5; i++) {
    let newArticleObject = {
      title: Random.csentence(5, 30), //  Random.csentence( min, max )
      notifyPic: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
      notifyType: Random.integer(1, 3), //随机生成1-3的Integer
      isTop: Random.integer(1, 2), //随机生成1-2的Integer
      createUser: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
      createTime: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
    }
    articles.push(newArticleObject)
  }
 
    return {
        articles: articles
    }
}
 
// Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/admin/notify', 'get', produceNotifysData);

Mock.mock( rurl, rtype, template )，其中 rurl 的定义是

rurl可选。可以为正则
表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如
/\/domain\/list\.json/、’/domian/list.json’。

第三步：在main.js中引入第二步创建的mock.js;

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(iView);

Vue.config.productionTip = false

// 引入mockjs
require('./mock.js')


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

第四步：就可以在我们的axios中使用对应url来获取我们mock的数据

mounted() {
  //获取公告列表
  this.getAdminNotifyList();
},
methods: {
  getAdminNotifyList() {
	this.$axios.get('/admin/notify').then(resp => {
	  this.notifyList = resp.data.articles;
	  //打印返回数据
	  console.log(this.notifyList)

	}).catch(err => {
	  console.log(err)
	})
  }
}

第五步：打印数据，页面显示