day04

1.复习：
1.商品分类的二级列表由静态变为动态【获取服务器数据、解决跨域问题】
2.函数的防抖与节流【面试频率很高】
3.路由的跳转与传参
跳转：声明式导航（router-link）、编程式导航
编程式导航解决这个问题：自定义属性

2.开发search模块中的typenav分类菜单
（过渡动画）
过渡动画：前提组件或者元素务必要有v-show或者v-if指令才能进行过渡。
 
 

   

      <h2 class=“all” @mouseenter=“entershow” @mouseleave=“leaveshow”>
        全部商品分类
     
     

…
     

     
     
       
        <div class=“sort” v-show=“show” @mouseleave=“currentIndex = -1”>
          …
       

组件挂载：
 // 组价挂载完毕，可以向服务发送请求
  mounted() {
    // 通知vue发请求，获取数据，存储于仓库当中
    this. $store.dispatch("categoryList");//home跳转到search会在执行一次mounted//console.log("我是typenav挂载完毕");//当组件挂载完毕，让show变为false//如果不是home路由组件，将typenav进行隐藏if(this.$route.path != “/home”) {
      this.show = false;
    }
鼠标移入移除：
// 当鼠标移入的时候显示
    entershow() {
      if (this.$route.path != “/home”) {
        // 如果是search路由组件下会执行

this.show = true;
      }
    },
    // 鼠标离开时进行隐藏
    leaveshow() {
      this.currentIndex = -1;
      if (this.$route.path != “/home”) {
        // 如果是search路由组件下会执行

this.show = false;
      }
    },
过渡动画：
less
    // 过渡动画样式
    // 过渡动画进入状态
    .sort-enter {
      height: 0px;
      // transform: rotate(0deg);
    }
    // 过渡动画结束状态
    .sort-enter-to {
      height: 461px;
      // transform: rotate(5deg);
    }
    .sort-enter-active {
      transition: all 0.5s linear;
    }
  }
3.三级分类的优化
app.vue只会执行一次
export default {

name:‘’,
  components:{
    Header,
    Footer
  }
,mounted(){
  console.log(“我是根组件”);
}
修改：
typenav中index.vue
注释    // this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …的数据       this.store.dispatch(“categoryList”);

}

4.合并参数
合并params和query参数
methods: {
    // 搜索按钮的回调函数，需要search路由进行跳转
    goSearch() {
      //路由传参
      //1.字符串形式
      // this.$router.push("/search/"+this.keyword+"?k="+this.keyword.toUpperCase());//2.模板字符串//this.$router.push(/search/${this.keyword}?k=${this.keyword.toUpperCase()});
      //3.对象(常用)
      // this.$router.push({name:“search”,params:{keyword:this.keyword}});

// 如果有auery参数也带过去
      if (this.$KaTeX parse error: Expected '}', got 'EOF' at end of input: …n.query = this.route.query;
        this.route.push(location);
      }
    },
  },
5.开发home首页
1.ListContainer组件与Floor组件
服务器返回的数据接口只有商品分类菜单分类数据，对于Listcontainer组件和Floor组件数据服务器没有提供。
mock数据：（模拟），如果你想mock数据，需要用到mock插件
https://docschina.org/ 印记中文，中文前端
作用：拦截前台发送的ajax请求（自娱自乐）
前端的mock数据不会和服务器进行数据任何通讯
npm install mockjs
使用步骤：
1）在项目当中src文件夹创建mock文件夹
2）准备json数据（mock文件夹中创建相应的json文件）

注意：json格式文件进行格式化一下，不能留有空格（alt+shift+f），有空格跑不起来
3）把mock数据需要的图片放在public文件夹中（public文件夹在打包的时候，会把相应的资源原封不动的打包到dist文件夹中）
public文件夹新建images文件夹
4）开始mock虚拟数据，通过mockjs模块实现，创建mockServe.js通过mock插件实现模拟数据
// 引入mockjs模块
import Mock from “mockjs”

// 引入json数据
import banner from ‘./banner.json’
import floors from ‘./floors.json’

// json文件不需对外暴露
// webpack默认对外暴露：图片，json

// mock数据,第一个参数：请求地址   第二个参数：请求数据
Mock.mock(“/mock/banner”,{code:200,data:banner});
Mock.mock(“/mock/floors”,{code:200,data:floors});

5）mockServe.js在入口处引入（至少需要执行一次）main.js
// 引入mockserve,js
import ‘@/mock/mockServe’;
api文件夹下新建mockajax.js
Listcontainer—>>index.vue

swiper使用
第一步：引入包（相应的js，css）
第二步：页面结构务必要有
第三步：（页面当中务必要有结构）：new Swiper 实例【轮播图添加动态效果】

安装Swiper插件：（不要安装最新版本）
npm install --save swiper@5
// 引入Swiper包，去主函数全局引用样式
import Swiper from ‘swiper’
在main.js中引入样式，样式都一样
// 引入路由
import router from ‘@/router’
// 引入仓库
import store from ‘@/store’;
// 引入mockserve,js
import ‘@/mock/mockServe’;
// 引入swiper
import ‘swiper/css/swiper.css’

       

         

           

             
           

mounted(){
  //  派发action，通过vuex发送ajax请求，将数据存储在仓库中
  this.$store.dispatch(“getBannerList”);

// 在new swiper实例之前，页面结构必须要有
   var mySwiper = new Swiper (‘.swiper’, {
    direction: ‘vertical’, // 垂直切换选项
    loop: true, // 循环模式选项
   
    // 如果需要分页器
    pagination: {
      el: ‘.swiper-pagination’,
    },
   
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ‘.swiper-button-next’,
      prevEl: ‘.swiper-button-prev’,
    },
   
    // 如果需要滚动条
    scrollbar: {
      el: ‘.swiper-scrollbar’,
    },
  })

},
获取不到数据：
因为dispatch当中涉及到了异步语句，导致v-for遍历的时候结构还没有完全，因此不行