关于本地mockjs的使用
安装mockjs
npm install mockjs -s
- 在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'},]}}}
}
- 在src下新建一个mock.js文件,主要用来拦截首页数据请求,返回自定义的数据
import Mock from 'mockjs'
import homeApi from './mockData/home'
//拦截请求
Mock.mock('/home/getData',homeApi.getHomeData)
- 在main.js中引入mock.js
import './api/mock.js'
- 在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,}}
})