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三连环操作