vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】

小灰灰 2024-03-24 12:46 36阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

*   *  19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）
 *  本人其他相关文章链接

### 19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件） ###

> 安装命令：cnpm install --save mockjs

> 重难点说明

1.  使用swiper实现静态页面轮播
2.  解决多个swiper冲突的问题
3.  解决swiper动态页面轮播的bug
4.  定义可复用的轮播组件
5.  解决Floor组件中轮播有问题的bug

> 利用mockjs提供模拟数据

1.  Mockjs: 用来拦截ajax请求, 生成随机数据返回
2.  学习

a. http://mockjs.com/

b.https://github.com/nuysoft/Mock

> 项目改动的地方

*  1.安装mockjs
 *  2.文件夹public下新建images文件夹并拷贝Home组件和Floor组件使用的图片
 *  3.src文件夹下新建mock文件夹，新建banner.json、floor.json、mockServe.js文件，其中banner.json、floor.json文件数据来源于“前台项目\_STUDENT (1)\\课件\\尚硅谷\_Vue电商项目-前台PC.doc”

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

> mockServe.js

//先引入mockjs模块
    import Mock from 'mockjs';
    //把JSON数据格式引入进来[JSON数据格式根本没有对外暴露，但是可以引入]
    //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});

*  4.main.js中引入

> main.js

//引入MockServe.js----mock数据
    import '@/mock/mockServe'

印象中文网址可查询前端第三方安装使用命令：https://docschina.org/

或者npm网站也可以查看安装使用命令：https://npm.p2hp.com/

`注意点1`：但是这里需要知道一件事情：服务器返回的数据（接口）只有商品分类菜单分类数据，对于ListContainer组件与Floor组件数据服务器没有提供的。

mock数据（模拟）：如果你想mock数据，需要用到一个插件mockjs

> 安装mockks命令：cnpm install --save mockjs

`注意点2`：最后面的mockjs中间没有点’.’

安装后的效果图：

![在这里插入图片描述][a5bbf6e8800b44cc82581e7359643e25.png_pic_center]

使用步骤：

1.  在项目当中src文件夹中创建mock文件夹。
2.  准备json文件数据（mock文件夹中创建相应的json文件）—格式化一下，别留有空格（跑步起来的）。
3.  把mock数据需要的图片放置到public文件夹中【public文件夹在打包的时候，会把相应的资源原封不动打包到dist文件夹中】。
4.  创建mockServe.js通过mockjs插件实现模拟数据。
5.  mockServe.js文件在入口文件中引入。

`注意点3`：

问题：banner.json和floor.json明明都没有对外暴露，为啥还能在mockServe.js中直接引入使用？

答案：webpack默认对外暴露的：图片、JSON数据格式，因此可以直接使用。

## 本人其他相关文章链接 ##

1.[vue尚品汇商城项目-day03【16.开发Search组件模块中的TypeNav商品分类菜单（过渡动画效果）+17.（优化）针对三级菜单联动进行优化，优化方向为减少查询】][vue_-day03_16._Search_TypeNav_17.]  
2.[vue尚品汇商城项目-day03【18.合并params和query参数（Header组件+TypeNav组件）】][vue_-day03_18._params_query_Header_TypeNav]  
3.[vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】][vue_-day03_vue_-19.mockjs_Home_ListContainer_Floor]  
4.[vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】][vue_-day03_20._Banner_21._swiper]  
5.[vue尚品汇商城项目-day03【22.开发Floor组件】][vue_-day03_22._Floor]

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/5fbabcd9298e467da876befead584631.png
[a5bbf6e8800b44cc82581e7359643e25.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/7f9cf740026546a385ed5be8f46436e3.png
[vue_-day03_16._Search_TypeNav_17.]: https://blog.csdn.net/a924382407/article/details/129893325
[vue_-day03_18._params_query_Header_TypeNav]: https://blog.csdn.net/a924382407/article/details/129893392
[vue_-day03_vue_-19.mockjs_Home_ListContainer_Floor]: https://blog.csdn.net/a924382407/article/details/129893467
[vue_-day03_20._Banner_21._swiper]: https://blog.csdn.net/a924382407/article/details/129893511
[vue_-day03_22._Floor]: https://blog.csdn.net/a924382407/article/details/129893541