vue实战-mockjs模拟数据

vue实战-mockjs模拟数据

1.在src目录下创建文件夹mock

2.将模拟的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"
  }
]

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"
  }
]

3.将所需要的图片资源复制到public下的images文件夹下

4.在mock中创建mockServer.js用来模拟数据

mockServer.js

//引入mockjs插件
//这是对象，必须要大写
import Mock from 'mockjs'
//引入json文件
//webpack下默认暴露的文件格式是：图片和json数据格式，所以这里的json文件不需要暴露
import banner from './banner.json'
import floor from './floor.json'

//使用Mock对象中的mock方法模拟服务器返回的值
//传入两个参数：第一个参数是：请求地址，第二个参数是请求数据
Mock.mock('/mock/banner',{code:200,data:banner})
Mock.mock('/mock/floor',{code:200,data:floor})

5.需要在入口文件main.js中引入才能读取到

//引入mock
import "@/mock/mockServer"

6.实例：首页轮播图获取数据

1）在api文件夹中进行axios的二次封装

mockRequest.js
在创建axios实例时的默认api改成’/mock’

//axios的二次封装
import axios from 'axios'

//引入进度条插件
import nProgress from 'nprogress'
//引入进度条样式
import 'nprogress/nprogress.css'

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

//请求拦截器
requests.interceptors.request.use(config =>{
    //config里面包含请求头head
    //进度条开始
    nProgress.start()
    return config
})

// 响应拦截器
//成功与失败的回调函数
requests.interceptors.response.use((res)=>{
    //进度条结束
    nProgress.done()
    return res.data
},(err)=>{
    return err.message
})

export default requests

2）在接口管理文件中添加mock的数据接口

import mockRequests from './mockRequest'
//mock的接口
export const reqBannerList = () =>{
    return mockRequests({url:'/banner',method:'get'})
}
export const reqFloorList = () =>{
    return mockRequests({url:'/floor',method:'get'})
}

3）进行vuex的一系列操作

1.在轮播图的组件下挂载派发actions

mounted(){
    this.$store.dispatch('getBannerList')
  }

2.home下小仓库中的数据接收处理并进state

//home下的仓库
import { reqCategoryList,reqBannerList} from "@/api"
const state={
    categoryList:[],
    bannerList:[]
}
const mutations={
    CATEGORYLIST(state,categoryList){
        state.categoryList = categoryList
    },
    GETBANNERLIST(state,bannerList){
        state.bannerList = bannerList
    }
}
const actions={
    //通过API里面的接口函数调用，向服务器发请求，获取服务器的数据
    async categoryList({commit}){
        let result = await reqCategoryList()
        if(result.code == 200){
            commit('CATEGORYLIST', result.data)
        }
        
    },
    async getBannerList({commit}){
        const result = await reqBannerList()
        if(result.code == 200){
            commit('GETBANNERLIST',result.data)
        }
    }
}
const getters={}

export default {
    state,
    mutations,
    actions,
    getters
}

3.将仓库中的值返回到页面组件中

利用计算mapState

import { mapState } from 'vuex';

computed:{
    ...mapState({
      bannerList:state => state.home.bannerList
    })
  }