【Vue】032-尚硅谷-尚品汇-mockjs模拟数据---20230111

i see the future

已于 2023-01-11 14:46:04 修改

阅读量709

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-01-11 14:22:04 首次发布

本文链接：https://blog.csdn.net/m0_46629123/article/details/128644237

版权

Vue 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

该文章详细介绍了如何在Vue项目中使用Mockjs来模拟数据，包括安装Mockjs依赖，创建mock文件夹，编写模拟数据的JSON文件，设置mockServe.js来模拟API响应，以及在Vuex中管理和使用这些模拟数据。同时提到了axios的使用和API的统一管理。

摘要由CSDN通过智能技术生成

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>