寿光哪里做网站,wordpress 网站标题设置方法,给微商做网站,网站开发建设一般多少钱目录
一、请求数据并展示
1.写Search模块的接口
2.写Vuex中的search仓库#xff08;三连环#xff09;
3.组件拿到search仓库的数据
用getters简化仓库中的数据
4.渲染商品数据到页面
5.search模块根据不同的参数获取数据展示
#xff08;1#xff09;把派发action…目录
一、请求数据并展示
1.写Search模块的接口
2.写Vuex中的search仓库三连环
3.组件拿到search仓库的数据
用getters简化仓库中的数据
4.渲染商品数据到页面
5.search模块根据不同的参数获取数据展示
1把派发actions的操作封装为函数
2设置参数默认值
3Object.assign合并对象
4再次发请求获取数据
6.渲染子组件数据到页面
二、面包屑部分的开发
1.面包屑处理分类的问题
2.面包屑处理关键字
1删除标签
2删除表单框里的关键字
3删除路径中的params参数
3.面包屑处理品牌信息
1子传父组件自定义事件
2添加品牌面包屑
三、平台售卖属性的操作
1子传父组件自定义事件
2添加面包屑
四、Search模块的排序操作
1.谁应该有类名
2.谁应该有箭头
3.实现点击切换样式和箭头
五、实现分页器功能
1.分页器所需要的数据4个条件
2.先传假数据
1计算总页数
2计算连续页的开始和结束数字
3分页器动态展示
3.首尾页和省略号什么时候显示
4.把假数据替换为真数据
5.给当前按钮添加样式 一、请求数据并展示
写完静态组件就写api然后写三连环
1.写Search模块的接口
//获取search模块接口请求需要带参数
//给服务器传递参数的值至少是个空数组
export const reqGetSearchInfo (params) {return requests({ url: http://gmall-h5-api.atguigu.cn/api/list, method: post, data: params })
}
2.写Vuex中的search仓库三连环
import { reqGetSearchInfo } from /api
// import search from core-js/fn/symbol/search
//search模块下的小仓库
const state {searchList: {}
}
const mutations {GETSEARCHLIST(state, searchList) {state.searchList searchList}
}
const actions {//获取search模块数据async getSearchList({ commit }, params {}) {let result await reqGetSearchInfo(params)if (result.code 200) {commit(GETSEARCHLIST, result.data)}}
}
//getters为了简化仓库当中的数据而生
const getters {}
export default {state,mutations,actions,getters
}
入口文件引入
import {reqGetSearchInfo} from /api
search组件当中派发action
mounted() {this.$store.dispatch(getSearchList, {});}, 3.组件拿到search仓库的数据
捞数据以前的写法
import {mapState} from vuex
、、、
computed:{...mapState({goodsList:statestate.search.searchList.goodsList})}
用getters简化仓库中的数据
注意仓库当中state是分模块的getters是不分模块的 const getters {goodsList(state) {return state.searchList.goodsList||[]//为了防止没网返回的就是undefined},trademarkList(state) {return state.searchList.trademarkList||[]},attrsList(state) {return state.searchList.attrsList||[]},
}
import {mapGetters} from vuex
mounted() {this.$store.dispatch(getSearchList, {});},computed:{...mapGetters([goodsList])//这样直接写search组件中就有goodsList数组了//getters模块不划分模块直接用数组}
4.渲染商品数据到页面 li classyui3-u-1-5 v-for(good,index) in goodsList :keygood.iddiv classlist-wrapdiv classp-imga hrefitem.html target_blankimg :srcgood.defaultImg//a/divdiv classpricestrongem¥nbsp;/emi{{good.price}}.00/i
5.search模块根据不同的参数获取数据展示
1把派发actions的操作封装为函数
我们目前的dispatch只能在挂载完毕的时候发起一次请求进行捞取数据正确的应该是我再搜索啥应该再去捞取
可以把它生成一个函数调用一次就去捞取数据
methods: {getData() {//根据参数向服务器发请求获取数据this.$store.dispatch(getSearchList, {});},},
mounted负责来调用函数
mounted() {this.getData();},
2设置参数默认值
数据类型是对象参数
data() {//我们之前返回的参数都是空数组现在给它带上参数return {searchParams: {category1Id: ,category2Id: ,category3Id: ,categoryName: ,//分类名keyword: ,//用户填进去的order: ,//排序//这些全是空因为不知道用户填的什么pageNo: 1,//默认打开是第一页pageSize: 10,//页面显示多少个数据props: [],trademark: ,//品牌},};},
在mounted之前我们就得把参数值带过去才能捞取数据mounted生命周期之前的有beforecreat、created、beforemount而且beforecreat是获取不到数据的我们选择在beforemount里发请求之前发参数复杂写法 3Object.assign合并对象
用Object.assignES6新增的语法合并对象
Object.assignx,a,b三个参数都是数组后两个给空的x数组赋值
beforeMount() {Object.assign(this.searchParams,this.$route.query,this.$route.params)},
现在的问题是更新的函数在mounted里面 所以请求只能发一次点了首页的手机再搜索华为页面不动
4再次发请求获取数据
我们每次筛选之后路由的信息都在发生变化所以我们不在mounted里写了监听路由的变化$route的params和query参数路由变就请求
watch:{//这里不用this.$route,$route就直接是vc上的属性$route(newValue,oldValue){//参数发生变化的时候我们还得重新去整理参数Object.assign(this.searchParams,this.$route.query,this.$route.params)//再次发起ajax请求this.getData();}},
每一次请求完毕想要下一次请求之前应该先把当前的请求都删了
watch:{//这里不用this.$route,$route就直接是vc上的属性$route(newValue,oldValue){//参数发生变化的时候我们还得重新去整理参数Object.assign(this.searchParams,this.$route.query,this.$route.params)//再次发起ajax请求this.getData();//置空上一次的请求this.searchParams.category1Idthis.searchParams.category2Idthis.searchParams.category3Id}},
keyword有时候会复用所以不置空
6.渲染子组件数据到页面
现在开始做search组件的小组件SearchSelector
import {mapGetters} from vuexexport default {name: SearchSelector,computed:{...mapGetters([trademarkList,attrsList])}}
li v-fortrademark in trademarkList :keytrademark.tmId{{trademark.tmName}}、、、div classtype-wrap v-forattr in attrsList :keyattr.attrIddiv classfl key{{attr.attrName}}/divdiv classfl valueul classtype-listli v-for(attrValue,index) in attr.attrValueList :keyindexa{{attrValue}}/a、、、
然后v-for该拆了拆
二、面包屑部分的开发
1.面包屑处理分类的问题
面包屑可能有也可能没有用v-if而且点击x号就会删除设置一个点击事件
li classwith-x v-ifsearchParams.categoryName{{searchParams.categoryName}}i clickremoveCategoryName×/i/li
//删除分类的名字removeCategoryName() {this.searchParams.categoryName ; //只删一个为啥置空啊//删了之后name和id都得置空this.searchParams.category1Id ;this.searchParams.category2Id ;this.searchParams.category3Id ;//置空之后还得向服务器发请求this.getData();},
这里删除置空好像因为目前我们每次都只有一个标签所以直接置空了
所有Id和name都置空还是会有十个参数返回服务器那边找数据既然是空的就没必要添加负担可以赋值为undefined
this.searchParams.categoryName undefined; //只删一个为啥置空啊//删了之后name和id都得置空this.searchParams.category1Id undefined;this.searchParams.category2Id undefined;this.searchParams.category3Id undefined;
还有一个bug就是我们删除标签之后地址栏还是显示那个标签
点击选项之后路由跳转带着参数页面的路径就会带着标签我们可以让删除标签之后再进行页面跳转自己跳自己再改路径
//地址也需要修改this.$router.push({name:search})
这么写不严谨我只是x了标签但是我可能有keyword呢这句话连我的params参数一起都删了
if (this.$route.params) {this.$router.push({ name: search ,params:this.$route.params});}
要是有params参数的话跳转到search而且带着params参数
2.面包屑处理关键字
现在实现搜索关键字关键字也会有标签关闭标签路径当中的params没了搜索框中的文字也没了
1删除标签
!-- 关键字的面包屑 --
li classwith-x v-ifsearchParams.keyword{{ searchParams.keyword}}i clickremoveKeyword×/i/li
//删除关键字removeKeyword(){//这一步置空的是search路由的关键字header上的没有this.searchParams.keyword undefined;//重新发请求this.getData();
2删除表单框里的关键字
清除search路由的关键字并且重新发请求然后就该清除header组件的关键字了我们现在在search组件中他俩是兄弟关系用到组件间通信配置$bus全局事件总线
main.js:
new Vue({render: h h(App),beforeCreate(){Vue.prototype.$busthis},
search通知 //通知兄弟组件header 清除关键字this.$bus.$emit(clear)
header:
mounted() {//通过全局事件总线清除关键字this.$bus.$on(clear,(){this.keyword})},
3删除路径中的params参数
//路由的跳转this.$router.push({ name: search })
这么写又把人家的query参数给丢了
//路由的跳转if (this.$route.params) {this.$router.push({ name: search ,query:this.$route.query});}
3.面包屑处理品牌信息
1子传父组件自定义事件
实现点击品牌也能出现标签首先给品牌添加点击事件(trademark)传递参数为品牌的信息参数类型为对象子组件
ul classlogo-listli v-fortrademark in trademarkList :keytrademark.tmId clicktradeMarkHandler(trademark){{trademark.tmName}}/li
/ul
点击之后就得带着品牌信息向服务器捞数据
注意我们是让父组件发信息给服务器的因为之前整理的参数都在父组件里所以我们的子组件需要给父组件传过去品牌信息
子给父通信自定义事件父组件给子组件绑定一个自定义事件
!--selector--SearchSelector trademarkInfotrademarkInfo/
儿子触发回调函数
methods: {tradeMarkHandler(trademark){//点击品牌之后整理参数向服务器发请求//trademark是个对象 有相应的name和idthis.$emit(trademarkInfo,trademark)//trademark为品牌名}},
父亲整理参数再重新发送
trademarkInfo(trademark){//自定义事件的回调触发在子组件触发//整理参数,格式要求是idnamethis.searchParams.trademark${trademark.tmId}:${trademark.tmName}//发请求this.getData();}
2添加品牌面包屑 !-- 品牌的面包屑 --
li classwith-x v-ifsearchParams.trademark{{ searchParams.trademark.split(:)[1] }}i clickremoveTrademark×/i/li
trademark现在的格式是idname但是我们展示标签的时候只想展示name所以用split分割开要数组【1】
removeTrademark(){this.searchParams.trademarkundefinedthis.getData();}
三、平台售卖属性的操作
1子传父组件自定义事件
给系统、内存啥的添加面包屑
我们点击的是每个小li给li加点击事件props参数格式——idname
div classtype-wrap v-forattr in attrsList :keyattr.attrIddiv classfl key{{attr.attrName}}/divdiv classfl valueul classtype-listli v-for(attrValue,index) in attr.attrValueList :keyindex clickattrInfo(attr,attrValue)!-- 这个attr是上面的v-for的参数attrValue是这个v-for的参数 --a{{attrValue}}/a/li/ul/div
//平台售卖属性attrInfo(attr,attrValue){this.$emit(attrInfo,attr,attrValue)}
然后我们得把attr和attrValue往父组件送
绑定自定义事件 !--selector--SearchSelector trademarkInfotrademarkInfo attrInfoattrInfo/
attrInfo(attr,attrValue){let props${attr.attrId}:${attrValue}:${attr.attrName}this.searchParams.props.push(props)this.getData();}
2添加面包屑 我们这次就不能再用v-if了因为以前那些要么显示要么不显示这次是遍历props数组有几个就得展示几个用v-for
li classwith-x v-for(attrValue,index) in searchParams.props :keyindex{{ attrValue.split(:)[1] }}
但是有个bug就是如果点两次16G它就给你弄两个16G的标签所以往数组里push的时候就得先判断
if (this.searchParams.props.indexOf(props) -1) {this.searchParams.props.push(props);} 数组去重.indexOfxxx-1数组索引号为-1说明还没有 删除先确定需不需要传参我们删除的时候需要获得数组的索引值
!-- 平台售卖的面包屑 --liclasswith-xv-for(attrValue, index) in searchParams.props:keyindex{{ attrValue.split(:)[1] }}i clickremoveAttr(index)×/i/li
//移出平台售卖removeAttr(index){this.searchParams.props.splice(index,1)this.getData();}
四、Search模块的排序操作
1.谁应该有类名
看数据里的order写的是1还是2是1就是综合2就是价格
li :class{active:searchParams.order.indexOf(1)!-1}a综合/a/li
li :class{active:searchParams.order.indexOf(2)!-1}a价格/a/li
order是几哪个就是红色的
将上面这段代码封装成函数
li :class{active:isOne}a综合/a
/li
li :class{active:isTwo}a价格/a
/licomputed: {、、、isOne(){return this.searchParams.order.indexOf(1)!-1},isTwo(){return this.searchParams.order.indexOf(2)!-1}},
2.谁应该有箭头
谁有类名谁就应该有箭头,箭头用iconfont这次来使用一下在线的 在线链接没有协议名往index.html link引入的时候要加上这个网站的协议名https
link relstylesheet hrefhttps://at.alicdn.com/t/c/font_4501496_w5xz3uenvcs.css
箭头向上还是向下取决于order数据里的desc还是asc
ul classsui-navli :class{active:isOne}a综合span v-showisOne classiconfont :class{icon-down:isDown,icon-up:isUp}/span/a/lili :class{active:isTwo}a价格span v-showisTwo classiconfont :class{icon-down:isDown,icon-up:isUp}/span/a/li
本来我还纳闷那个span里的v-show后来发现order数字变了之后之前的还留着箭头箭头应该是有红色样式的才有也就是目前是它的数字span才能显示
isDown(){return this.searchParams.order.indexOf(desc)!-1},isUp(){return this.searchParams.order.indexOf(asc)!-1}
3.实现点击切换样式和箭头
我们点了一个红色的它的箭头方向就应该切换我们点一个白色的它的背景色就应该变红箭头默认为降序所以我们得传参进去判断点的是1还是2 li :class{active:isOne} clickchangeOrder(1)、、、 li :class{active:isTwo} clickchangeOrder(2)
changeOrder(flag){//flag代表用户点击的是1还是2let originOrderthis.searchParams.order//起始状态let originFlagthis.searchParams.order.split(:)[0]//记录起始是0还是1let originSortthis.searchParams.order.split(:)[1]//记录起始的顺序let newOrder//准备一个新的order属性值//点击综合if(flagoriginFlag){newOrder${originFlag}:${originSortdesc?asc:desc}//这样写就不用一种一种的分情况写了}else{//点击的是价格,默认就降序newOrder${flag}:${desc}}//将新的order给旧的this.searchParams.ordernewOrderthis.getData()}
这个三元表达式太妙了我自己想肯定得一个一个情况分着写最后别忘记把新的order给旧的
五、实现分页器功能
1.分页器所需要的数据4个条件
分页是一个全局组件pagitation全局组件都得到main.js注册
Vue.component(Pagination.name,Pagination)
import {reqGetSearchInfo} from /api
需要知道当前是第几页pageNo字段
需要知道每一个需要展示多少条数据pageSize字段
需要知道整个分页器一共有多少条数据total字段
需要知道连续的页面个数5或7奇数——对称continues字段
2.先传假数据
Pagination :pageNo1 :pageSize3 :total91 :continues5 /
props:[pageNo,pageSize,total,continues]
真数据在服务器里面我们先自己设置一些假数据把组件管理一下再传真数据
1计算总页数
computed:{totalPage(){return Math.ceil(this.total/this.pageSize)//向上取整}} Math.ceil(xxx) 向上取整 button{{totalPage}}/button
2计算连续页的开始和结束数字
startNumAndEndNum() {const {continues,pageNo,totalPage}this//解构一下//定义两个变量存储起始和结束数字let start0 ,end 0//连续页数可能不到5页if(continuestotalPage){start1endtotalPage}else{//正常数据,这块不能写死因为你到时候连续页数不一定是5没准是7// startpageNo-2// end pageNo2startpageNo-parseInt(continues/2)endpageNoparseInt(continues/2)}
现在这样写有bug就是假如你现在页数很多但是你现在处于第一页那么start就成负数了
假如当前是第一页应该是1、2、3、4、5
假如是第二页也应该是1、2、3、4、5
//不正常的数字纠正if(start0){start1endcontinues}
end还有bug假如我现在在28页end是continues530但是我总页数可能就29页呢 //end判断if(endtotalPage){endtotalPagestarttotalPage-continues1}}return {start,end}
//记得最后return啊要不然上面用end、start的时候说undefined
3分页器动态展示
一个小tipsv-for可以遍历数组、数字、字符串、对象
!-- 中间部分 --button v-for(page, index) in startNumAndEndNum.end :keyindex{{ page }}/button
让它去遍历到最后一个数如果end是10的话pageNo8continues显示的是从1到10
过滤掉前面的数字
button v-for(page, index) in startNumAndEndNum.end :keyindex v-ifpagestartNumAndEndNum.start{{ page }}/button
3.首尾页和省略号什么时候显示
但是存在bugcontinues的start如果是1的话跟前面的1重复了就不再要前面的1了
button v-ifstartNumAndEndNum.start11/button
而且···得在start为3时才能出现
button v-ifstartNumAndEndNum.start2···/button
前面start的bug解决了就该解决end的了
button v-ifstartNumAndEndNum.endtotalPage-1···/button
button v-ifstartNumAndEndNum.endtotalPage{{ totalPage }}/button
4.把假数据替换为真数据
去仓库中捞一下totalpageNo和pageSize在data中有
import { mapGetters,mapState } from vuex;
computed:{
...mapState({total:statestate.search.searchList.total})
!-- 分页器 --
Pagination :pageNosearchParams.pageNo :pageSizesearchParams.pageSize :totaltotal :continues5 /
儿子点击了哪页就得告诉父亲当前的pageNo子给父通信自定义事件
!-- 分页器 --
Pagination getPageNogetPageNo 、、、 /
button :disabledpageNo1 click$emit(getPageNo,getPageNo-1)上一页/button!-- 点击传入当前页码-1页数为1的时候不能点 --button v-ifstartNumAndEndNum.start1 click$emit(getPageNo,1)1/buttonbutton v-ifstartNumAndEndNum.start2···/button!-- 中间部分 --button v-for(page, index) in startNumAndEndNum.end :keyindex v-ifpagestartNumAndEndNum.start click$emit(getPageNo,page){{ page }}/buttonbutton v-ifstartNumAndEndNum.endtotalPage-1···/buttonbutton v-ifstartNumAndEndNum.endtotalPage click$emit(getPageNo,totalPage){{ totalPage }}/buttonbutton :disabledpageNototalPage click$emit(getPageNo,getPageNo1)下一页/button分情况处理点击事件点击的如果是上一页第一页不能点击上一页其他的点击传给当前的页数1下一页同理
中间部分点击之后就传当前点击的页数
然后父组件就得开始整理参数然后重新发请求
getPageNo(){//整理带给服务器的参数this.searchParams.pageNopageNothis.getData()}
5.给当前按钮添加样式
点击哪个按钮它的颜色就变成skyblue
button v-ifstartNumAndEndNum.start1 click$emit(getPageNo,1) :class{active:pageNo1}1/buttonbutton v-ifstartNumAndEndNum.start2···/button!-- 中间部分 --button v-for(page, index) in startNumAndEndNum.end :keyindex v-ifpagestartNumAndEndNum.start click$emit(getPageNo,page) :class{active:pageNopage}{{ page }}/buttonbutton v-ifstartNumAndEndNum.endtotalPage-1···/buttonbutton v-ifstartNumAndEndNum.endtotalPage click$emit(getPageNo,totalPage) :class{active:pageNototalPage}{{ totalPage }}/buttonbutton :disabledpageNototalPage click$emit(getPageNo,getPageNo1)下一页/button
