使用Mock技术模拟数据

mock数据准备文件

1、mock数据一般存放在项目文件夹src下面的mock文件夹

• 准备好数据文件banner.json 和 floor.json（json文件）并通过mockServe.js进行暴露操作
  
  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"
    }
]

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"
    }
]

mockServe.js文件 -

// 先引入mockjs模块
import Mock from 'mockjs'

// 将JSON数据引入进来 [JSON数据格式根本没有对外暴露，但是可以引入]
// webpack默认对外暴露的：图片、JSON数据格式
import banner from './banner.json'
import floor from './floor.json'

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

Mock数据

• 第一个参数：请求地址
• 第二个参数：请求数据

使用axios进行二次封装

在src的文件下的api文件夹下创建mockAjax.js文件 进行二次封装，封装以后需暴露

// 对于axios进行二次封装
import axios from 'axios'
// 引入进度条
import nProgress from 'nprogress'
// 引入进度条的样式
import 'nprogress/nprogress.css'

// start 进度条开始 done 进度条结束
/* 
    1、利用axios对象的方法create，去创建一个axios实例
    2、request就是axios，只不过稍微配置一下

    - 这里的requests就是创建的一个新的实例，其实就是axios，不配置的话，直接书写axios.in... 即可
*/
/* 二次封装 */
const requests = axios.create({
    // 配置对象 
    // 基础路径, 发请求的时候，路径当中会出现api  对外所进行暴露的内容不一样
    baseURL: '/mock',
    // 代表请求超时的时间为 5s
    timeout: 5000,
})

// 请求拦截器，在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
    // 进度条开始动
    nProgress.start()
    // config ：配置对象，对象里面有一个属性很重要，header请求头
    return config
})

// 响应拦截器
axios.interceptors.response.use((res) => {
    // 成功的回调函数，服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
    // 进度条结束
    nProgress.done()
    return res.data
}, (error) => {
    // 相应失败的回调函数
    // 对响应错误做点什么
    return Promise.reject(error);
})

// 对外暴露
export default requests



/* // 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
}); */

在src文件夹下的api文件夹下创建index.js文件用于书写获取mock数据的方法

import mockRequest from './mockAjax'
// 简写形式
export const reqCategoryList = () => requests({ url: '/product/getBaseCategoryList', method: 'get' })

// 获取banner （Home首页轮播图接口）
export const reqGetBannerList = () => mockRequest.get('/banner')

接着再vuex中使用reqCategoryList 、reqGetBannerList 等接口获取数据操作即可 书写vuex三连环操作