前端mock使用

mock是一个模拟数据生成器，旨在帮助前端独立于后台开发，在后台未完成接口时，前端可直接模拟数据开发测试。

mock功能：

1）、根据数据模版生成模版数据；

2）、模拟AJAX请求，生成请求数据；

3）、基于HTML模版生成模版数据。

demo步骤：

1、在vue项目中需要Vue、vue-resource、vue-cli

2、通过 npm i mockjs --save-dev  在项目中安装mockjs依赖

3、在src文件夹下新建util文件夹，文件夹下新建一个mock.js

import Mock from 'mockjs';

export default Mock.mock('http://127.0.0.1:8888/2.cn', {

'name':'12',

  'color':'#fff',

});

4、.vue文件中模拟AJAX请求

import Vue from 'vue'

import VueResource from 'vue-resource'

Vue.use(VueResource)

import data from '../../util/mock';

Vue.http.get("http://127.0.0.1:8888/2.cn").then(

(successData) => {console.log(successData);},

(fileData) => {console.log(fileData);}

);

到此即可实现简单的模拟接口获取数据