介绍

Mock.js是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

  • 根据数据模板生成模拟数据
  • 模拟 Ajax 请求，生成并返回模拟数据
  • 基于 HTML 模板生成模拟数据

在开发时，前后端都是各司其职，前端只需要使用mock.js写好静态模拟数据就行。

安装

$ npm install mockjs --save-dev

使用mock.js配置模拟ajax数据

Mock.mock({
   url: 'api/products/getList',
   response: {
       'data|1-10': [
          {
              'id|+1': 1,
              'name': 'product1'
          }
       ]
   }
});

具体语法请参考这里。

发送ajax请求

this.$http.post('api/products/getList').then(function (res) {
   var data = JSON.parse(res.data);

   console.log(data);
}, function () {

});

在开发环境中配置

1.把所有mock数据单独存放于一个js文件中，比如mock.js

import Mock from 'mockjs'

export default (options) => {
   const mockApiConfig = (options) => {
       Mock.mock(options.url, options.response);
   }

   // 开始mock数据
   mockApiConfig({
       url: 'api/products/getList',
       response: {
          'data|1-10': [
              {
                  'id|+1': 1,
                  'name': 'product1'
              }
           ]
       }
   });
}

2.在development环境下才引入mock.js，在src/main.js中加入如下代码：

import Mock from './assets/js/mock.js'

if ('development' === process.env.NODE_ENV) {
   Mock();
}

配置完之后，也只有在开发环境下才会引入mockjs模拟数据，发布的时候不会受到影响。