Day3

1、Search模块中商品分类与过渡动画

过渡动画：前提条件是组件或者元素必须要有v-if v-show指令才可以进行过渡动画

三级列表的优化

在app根组件中发送请求【根组件mounted】执行一次

this.$store.dispatch("getCategoryList")放入到App.vue中，这样子mounted只会执行一次

2、合并参数params与query

Header.vue

methods:{
//搜索按钮的回调函数：需要向search进行跳转
goSearch(){
//路由传递参数：
//第一种：字符串形式
//this.$router.push('/search/'+this.keyword+"?k="+this.keyword.toUpperCase());
//第二种：模板字符串
//this.$router.push('/search/${this.keyword}?k=${this.keyword.toUpperCase}')
//第三种：对象
//代表的是如果有query参数也带过去
if (this.$route.query) {
let location = {
name: "search",
params: { keyword: this.keyword || undefined }
};
location.query = this.$route.query;
this.$router.push(location);
}
}
},

TypeNav index.vue

//判断：如果路由跳转的时候，带有params参数，捎带脚传递过去
if (this.$route.params) {
location.params = this.$route.params;
//动态给location配置对象添加query属性
location.query = query;
//路由跳转
this.$router.push(location);
}

3、开发Home首页当中ListContainer组件与floor组件

服务器返回的数据无轮播图和底部的数据，需要用到mock模拟：用插件mock.js

D:\项目\project-hph\app>cnpm install --save mockjs

使用步骤

1、在src文件夹下创建mock文件夹

2、准备JSON数据（mock文件夹中创建相应的json文件）--别留有空格

3、把mock数据需要的图片放置到public文件夹中【public文件夹再打包的时候，会把对应的资源原封不动的打包到dist文件夹中】

4、开始mock，通过mockjs模块实现

5、在mock文件夹下创建mockServe.js文件，通过mock.js插件实现模拟数据

//先引入mockjs模块
import Mock from 'mockjs';
//把json数据引入进来,图片和json数据格式默认对外暴露
import banner from './banners.json';
import floor from './floors.json';
//mock数据：第一个参数：请求地址 第二个参数：请求数据
Mock.mock("/mock/banner",{code:200,data:banner});//模拟轮播图
Mock.mock("/mock/floor",{code:200,data:floor})

6、mockServe.js文件在入口mian.js文件中引入

//引入mockServe.js
import '@/mock/mockSerce';

7、在api文件夹中创建mockAjax.js文件，用来发送请求---路径需要修改成/mock

//对axios进行二次封装,主要是用到它的请求和响应拦截器

//引入axios
import axios from "axios";

//引入进度条
import nprogress from 'nprogress';
//引入进度条样式
import "nprogress/nprogress.css"
//start:进度条开始 done：进度条结束

//1:利用axios对象的方法，去创建一个axios实例
//2:request就是axios，只不过稍微配置一下
const requests = axios.create({
//配置对象
// 基础路径，发请求的时候，路径当中会出现/api
baseURL:"/mock",

//请求超时的时间,五秒
timeout:5000,

});

//请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
// config：配置对象，对象里面有一个属性很重要
// 进度条开始动
nprogress.start();
return config;
})

//响应拦截器
requests.interceptors.response.use((res)=>{
//成功回调的函数：服务器相应数据回来以后，响应拦截器可以检测到，可以做一些事情
// 进度条结束
nprogress.done();
return res.data;

},(error)=>{
// 响应失败的回调函数
return Promise.reject(new Error('fail'))
});
//对外暴露
export default requests;

8、发请求

//当前这个模块:对API进行统一管理
import requests from './request';
import mockRequest from './mockAjax';
//三级联动的接口：/api/product/getBaseCategoryList GET请求 参数无

//对外暴露一个函数,只要外部调用这个函数，就向服务器发送ajax请求、获取咱们的三级菜单数据。当前这个函数只需要把服务器返回的结果返回即可
//发请求:axios发请求返回结果Promise对象
export const reqCategoryList = ()=>requests({url:'/product/getBaseCategoryList' ,method:'get'});

//获取banner（home首页轮播图接口）
export const reqGetBannerList= () =>mockRequest.get('/banner');

在listcontainer中index.vue发请求

mounted(){
//派发action：通过Vuex发起ajax请求，将数据存储在仓库中
this.$sotre.dispatch('getBannerList' )
}

在home.js中的state，mutation，action中

import {reqgetCategoryList,reqGetBannerList} from "@/api";
//home模块的仓库
const state = {
categoryList:[],
bannerList:[]
};
//mutation是修改state的地方
const mutation = {
GETCATEGORYLIST(state,categoryList){
state.categoryList = categoryList;
},
GETBANNERLIST(state,bannerList){
state.bannerList = bannerList;
}
};
const action ={
async getCategoryList({commit}){
let result = await reqCategoryList();
if(result.code200){
commit('GETCategoryList',result.data);
}
},
async getBannerList({commit}){
let result = await reqGetBannerList();
if(result.code200){
commit('GETBANNERLIST',result.data); //开始写mutation
}
},
};
const getters = {

};
export default{
state,
mutation,
action,
getters,
};

