mock的使用

一、什么是mock数据

mock数据：是指通过模拟实际数据的请求和响应，来生成测试数据，从而提供给应用程序的测试、开发、联调等环节使用的一种技术

官网地址：http://mockjs.com/

---

二、使用步骤

• 第一步：安装

# 安装
npm install mockjs
npm install axios
npm install vuex@3
npm install swiper

第二步：在项目中src文件夹中创建mock文件夹，并准备JSON数据

注意点：

①JSON数据内不要留有空格，以免出错跑不起来

②将涉及到的图片放置到public文件夹中【public文件夹在打包的时候，会把相应的资源原封不动打包到dist文件夹中】

③webpack默认对外暴露：图片、JSON数据格式

JSON文件存放的mock假数据，如下显示：

[
  {
      "id":"1",
      "imgUrl":"/images/banner1.jpg"
  },
  {
      "id":"2",
      "imgUrl":"/images/banner2.jpg"
  }
]

第三步：在mock文件夹中创建mockServe.js文件，通过mockjs插件实现模拟数据

//引入mockjs
import Mock from 'mockjs'

//引入JSON数据格式
import banner from './banner.json'
import floor from './floor.json'

//mock数据  参数：请求地址，请求方法，请求数据
Mock.mock("/mock/banner",'get',{code:200,data:banner})
Mock.mock("/mock/floor",'get',{code:200,data:floor})

第四步：mockServe.js文件在入口文件main.js中引入

在main.js文件中引入
//引入MockServer.js---mock数据
import './mock/mockServe'

第五步：在api文件夹下新建mockIndex.js文件，用于模拟数据的axios请求

//npm安装axios之后，再引入axios
import axios from 'axios'

const requests = axios.create({
  baseURL: '/mock',
  timeout: 5000
})

export default requests

第六步：在统一管理api接口的index.js文件内，引入二次封装的mock请求，获取接口数据

//统一管理项目接口的模块
//引入二次封装的axios
import mockRequests from './mockAjax'
//获取轮播图接口
export const reqGetBannerList = () => mockRequests({ url: '/banner', method: 'get' })

第七步：利用vuex进行数据管理

⭐1.home页面中派发action
 mounted() {
    this.$store.dispatch('getBannerList')
}
⭐2.store仓库home模块化存储
import {reqGetBannerList} from '@/api/index'
const state = {
  //轮播图的数据
  bannerList:[]
}
const mutations = {
  GETBANNERLIST(state,bannerList){
    state.bannerList = bannerList
  }
}
const actions = {
  //获取首页轮播图数据
  async getBannerList({commit}){
    let res = await reqGetBannerList()
     console.log('@',res); //打印的mock数据在如下图片~~~~
    if(res.data.code===200){
      commit('GETBANNERLIST',res.data.data)
    }
  }
}
const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}
⭐3.映射到home页面
import { mapState } from 'vuex'
 computed: {
    ...mapState({
      bannerList: (state) => state.home.bannerList
    })
  }

打印的mock数据：

第八步：页面渲染-------(①swiper结构+②引入依赖+③初始化Swiper添加动态效果)

⭐1.结构
 <div class="swiper-container" ref="mySwiper">
          <div class="swiper-wrapper">
           <!-- for循环，渲染页面 -->
            <div class="swiper-slide" v-for="item in bannerList" :key="item.id">
              <img :src="item.imgUrl" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
⭐2.引入依赖
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
⭐3.在mounted里面初始化swiper👇

第三步存在的问题：直接把new Swiper实例放在mounted发现不行，页面没动；主要是dispatch涉及到异步语句，导致v-for遍历的时候结构还不完整。

主要有2种解决方法

第一种：mounted内用延时器处理异步

第二种：watch+$nextTick

//第一种解决办法：mounted内用延时器处理异步 
mounted() {
    this.$store.dispatch('getBannerList')
    setTimeout(() => {
      new Swiper(this.$refs.mySwiper, {
        loop: true,
        //如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        //如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
    }, 2000)
  },

//第二种解决办法：watch+$nextTick
//watch监听bannerList数据的变化-----由空数组变为数组里面有元素
//但是执行handler函数，只能保证bannerList数据已经有了，但是没办法保证v-for已经执行结束了，所以需要结合nextTick
//$nextTick：在下次DOM更新 循环结束之后 执行延迟回调，在修改数据之后 立即使用这个方法，获取更新后的DOM
  watch: {
    bannerList: {
      handler() {
        this.$nextTick(function () {
          new Swiper(this.$refs.mySwiper, {
            loop: true,
            //如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              clickable: true
            },
            //如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            }
          })
        })
      }
    }
  },

三、最终渲染的效果：

最后：👏👏😊😊😊👍👍