mock模拟数据

mockJs 基础用法

什么是mockJs

生成随机数据，拦截 Ajax 请求

参考文档：http://mockjs.com/examples.html

为什么使用mockJs

在开发过程中，有很多的ajax请求，前后端分离开发你肯定遇到这样的问题，后台给你的接口文档，你需要在本地模拟数据返回，可能你也用到过我之前用的蠢方法，就是新建一个test.json文件，放入接口文档中写的返回示例，这么做有个很大的问题是不够灵活，而且还需要切换url，现在学会使用mock.js拦截ajax请求，更加方便的构造你需要的假数据。

如果后端接口还未开发完成，我们自己手动模拟后端接口返回随机数据完成交互功能

采用json数据模拟，生成数据比较繁琐，也比较有局限性，没办法达到增删改查

采用mockJs进行模拟数据，可以模拟各种场景（get、post）生成接口，并且随机生成所需数据，还可以对数据进行增删改查

使用mockJs

在项目中安装mock

npm install mockjs

在项目中新建mock文件夹，在mock文件夹中创建index.js

//引入mockjs

import Mock from 'mockjs'

//使用mockjs模拟数据

Mock.mock('/\/api\/test\/proxy\/query_common_credit/', {

  "ret":0,

  "data":

    {

      "mtime": "@datetime",//随机生成日期时间

      "score|1-800": 800,//随机生成1-800的数字

      "rank|1-100":  100,//随机生成1-100的数字

      "stars|1-5": 5,//随机生成1-5的数字

      "nickname": "@cname",//随机生成中文名字

    }

//data里的属性看不懂，需要详细看语法规范,请看上面的参考文档

});

将mock文件夹的index.js文件在main.js中导入

import Vue from 'vue'

import App from './App.vue'

import './mock/index.js'

new Vue({

render: h => h(App),

}).$mount('#app')

xxx.vue文件中调用mock.js中模拟的数据接口，这时返回的response就是mock.js中用Mock.mock(‘url’,data）中设置的data了

query_common_credit(){

    var loginMode = 'test';//模型

    var url = '/api/test/proxy/query_common_credit';

    this.$axios.get(url)

      .then(response => {

      })

      .catch(error => {

      })

  }