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

Posted 2023-04-04 刘大猫.

文章目录

• • 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中间没有点’.’

安装后的效果图：

使用步骤：

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.（优化）针对三级菜单联动进行优化，优化方向为减少查询】
2.vue尚品汇商城项目-day03【18.合并params和query参数（Header组件+TypeNav组件）】
3.vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】
4.vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
5.vue尚品汇商城项目-day03【22.开发Floor组件】

vue尚品汇商城项目-day07vue插件-49.（了解）自定义插件

文章目录

• • 49.（了解）自定义插件
• 本人其他相关文章链接

49.（了解）自定义插件

自定义插件好处：

1. 功能：用于增强Vue
2. 本质：包含install方法的一个对象，install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据

使用流程：

1. 新建xx.js文件自定义插件并提供暴露对象。
2. 在src/main.js中引入自定义插件并使用。

修改代码：

首先创建plugins文件夹，新建myPlugins.js文件

//Vue插件一定暴露一个对象
let myPlugins = ;

myPlugins.install = function(Vue,options)
    //Vue.prototype.$bus:任何组件都可以使用
    //Vue.directive自定义指令
    //Vue.component注册组件
    //Vue.filter过滤
    //全局指令
    Vue.directive(options.name,(element,params)=>
        element.innerHTML = params.value.toUpperCase();
        console.log(params);
    );


//对外暴露组件对象
export default myPlugins;

src/main.js

//引入自定义插件
import myPlugins from '@/plugins/myPlugins';
Vue.use(myPlugins,
    name:'upper'
);

本人其他相关文章链接

1.vue尚品汇商城项目-day07【44.个人中心二级路由搭建+45.我的订单+46.优化登录跳转+47.独享守卫】
2.vue尚品汇商城项目-day07【vue插件-48.（了解）图片懒加载插件】
3.vue尚品汇商城项目-day07【vue插件-49.（了解）自定义插件】
4.vue尚品汇商城项目-day07【vue插件-50.（了解）表单校验插件】
5.vue尚品汇商城项目-day07【51.路由懒加载】
6.vue尚品汇商城项目-day07【52.打包文件，处理map文件】
7.vue尚品汇商城项目-day07【53.nginx反向代理配置】
8.vue尚品汇商城项目-day07【vue插件-54.（了解）生成二维码插件】
9.vue尚品汇商城项目-day07【55.编码测试与打包发布项目】