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/banner', {code:200,data:banner}) // 模拟首页大的轮播图的数据 Mock.mock('/mock/floor', {code:200, data:floor}) //
Mock数据
- 第一个参数:请求地址
- 第二个参数:请求数据
在src的文件下的api文件夹下创建mockAjax.js文件 进行二次封装,封装以后需暴露
// 对于axios进行二次封装 import axios from 'axios' // 引入进度条 import nProgress from 'nprogress' // 引入进度条的样式 import 'nprogress/nprogress.css' // start 进度条开始 done 进度条结束 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
在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三连环操作