00:01
好了,那咱接着继续。咱接下来呢,就是咱整个前台项目当中另外一个很重要的知识点了。什么呢,购物车?那举个例子啊,用户比如说。我想买五个,你一点击,你说你要干啥。老师说你要在正常想干啥,是不是就跳转到下一路由。你看嘛。举个例子,比如说你购买完某一个产品。你已经确定买谁了,你看吧,就比如说我想买它。我想买几个,我想买仨。我一点击,你是不是应该跳下一页。这个路由是谁呢?应该是咱们的这个,这个叫做加入购物车成功的这个路由组件当中。这个网速啊。
01:03
这个都不动了是吧。动一下。我刷新吧,太好了。看这来。妈,这就更白扯。跳都不跳。行,最后老师呢,还是买买六个吧,是买的少了。白扯,就是你正常想是不是一点击加入购物车,是不是应该跳到下一。但是你要注意这个按钮跟咱以前不一样了。咱以前的按钮,比如说一点是不是就路由跳转就完事了,但这个按钮不简单,为啥?当你加入点这个按钮的时候,第一个你是要进行路由跳转,但是在跳转之前。
02:04
你得发个请求。发请求。你就想想你将来你购买的这个产品是不是要在购物车当中,是不是进行展示。那你至少这个数据应该存储于谁呢?服气。对不?比如说你得告诉服务器我,你买的是谁。买了多少个,因为将来你需要在你的购物车当中是需要咋的?展示出来。所以说呢,老师呢,把这呢,我们最后再尝试一下,看能不能跳起来。好了,那这位老师放弃了。8080。诶,他出来了。是吧,看这啊走这回挺快的走。你看一定要注意一件事,什么事。老师呢,在这呢,也给你们审查元素,你自己看一下,看着啊走,就是当你要点击加入购物车的时候,你心里你就笨行了。
03:03
你说你买的这个产品将来是不是要在你的自己的购物车当中是展示出来。你想想咱自己玩的淘宝,或者说你玩京东,你买了某一款产品,你点击加入购物车,你将来是不是在购物车当中可以看见。那我问你,你眼睛看见那些数据都是来源于谁?服务器,那服务器他怎么就知道谁加入到购物车呢?那你是不是得告诉人。所以说你看,当点击加入购物车的时候,它不仅仅进行了路由跳转,你在看他干啥?再发请求。这能懂不?这能不懂,而且在路由跳转之后,你再看一下这个页面。就是点击加入购物车,它并不是直接跳到我的购物车,会跳到哪。一个叫做购物成功的这样的一个路由图片当中。不行,我开一个热点。
04:03
这个你看老师呢,在这儿呢,带着你们呢,再看一下。看下花完流量的快不快一些,这样刷。是吧,他这一定要注意一件事,什么事,就举个例子,你就比如这儿,我现在想买的是谁,我想买的是这个999。这没问题吧,我点那是不是跳到了999,这那你要明白你是不是要勾选你买多少个。没事,这玩意已经缓存了,你看就比如说你买五个,那你要注意,当你一加入购物车的时候,第一件事你要干什么。这网速还是慢。不是发发请求,第一个啊,你要想明白一件事,什么事,就是当你跳转之前,你是不是得发请求,你得把你当前买这个产品要存储于哪。服气。你是不是至少在高的,我买的是啥。第二个买了多少个,接下来在你的购物车当中才能展示,而且在路由跳转之后,你看这他在干什。
05:06
是不是在展示你购买那个产品的信息啊。看这。对不对,你看咱回头再看一下,咱刚刚买的是不是这个叫啥。什么小米,红米?就记住叫什么5028。能记住不是5020,你看吗走。对不对,就是你刚刚购买那个产品,你在这儿是不是要展示。这能懂不?所以说这个按钮要做的事很多,第一个干啥?第一个你要发请求的,你是把你当前这个产品要告诉服务器,我买的是谁,买了多少个存储于服务器。第二件事。当服务器存储成功之后,你要干啥?进行路由的跳出,跳到哪是不跳到商品也成功加入购物车当中。OK吗?而且你还要注意一件事,什么事在路由跳转的时候,你看他传没传参。
06:05
传了,就是你刚刚购买多少个产品,是不是通过query参数是不是传过来了,以及你购买产品的那些信息也要打。是不是要传过来,这块是不是要用。智能动工。就接下来咱们要干的活,能不懂?知道吧,那所以说老师给它关掉,看一下咱们的这个,当然咱们这个按钮现在就是个啥。按钮什么都没做呢。对不,那所以说来咱看一下咱的这个大家。假如说我购买三没问题一点。你说现在。是不是先把这个产品存储于。后台当中。对不?那你说要发请求有没有接口?指定有啊,那咱们看一下什么。看一下咱们的这个资料当中的这个文档,来咱们看一下。
07:01
登录咱没做。这个是不是用了搜索产品也用了,商情也用了。获取购物车列表,你说老师问你是获取。不是啊,咱是干啥?是不是添加到购物车,说白是不是要给购物车当中是不是添加一条数据。对不,而且你看这个接口还可以干什么。对已有物品进行数量的改动,啥意思呢?你看啊,就比如说你真的加到购物车当中了,看着看他上线没。你先把这些接口也熟悉一下看,就举个例子,我买的是它。我买几个呢,我买这个600。OK吧,你是不是可以加入到购物车当中,这个接口可以加入,加入到购物车,你加完购物车之后,老师问你这块数字可不可以改。可不可以还可以改,所以说这个接口有两个用处,第一个干啥?把你这个产品添加到哪。购物车当中第二个,你要修改某一个产品的个数的时候,也是通过谁。
08:03
这个接口。这能懂不那吧,那所以说来咱们看看这个接口,这个接口看一下需要带不带餐。需要带什么?产品的啥ID,产品的个数?对不,谁要请求post对吧,那所以说咱们先把这个接口先唠到,那咱得先写啥了。是不是写咱们的API啊。对吧,那这块老师先给他合找谁找是不是找咱那个API。那这块咱们又多了一个接口,那这玩意儿干啥。就是讲。产品。添加到。添加到购物车中或者咋的。或者更新。某一个产品的啥个数?就是添加和更新都是用它。所以说咱呢,暴露一个函数X。
09:03
那这回咱起名叫啥,叫req,叫ADD2。Update收是叫shop。比如说完是不是可以添加或者更新购物车。的产品。对吧,但是你要注意这个函数要不要带参。要不要要带几个。等于两,你看吧,咱们把这个地址给它捞回来,这。一个是不是产品的ID,另外一个是你这个产品的啥个数。对不,那当然什么请求。POS那底下,当然他这有说明,说明咱们到时候再说看这。看这那也就是说你需要带ID和个数,那老师问你这要不要写型材。要一个是谁,SKUID,还有叫SKU。Number。对不,那当然,你是不是要返回服务器,最终的结果?
10:00
叫蕊。呃,Request。对吧?Re EQ ests是不是函数?这样呢,它的URL啊,URL咱们搞一下URL是不是就是它。咱就API不要了吧,哎,把它直接宰了logo。那这块呢,要注意,那这块是不是得带着参数直接换战场。到了。那以及这儿也是一样,这是不是也来个Dollar?但是要注意什么请求。Post宿舍,你还得写个谁?Method,为啥为post大小写都可以?Post。那你说啊,你说这个API写完之后,你要写啥。老师问你仓库还能再搞一个吗?不用吧,你现在点击添加这玩意儿,是不是就在底模块当中。所以说你在这儿又得咋,是不是写三连环?
11:00
因为你得知道添加,就是一点击这个按钮,有没有添加产品咋的成功是成功还是咋的。你成功了是不是进行跳转,带参跳转没成功,是不是得提示对不?那所以说咱们现在只是把接口写好了,这块咱一会再说。咱们在什么时候会派发?X说。是不是点击对不,而且咱们刚才先搁这写了嘛。就是先写上吧,那这块咱先给他咋的get,是不是给他给他注释上这块干啥,写一下子。是不是角?产品添加到哪?购物车中,那咱叫鞋名字吧,叫啥?咱就叫做ad。手帕。Cut或者叫all吧。哦。Up。OK吧,那一定要注意这是属于啥,是不是属于一个action,那将来老师问你,你是不是要发请求,你是不是得用到咱刚刚封装好的那个函数啊,这啥来着,叫re EQ。
12:06
啊,行了,别别别别自己拼了。是不是就他。把它给它捞。是不是就是它,那你将来老师问你这个函数要不要带参。要带几个?两那我问你,你当派发X的时候要不要再测,要,但第一个为一定是谁commit。对吧,第二个你看老师要这么写,将来他带的是啥对象。对不?对吧,那这块老师进行解构叫SKU。ID。另外一个叫SKU number,那你是不是就得发请求了,那请求是不是又妥讨论呃。Wait叫re EQ,呃,AEDD是不是就是它得带着谁SKUID和SKU number。对不完了,这块接下来有谁了。Think,对吧,那这块你是在等待。
13:00
成功的结果,他返回啥咱们先不看,咱们得先派发个action,看一下子是成功了。还是?失败了。对不说这块是什么,这块是加入。购物车返回的啥结果,那咱们呢,在这呢,先打印一下。Conso点谁啊log谁走好了。那我说你咱触发这个action。没有什么时候出发。不点击,那所以说咱们回到哪,回到咱们的组件当中。来把这都合着,找谁找views下的。Detail是不是找到那个按钮。给他绑一个事件。咱找一下应该是是不是这。那这块的her咱就不要给他绑一个谁呀at。Click,那咱们要干什么?是不是要ad?Shop。Car。这个驼峰险吧。
14:01
那有这个方法吗?没有,没有怎么办?你得写了。所以这块一定要注意。老师做一下比,就是以前。咱们的路由跳转就是正常的,是不是从A路由。A路由。是不是跳转到B路由。但是你要注意这里的路由跳转。这里在加入购物车。购物车进行路由跳转之前,他还做了一件啥事儿发啥?请求对不把你购买的产品。把你购买的产品的信息是不是要通过。请求的形式通知谁?服务器,那服务器要干什么?进行相应的啥是不是存储。
15:03
对不,那所以说这块一定要注意,这跟咱当年其他的路由调整不一样了。OK吧,好嘞,那咱们的没这个方法,你在咋是不是写上。他说C,那找一下谁。Methods是不是,那这块咱写下这块上是不是加入购物车。加入购物车的回调函数。来。来咱们呢,先调试一下,你一点击先弹个啥。123对不先别管别的,我先一点咋的,123没问题吧,那老说你你要干啥是不派发。而且还得带上。在谈你当前的这个产品的啥,I老师问你当前这个产品的ID有没有?有哪儿呢?是不这。对不?你想想咱们捞的这个详情,是不是通过这个ID捞到这个这个当前的这个产品的详情。这不就是当前产品的ID吗?
16:00
那老师问你个数有没有。是不是这呢,对不,那所以说这咱要干啥,是不是要派发什么。派方。Action。你看咱要做几件事,你看老师给你捋第一个。就咱这块要干啥,第一个是不是要发请求。发什么请求,是不是角?产品加入到什么数据库?说白了是不是就是通知服务器。通知上服务器。那老师问你,你说让你说通知服务器这件事儿,你可能咋的。可能成功,也可能咋失败,成功老师问你,你要干什么?第二个就是你可能是不是服务器是不是存储成功。成功老师问你要干啥,是不是进行?路由跳转。对不,那还有一种情况是。失败。你失败了要干啥?失败了,你是不是要给用户进啥。
17:02
经提示。对不?而且要注意啊,还有一件事,就算你成功了,经路由跳转,老师问你是不是还得带一些参数过去。你把当前产品的信息是不是要在路由跳转的时候,是不是还要代餐。对不因为啥,因为在咱们的这里看这啊。你看这就举个例子,现在老师买的是这个599的这玩意,就这个手机,你看就假如说你加入购物车成功,我问你当前小米十五九九买了四个这个这个信息是不是要带。对不对,小米十什么什么玩意的四个对不?所以说就算成功了,你在路由是不是要进行路由跳转,还要咋的,是不是传递啥。参数做这里要做的活多不多?多说,咱们先做第一件事,先打。发请求对不?那就是this.dollar到点Dis page。这玩意叫啥来着?
18:00
看一下。呃,找一下咱们这个store。说底叫AD2。Update时不卡是不是就是它?咱给他捞过来。老师问你要不要代餐?要带的是个什么鬼?对象。因为你想想咱在仓库当中是不是在解构。在老。这是个对象,是不是在解构?那所以说这块你应该带的是不是应该也是个对象,而且有两个建筑,一个叫SKUID。这个ID从何而来,这个大小?坐着呢。你看吧,咱当前在这儿啊,你看这儿。你看这咱当前这个ID不就是产品的ID吗。咋来的?你是不是从色齿跳转过来的时候,是不是带过来。而且当年咱这ID用没用过,用过你只要一进入到详情当中,我是发请求了。所以是不是。所以说这个就是咱们要带的产品的啥ad。
19:02
这个咱就直接咋的了。粘过来了,还有谁?还有就是你购买这个产品的啥个数叫啥来着,SKU number,就是咱们这点谁SKU number。对不,那你这样不就派发个action。那咱们先看咱们在仓库当中也打印了,咱们看是成功还是烂了,失败来看一下。老师呢,在这儿呢,我先给你调这啊,看这先听一下老师买这个100个。加入购物车。是否成功?周老师他怎么没有返回数据啊。诶老师问你,你说服务器用不用告诉咱们其他的数据。不用为啥。你服务器就只需要告诉我一件事,啥事,你这个操作是成功了还是失败了,因为你本身是带着数据给谁。给服务器是不是让他帮你存一下子,人家存好了告诉你一声兄弟,我咋的存好了还用给你带别的信吗?
20:07
就还有个再给你返回别的数据。不用,这能懂不,但是你会发现,如果它标记的是200,代表的是啥。成功。对不,那老师问你啊。咱思维别固化。也就是说咱加入购物车,看咱那仓库啊,他给咱返回的是一个对象,老师问你,咱还用三连环吗?还用不用仓库存储一些数据?不用为啥。因为你服务器它本身就没有返回什么,返回数据,你还用三连环存吗。不用了,所以这块一定要注意一件事。就是加入购物车以后是不是发请求了。发请求了,那咱们前台只是做了一件事,什么事?讲参数带给谁?服务器。而服务器。
21:01
服务器它加入就是就是写入数据库成功。他有给咱返回其他的数据吗。Bill。没有返回其他的啥数据,只是。返回了一个啥?返回了一个扣子为多少?等于200代表啥?代表这一次的操作怎么的成功,那老师我问你啊,成功你就想想服务器也没有给咱们返回多余的,多余的是不是多余的数据,你有必要三连环仓库存储吗。有必要吗?哎,有必要吗?没必要,因为他本身就没给咱们反馈别的数据。你还什么就到这,还用三连还吗?不用了吧,所以在这一定要注意啊,就是说到这儿因为什么,因为。服务器没有返回其余的数据。因此,咱们不需要什么。不需要三连环仓库中啊,不需要三连环存储上存储数据。
22:05
OK,不?O,不OKOK吧,于是到这你看到了一个谁?200你是不是就很安心了,代表啥?你是不是存储成功了,而且你也可以看点书看这。对不?你看到谁200是不是就成功了?而且有没有在参数上。有吧?有吧,啊好嘞,老师呢,也听一下停。
我来说两句