1 安装mock
npm i mockjs -S
2 引用mock--app.vue
//import mock from mock //需要注意：有的会报无法解析mock
require('./mock/mock') //需要注意：如引用有问题用 require
3 mock.js 中引用mockjs 并引用json串
//import Mock from 'mock.js' //需要注意：有的会报无法解析mock
const Mock = require('mockjs') //需要注意：如引用有问题用 require
import tabList from './json'
//获取tab数据--（/api/tabList 像代理路径）
Mock.mock( '/api/tabList', 'get',()=>{
return{
code : 200,
msg : 'success',
data : tabList
}
}
)
4 json.js串
const List = [
{
title:'18:00',
name:'即将开始',
state:0,
cardList:[
{
title:'中秋雨季时节',
img:'/assets/logo.png',
price:'$100',
progress:'15'
},
]
},
{
title:'19:00',
name:'马上开始',
state:1,
cardList:[
{
title:'国庆雨季时节',
img:'/assets/logo.png',
price:'$100',
progress:'15'
},
{
title:'国庆雨季时节',
img:'/assets/logo.png',
price:'$100',
progress:'15'
},
]
}
]
export default List;
5 APP.vue 请求地址
import { reactive, ref, toRefs } from '@vue/reactivity'
import { getTabs } from '../api/miaosha'
import { onMounted } from '@vue/runtime-core'
export default {
name: 'App',
setup(){
const num = ref(0)
const dataList = reactive({
tablist:'',
cardList:''
})
const changeFun = (index) =>{
num.value = index;
}
onMounted(()=>{
getTabs().then(res=>{//请求地址
dataList.tablist = res.data.data;
})
})
return{
num,
changeFun,
...toRefs(dataList)
}
}
}
6 引用请求 miaosha.js
import instance from "./request";
export const getTabs =()=>{//(和mock.js--api能匹配上就可以访问)
return instance({
url:'/tabList',
method:'get'
})
}
7 request.js axios请求(和mock.js--api能匹配上就可以访问)
import axios from "axios";
const instance = axios.create({
baseURL:'/api'
})
export default instance;