代购网站建设外链图片

安装mockjs

npm install mockjs -s

1. 在src下新建目录mockData，所有mock请求可以放该文件夹下面。例如在mockData文件夹下新建一个home.js文件。用来处理首页的请求数据
   home.js

export default {getHomeData:()=>{return{code:200,data:{tableData:[{name:'张三',sex:'男',phone:'15245857898',createdOn:'2023-05-04'},{name:'赵卓然',sex:'男',phone:'15245857898',createdOn:'2023-05-04'},{name:'赵柯',sex:'男',phone:'15245857898',createdOn:'2023-05-04'},]}}}
}

2. 在src下新建一个mock.js文件，主要用来拦截首页数据请求，返回自定义的数据

import Mock from 'mockjs'
import homeApi from './mockData/home'
//拦截请求
Mock.mock('/home/getData',homeApi.getHomeData)

3. 在main.js中引入mock.js

import './api/mock.js'

4. 在Home.vue中调用请求

import { defineComponent,onMounted,ref} from 'vue'
import axios from 'axios'
export default defineComponent({setup() {let tableData = ref([])const getTableList=async()=>{await axios.get('/home/getData').then((res)=>{tableData.value=res.data.data.tableData;})}onMounted(()=>{getTableList()})return {tableData,}}
})