Vue3项目中使用Mock模拟接口数据【提高开发效率】
前端开发者可以在本地进行模拟后端数据,在请求数据之前进行拦截,这样就不会影响前端视图的展示了,mock就可以实现。
·
在前后端开发时,前端视图需要依赖后端数据进行展示,如果后端数据暂时不能请求,那么前端开发人员的进度就要停滞不前了吗?答案当然不是,前端开发者可以在本地进行模拟后端数据,在请求数据之前进行拦截,这样就不会影响前端视图的展示了,mock就可以实现。
一、安装mockjs
cnpm install mockjs -S
在使用 mock 模拟接口数据时,别忘了安装 axios 哦!
二、在src目录下新建api文件夹
在api文件夹下新建一个mock.js文件和mockData文件夹
// src/api/mockData/home.js
export default {
getHomeData: () => {
return {
code: 200,
data: {
tableData: [
{
name: '张三',
sex: '男',
phone: '13465876789'
},
{
name: '小红',
sex: '女',
phone: '13465870645'
},
{
name: '李四',
sex: '男',
phone: '13465870645'
}
]
}
}
}
}
// src/api/mock.js
import Mock from 'mockjs'
import homeApi from './mockData/home'
// 拦截请求
Mock.mock('/home/getData', homeApi.getHomeData)
三、在main.js文件中引入mock
import './api/mock'
四、在组件中模拟请求数据
<template>
...
</template>
<script>
import { defineComponent, onMounted, ref } from 'vue';
import axios from 'axios';
export default defineComponent({
setup(){
// 定义数组变量
let tableData = ref([]);
// 请求数据的方法(请求接口url要与mock中定义的url相同)
const getTableList = async () => {
await axios.get('/home/getData').then(res => {
tableData.value = res.data.data.tableData
})
}
// 在生命周期中调用方法
onMounted(() => {
getTableList()
})
return {
tableData
}
}
})
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)