概述
目录
- TheSearch模块开发
- getters的使用
- 带给服务器的参数
- 实现可以再次发送请求
- 面包屑
- 分类面包屑
- 搜索框的面包屑
- 品牌信息
- 属性
- 排序操作
- 分页器
- 起始与结束数字
- 页码数显示
TheSearch模块开发
1、先静态页面+静态组件拆分
2、发请求
3、vuex
4、组件获取仓库数据,动态展示数据
getters的使用
getters在项目中,为了简化数据而生,将在组件需要用到的数组简化一下,将来数组利用数据时就更方便了
const getters = {
goodsList(state){
return state.searchList.goodsList || []
},
trademarkList(state){
return state.searchList.trademarkList || []
},
attrsList(state){
return state.searchList.attrsList || []
}
}
import { mapGetters } from 'vuex';
...................
computed:{
...mapGetters(['goodsList','trademarkList','attrsList'])
}
如果用户网络出现问题,此时服务器还未返回数据,但是已经开始遍历了,此时返回的可能是一个undifined,所以此时需要给用户返回一个空数组。
带给服务器的参数
在发送请求之前带给服务器参数,searchParams参数发生变化有数值带给服务器
data(){
return {
//带给服务器的参数
searchParams:{
category1Id:'',
category2Id:'',
category3Id:'',
categoryName:'',
keyword:'',
order:'',
pageNo:1,
pageSize:10,
props:[],
trademark:''
}
}
}
当组件挂载完毕之前执行一次【先于mounted】
//整理参数
beforeMount(){
//复杂的写法
// this.searchParams.category1Id = this.$route.query.category1Id
// this.searchParams.category2Id = this.$route.query.category2Id
// this.searchParams.category3Id = this.$route.query.category3Id
// this.searchParams.categoryName = this.$route.query.categoryName
// this.searchParams.keyword = this.$route.params.keyword
//简单的写法
Object.assign(this.searchParams,this.$route.query,this.$route.params)
}
实现可以再次发送请求
当$route发生改变时再次发送请求
watch:{
//监听属性
$route(){
//再次发请求之前,再次整理参数
Object.assign(this.searchParams,this.$route.query,this.$route.params)
this.getData()
//每一次请求完毕之后,应该把123相应的参数置空,让它接受下一次相应的参数
this.searchParams.category1Id = ''
this.searchParams.category2Id = ''
this.searchParams.category3Id = ''
}
}
分类名字和关键字不用清理:当用户输入关键字会把上一个关键字覆盖掉,而用户选择分类名字时也会将上一次的覆盖掉,但是各级ID不会完全覆盖掉,所以会产生错误。
面包屑
分类面包屑
当categoryName有值时就显示
<li class="with-x" v-if="searchParams.categoryName">{{searchParams.categoryName}}<i @click="removeCategoryName">×</i></li>
当用户点击删除时,则categoryName和各级Id的赋值为undefined,由于所带参数过多占宽带,所以选择赋值为undefined,即没有值的参数不被携带。
地址栏也需要修改,当点击删除时,地址栏应该变为/search。此时可以选择路由由当前所在页面再次跳转至search页面。如果此时右侧输入框里有关键字即地址栏存在params,所以此时需要携带params参数,即此时需要作出判断是否携带params参数。
//删除分类名字
removeCategoryName(){
this.searchParams.categoryName = undefined
this.searchParams.category1Id = undefined
this.searchParams.category2Id = undefined
this.searchParams.category3Id = undefined
this.getData()
//地址栏也需要修改
if(this.$route.params){
this.$router.push({name:'search',params:this.$route.params})
}
}
地址栏内容修改,本意是修改query参数,如果路径当中存在params参数,不应该删除,应该携带。
搜索框的面包屑
当面包屑的关键字清除以后,需要让兄弟组件Header组件中的关键字清除。
利用全局事件总线实现组件通信。
//在main.js全局事件总线$bus配置
beforeCreate(){
Vue.prototype.$bus = this
}
当用户点击删除面包屑时,则会触发此事件
removeKeyword(){
this.searchParams.keyword = undefined
this.getData()
//通知兄弟组件Header清除关键字
this.$bus.$emit('clear')
}
在TheHeader组件通过全局事件总线清除关键字
removeKeyword(){
this.searchParams.keyword = undefined
this.getData()
//通知兄弟组件Header清除关键字
this.$bus.$emit('clear')
this.$router.push({name:'search',query:this.$route.query})
}
进行路由的跳转,如果路由中携带query参数,则路由地址中应该也有query参数
品牌信息
点击了品牌,需要整理参数,向服务器发送请求获取相应的数据进行显示,此时应该在父组件TheSearch发送请求,父组件中的searchParams参数带给服务器参数,子组件需要将点击的品牌信息传递给父组件。
自定义事件:
1、绑定自定义事件:
<SearchSelector @trademarkInfo='trademarkInfo'/>
2、在子组件触发自定义事件(记得传参)
this.$emit('trademarkInfo',trademark)
3、在父组件设置自定义事件回调
trademarkInfo(trademark){
//整理参数
this.searchParams.trademark = `${trademark.tmId}:${trademark.tmName}`
this.getData()
}
4、当用户点击删除,路由在次跳转
removeTrademark(){
this.searchParams.trademark = undefined
this.getData()
}
属性
仍使用自定义事件传递数据attr和attrValue
收集属性回调:
attrInfo(attr,attrValue){
//整理参数
let props = `${attr.attrId}:${attrValue}:${attr.attrName}`
//添加时先数组去重
if(this.searchParams.props.indexOf(props) == -1){
this.searchParams.props.push(props)
this.getData()
}
}
删除属性:
removeAttr(index){
this.searchParams.props.splice(index,1)
this.getData()
}
注意点:
1、由于此时的参数是一个数组,不可以v-if来显示,应该用v-for来进行遍历显示。
2、整理的参数也需要使用数组的方法push和splice进行添加和删除。
3、在面包屑显示之前需要使用indexOf进行数组去重。
排序操作
1、active类名是否存在,取决于searchParams里order包含的数字,1即为综合,2即为价格。
<li :class="{active: isOne}">
...
<li :class="{active: isTwo}">
computed:{
isOne(){
return this.searchParams.order.indexOf('1') != -1
},
isTwo(){
return this.searchParams.order.indexOf('2') != -1
}
}
2、箭头位置取决于active类名所在位置
<li :class="{active: isOne}">
<a>综合<span v-show="isOne">箭头</span>></a>
</li>
<li :class="{active: isTwo}">
<a>价格<span v-show="isTwo">箭头</span></a>
</li>
3、在阿里图标库找到想要的箭头图标,生成在线链接,在public的index中引入。
<link rel="stylesheet" href="<%= BASE_URL %>https://at.alicdn.com/t/c/font_3602037_vwob8i3v55f.css">
再次利用计算属性进行展示
<li :class="{active: isOne}">
<a>综合<span v-show="isOne" class="iconfont" :class="{'icon-long-arrow-alt-up':isAsc,'icon-downarrow':isDesc}"></span></a>
</li>
<li :class="{active: isTwo}">
<a>价格<span v-show="isTwo" class="iconfont" :class="{'icon-long-arrow-alt-up':isAsc,'icon-downarrow':isDesc}"></span></a>
</li>
给两个li标签添加点击事件
//排序操作
changeOrder(flag){
//flag形参,它是一个标记代表用户点击的是综合(1)还是价格(2)用户点击时传递过来
let originFlag = this.searchParams.order.split(':')[0]
let originSort = this.searchParams.order.split(':')[1]
let newOrder = ''
//确定点击的一定是综合
if(originFlag == flag){
newOrder = `${originFlag}:${originSort=='desc'?'asc':'desc'}`
}else{
newOrder = `${flag}:${'desc'}`
}
//修改新的order
this.searchParams.order = newOrder
this.getData()
}
逻辑:
1、先获取‘:’前后的数据并保存。
2、当点击的flag与默认一致,则新的order应该是这样${默认flag}:${默认sort=='desc'?'另一个值':'desc'}
,如果此时‘:’后的值与默认值一样则变成另一个值,如果不一样就变为默认值。
3、当点击的flag与默认的不一致,则新的order应该是这样${flag}:${'默认sort'}
此时的flag即为用户点击的flag,初次展示的是默认sort。
4、当用户再次点击该flag,则是执行第二点的内容,因为此时用户点击的flag与刚刚一致。
注意:每点击一次默认flag和默认sort都会发生改变,即用户所点击的flag和sort
分页器
1、当前是第几个:pageNo字段代表当前页数
2、每一个页面需要展示多少条数据:pageSize字段代表
3、一共有多少条数据:total字段代表【获取一共有多少页】
4、连续的页码的个数:5或7,【奇数】前后对称,continues代表
先用假数据进行调试
<PagiNation :pageNo='1' :pageSize='3' :total='91' :continues='5'/>
起始与结束数字
计算出连续的页码的起始数字和结束数字
startNumAndEndNum(){
//解构
const {continues,totalPage,pageNo} = this
let start = 0,end = 0
//判断至少5页,如果出现不足五页
if(continues > totalPage){
start = 1
end =totalPage
}else{
//页码大于5
start = pageNo - parseInt(continues/2)
end = pageNo + parseInt(continues/2)
//start不能为0和负数
if(start<1){
start =1
end = continues
}
if(end>totalPage){
end = totalPage
start = totalPage - continues + 1
}
}
return {start,end}
}
页码数显示
1、v-for:可以遍历数组、数字、字符串、对象
v-for="(page,index) in startNumAndEndNum.end" :key="index"
2、设置页码数的动态显示
3、利用自定义事件子向父传递参数pageNo并发送请求
4、设置背景显示类名active
TheSearch.vue
<PagiNation :pageNo='searchParams.pageNo' :pageSize='searchParams.pageSize' :total='total' :continues='5' @getPageNo='getPageNo'/>
//获取当前页数
getPageNo(pageNo){
//整理参数
this.searchParams.pageNo = pageNo
this.getData()
}
PagiNation.vue
<div class="pagination">
<button :disabled="pageNo==1" @click="$emit('getPageNo',pageNo-1)">上一页</button>
<button v-if="startNumAndEndNum.start > 1" @click="$emit('getPageNo',1)" :class="{active:pageNo==1}">1</button>
<button v-if="startNumAndEndNum.start > 2">···</button>
<!-- 中间部分 -->
<button v-for="(page,index) in startNumAndEndNum.end" :key="index" v-if="page >= startNumAndEndNum.start" @click="$emit('getPageNo',page)" :class="{active:pageNo==page}">{{page}}</button>
<button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
<button v-if="startNumAndEndNum.end < totalPage" @click="$emit('getPageNo',totalPage)" :class="{active:pageNo==totalpage}">{{totalPage}}</button>
<button :disabled="pageNo==totalPage" @click="$emit('getPageNo',pageNo+1)">下一页</button>
<button style="margin-left: 30px">共 {{total}} 条</button>
</div>
最后
以上就是拉长盼望为你收集整理的Vue项目流程4,TheSearch模块开发,getters的使用,带给服务器的参数,实现可以再次发送请求,分类、搜索框、品牌信息、属性面包屑,排序操作,分页器的相关步骤TheSearch模块开发的全部内容,希望文章能够帮你解决Vue项目流程4,TheSearch模块开发,getters的使用,带给服务器的参数,实现可以再次发送请求,分类、搜索框、品牌信息、属性面包屑,排序操作,分页器的相关步骤TheSearch模块开发所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复