Mock.js(生成虚假数据)使用及在vue+vite+ts中集成mock.js

介绍

mock.js 官网：http://mockjs.com/

目前的大部分公司的项目都是采用的前后端分离, 后端接口的开发和前端人员是同时进行的. 那么这个时候就会存在一个问题, 在页面需要使用大量数据进行渲染生成前, 后端开发人员的接口也许并没有写完, 作为前端的我们也就没有办法获取数据. 所以 前端工程师就需要自己按照接口文档模拟后端人员提供的数据, 以此进行页面的开发.

这个时候, Mock.js的作用就体现出来了, 在数据量较大的情况下, 我们不用一个一个的编写数据, 只需要根据接口文档将数据的格式填入, Mock.js就能够自动的按需生成大量的模拟数据. 且Mock.js提供了大量的数据类型, 包括文本, 数字, 布尔值, 日期, 邮箱, 链接, 图片, 颜色等.

使用

①下载

npm install mockjs

②引入

Mock.js暴露了一个全局的Mock对象, 我们只需要将Mock对象引入到文件中, 调用Mock对象的方法即可

CommonJS的引入方式

//CommonJS引入
let Mock = require('mockjs)

//调用Mock.mock()方法模拟数据
let data = Mock.mock({
'list|1-10': [{
  'id|+1': 1
}]
});
console.log(data);

ES6的引入方式

//ES6的引入方式
import Mock from 'mockjs'

let data = Mock.mock({
 // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
  'id|+1': 1
}]
});
console.log(data);

Mock对象提供了4个方法, 分别是

• Mock.mock(),
• Mock.setup()
• Mock.valid,
• Mock.toJSONSchema()

一个工具库Mock.Random. 其中我们经常使用到的就是Mock.mock()和Mock.Random.

③Mock.js的规范

'list|1-10': [{
  'id|+1': 1
}]

上面的代码被称为数据模板, 用于告诉Mock.js生成什么样的数据, 其中数据模板中的每个属性由三部分构成: 属性名, 生成规则, 属性值:

list 为数据模板中的属性名;
1-10 为生成规则(表示生成最少1个, 最多10个重复数据)
[{‘id|+1’: 1}] 是属性值, 属性值中可以嵌套使用属性名和生成规则.

具体的生成规则参见: https://github.com/nuysoft/Mock/wiki/Syntax-Specification

Mock.mock()

Mock.mock()方法是用来根据数据模板生成模拟数据, 我常用到的是以下两种传参方式:

Mock.mock(template): 根据数据模板template生成模拟数据

let data = Mock.mock({
data: {
  'products|10-20': [{
    name: '手机',
    price: 1000
  }]
}
})
console.log(data);

Mock.mock(url, template): 拦截请求地址为url的ajax请求, 并根据数据模板template生成模拟数据

let data = Mock.mock('api/products' , {
data: {
  'products|10-20': [{
    name: '手机',
    price: 1000
  }]
}
})

//使用jquery Ajax发送请求
$.ajax({
  url: 'api/products',
  type: 'GET',
  success: function(res) {
    console.log(res);
  }
})

Mock.Random

Mock.Random是Mock.js提供一个工具类, 用于生成常用的几种数据.

生成布尔值

//使用@占位符的方式
 let data = Mock.mock({
    data: {
      boolean: '@boolean'
    }
  })
  console.log(data);

//使用Mock.Random调用函数的方式
  let data = Mock.mock({
    data: {
      boolean: Mock.Random.boolean()
    }
  })
  console.log(data);

生成日期

 let data = Mock.mock({
    data: {
      date: Mock.Random.date('yyyy-MM-dd')
    }
  })
  console.log(data);

Mock.js支持丰富的日期格式的自定义: https://github.com/nuysoft/Mock/wiki/Date
生成图片

let data = Mock.mock({
    data: {
    //用于生成高度自定义的图片地址
      imgURL: Mock.Random.image()
    }
  })
  console.log(data);

生成名字

let data = Mock.mock({
    data: {
      //生成一个英文名字
      name: Mock.Random.name(),
      //生成一个中文名字
      chineseName: Mock.Random.cname()
    }
  })
  console.log(data);

更多Mock.Random工具库提供的数据: https://github.com/nuysoft/Mock/wiki/Mock.Random

在 Vite2 与 Vue3 中使用Mockjs来模拟数据

1. 安装mockjs

npm install mockjs --save-dev

2. 安装vite-plugin-mock

npm i vite-plugin-mock cross-env -D

vite-plugin-mock介绍 ： https://github.com/vbenjs/vite-plugin-mock/blob/main/README.zh_CN.md

3.在 package.json 中设置环境变量

{
    "scripts": {
        // 修改dev构建脚本的命令
        "dev": "cross-env NODE_ENV=development vite",
        "build": "vite build",
        "serve": "vite preview"
    }
}

4.在 vite.config.js 中添加 mockjs 插件

import vue from "@vitejs/plugin-vue"
import { viteMockServe } from "vite-plugin-mock"
import { defineConfig } from "vite"

export default defineConfig({
    plugins: [
        vue(),
        viteMockServe({
         mockPath: "./src/mock",
      	 supportTs: true     //如果使用 js发开，则需要配置 supportTs 为 false
        })
    ]
})

5.在项目中根目录创建 mock 文件夹，建立index.ts在其中创建需要的数据接口

// 仅做示例: 通过GET请求返回一个名字数组
export default [
    {
        url: "/api/getUsers",
        method: "get",
        response: () => {
            return {
                code: 0,
                message: "ok",
                data: ["tom", "jerry"],
            }
        }
    }
]

6. 修改mock.vue，请求接口，显示数据

<template>
  <div v-for="(item,index) in users" :key="item">{{ index + 1 }}-{{ item }}</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import axios from "axios"
import '../mock/index.ts'

export default defineComponent({
  setup() {
    let users = ref([])
    onMounted(() => {
      axios.get(`/api/getUsers`).then(res => {
        users.value = res.data.data
        console.log('users', users)
      }).catch(err => {
        console.log(err)
      })
    })

    return { users }
  }
})
</script>