vue---vue-cli使用mockjs的几种方式

在vue-cli项目中使用mockjs模拟数据，主要存在以下几种方式

1、直接在【.vue】页面中引用mockjs生成随机数据

<template>
  <div>
    <h1>直接使用Mockjs模拟数据</h1>
    <el-table :data="userList" border style="width:600px" stripe size="mini">
      <el-table-column prop="username" label="姓名" width="80">
      </el-table-column>
      <el-table-column prop="id" label="id"> </el-table-column>
      <el-table-column prop="birthday" label="出生日期"> </el-table-column>
      <el-table-column prop="isMale" label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.isMale == true">男</span>
          <span v-else>女</span>
        </template>
      </el-table-column>
      <el-table-column prop="city" label="地址" min-width="180">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
const Mock = require("mockjs"); //1.引入mockjs
export default {
  data() {
    return {
      userList: []
    };
  },
  created() {
    this.userList = this.getMockData()["userList"];
    console.log(this.userList);
  },
  methods: {
    getMockData() {
      // 2.生成随机数据
      var data = Mock.mock({
        "userList|1-5": [
          //随机生成1-5个数组元素
          {
            username: "@cname", //中文名称
            "id|+1": 0, //id值初始值为0，每次加1
            birthday: '@date("yyyy-MM-dd")', //日期
            city: "@city(true)", //中国城市
            "isMale|1-2": true //为true的概率为1/3
          }
        ]
      });
      return data;
    }
  }
};
</script>
<style lang="less"></style>

2、从外部【mock.js】中引入，使用Mock.mock(url, type, data)

Mock.mock(url, type, data)

参数名	参数描述
url	可选，拦截请求地址，如/list
type	可选，请求方式GET或POST
data	可选，数据（使用数据模板或占位符）

举例说明：在【src】文件夹下新建【mock.js】并在【main.js】中引入该文件【import "./mock.js";】

【mock.js】

const Mock = require("mockjs");
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceData = function(opt) {
  console.log("opt:", opt);
  let list = [];
  for (let i = 0; i < 10; i++) {
    let obj1 = {
      title: Random.ctitle(5, 10), // Random.ctitle( min, max )
      username: Random.cname(), // Random.cname() 随机生成一个中文姓名
      date: Random.date() + " " + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
    };
    list.push(obj1);
  }
  return {
    data: list
  };
};

Mock.mock("/news", /post|get/i, produceData); //当post或get请求到/news路由时Mock会拦截请求并返回上面的数据
Mock.mock("/getInfo", /post/i, {
  status: 200,
  userInfo: [
    {
      username: "maidu_xbd",
      id: 10,
      age: 24,
      birthday: '@date("yyyy-MM-dd")', //日期
      city: "@city(true)" //中国城市
    }
  ]
});

在【.vue】页面中可以通过【axios】请求数据，【mock】会将相同接口参数的数据返回

 axios.post("/news", "key=11").then(res => {
      console.log("news res=", res);
    });
 axios.post("/getInfo", "id=10").then(res => {
      console.log("getInfo res=", res);
    });

注意看控制台【Console】输出，显示数据已被获取到

但是！但是！！！通过以上方法在控制台【network】中是无法被拦截到的，（ps:如需要在【network】中看到拦截请求，具体见vue-cli项目使用mockjs模拟数据）

但是这已满足模拟后端数据，数据可通过【console.log(数据)】可在控制台【console】中查看。

当真正引入后端接口时，注释掉【main.js】中的【import "./mock.js";】，取消引入文件。