程序员小洛Appearance
mock数据
1.本地模拟mock
js
cnpm install mockjs -Scnpm install mockjs -S新建一个api文件夹，在建一个mockData文件夹，建一个home.js,模拟数据的代码如下：
js
export default{
getData:()=>{
return{
code:200,
data:{
tableData:[
{
name:"张三",
age:10,
price:50
},
{
name:"李四",
age:20,
price:20
}
]
}
}
}
}export default{
getData:()=>{
return{
code:200,
data:{
tableData:[
{
name:"张三",
age:10,
price:50
},
{
name:"李四",
age:20,
price:20
}
]
}
}
}
}在api文件夹下新建mock.js，代码如下：
js
import Mock from 'mockjs'
import homeApi from './mockData/home'
//拦截请求
Mock.mock('/home/getData',homeApi.getHomeData)import Mock from 'mockjs'
import homeApi from './mockData/home'
//拦截请求
Mock.mock('/home/getData',homeApi.getHomeData)在main.js下引入这个api文件夹下的mock.js文件
js
cnpm install axios -Scnpm install axios -S在对应的vue文件使用：
js
import {defineComponent,onMounted,ref} from "vue";
import axios from 'axios';
export default defineComponent({
setup(){
const tableData = ref([]);
const getTableList = async ()=>{
await axios.get("/home/getData").then((res)=>{
//console.log(res);
if(res.data.code == 200){
tableData.value = res.data.data.tableData;
}
})
};
onMounted(()=>{
getTableList();
});
}
})import {defineComponent,onMounted,ref} from "vue";
import axios from 'axios';
export default defineComponent({
setup(){
const tableData = ref([]);
const getTableList = async ()=>{
await axios.get("/home/getData").then((res)=>{
//console.log(res);
if(res.data.code == 200){
tableData.value = res.data.data.tableData;
}
})
};
onMounted(()=>{
getTableList();
});
}
})2.线上的mock fastmock
js
const getTableList = async ()=>{
await axios.get("mock数据的地址").then((res)=>{
//console.log(res);
if(res.data.code == 200){
tableData.value = res.data.data;
}
})
};const getTableList = async ()=>{
await axios.get("mock数据的地址").then((res)=>{
//console.log(res);
if(res.data.code == 200){
tableData.value = res.data.data;
}
})
};