一、swiper轮播图的使用
(一)mock.js的基本使用
先安装npm i mockjs
新建mock/index.js
import Mock from 'mockjs'
3.在main.js中引入,使mock参与到项目当中
(二)模拟轮播图和楼层数据
从这里我就开始疯狂踩坑,一直涉及跨域问题,但是用了对应的方法解决也不顶事。
接下来就是在index.js文件中编写代码
先在mock文件夹中引入两个json文件
import Mock from 'mockjs'
import floor from './floor'
import slide from './slide'
Mock.mock('/mock/slide',{code:200,data:slide})
Mock.mock('/mock/floor',{code:200,data:floor})
为mock封装axios,api文件夹中copy一下ajax.js文件夹,改文件名为mAjax.js,在文件中修改路径(踩坑一)
去src/api/index.js中追加两个请求函数,分别用于请求楼层数据,请求轮播图数据
export const reqSlideList = () => mAjax.get('/slide')
export const reqFloorList = () => mAjax.get('/floor')
(三)将轮播图数据存入vuex
ListContainer组件一挂载,就分发一个getslideList获取轮播图数据
mounted(){
this.$store.dispatch('getslideList')
}
2.编写store/home.js文件(踩坑二)
const actions = {
async getSlideList({commit}){
let result = await reqSlideList()
if(result.code === 200){
commit('SAVE_SLIDE_LIST',result.data)
}
}
}
const mutations = {
SAVE_SLIDE_LIST(state,slideList){
state.slideList = slideList
}
}
const state = {
slideList:[]
}
(四)制作ListContainer轮播图
控制台npm i swiper@4 (很奇怪的一个点,除了5版本,其余版本都能够安装成功,浏览过很多大佬的文章,这个问题还是没有解决,有好的办法欢迎后台踢踢我)
swiper的基本用法:
a.先引入相关的包;
b.页面结构必须要有(先获取轮播图的静态效果);
c.再new swiper(获取轮播图的动态效果)
2.ListContainer文件中引入swiper和swiper样式
3.搭建swiper结构,利用v-for遍历mock
4.给轮播图添加动态数据,但不能直接存入mounted中
解决方法一:在外层包一个定时器,但是由于发送ajax请求的时间不确定,所以定时器的时间也不好确定
解决方法二:利用watch($nextTick)监听事件
watch:数据监听,监听已有数据的变化
$nextTick:在等下次DOM更新,循环结束之后执行延迟回调。在修改数据之后,立即执行回调函数
5.轮播图的注意事项:
必须先准备好结构,再去new Swiper
Swiper实例和容器必须要一一对应
有些配置直接到官网搜索就好了
(五)制作Floor楼层
将楼层数据存入vuex中
到mock中模拟楼层数据
二、Search搜索模块的业务
(一)准备静态组件
ctrl CV静态组件到项目当中
到route/routes.js中配置路由
import Search from '/Search'
{
name:'search',
path:'/search',
components:Search
}
(三)面包屑部分的开发
分类名的面包屑
要从searchParams中得到CategoryName,然后展示到页面;
利用v-show做判断,避免在没有携带参数的情况下出现bug
实现移除分类名(x)功能
依赖watch对$route监视的写法
利用methods方法
/*
分析:
第一件事:路径得改,去掉分类名、分类编号
第二件事:将searchParams里的category?Id、categoryName置空
第三件事:去掉分类名、分类编号,重新搜索一下
*/
2.关键词的面包屑
要从searchParams中得到keyword,然后展示到页面;
利用v-show做判断,避免在没有携带参数的情况下出现bug
实现移除分类名(x)功能
和分类名不同的是,要清空搜索框,所以这时要利用全局事件总线来处理问题
安装全局事件总线,编辑main.js
搜索框属于Header组件,所以要通知Header组件
之后在removeKeyword补一句代码
this.$bus.$emit("clear-keyword")
3.品牌名的面包屑
要从SearchSelector组件文件中传数据给Search组件,由于品牌名不需要存入路径当中,所以要用自定义事件来完成功能。
Search组件中:
<template>
<SearchSelector @send-trademark="saveTrademark">
</template>
methods:{
saveTrademark(trademark){
//将获取到的数据存入Search中
this.searchParams.trademark = trademark.tmId + ":" + trademark.tmName
//重新搜索
this.store.$dispatch('getSearchInfo',this.searchParams)
}
}
补充自定义事件:子组件给父组件传递参数(顾名思义就是自己创建一个事件,比如事件名,事件回调,然后给自己的组件使用)
父组件给子组件传递参数可以使用props来实现,要想给子组件传值时,需要给子组件引入的地方绑定一个属性,属性值就是要传入的数据,并且要在父组件中引入子组件,子组件要用props来接收数据,之后就可以使用插值语法在页面实现。
父组件代码如下:
<template>
<div>
父组件:
<input type="text" v-model="name">
<br>
<br>
<!-- 引入子组件 -->
<child :inputName="name"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data () {
return {
name: ''
}
}
}
</script>
子组件代码如下:
<template>
<div>
子组件:
<span>{{inputName}}</span>
</div>
</template>
<script>
export default {
// 接受父组件的值
props: {
inputName: String,
required: true
}
}
</script>
通过自定义事件来实现子给父传递值
自定义事件要用到v-on,也就是v-on用在谁身上,就是在谁的组件实例上绑定了事件,v-on的简写形式是@。
在父组件中给子组件绑定一个自定义事件
绑定的myself事件该如何触发呢?
在谁身上定义的就找谁触发,这是我们就需要找到子组件触发,使用$emit,$emit本身的意思有发出的意思。
父组件接收参数
实现功能:
4.属性名的面包屑
SearchSelector组件把用户点击的属性,传给Search组件,这里也要使用自定义事件去做;
Search组件在收到属性之后,要维护到searchParams.props数组中去,随后发请求就好;
注意:searchParams.props中所要数据的格式为:属性ID:属性值:属性名;数据是不能重复的
代码如下:
补充:什么是SPU?什么是SKU?
SPU是标准化产品单元,是最小包装单元;SPU可以直接认为是很多个产品打包组成的一个新物品,有更多的新特性和更多的形态。
SKU是库存量单位,是最小主要单元;SKU不同于SPU,它可以认为就是一个很简单的物品,而这些个简单的物品打包组合就是SPU,比如,现在有5个iPhone(SKU),如果5个为一个生产最小单位,那么这5个iPhone就是组合打包产品(SPU)。