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"
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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"
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

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}) // 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

JQ-Student:使用Jquery开发学生管理系统，mock模拟数据

zip 0星 超过10%的资源 311KB

下载

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);
}); */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

在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')
1
2
3
4
5
6

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