1. Local mock
(1) Install mockjs
npm i mockjs
(2) Create mock/mock.js home.js under the api folder
-----in the mock.js file-----
import Mock from 'mockjs'
import homeApi from './home'
// The first parameter is the requested interface address (custom) The second parameter is the requested data (that is, simulated data)
Mock.mock('home/getHomeData',homeApi.getHomeData)
------In the home.js file-----
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) Introduce globally in the main.js file
import './api/mock/mock'
(4) install axios
npm i axios -S
(5) Send interface request data (using vue3 syntax)
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. Online mock-FastMock
fastmock online interface Mock platform
3. Global http to simulate data - use apifox
1. Mount http globally
Introduce the secondary encapsulation request in the main.js file and hang it on the prototype
import request from '_utils/request'
Vue.prototype.$http = request
2. Use http
getLists () {
this.$http({
method: 'get',
url: 'http://127.0.0.1:4523/m1/1426283-0-default/moreLists', // simulated address of apifox
params: this.params
}).then(res => {
console.log(res)
})
}