00:00
大家好,我是学习园地的特约讲师高若峰,下节课咱们开发了购物车的列表,以及改变这个数量。那购物车的细节还是比较多的,因为涉及到啊跟money相关的一些东西,我们都要注意,特别是在流程上,那不然的话你让客户损失了,那会引起法律纠纷,对吧,让商家有损失也不好,所以呢注意这些细节,所以要呃业务流程呢,还是稍稍复杂一些,但是呢,都是通用的业务流程给前后端呃经常反复的一个配合,那这节课呢,咱们就用嗯复选框这个选择,把这个功能做了。这个功能呢,也是稍稍有一点复杂的啊,当然了,我们借助于这个按钮组,也就是在啊VT这里边,当然你可以找一下这个按钮组,就是附小化组,那我们也用的就是这个,你可以找一下这个组件,在这个组件里边呢,我们现在你看用的是不好用的,因为我们现在什么也没加,数据没绑定它,这个组件要求我们有几个需要做的,比如说里边的每一个那名字得加名字,而且不能相同,那我们就用这个,呃,购物车的ID能拿进来。
01:03
用这每一个的获取到这个ID,所以呢,通过这ID来去处理这个名字,这是在购物车里边用便利的个列表里边,里边就这个别用这个,用这个购物车每一个数据库的ID,这样的数据库,呃选择了我们能对应上。然后呢,在这里边我们一定要双向绑定的结果,那这里边每个ID和这个结果是有对应的,有对应的一个关系,所以呢,我们这里边就得是使用呃V杠呃,V-model modl v-model双向绑定,绑定什么呢?绑定一个变量,我们就叫做就是选择的结果吧,Result,那这个结果那我们是不是就得需要。在这个呃数据模型里边,你们用到就得加上re,得把这个结果加上,那这个结果呢,咱们可以是一个呃数组的格式,默认呢,我们也是一个数组。因为绑定的是什么,绑定的是这里边儿每一个对吧,因为你有多个嘛,所以数组里边就是这个对应的这个ID,它这个双元绑定结果和我们这里边这个ID让它是对应上就可以了,你比如说现在我们现在这ID是为空的,这里边肯定是不行,那我们怎么能让这里边现在装上我们默认选择上的ID呢?默认选择上ID呢?记得这个是。
02:15
呃,ID速度,公车的ID速度。你这个名字和购物车的这个名字来看一下啊,这个名字和我们上面双向绑定,因为不是在每一个里边做的双向绑定,它是一个组合概念,在组里边做双向绑定,所以呢,我们就需要这里边对应的ID和这个ID对应上的,他现在就可以选择上选择上。现在这里边儿是,呃,没有对应上的对吧,因为这里边儿现在是没有这个数据,但是我们现在怎么呢?你的双向绑定你就可以点了,对不对,那点了默认一刷新的时候,那我默认都是选择的对吧,你看默认在这里边。我们这这个属性它都是一是选择的,那应该用这块也是选择的,所以呢,你ID对应上就可以了,装到那个结果里去,方向绑定它就有了。
03:00
那我们得到购物车的时候,对吧?在这得到数据的时候,那我们需要呃,在这个位置,我们把这个结果设置上T里边是不是有这个伪造的这个结果这个数据,那就需要通过这个res里边的B,是不是这个数据里边拿过来对吧?数据里边拿过来,咱们得过滤一下只拿什么,只拿到这里边的。呃,Fi过滤过滤,只拿到这里边被选中的对不对,F2。通过率这里边我们加一个N一个参数,然后N代表的是这里边儿的每一个购物车的数对象对不对,这个N里边。N里边有一个属性是A字什么,刚才咱打印的看到了选中的。Is下划线下划线啊E这个值等于一的对吧?如果返回这个值等于一的是不是在过滤的,这个方法我们讲我就不细说了,是不是就留在了这个数组里边对吧?形成一个新的数组对吧?但是如果付给他的话,那相当于我们把购物车里边选中的留下了,其他的没留下。
04:04
对吧,选中都留下了,其他没留下,那购物车里边选中没选中,我们都想留下,这里边只装ID的数据,只装ID,所以呢,我们将过滤完的这些,我们继续加map。M mapp相当于便利嘛,对吧,便利里边也加一个参数,但是加一个参数的话,我们可以不加括号啊,那IM,那你这块用N也行,对吧,那习惯了用外用I的选项,这个对不对,然后也是一个函数,让这里边只留下什么,外边只留下数字里边什么,那IM遍历的时候只留下这里边的ID。这样的话。选中的购物车列表,我们把ID都取出来放在这里边,那这个速度就是我们的ID的速度。这样的一条语句就行了,那我们可以在这里边打印一下这个啊,点re result.rog。你看就是选中的这个数度啊。来一下。你看这现在默认全部选中了,你看这里边儿我们留下了三十五三十六三十七三十八三十九这几个ID对吧,都在这里边。
05:07
他对象啊对象。就像里边的他盖,你看数入在这啊,因为它使用带理模式双向绑定嘛,就是响应式通过这种方式实现的,里边有含有他盖对不对,有get s方法,其实你自己可以写出个详细的,他果是帮我们封装好了,非常详细的。然后这里边儿可以实现这种双向绑定了,但是我们现在想改变的时候。也就是这里边它是整个的,如果有改变的时候,我们得去处理,所以呢,这块我们需要加一个什么,加一个改变的一个事件。这块我们艾,嗯改变这理解错了,不是点击时间啊,改变CHN改变的时候,我们就用一个叫做G按钮组的改变码G,我们加一个这样的一个方法,那加这个方法,那我们就需要。在这块处理。啊,负。嗯,复选框当然给的是单眼框的感觉啊,当然它这里边是样式的问题啊,其实它是复选框啊,复选框改变处理。
06:08
改变处理事件,那我们声明一个方法,呃,在这个方法里边,我们将这个处理掉,Cost,我们叫做说明个什么呢?G改变组的一个c an g组的一个改变,然后呢,我们需要这里边它改变的时候,它会默认把那个双向绑定的那个结果给我们传进来,也就是result。他要把这结果给我存进来。进函数。一些。嗯,必须添加了这里边,那我们你看打一下ret.lt。我们来打印这个纸,那我们这块前边这个地方我们就不打印了,不然的话有两个地方打印,我们看不出效果,对吧,这点我就不打印了,然后我们再回过来,你看这样的话,我只要有一个选择的,那这个值它就怎么着,它就是被改变的。
07:00
刷新一下。啊,这个我们没有把它加到什么。你把它加到。这个里边返回去这样才可以啊。来,我们来试一下,看一下它的打印。我们现在点击一下。你看就少了一个,再点击一下,又少了一个,点击这个少了一个,就每次点击的时候,把全部的结果任务传到这里面来。在这里边。那全部的结果跟我们传起来,那我们就可以把这个结果放到哪玩,因为点击的时候改变的这个只是传记的结果,但是这个结果呢,我们得需要让他跟上边的我们这个双向绑定的这个结果是一致的,对吧?所以呢,我们把传过来这个结果,把我们这个状态复制,让它双向绑定。有效果。所以这里边我们就将ST里边的ret,将这个值等于呃,Ret传进来,这个值得改变它这个状态才可以。
08:00
嗯。这没问题了,也就是这改变改变这个状态,把这个数组重新付给他,让这个数值也变化,这样的话,这两个值也就改变了,那个双元绑定的值,只能把这里的所有的ID都拿过来啊。拿过来,那现在选中的这个状态,咱们通过这结果里边就知道任何地方用到这个这个结果就能都能拿到这个选中的ID了。对吧,任何地方都可以拿到选择ID了,那现在我想把选中的这个ID,对吧,现在我一刷新你看。数据库没有改变对吧。那数据库没有改变,那假如说我这一点结算生成订单的时候,那不是说我们把ID选中的ID传过去,正常的话,我们是在前面做,那这样一是不安全,另外呢,你像我们京东,还有像咱们用的京东淘宝,他们在做的时候都是在接口端,你这里边把服务器的那个也得需要结果改变掉,这样的话。一是一刷新的时候,这个还是留在这块,不会让它变化,另外点结算的时候,在后端他就把选中的生成订单,没选中的不生成订单留下来,所以呢,咱们这个选中,咱们还需要把服务器端的什么结构给改造,那服务器端的接口咱们现在前面也做过了,看这个只要是我传上这个D,就把对应的当前这个用户的所有购物车选中的ID,把购物车给处理掉,其他不选中的不处理掉,是这样。
09:22
那现在我们刷新的时候,看到这个里边你看全是一的对吧,现在我们点改动改变的时候,那我们就可以在这里边。再加一个方法,什么方法呢?就是调用这里边儿的这个方法,这个方法。这个啊,你看他参数就是所有选中的ID嘛,那我们直接要这个。方法,把所有选中的ID拿过去,嗯,只有选中ID,我们再看一下这个结果。ID直接全不行,它应该需要一个参数。购物车啊,购物车中改变选中。需要一个这个参数,这个参数带的是数据的ID,你看到了吧,这样所以呢,咱们需要在这里边传递的时候,需要这么传递这个参数。
10:07
咱不用别的返回了,加上这个,然后把re结果拿过去,这样的话,我们只要是选中的,在页面中选中的,就会把选中的这个所有的ID拿过来,然后呢,给我们传到这里边,就会把服务器的改变这块是。改变呃数据表中的呃选中。卷重。状态。选中状态,这样的话,你看现在我们选中几个。重新刷新一下。现在默认的全是诶。怎么默认现在全是不选中的,这里面怎么。看一下。全零啊,是不是因为我们把这个所有的。默认全是没选中的,是不是默认这个里边。主改变就用这个。
11:01
应该默认全是应该是选中的才对,现在默认全是不选中的,应该是接口,接口默认是选全是选中的,那我们在哪块应该传了一个空数组过来。在。就是刚才咱们存参数的调用这个保存了一下,它自动执行了一下,然后把空数给我们传过来,证明这超时了,我们在现在这试下。你点击点击你看,点击这里边有了两个对不对,现在我再刷新一下。你看这三个还在对吧,然后这里边你看我们选中的是一,没选中的是零对吧,刚才应该是默认咱们团的一个空数的过,对,那现在还是全选中。你看还是在全选中的状态里面,就默认现在就是这样的,你看全都拿过来,然后呢,我们现在选择一个取消对吧,我们刷新一下。这一个也就不带了,对吧,这里面有一个第二个,这里面是零了。在这块。这是我们做这个。刚才应该是我们传了一个空的,我无意中保存了一下,所以呢,在空数的就把所有的都清零啊。
12:03
那。现在全选中状态,咱们这些已经改了,那就是服务器呢已经改了,现在在点提交的时候选中了就可以提交过去了,对吧?但是我们下面还有一个按钮,全选反选,全选反选这个按钮咱们去做对不对,那我们现在如果想做全选反选,那我们也得需要什么,也得需要去处理一下这个按钮。处理一下这个。我们先在这个地方找到这个,它是单独的一个按钮,跟上面是没关系的,这块不有一个全选按钮吗?对吧,在这个里边结算里边加了一个这个全选按钮,那首先呢,我们得双向,呃,双向绑定一下。呃,双向环境。这个吧,V。嗯,全选选中,那我们Mo,因为你不双向绑定的话,他不知道是哪一个代,那比如说绑定啊。这个单选按钮绑定ED,需要选中的绑定,那我们做一个变量,比如说C啊al。
13:04
那我们绑定这个变量,如果这个变量是真的,那它这边就是真,如果是假的话,它就是假,只要绑定一个就可以了,那我们看一下。在这块我们是不是还得呃声明一个,声明一个这个变量,那默认,比如说假如说页面默认全是全选的,那默认我们就它是真值,在这里边我们加一个这块加一个什么呢?Ch eck,呃A默认值让它等于真。啊,不用加这个,这样的话,通过这个解析过去,那我们直接就可以用这个变量了,那我们刷新一下,看一下默认它是不是被选中了,你看。因为它是会自动执行嘛,默认被选中的。然后你说一下。这样呢,我们看会好一些啊。然后我们现在在这块呢,点击我们将它变成甲就行了,只要是将它变成甲,这个就不选择了,对不对,所以呢,点击的时候应该生效,那我这里边再加一个。呃,加一个点击事件吧,这个不用加改变事件了,加一个点击事件就行,在这块前边我们再加一个,加一个事件。
14:09
加一个事件加点击事件click click等于叫什么名了,所有的选择吧,加这个方法,那加这个方法那我们就得。不然的话,它出现警告对不对,就得在这个地方加上cost,加上一个我们全选的一个方法。Al e。等于一个方法。然后把这个方法我们是不是也得返回下A,接着一起。这样,那在这里边呢,你那如果我们点击一下,就将这个ST里边的A,嗯,就那一个方法名叫什么忘记了。里边的是选择所有的这个。呃,选择所有K,所有这个属性,你比如等于相当点K,假如说我们点击的时候将它一个反选,那点击一下,那反选只要我们真变假,假变真,双向绑定的,那就是卷中的反选对吧,就可以了,但是它不是这么做,这么做的没意义,能上边这些东西都有效果,对吧?这些东西都有效果。
15:22
所以呢,我们如果点全选的话。如果点全选的话,那我们就需要在这里边。呃,做一个比如说判断,如果这个状态里边的ST里边的L。如果它是全选的,如果也就是他是被选中的,对吧,全选的那它就是真对不对,如果没有被全选,它就是假,没有全假的话,那我们就让它什么你刚才写的是一样,那我们就让它STT一点,把它变成什么,把它变成呃真就跟才我反选的那个作用是一样的,否则呢,我们就将它什么变成 STt1这个变成甲S变成假,现在我写的效果呢,跟刚才那个是一样的,全选单选真假对不对,但是呢,我通过这个结构去判断。
16:08
就好多了,比如说他现在是假的时候,我一点击的时候,不让他上面所有东西都全写上了。全选上都全选上有改变,那肯定会调用这个,调用这个的话服务器改变,所以呢,只要是全选的话,那我们就呃将这个ST里边的re这个结果将它里边的状态全改变,也就是sta里边的让列表里边的map。也就是列表里边遍历所有的一个,对不对,然后IM是遍历这个列表里边每一个,让这里边每一个的。 Ii.ID都给这个结果,是不是就把所有的这个列表里边,这里边没有过滤,不是选中状态的所有的ID是不是都给他了,只要是我们在这列表里边做ID都给他,那他这样的话就会所有的全选对吧,那如果。否则的话,你把它变成反选的话,那我们就将什么将它设上空。你看,居然空着。
17:02
对吧。不是。这样的话,我们就可以把所有的把这个所有ID都设上,都把所有I都加这里边,那就全选了,所有ID都取消对吧,那就是反选全部选了,你看先点击全部选,再点击全选全部选,全选你看空和这个空这个。双向绑定的,所以改变这个结果值就可以做到这个全选,全部选可以做到这点。那这个全选全部选都做完了,呃,那我现在假如说我现在点击一个。对吧,点击一个的话,是不是用这个也得跟着取消啊,因为是全选的才用这个量对吧。也就是我全选中的时候才让它亮,它不全选中的时候不让它亮,对吧,你现在我都都去掉了,你看。都去掉它还是什么,还是这样的状态,对吧,所以先改成这个也很容易,那我们就在呃上面这个。
18:03
改变的这个里边,那我们就看一下什么,如果用户里边要我们这个列表数量。和我们选中的数量看它俩一不一致,如果不一致的话,那肯定是怎么着,不是全选的状态,不是全选状态,像下边这个全选的按钮也不亮就可以了,所以呢,我们在这个里边。这会下一个如果re UT这个结果里边,也就是我们传过来这个结果里边让它这个长度。长度如果等于我们T里边的列表的长度。也就跟列表数量是选中的,和列表数量是一样的,如果是一样的,我们干嘛呀。这里边就像这个状态,ST里边的全选的状态,让它等于什么,等于针证明我们全部选择了对不对,那否则有不长度不一样的,那不一样的我们就让它不亮,让它不亮也很简单,就是标谁啊。这个变成甲,它就不亮了。FSE,这样就可以搞定这个这个事情了,你看现在,呃,我们看一下现在假如说。
19:08
我全选中,你看所有全选中它就是亮的,那有一个没选中的对吧,或者两个没选中的长度不一样,它是不是就不亮就对了,那我现在一点这个就全亮了,一点这个又不亮了。对吧,这样的全选反选咱们的功能就做完了。下边没有错误,都是,呃,咱们打印的提示,当然这个打印的这个提示,嗯,你不需要的话,你可以后期你可以一点点就把它去掉就行了。所以这个功能还是,嗯,也挺好理解,就看你能不能把这业务逻辑给理清,如果理清的话就好多了。好,那这节课我们就先讲到这里,下节课呢,我们继续完成这个合计总及格,还有删除结算这些功能,把购物车的功能,咱们下节课把它完成。好,谢谢大家这款。
我来说两句