在日常开发工作中,常见的现象就是我们前端写好页面之后没有数据,舔着脸找后端要数据的时候被告知老子很忙,数据库要我整,接口要我整,文档要我整,没时间等等各种理由,各种看后端脸色,有了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
// ...
}]
})
如果觉得有用,请多多点赞哦!