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

前言

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

GitHub项目地址：https://github.com/jiangjiaheng/web-template

关于MockJs

1. 官方文档

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

Mock.js官方文档地址：http://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文件，添加如下代码。