Vue3中使用Mock.JS，生成随机数据

       在日常开发工作中，常见的现象就是我们前端写好页面之后没有数据，舔着脸找后端要数据的时候被告知老子很忙，数据库要我整，接口要我整，文档要我整，没时间等等各种理由，各种看后端脸色，有了Mock之后，再也不用看后端脸色行事了(手动狗头)。

一、安装Mock.JS

工程化项目中使用Mock直接NPM安装

npm i mockjs

MockJS的作用就是可以生成随机数据，拦截AJAX请求。

生产的数据格式非常丰富，支持随机的文本、姓名、年龄、ID、日期、图片、E-mail、颜色等等 

各站数据模板请看官网：http://mockjs.com/examples.html

二、项目中使用Mock.JS

安装完以后我们可以在根目录下新建mockjs文件夹

然后新建index.js文件,在此文件中我们就可以编写想要的数据了。

首先要导入Mock

Mock.mock(参数1，参数2，数据)

参数1是生成数据的路径。参数2是请求的方式。最后的数据为对象或者函数，函数需要return。

//导入Mock
import Mock from 'mockjs'


Mock.mock('/data/customerName', 'get', {
    "data|10": [{
        id: '@id', //随机id
        name: '@cname', //随机名称 @name英文名称 @cname中文名称
        phone: /^1[34578]\d{9}$/, //随机电话号码
        'age|11-99': 1, //年龄  属性名(age)、生成规则(rule)、属性值(value) 'age|rule': value
        address: '@county(true)', //随机地址 @county(true)省市县  @county(false)||@county()县||区||-
        email: '@email', //随机邮箱
        isMale: '@boolean', //随机性别
        createTime: '@datetime', //创建时间 可以自定义格式 @datetime(yyyy-MM-dd hh:mm:ss)
        paragraph: '@cparagraph',
    }]
})

此时我们生成的数据就写好了，此时需要在main.js中引用一下

import "@/mockjs/index.js"

使用此接口数据需要用到axios

如果没安装可以安装一下axios：npm i axios

我们可以在目录utils下新建一个request.js来对axios封装一下

以下代码为request.js内容

import axios from 'axios'

const service = axios.create({
    baseURL: "/data",
    timeout: "5000",
})

// 若为生产环境 可以在此处添加拦截器 处理token等问题 此系统就暂时不做登录处理

export default service

 由于我这个项目是新建的，仅用来练习，就没有做拦截器的配置，axios拦截器可以看下axios官网：axios中文文档|axios中文网 | axios

此时我们可以在api文件夹下定义请求接口的函数

import request from '@/utils/request'

export const getCustomerData = () => {
    return request({
        url: "/customerName",
    })
}

然后就可以在vue文件中使用啦

<script setup>

import { ref } from 'vue';
import { getCustomerData } from '@/api/index'

const tablePeopleData = ref([])

const getPeopleData = async () => {
    const a = await getCustomerData()
    tablePeopleData.value = a.data.data
    // console.log(a.data.data);
}
getPeopleData()

</script>

此时请求的数据如下：

 这样我们就可以随便使用这些数据啦

三、Mock.Random

Random是一个工具，用来生成各站随机数据。此方法在数据模板中称 占位符 格式为@占位符(参数)

书写格式如下

import Mock from 'mockjs'
const Random = Mock.Random

Mock.mock('/data/carList', 'get', {
    "data|5": [{
        "str": Random.string(8), //生成随机字符串 长度为8
        "str2": "@string(8)" //生成随机字符串 长度为8

        // ...
    }]
})

如果觉得有用，请多多点赞哦！