032-尚硅谷-尚品汇-mockjs模拟数据
官网链接
第一步:安装依赖包mockjs
安装mockjs `npm install --save mockjs`
第二步:在src文件夹下创建一个文件夹mock。
第三步:准备模拟的数据。！
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"
}
]
把mock数据需要的图片放置于public文件夹中
第四步：在mock文件夹中创建一个mockServe.js文件。
(注意：在server.js文件当中对于banner.json||floor.json的数据没有暴露，但是可以在server模块中使用。对于webpack当中一些模块：图片、json，不需要对外暴露，因为默认就是对外暴露。)
第五步:通过mock模块模拟出数据
mockServe.js
import Mock from 'mockjs'
//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})
//记得要在main.js中引入一下
//import ''@/mock/mockServer
第六步:回到入口文件，引入serve.js。
import '@/mock/mockServe'
第七步:在API文件夹中创建mockRequest【axios实例：baseURL:‘/mock’】
1.api/mockAjax.js几乎跟request.js一模一样，默认暴露request，import时重命名为mockRequest。
import axios from "axios";
//引入进度条
import nprogress from 'nprogress';
//引入进度条样式
import "nprogress/nprogress.css";
//1、对axios二次封装
const requests = axios.create({
//基础路径，requests发出的请求在端口号后面会跟改baseURl
baseURL:'/mock',
timeout: 5000,
})
//2、配置请求拦截器
requests.interceptors.request.use(config => {
//config内主要是对请求头Header配置
//比如添加token
//开启进度条
nprogress.start();
return config;
})
//3、配置相应拦截器
requests.interceptors.response.use((res) => {
//成功的回调函数
//响应成功，关闭进度条
nprogress.done()
return res.data;
},(error) => {
//失败的回调函数
console.log("响应失败"+error)
return Promise.reject(new Error('fail'))
})
//4、对外暴露
export default requests;
2.api/index.js暴露mock数据
//当前模块，API进行统一管理，即对请求接口统一管理
import requests from "@/api/request";
import mockRequests from "./mockAjax";
//首页三级分类接口
export const reqgetCategoryList = () => {
return requests({
url: '/product/getBaseCategoryList',
method: 'GET'
})
}
//切记:当前函数执行需要把服务器返回结果返回
//获取banner（Home首页轮播图接口）
export const reqGetBannerList = () => mockRequests.get("/banner");
//获取floor数据
export const reqFloorList = () => mockRequests.get("/floor");
第八步:Vuex三连（actions、mutations、state）
store/home.js新增 async getBannerList()、GETBANNERLIST()、bannerList，新增 async getFloorList()、GETFLOORLIST()、floorList。
import { reqgetCategoryList,reqGetBannerList } from "@/api";
//home模块的仓库
const state = {
//home仓库中存储三级菜单的数据
categoryList: [],
//轮播图的数据
bannerList: [],
//floor组件的数据
floorList:[]
};
//mutions是唯一修改state的地方
const mutations = {
GETCATEGORYLIST(state, categoryList) {
state.categoryList = categoryList;
},
GETBANNERLIST(state, bannerList) {
state.bannerList = bannerList;
console.log('GETBANNERLIST')
},
GETFLOORLIST(state,floorList){
state.floorList = floorList;
}
};
//action|用户处理派发action地方的，可以书写异步语句、自己逻辑地方
const actions = {
async getCategoryList({ commit }) {
//reqgetCategoryList返回的是一个Promise对象
//需要用await接受成功返回的结果，await必须要结合async一起使用（CP）
let result = await reqgetCategoryList();
if (result.code == 200) {
commit("GETCATEGORYLIST", result.data);
}
},
async getBannerList({ commit }) {
let result = await reqGetBannerList();
if (result.code == 200) {
commit("GETBANNERLIST", result.data);
console.log('result.data',result.data)
}
},
//获取floor数据
async getFloorList({ commit }) {
let result = await reqFloorList();
if (result.code == 200) {
//提交mutation
commit("GETFLOORLIST", result.data);
console.log('result.data',result.data)
}
},
};
//计算属性
const getters = {};
export default {
state,
mutations,
actions,
getters,
};
第九步: 组件请求数据
ListContainer/index.vue 请求数据
<script>
import { mapState } from "vuex";
export default {
name: 'ListContainer',
mounted() {
//mounted:组件挂载完毕，正常说组件结构（DOM）已经全有了
//为什么swiper实例在mounted当中直接书写不可以：因为结构还没有完整
this.$store.dispatch("getBannerList");
},
computed: {
...mapState({
bannerList: (state) => state.home.bannerList,
}),
}
}
</script>
