mock数据的简单使用 基于vue3-admin-element-template框架

有时候我们在进行项目前端开发的时候，可能后台数据接口给的不及时，影响工作进度，应该怎么办呢？这时候mock.js是一种较好的解决方案，它可以模拟接口数据，也很方便后期进行接口数据替换，下面我们来简单看下mock.js的介绍和特点吧

mock.js：可以生成随机数据，拦截ajax请求

特点：1、前后端分离（让前端攻城师独立于后端进行开发）

2、增加单元测试的真实性（通过随机数据，模拟各种场景）

3、开发无侵入（不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据）

4、用法简单

5、数据类型丰富（支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等）

6、方便扩展（支持支持扩展更多数据类型，支持自定义函数和正则）

详细请看官方文档：mock.js官方

---

在项目中的使用：

1、项目根目录下创建mock文件夹：

在mock文件夹下创建index.js，写入如下内容:

import Mock from "mockjs";
const data = Mock.mock({
	"data|10":[
		{
			"id|+1":1,
			name:"@cname",//注意数据name前面加c，要不然就变成了英文名
			"sex|1":["男","女"],
			"tel":/^1[ 3456789]{10}$/,
		}
	]
})

export default [{
	url: '/api/getData',
	type: 'get',
	response() {
		return {
			code: 200,
			msg: 'success',
			data: {data}
		};
	},
}, ];

2、在src目录下创建api文件夹，创建index.js，写入如下内容：

import request from '@/utils/request.js';
export const getAbc = () => {
  return request({
    url: '/getData',
    method: 'get',
  });
};

3、最后就可以开心的在页面中使用啦：

	import {getData} from '@/api/index.js'；//引入
	getData().then((e) => {
			console.log（e）;//获取到请求的数据
	})；