vue使用mock模拟数据

文件目录

mock文件夹下的index.js

import Mock from 'mockjs';

//webpack默认对外暴露图片、JSON数据格式
import banner from './banner.json'
import floor from './floor.json'

//mock数据：第一个参数请求地址  第二个参数： 请求数据
Mock.mock("/mock/banner",'get',{code:200,data:banner});//模拟首页大的轮播图的数据
Mock.mock("/mock/floor",'post',{code:200,data:floor});

mock文件下的banner.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"
    }
]

mock文件夹下的floor.json

[{
        "id": "001",
        "name": "家用电器",
        "keywords": ["节能补贴", "4K电视", "空气净化器", "IH电饭煲", "滚筒洗衣机", "电热水器"],
        "imgUrl": "/images/floor-1-1.png",
        "navList": [{
                "url": "#",
                "text": "热门"
            },
            {
                "url": "#",
                "text": "大家电"
            },
            {
                "url": "#",
                "text": "生活电器"
            },
            {
                "url": "#",
                "text": "厨房电器"
            },
            {
                "url": "#",
                "text": "应季电器"
            },
            {
                "url": "#",
                "text": "空气/净水"
            },
            {
                "url": "#",
                "text": "高端电器"
            }
        ],
        "carouselList": [{
                "id": "0011",
                "imgUrl": "/images/floor-1-b01.png"
            },
            {
                "id": "0012",
                "imgUrl": "/images/floor-1-b02.png"
            },
            {
                "id": "0013",
                "imgUrl": "/images/floor-1-b03.png"
            }
        ],
        "recommendList": [
            "/images/floor-1-2.png",
            "/images/floor-1-3.png",
            "/images/floor-1-5.png",
            "/images/floor-1-6.png"
        ],
        "bigImg": "/images/floor-1-4.png"
    },
    {
        "id": "002",
        "name": "手机通讯",
        "keywords": ["节能补贴2", "4K电视2", "空气净化器2", "IH电饭煲2", "滚筒洗衣机2", "电热水器2"],
        "imgUrl": "/images/floor-1-1.png",
        "navList": [{
                "url": "#",
                "text": "热门2"
            },
            {
                "url": "#",
                "text": "大家电2"
            },
            {
                "url": "#",
                "text": "生活电器2"
            },
            {
                "url": "#",
                "text": "厨房电器2"
            },
            {
                "url": "#",
                "text": "应季电器2"
            },
            {
                "url": "#",
                "text": "空气/净水2"
            },
            {
                "url": "#",
                "text": "高端电器2"
            }
        ],
        "carouselList": [{
                "id": "0011",
                "imgUrl": "/images/floor-1-b01.png"
            },
            {
                "id": "0012",
                "imgUrl": "/images/floor-1-b02.png"
            },
            {
                "id": "0013",
                "imgUrl": "/images/floor-1-b03.png"
            }
        ],
        "recommendList": [
            "/images/floor-1-2.png",
            "/images/floor-1-3.png",
            "/images/floor-1-5.png",
            "/images/floor-1-6.png"
        ],
        "bigImg": "/images/floor-1-4.png"
    }
]

api文件夹下的request.js(axios二次封装)

import axios from 'axios'
import config from '@/config'

//判断是开发环境还是生产环境
const baseURL = process.env.NODE_ENV  === 'development' ? config.baseUrl.dev : config.baseUrl.pro

//创建axios实例
const requests =  axios.create({
    baseURL:baseURL,
    timeout:10000
})

//请求拦截器
requests.interceptors.request.use((config)=>{
    console.log(config)
    return config
})

//响应拦截器
requests.interceptors.response.use((res)=>{
    //响应成功
    console.log(res)
    return res.data
},(error)=>{
    //响应失败
    console.log(error)
    return Promise.reject(new Error('faile'))
})

export default requests

config文件夹下的index.js

export default {
    baseUrl:{
        dev:'/api/',//开发环境
        pro:''//生成环境
    }
}

api文件夹下的index.js

import requests  from "./request";
export const getMenu = ()=>requests(
    {
        url:'/banner',
        method:'get'
    }
)

在组件中或者vuex仓库中使用

<script>
import {getMenu} from '@/api'
export default {
  name: "home",
  mounted(){
    getMenu().then(res=>{
      console.log(res)
    })
  }
};


</script>

//或者使用async，await

<script>
import {getMenu} from '@/api'
export default {
  name: "home",
    mounted(){
    // getMenu().then(res=>{
    //   console.log(res)
    // })
    this.getList()
  },
  methods:{
    async getList(){
      var resulet = await getMenu()
      console.log(resulet)
    }
  }
};


</script>