尚品汇（六）——mockjs模拟数据

一、mockjs模拟数据

使用步骤：

1.在项目当中src文件夹中创建mock文件夹

2.第二步准备JSON数据(mock文件夹中创建相应的json文件，这里轮播图建立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"
    }
]

3.把mock数据需要的图片放置到public文件夹中

public文件夹在打包的时候，会把相应的资源原封不动打包到dist文件夹

4.创建mockSerer.js通过mockjs插件并创建请求实例

在项目中要使用mock，要先安装，安装命令如下

# 安装
npm install mockjs

mock就是模拟的意思，我们这里的数据都是模拟的，那发请求也要是模拟的，所以要建一个mock的api
在src/api/下新建mockAjax.js文件

// 利用axios进行二次封装
import axios from 'axios'
// 利用axios的creat方法创建一个axios实例，requests就是axios只不过要配置一下
const requests = axios.create({
        baseURL: '/mock', //基础路径发送请求的时候就不用配置api了
        timeout: 5000, //代表超时时间5s
    })

5.在api/index.vux下暴露

// 引入封装的mockaxios
import mockRequests from "./mockAjax";
//获取banner（Home首页轮播图接口）
export const reqGetBannerList = () => mockRequests.get("/banner");

6.配置mock

在src/mock中新建mockServer.js文件

// 先引入mockjs模块

import Mock from 'mockjs'
//把JSON数据格式引入进来[JSON数据格式根本没有对外暴露，但是可以引入]
//webpack默认对外暴露的：图片、JSoN数据格式
import banner from './banner.json'
//mock数据：第一个参数请求地址第二个参数：请求数据
Mock.mock("/mock/banner", { code: 200, data: banner }) //模拟首页大的轮播图的数据

7.mockServer.js文件在入口文件中引入

//引入MockServer.js----mock数据
import "@/mock/mockServe";

二、获取轮播图数据

1.在仓库进行配置

路径：\src\store\home.js

//1.引入reqGetBannerList
import {  reqGetBannerList } from '@/api/index'
//2.创建state接收
const state = {
    categoryList: [],
    bannerList: [],
    floorList: []
}
//3在action中写异步请求
 // 获取首页轮播图的数据
 const actions = {
    async getBannerList({ commit }) {
        // console.log('在向服务器发送请求获取轮播图的数据');
        let result = await reqGetBannerList();
        // console.log(result)
        if (result.code == 200) {
            commit("GETBANNERLIST", result.data);
        }
    }
    }
    //4.在mutation
    const mutations = {
     GETBANNERLIST(state, bannerList) {
        state.bannerList = bannerList
            // console.log('在修改仓库中的bannerList数据');
    }
    }

2.在ListtContainer组件中引入和计算

\src\pagaes\Home\ListContainer\index.vue

import { mapState } from "vuex";
 computed: {
    ...mapState({
      bannerList: (state) => state.home.bannerList,
    }),
  },

3.在ListtContainer组件中进行挂载

export default {
  mounted() {
    this.$store.dispatch("getBannerList");
    }