00:00
我们再来编写购物车的其他功能,来编写一个我们选中不选中,首先当我们购物车里边的商品列表展示以后,能选中某一个商品或者不选中,我们要实时的修改redist里面的这个状态,所以我们为这个选中不选中按钮,我们来绑定一个单击事件,我们可以去购物车的这个cut list HTML页面选中不选中按钮是这个我们包括他们的选中状态,我们是动态取出来的,我们为这个按钮呢,都来绑定单击事件这个按钮,我们给它加一个统一的,比如我们聚焦a check,那统一的class,我们为它们来绑定单击事件,好,我们来往下边。我们在下边来写一个我们的GS代码,刀符小括号。Do幅小括号,我们以class方式给它批量绑时间,点一个click click,当我们这个方法一点击以后,诶,我们这个按钮一点击,那接下来相当于要改这个商品的状态,所以我们现在必须知道两件事情,就是我们要修改的是哪个商品,以及它当前的状态,那又要修改的是哪个商品,我们可以直接在这给input框给一个自定义的属性,比如我们TR这个自定义属性呢,我们就叫SQD,这自定义属性的值我来Dollar符大括号我们直接取出来就行了,好,Item。
01:19
我们当前商品呢,肯定有它的ID,我们就叫SQID,然后呢,这就是我们要改的商品,我们的自定义属性叫SQID,来ctrl end来找下边首先Dollar this,我们当前被点击的元素,它的自定义属性里边会有一个SQID表示呢我们当时要改的这个商品的ID,然后呢,同时我们到底是选中了还是不选中,我们可以来Dollar服this,这选中不选中状态我们呢不拿at tr取值了,因为我们要返回出货,False杰克瑞呢有一个prop,我们这个呢也可以来取值,我们这个英input的框主要呢有一个这个属性我们来看。
02:04
那么这个属性呢,叫选中的话就是check,我们来看一下我们的这个check属性,右键检查元素,如果被选中,我们现在呢是check状态,我们相当于有一个属性叫check,如果我们使用at tr获取我们这个check,获取到值就是check,但是如果我们使用prop获取,它就是触false,所以们最终肯定要得到的是一个false,我们到底是选中还是没选中,然后呢,我们接下来得到这两个信息,我们就让它跳转到一个地方,那我们希望我们自己有一个方法,我们购物车里边呢,就有一个方法,这个方法呢就叫check item,好,那现在呢,就有一个叫check item来勾选某一个购物项的,然后这个方法我们来给他,给第一个我们的SQID,我们这个被选中的商品的ID拿过来在这,然后呢,接下来第二个我们这个商品and,以及我们这个是否是选中状态,我们的这个check状态,而且这个是否选中,我们就在这来做一个三运算,我们就不传出false了,我们。
03:04
在这呢,来做一个判断,如果是处,那就是给它拼一个一,如果是false,那就是拼一个零,如它是真吗?真的话那就是一,否则那就是零,那选中用一表示,没选中呢用零表示,那么最终会跳到这个位置。那么接下来购物车里边的ctrler来找到购物车的controller controller e,我们来找到我们购物车的control,好,购物车controller里边我们希望有一个方法,那就是这个方法我们叫public string check item,我们叫勾选某一个购物项,然后我们页面会给我们提交两个参数,这两个参数呢,第一个是我们浪类型的SQID商品的ID,还有第二个我们这个是否是被选中,我们是英特这类型一代表选中零代表没选中我们的这个check状态。我们来看一下我们刚才的这个页面,Ctrl e,我们刚才页面在这,所以它会带这两个参数,SQID和check,这两个参数呢我们都要,所以我们使用request来标注,来标注以后呢,第一个参数是SQID,这个呢我们是必须使用的,好,然后呢,第二个我们request来标注的是check,我们这个也是必须有的,然后接下来我们就希望cut service能有一个方法帮我们来勾选注我们购物车里边的某一个商品,我们要勾选的是这个商品,然后呢,他勾选的是true还是false,我们勾选状态呢,把这个check传过来,勾选完了以后,我们return跳到哪,大家注意,因为我们这个页面呢,相当于能展示我们所有购物车里边的商品,包括我们商品的最新信息,我们最好勾选完了,我们让它重定向到这个页面,相当于再刷新一次,把我们这个数据呢再查一次,展示一次就行了,所以我们的做法就是购物车列表。
04:55
那么直接让他重定向,重定向到哪个页面,那就是购物车列表页,只要成功了,我们就让他重定向到购物车列表,相当于再查一遍,好只要重对向到购物车列表,我们就会将当前用户的这个购物车把它登录还是没登录,拿到他购物车里边所有商品放到页面再来展示,那希望呢,就有这么一个方法来创建出来,好这个方法呢,我们这一块还加上它的这个作用,就是勾选勾物项。
05:25
购物项,那我们这个勾选购物项来添加上它的实现,Al的英好来添加上它的实现,这一块的实现首先我们得到我们要操作的是哪个购物车,我们可以有一个叫get cut options,根据我们当前的登录状态,我们来决定我们是要操作哪个购物车,然后呢,这个购物车我们再拿到它的一个getate,我们先拿到当前购物项的详细信息,好,SQID点一个透斯润,我们通过它拿到我们这个购物项,而且如果我们想要获取某一个购物项,我们之前还专门抽取了一个方法叫获取我们这个购物项,我们这是获取所有购物项,我们有没有一个获取单独某一个购物项,诶,这有一个获取购物车里边的购物项,这有一个方法,直接传SQID就行了,我们会得到你当前购物车里边指定的购物项,好,我们拿过来,我们直接调它,我们来得到我们的这个购物项,然后呢,这个购物项的状态我们来给它修改。
06:26
改一下cut item.set它的这个选中状态,这个选中状态呢,我们这个check会传来零或一,所以我们在这判断,如果check等等一,我们就给它置为true,否则呢,我们就来置为false,这是我们最新的状态,然后我们把这个最新的状态,我们对象呢改好了,我们重新还要序列化存到我们的red里边,所以我们使用杰son点一个to Jason string,我们改好的这个对象,对象里边的原始其他信息都在,我们只是呢给它改了一个属性好,我们把这个呢给它再来存到red里边,怎么存,我们还是拿到我们操作购物车的这个东西好,我们是要操作哪个购物车,然后呢,我们给这个购物车里边保存点一个put k呢用的就是当前我们购物项的ID,它点一个to string,好,然后呢,值,那就是我们当前这个购物项,我们修改后的新值给这一放,只要。
07:26
当我们这个购物项选中,被选不选中,我们做完了以后,我们就会重定向,重新来刷新购物车,好,我们来测试一下,走,那我们现在呢是登录状态,我们可以来先看一下,好,我们现在是登录状态,没问题,然后接下来我们来看我们的购物车,我们再来购物车里边修改数据,来点击我的购物车,那先来查看我们的购物车,我来刷新啊,这是我们购物车的商品,这个呢,默认没选中,如果我们一勾中,我们来点击选中,然后呢,它会跳到我们指定的地方是我们购物车服务check item,然后SQID等于四,Check等于一,我们会跳到我们这个请求路径,来看一下我们的controlrler controltrler呢,虽然写了,但是我们来没有做映射,把这个映射呢来加上,好,我们来重新启动我们的购物车,我们再来测试一下,我们先来倒退,好来到我们这个购物车页面,那现在购物车页面里边呢,这个没有被选中,好,我们现在给它选中一下,来选中某一个商品,然后我们又跳回这个页面。
08:25
所以我们现在看到的呢,整个效果就是我们选中还是不选中,我们先会跳转过去,然后呢再跳回来,所以我们F12来看控制台,它呢其实会发两个请求来点击,那第一个请求就是跳过去check item,等我们来check完了,然后呢,他就命令我们,我们的响应,这次的响应就是命令我们重定向,又跳回我们这个购物车的页面,所以我们在这儿呢,就能实时的看到它选中不选中,好我们再来勾掉,再来勾上。我们无论是勾掉还是勾上我们这个状态呢,都会同步来看一下我们这一块的整个状态,同步我们在这儿来刷新一下我们的数据,那现在的当前的这个购物项有一个没选中来,那就是我们这个二号商品来给他再来选中一下,来看一下我们的二号商品,现在呢,又变为选中状态好没问题。
我来说两句