【vue】Mockjs模拟数据

Mockjs模拟数据

特性：①可以帮助前端开发人员实现前后端分离测试。②增加测试效果的真实性。③可以模拟的数据类型丰富。诸如：数值、字符串、对象、数组、时间、图片、颜色、文本、姓名、网址域名、地址等。
官网关于模拟各种数据的各种表示
其实只要记住从左到右依次是：“模拟数据的属性名 | 规则 ”：属性值，套用就可了。

1 与vue结合的使用步骤

1.1 安装依赖

cnpm install --save-dev mockjs

1.2 创建模拟文件

在vue的src文件夹下，创建mockjs文件。

import Mock from 'mockjs'//引入文件
//参数1为请求路径、参数2为请求类型、参数3返回数据的模板
//在这里我没写类型，所以只要路径对都可以访问到
Mock.mock("/list", {
    "result|4": [
        {
        //属性名：id;生成规则：+1（在默认基础上每次加1）;属性值：1（默认值）
            "id|+1": 1,
            "name|+1": ["张三", "李四", "王五", "马六"]
        }
    ]
});
export default Mock;//暴露接口

1.3 请求数据

请求数据前需要将mockjs文件导入

//main.js
import Vue from 'vue'
import Mock from './mock/Mock.js'
Vue.use(Mock)

<template>
  <div id="app">
    <button @click="getajax">请求数据</button>
  </div>
</template>
<script>
//App主模板，当然也可以选择其他组件模板
import Vue from 'vue'
import Axios from 'axios';
Vue.prototype.$axios = Axios;//将axios添加为Vue对象的全局方法

export default {
  name: "App",
  components: {
    HelloWorld,
    "v-home": Home,
  },
  methods: {
    getajax(){
      this.$axios.post('/list').then(res =>{
        console.log(res);
      })
    }
  }
  }
 </script>