526互联

mock以及fastmock的使用

发布时间 2023-12-20 17:03:39作者: scour

模拟数据

1 mock模拟本地数据

1.1 使用包管理工具安装mockjs

npm install mockjs

1.2

在src目录下新建一个apis文件夹，再新建一个MockData文件夹，再MockData文件夹下新建一个home.js文件

点击查看代码 
export const getHomeData = () => {
	return {
		code: 200,
		data: {
			tableData:
				[
					{
						name: 'oppo',
						todayBuy: 500,
						monthBuy: 3500,
						totalBuy: 22000
					},
					{
						name: 'vivo',
						todayBuy: 300,
						monthBuy: 2200,
						totalBuy: 24000
					},
					{
						name: '苹果',
						todayBuy: 800,
						monthBuy: 4500,
						totalBuy: 65000
					},
					{
						name: '小米',
						todayBuy: 1200,
						monthBuy: 6500,
						totalBuy: 45000
					},
					{
						name: '三星',
						todayBuy: 300,
						monthBuy: 2000,
						totalBuy: 34000
					},
					{
						name: '魅族',
						todayBuy: 350,
						monthBuy: 3000,
						totalBuy: 22000
					}
				]
		}
	}
}

在home.js文件中，导出了一个方法getHomeData，返回了一个对象

1.3

在apis文件夹下新建一个mock.js文件
写入以下代码

点击查看代码 
import Mock from "mockjs";
import { getHomeData } from './MockData/home'
//拦截请求
Mock.mock('/home/getData', getHomeData)

代码解释：先从mockjs中导入Mock，以及导入相应的api接口函数
最后使用Mock里面的mock方法，第一个参数是后端接口的地址，第二个方法是一个api接口函数

1.4

最后在main.js文件中导入相应的mock.js文件

import '@/apis/mock.js'

2 fastmock线上模拟数据

2.1

先创建一个账号

2.2

创建一个项目，给项目起一个名字以及项目的接口基地址，通常是/api

2.3

新增接口：
接口名和接口描述简洁易看懂即可
请求类型：根据代码要求书写
接口地址：例如：/home/getTableData

最后将自己模拟的数据转化成JSON格式填入即可