vue3 使用Mock

2024/10/23 23:20:30 来源：https://blog.csdn.net/qq_39691676/article/details/140723993 浏览: 次关键词：vue3 使用Mock

在这里插入图片描述

官网: http://mockjs.com/

安装  npm  install  mockjs -D

steps1: main.js 文件引入

import '@/api/mock.js'

steps2: src/api/mock.js

import Mock from 'mockjs'
import homeApi from './mockData/home'
/*** 1.拦截的路径:mock拦截了正常NetWork/网络请求,数据正常响应* 2.方法* 3.制造假数据*/
Mock.mock(/api\/home\/getTableData/, 'get', homeApi.getTableData)

steps3: 编造数据

src/api/mockData/home.js

export default {getTableData: () => {return {code: 200,data: {tableData: [{name: 'oppo',todayBuy: 500,monthBuy: 3500,totalBuy: 22000}]}}}
}

steps4: 页面发起请求

import axios from 'axios'
axios({url: '/api/home/getTableData',method: 'get'
}).then((res) => {const data = res.data.getTableDataif (data.code == 200) {tableData.value = data.data.tableData}
})