在ListContainer中的vue

3.1 listcontainer组件开发

安装swiper插件

cnpm install --save swiper@5

在轮播图vue中引入

import Swiper from 'swiper';

考虑到其他地方有相同的轮播图，这边可以把引入样式，放进入口文件main.js

//引入swiper样式文件
import "swiper/css/swiper.css";

mounted() {
// 派发action：通过Vuex发起ajax秦桧去，将数据存储在仓库中
this.$store.dispatch('getBannerList');
// 在new Swiper实例之前，页面中结构必须有【new Swiper 实例放在这里发现不行】
// 因为dispatch当中涉及到异步语句，导致v-for遍历时结构还没有完全ok
可以用延迟器试试
settimeout(()=>{

})
},

第一种解决方案

// 在new Swiper实例之前，页面中结构必须有【new Swiper 实例放在这里发现不行】
// 因为dispatch当中涉及到异步语句，导致v-for遍历时结构还没有完全ok
setTimeout(()=>{
var mySwiper = new Swiper(document.querySelector(".swiper-container"),{
loop:true,
// 如果需要分页器
pagination:{
el:".swiper-pagination",
// 点击小球的时候页切换图片
clickable:true
},
// 如果需要前进回退按钮
navigation:{
nextEl:".swiper-button-next",
prevEl:".swiper-button-prev",
},
});
},1000);

完美解决方案：

watch + nextTick：数据监听：监听已有数据的变化

nextTick：在下次 DOM 更新【原本bannerList是个空数组，之后数组里面有四个元素】循环结束之后【v-for循环结束】执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

watch:{
// 监听bannerList数据的变化-因为这条数据发生过变化--有空数组变为数组里面的四个元素
bannerList:{
handler(newValue,oldValue){
// 现在咱们通过watch监听bannerList属性的属性值的变化
// 如果执行handler方法，代表组件实例身上这个属性的属性已经有了【数组：四个元素】
// 当这个函数执行：只能保证bannerList数据有了，此时v-for遍历需要时间，可能此时还没渲染好没有执行结束，
// v-for执行完毕你才能有结构
//nextTick：在下次DOM更新循环结束之后，执行延迟回调，在修改数据之后立刻使用这个方法，获取更新后的DOM
this.$nextTick(()=>{
// 当你执行这个毁掉的时候:保证服务器数据据回来了,v-for执行完毕了【轮播图结构一定有了】
var mySwiper = new Swiper(document.querySelector(".swiper-container"),{
loop:true,
// 如果需要分页器
pagination:{
el:".swiper-pagination",
// 点击小球的时候页切换图片
clickable:true
},
// 如果需要前进回退按钮
navigation:{
nextEl:".swiper-button-next",
prevEl:".swiper-button-prev",
},
});
})
},
},

},

4、获取floor组件的mock数据

静态组件---写api-像服务器发请求*---写vuex的三连环---组件捞数据，展示数据

1、在api文件夹中的index.js

//获取floor组建的数据
export const reqFloorList= ()=>mockRequest.get('/floor');

2、到store仓库文件夹中的home.js

import {reqCategoryList,reqGetBannerList,reqFloorList} from '@/api';

3、写action，用户处理派发action的地方

// 获取floor的数据
async getFloorList({commit}){
let result = await reqFloorList();
if (result.code==200){
//提交mutation
commit('GETFLOORLIST',result.data);
}
}

4、到mutation，修改state的地方

GETFLOORLIST(state,floorList){
state.floorList = floorList;
}

5、state存储数据的地方：数据格式取决于服务器返回的数据

floorList:[]

4.1 getFloorList这个action在哪里触发

由于floor组件复用，而且mock中给的数据有两组。所以触发就不能单独在floor组件内部写，在里面写没办法v-for遍历出两个floor组件

所以在home.vue路由中发

<Floor v-for="(floor,index) in "floorList" :key="floor.id"/>

1、在

5、动态展示Floor组件

1、在floor组件的index.vue中

家用电器

变为=========================

{{list.name}}

• 节能补贴


• 4K电视


• 空气净化器


• IH电饭煲


• 滚筒洗衣机


• 电热水器

变为=============

• {{keyword}}

2、轮播图

第一步，引入swiper包

import Swiper from 'swiper';

第二步，引入样式结构

第三步，vue结构

第四步，swiper实例

// 组件挂载完毕的地方
mounted() {
//对应上面容器内的ref="cur"
var mySwiper = new Swiper(this.$refs.cur,{
loop:true,
// 如果需要分页器
pagination:{
el:".swiper-pagination",
// 点击小球的时候页切换图片
clickable:true
},
// 如果需要前进回退按钮
navigation:{
nextEl:".swiper-button-next",
prevEl:".swiper-button-prev",
},
});
}

6、把首页当中的轮播图拆分为一个全局组件

在开发项目的时候 ，如果看到某一个组件在很多地方使用，你把他变成一个全局组件，注册一次，可以在任意地方使用。放在components文件夹中。

在components文件中创建一个Carousel文件夹，创建一个index.vue

在入口文件main。js中注册

import Carousel from '@/components/Carousel';
Vue.component(Carousel.name,Carousel);