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>
複製代碼