vue-cli@3封装MockJs（vue项目模板封装系列）

前言

上一期分享了如何在vue-cli3的框架中，封装Vuex。本期将分享如何在vue项目中添加Mock.js，并封装使用。

GitHub项目地址：github.com/jiangjiahen…

关于MockJs

1. 官方文档

本文默认你对Mock.js有一定的了解，并且阅读过Mock.js的官方文档，因此本文就不在赘述关于Mock.js的基础知识。

Mock.js官方文档地址：mockjs.com/

2. 个人理解

Mock.js是一门生成随机数据，为前端Ajax请求提供数据接口的前端框架技术，主要是为了适应前后端独立开发，为前端开发提供虚拟的后台数据接口，供前端调试开发。

项目实例

1. 介绍

如上图所示，我将Mockjs生成的随机数据展示到表格中。

2. 添加Mock.js

npm add mockjs

在vue项目所在文件夹内打开命令行，输入上面的指令，即可添加Mockjs。

添加成功后，在src文件夹下，建一个mock文件夹，如图所示添加文件。

3. 封装Mock.js

在mock的文件夹中，先添加一个mock.js文件，然后创建一个mockData文件夹，并且在该文件夹中添加tableData.js。

mock.js代码如下

import Mock from 'mockjs' // 引入mockjs

import tableData from './mockData/tableData'

Mock.mock('/data/tableData', 'get', tableData) // tableData

tableData.js代码如下

import Mock from 'mockjs' // 引入mockjs

const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据

let data = [] // 用于接受生成数据的数组
let size = [
        '300x250', '250x250', '240x400', '336x280',
        '180x150', '720x300', '468x60', '234x60',
        '88x31', '120x90', '120x60', '120x240',
        '125x125', '728x90', '160x600', '120x600',
        '300x600'
    ] // 定义随机值
for (let i = 0; i < 10; i++) { // 可自定义生成的个数
    let template = {
        'Boolean': Random.boolean, // 可以生成基本数据类型
        'Natural': Random.natural(1, 10), // 生成1到100之间自然数
        'Integer': Random.integer(1, 100), // 生成1到100之间的整数
        'Float': Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位
        'Character': Random.character(), // 生成随机字符串,可加参数定义规则
        'String': Random.string(2, 10), // 生成2到10个字符之间的字符串
        'Range': Random.range(0, 10, 2), // 生成一个随机数组
        'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式
        'Image': Random.image(Random.size, '#02adea', 'Hello'), // Random.size表示将从size数据中任选一个数据
        'Color': Random.color(), // 生成一个颜色随机值
        'Paragraph': Random.paragraph(2, 5), //生成2至5个句子的文本
        'Name': Random.name(), // 生成姓名
        'Url': Random.url(), // 生成web地址
        'Address': Random.province() // 生成地址
    }
    data.push(template)
}

export default data;

再在main.js中添加mock，完成封装。

4. 创建表格文件，引用tableData.js的随机数据

在pages文件夹下面的Information.vue文件，添加如下代码。

<template>
  <div class="info">
    <h1>This is A Mock Demo.</h1>
    <el-row>
      <el-col>
        <div class="table-box">
          <el-table :data="tableData" style="width: 100%" height="450">
            <el-table-column
              v-for="(col, index) in columns"
              :key="index"
              :prop="col.prop"
              :label="col.label"
              :width="col.width"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">跳转</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const columns = [
  {
    prop: "Date",
    label: "日期",
    width: 180
  },
  {
    prop: "Name",
    label: "姓名",
    width: 180
  },
  {
    prop: "Address",
    label: "地址",
    width: 180
  },
  {
    prop: "Paragraph",
    label: "描述",
    width: undefined
  }
];
export default {
  name: "",
  components: {},
  created() {
    this.getDataFromApi();
  },
  data() {
    return {
      columns: columns,
      tableData: []
    };
  },
  methods: {
    getDataFromApi() {
      this.$api.get(
        "/data/tableData",
        null,
        Response => {
          this.tableData = Response;
          console.log(this.tableData);
        },
        Error => {
          console.log(Error);
        }
      );
    },
    handleClick(row) {
      window.open(row.Url);
    }
  }
};
</script>

<style scoped>
</style>