本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码，分享给大家，也给自己留个笔记。
在项目中尝试了mockjs，mock数据，实现前后端分离开发。
关于mockjs，官网描述的是
1.前后端分离
2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
3.数据类型丰富
4.通过随机数据，模拟各种场景。
等等优点。
总结起来就是在后端接口没有开发完成之前，前端可以用已有的接口文档，在真实的请求上拦截ajax，并根据mockjs的mock数据的规则，模拟真实接口返回的数据，并将随机的模拟数据返回参与相应的数据交互处理，这样真正实现了前后台的分离开发。
与以往的自己模拟的假数据不同，mockjs可以带给我们的是：在后台接口未开发完成之前模拟数据，并返回，完成前台的交互；在后台数据完成之后，你所做的只是去掉mockjs：停止拦截真实的ajax，仅此而已。
下面一步步的来实现vue-cli创建项目并添加一条新闻类的数据模拟接口：
1.安装vue-cli全局脚手架
2.创建vue项目
npm install axios --save
3.安装mockjs
4.项目目录
axios/api 用来封装axios
NeswCell.vue 新闻组件
router/index.js 路由
main.js 入口js
mock.js mockjs文件
在来看下完成后的效果
5.在入口js（main.js）里引入mockjs
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
// 引入mockjs
require('./mock.js')
/ eslint-disable no-new /
new Vue({
el: '#app',router,template: '
App}
})
Vue.filter('getYMD',function(input) {
return input.split(' ')[0];
})
这里我添加了额一个常用的时间整理过滤器 getYMD
6. 添加一个mock规则（mock.js）
// 获取 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 {
articles: articles}
}
// Mock.mock( url,post/get,返回的数据)；
Mock.mock('/news/index','post',produceNewsData);
7.在Hello.vue 中请求文档接口，并接收mock数据
<div class="index">
<div v-for="(item,key) in newsListShow">
<news-cell
:newsDate="item"
:key="key"
