Mockjs使用

src下新建mock文件夹,新建mockServe.js

/* 利用mockjs来mock数据接口*/
import Mock from 'mockjs'
import banners from './banners'
import floors from './floors'

// 提供广告位轮播数据的接口
Mock.mock('/mock/banners',{
    code: 200,
    data: banners
})

// 提供所有楼层数据的接口
Mock.mock('/mock/floors',{
    code: 200,
    data: floors
})

在src下api中封装mockajax
/* 
专门请求mock接口的axios封装
*/
import axios from 'axios'

const mockAjax = axios.create({
  baseURL: "/mock", // 路径前缀
  timeout: 10000 // 请求超时时间
})

mockAjax.interceptors.request.use((config) => {
  return config
})

mockAjax.interceptors.response.use((response) => {
  return response.data
}, (error) => {
  return Promise.reject(error)
})

export default mockAjax

在mock文件夹下新建.json文件,作为数据

[
    {
        "id": "1",
        "imgUrl": "/images/banner1.jpg"
    },
    {
        "id": "2",
        "imgUrl": "/images/banner2.jpg"
    },
    {
        "id": "3",
        "imgUrl": "/images/banner3.jpg"
    },
    {
        "id": "4",
        "imgUrl": "/images/banner4.jpg"
    }
]

home下使用

import { reqBanners} from "@/api";
    async getBanners(){
      let result= await reqBanners();
      console.log(result);

在main中使用require('./mock/mockServe.js')