1.本地mock
(1)安装mockjs
npm i mockjs
（2）在api文件夹下创建mock/mock.js home.js
-----mock.js 文件内-----
import Mock from 'mockjs'
import homeApi from './home'
// 第一个参数是请求的接口地址(自定义) 第二个参数是请求回来的数据(即模拟的数据)
Mock.mock('home/getHomeData',homeApi.getHomeData)
------home.js 文件内-----
export default {
getHomeData :() =>{
return {
code:200,
data:{
tableData:[
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
}
}
},
}
（3）在main.js文件全局引入
import './api/mock/mock'
（4）安装axios
npm i axios -S
（5）发送接口请求数据（使用vue3的语法）
import axios from 'axios'
import { onMounted,ref } from 'vue'
let tableData = ref([])
const getTableLists = ()=>{
axios.get('home/getHomeData').then(res=>{
if(res.data.code == 200){
tableData.value = res.data.data.tableData
}else{
console.log(res)
}
}).catch(err=>{
console.log(err)
})
}
onMounted(() => {
getTableLists()
})
2.线上mock-FastMock
3.全局http来模拟数据-使用apifox
1.全局挂载http
在main.js文件中引入二次封装的request，并挂在原型上
import request from '_utils/request'
Vue.prototype.$http = request
2.使用http
getLists () {
this.$http({
method: 'get',
url: 'http://127.0.0.1:4523/m1/1426283-0-default/moreLists', // apifox的模拟地址
params: this.params
}).then(res => {
console.log(res)
})
}