00:00
那接着呢，我们来看一下这个加入购物车功能的实现啊，我们先做这个加入购物车。哎，因为只有你先加入了购物车，你才能怎么样啊，你才能在购物车这边显示出来，才能够做这个，呃，删除啊，清空啊，修改了操作，所以咱们先做加入购物车，那加入购物车呢，是在首页这个地方，你看这里都有这些按钮，点击这些按钮的时候，咱们要把请求发给谁，发给这个cut select，调用an item这个方法来实现加入购物车，那我们来实现一下，我们先准备一个cut。在这里面，在web这里面，咱们去new一个。好，继承base在这里呢，咱们写上啊，读钙的方法啊，咱们说什么呢？这个ant it层咱们先来写一下ad艾好，这是什么加入购车。
01:12
加入购物车，那么大家注意看一下哈，在这里咱们先给这个cut类给一个地址啊，咱们给他配置一下。来这里面写一下我复制啊，复制过来改改其实挺快的啊。就不一个个敲了，然后这里呢。是cut so late。是吧，然后复制这个粘贴进来。然后下面。Cut首字母呢改小写好地址呢有了，那么接着咱们来看一下哈，我现在让这个按钮点击了以后，请求发给他，我们到页面上来看看页面在哪呀，呃，在web。
02:01
Pages里面的client下的index，那么按钮呢，其实就是在这个地方加入购物车，这里面我们给它加上这个class，我们先给它把上单地事件啊叫做。出cut加入到购物车嘛，那我们复制一下，然后呢，到上面来查找一下。好，这个菜呢是test javascript，然后页面加载完成之后。好，我们绑定这个，单击事件查找一下，点它点click。好，我们说这是干嘛，就是给加入购物车按钮。
03:00
绑定单击时间好，那么绑定单击时间以后，大家注意看一下哈，那么在这里面点击其实我们需要我们需要干嘛，我们需要他请求cut so列当中的这个an item方法，那我们就直接发请求啊。直接发请求，咱们其实前面讲过啊，通过这个local location点后来属性直接腐值就行了是吧，不知道大家还记不记得，来我先给你看一下哈，比如说我辅给百度他就干嘛呀，他就跳到百度啊。来你先看一下吧，我点击它是不是跳到百度来了，那么我如果这个地址啊符给谁辅给这个cut select，并且加上一个action参数的话，它就会调这个方法。我们先把这个写了啊来，在这个地方是attp冒号双斜线local host 8080，然后斜杠book下的cut问号action等于an it，好，我们先看这个行不行，我们在这里啊，打印一句话，先让它跑通。
04:16
加入购物车，呃，我们重新部署一下。重新部署一下。稍等。啊，就是部署成功，那么我们来看一下哈，我们刷新刷新刷新点击，诶，这还是缓存，大家看一下啊，还是缓存。咱们这个写完之后，是不是已经跳到cut select了，而他还在跳百度，你看到吗？说明是缓存啊呃，我们刷新一下。走这时候跳过来了哈，跳过来了，那么我们看这个打印也没问题了，那接着我们就想想它跑动之后，咱们这个功能它怎么做，首先大家想想哈，你点击加入购物车，你是不是要把这个商品的编号发给服务器，然后服务器才知道。
05:14
你要添加哪个商品呢？所以在这个地方大家看一下，还需要再加一个参数，ID等于商品编号。等于商品编号好了，那这个时候商品编号上哪去取啊，大家注意看一下哈。我们可以在这个地方加一个I层ID这样的方法啊，属性，或者说你可以加一个其他叫做book ID也行不，ID就是图书编号嘛，那这里呢，就可以输出图书的编号。你可以加一个自定义的属性啊，那我们怎么取出来呢？大家注意看。我们可以在这里走，先把它转成dis.a tr，然后取什么东西呢？叫做book ID就可以了。
06:08
哇，叫做book ID，这就是那个商品编号，你把它替换成这个就行了，Book啊，我不知道大家还没记得，记得哈地址是啥呀？来来讲一下吧，有同学可能忘了是吧？我们说在事件响应的function函数中有一个Dis对象，这个Dis对象是当前正在响应事件的DOM对象，还记得吧？那么动对象其实就是谁呀？就是。这个标签呗，那么这个标签我要获取它这个属性怎么办呢？大家看哈，我们要。注意看，先把它转成几块的对象，调用at tr这个方法，这个方法是用来干啥的呢？同学可能都忘了来复习一下吧，At tr，注意看啊，设置和获取。
07:05
哎，选中元素的属性值看见了吗。哎，这就是获取嘛，这不就返回src属性的值吗？这是获取嘛，那么我们的操作其实也一样，这是获取，然后呢，把这个值追加进来。啊，追加进来，好，那现在我们来这边看一下能不能得到这个编号啊。商品编号等于request.get ID，我们试试看啊试试看。走清一下，那么我们看看那入步热部署行不行啊，那热部署有时候好，有时候比较慢啊来吧，我们点击ID是不是上来了，这边能不能得到啊啊还是不行，还是得去部署，咱们自己部署吧哈。来。
08:06
好，重新部署了，部署之后咱们来看一下哈。再刷新一下走I地址三有了吗。还有了说明这没问题啊，上面编号也没问题了，那咱们接着再想想，那服务器该干啥，An塔艾那应该干啥，我们把这个思路说明一下，首先在这边。我把这个先做了哈，这些是测试的东西。获取请求的参数商品编号。啊，然后通过商品编号干什么事情呢？调用book service.que book by ID，大家注意看一下哈，用它。然后呢，把ID放进来，得到图书的信息，得到图书的信息，只有你得到图书的信息，大家想想咱们这个购物车里面是不是才能知道是什么商品呢？单价是多少啊对吧？可可乐的信息啊，好，然后有了这个商品图书的信息以后怎么办呢？把图书信息转化成为cut艾商品箱。
09:27
然后有了商品项之后，调用看点an I城。来cut艾，然后呢，添加商品箱，最后大家看一下哈，添加完商品箱以后怎么办呢。哎，重定向回什么呢，这个。商品列表页面给它跳回来，给它跳回来，好，咱们按照这样一个步骤啊，去实现一下啊。
10:07
首先int，呃，叫做ID，等于什么东西呢？Web us int request.get perter，这是ID，呃，默认的一个值，咱们就给零就行了，好，然后这里需要一个book service，怎么办呢？给它创建一个。不可service。Book service，好，然后。有了以后长了这个地方。快乐book BYD放进来。然后呢，把这个图书转成cut it层，Cut层来咱们看一下哈，这个ID呢，就是图书的编号。
11:05
点get name，这是图出的名称，数量肯定就一了哈new，哎，要看一下哈book.get price哎，它就是big symbol类型，那咱们直接用，然后这个总价呢，也是不可点get price，因为单个商品嘛，那你的单价跟总价其实是一样的啊，一样的好接着呢，调用cut.and it，那你得有个cut对象给它创建一下，等于6CUT，好，那这个时候cutt.an item不就是添加商品项的吗？是吧？好，然后咱们添加完之后往控制台打印一下，顺便看看这个数据它对不对啊，然后跳回商品列表页面重新上回去啊，商品列表是哪呀？就就是就是首页嘛。对吧，就是首页嘛，咱们给他从对象回去，叫做response.sent redirect。
12:01
Con pass。好，然后这个时候咱们写好了以后，咱们呃断点啊，来测试一下，上面这个打印我都去掉了啊。好，重新部署一下，用debug啊。要变异。稍等。啊，稍等。好。嗯。呃，等它启动啊。好，这启动好了，启动好了以后，咱们来看一下啊，比如说我数据结构，我点击它过来了。他过来咱们一步步去看一下哈，那这个ID是多少，我把手上移上来，ID是二啊，然后往下走，我们刚刚点击的是什么数据结构与算法，那么看这个书看对不对，你看数结构算法没问题，然后呢，把它转成卡的it层，再往下走。
13:02
也没问题，转过来了，大家可以仔细对比一下，单价是78块五毛是吧，七十八五毛嘛一个嘛，嗯，然后呢，再往下看，创建一个购物车对象，然后诶打印了，咱们可以看看。这里，诶打印去哪了。哦，还没打呢是吧，还没打来，再往下走一行。大家看这个打印的信息是不是出来了，呃，购物车里面是一个商品，这个总价其实就是这个商品的一个数量没，呃，这个金额啊，没错，好，然后呢，重定向回去，我给他放过去，大家看是不是回来了。回来了吧，那我们再添加一个，嗯，比如说这个再来一次数据结构与算法，或者说我们随便点个其他啊，点个其他来我们点下木须肉盖饭是吧，一会快到中午了，点个饭啊来这个手往下走走，大家看看这里面。是不需要盖饭吧，过来了，然后呢，给它转成购物车商品项也没问题啊，然后再往下走，添加商品项打印，我们看这个打印的内容。
14:09
哎，发现问题没有啊，这这个地方数量是不是还是一呀，为啥呀，大家看出来问题没有，有些同学说了对啊，大家看一下这里是不是。每次都扭一个呀，每次都溜一个，相当于什么东西，就好像你去了超市，你每看见一件商品，你要往这个车里面加商品的时候，你就换一辆车，那你肯定就是每次就商品，这车里面就只有一个商品呗。那我们一般情况下，这个购物车是不是从始至终都不换才行，对吧，一直往里面加东西啊，那怎么办呢？这个购物车呀，它肯定是不能够直接扭的啊，咱们只是扭一次，咱们得先看看这个有没有车是吧？有车了咱们用原来那个车，没有车怎么办？咱们去找一辆，也就是NEW1辆，那这个车放在哪里呢？大家看哈，咱们一开始就讲了，这个购物车的信息是放在session中，所以大家注意，我们改下这个代码哈，我先把它停了，我们说这个代码怎么改，首先。
15:15
Iq.get session.get啊，图表。哎，我们先从session当中。获取这个购物车，先看看这个购物车有没有，因为咱们的购物车就是放线中的，所以我们要先到现中去看，如果购物车等等于空，如果它等于空，大家注意看一下哈，那么我们就给它创建一个。等于new cut创建一个。OK，那创建好，这这还放下面啊，这个创建好了以后，大家注意看一下，咱们的购物车放哪就放在session中啊，把它放到session中，Get session.set错表这里是cut cut好放到session中以后啊，诶这个车就有值了吗？下次你再请求进来是不？这里是不是能取到。
16:17
对吧，好，那现在这个车有值了，我们添加这个商品项，然后打印这样就可以了，就可以解决这个每次添加呀，发现这购物车里只有一项的问题，咱们在debug启动啊，再测试一下。咱们亲一下。好，稍等啊，他在变异。稍等。OK。快好了。好启动了哈，那么启动的话，咱们来看一下哈，加入一次数据结构与算法，咱们快速的过，大家看第一次获取这个购物车的时候，它是不是空啊，因为第一次你还没有车嘛，是吧，这时候判断空了以后创建一辆车，然后呢，把这个车放到session当中。
17:09
然后添加商品项，然后打印是吧，这没问题，就只有一项好跳回商品列表页面没问题，然后呢，咱们再点击一次走走走走走还是什么这个数据结构算法哈，还是转成购物车商品箱，这个时候再从C中取，那已经有值了，大家看。是不是有值了，这里是能看见的啊，或者你看这边也行，这有值了，有值了以后它就不再new了，你看到吗？就只用一辆购物车，然后呢，把它添加到购物车商品像再一次打印，那这个时候大家注意啊，你可以看这个地方啊，这个打印信息，或者说你也可以通过这个debug里面拉上来。在这样一个位置去观察一下这个购物车商品项有哪些内容，其实是可以的。啊，你也可以从这边看啊，从这边看都都行，哎都行，你看这不就看见了吗？就两个吗。
18:05
两个吗？好OK，然后最后呢，重新向到图出类尾边，大家注意在调试第bug的时候啊，你最后这行代码方法已经完了，如果你不想看这个，呃，其他的源代码的话，你就点这个啊。就点这个，否则的话你就点它，点它的话还能看到一些源码，对吧，就一直往下走啊，那我们就放这个了，咱们看源码走放过去就跳出来的话，哎，这个就是加入购物。加入商品的购物车啊，添加商品的购物车，那么这样就完了吗？大家注意看啊，其实还没完，咱们这个添加商品的购物车还有bug，什么bug呢？看这个地方。从定向到呃，商品链的里面。大家注意看一下，如果说我现在换一下。我下一页我加一个C加加并从思想，那么大家想想哈，我点击加入购物车之后，它是不是还应该回到这个页面。
19:02
现在来我把断点去掉，你看看出快速啊，我一点。他是不是又跳回第一页了？对吧，这是有问题的，他应该跳到哪，他应该跳回，诶原来这一页。原来这个内容，那这时候怎么办呢？这个时候重定向的地址大家注意，就不是固定的是这个简单的首页了，那是什么样子，我们给大家分析说明一下啊。大家看一下啊，比如说这是某电商网站的平台是吧，某电商。网站。好，某电商网站，然后我不知道大家有没有关注过啊，它那个网站这个地方啊是什么，是这个商品的分类。商品类别或者是商品分类是这个地方，呃，我拉长一点，好在这个商品分类这个地方，大家注意看一下，它有好多的分类，比如说电子产品。
20:15
比如说电子产品，还有呢，纺织用品。诶，还有呢，床上用品是吧？诶甚至呢，呃，还有一些其他的用品，就这很多了啊，这很多等等，我也记不完好了，大家想想哈，当它这个分类里面其实还有好多，有什么手机啊，笔记本啊一堆啊，我就不再写了，那么每种分类大家注意看，你点击完了以后，它会有这样的一个页面来呈现。我去画一下啊。什么样的一个页面呢？哎，这样的一个商品列表展示页面，这是一个商品列表展示。
21:03
页面好，大概是什么情况，就这个地方是图片。商品的图片，图片完了以后下面是什么？就商品名称。数量销量库存啊，大概就是这种情况啊，大概就是这种情况，然后呢，还有个按钮叫做加入购物车。它有个按钮加入购物车，好，那这样子我把这个呢，就像个按钮一个样子啊，我给它加那么个东西。好了，那么这就是一个商品是吧，它有好多个商品啊，那就就这样子。好，然后呢，下面这个呢，再再下来够放吧。啊，还行，就这么放了哈，好丑是丑眼大概意识到了，那么大家注意看一下哈，不管你在这边点击的是电子产品也好，他请求过来，诶展示列表呢，差不多这个样子，还是点击床上用品是吧，或者是纺织用品，大家都是请求过来的，但是这个时候大家注意看一下。
22:21
那么这个时候它的网址是什么？它的网址是不同的，大家看我举个例子啊，比如说这个时候它的网址是attp冒号双斜线，呃，咱们就说呃电的一样，电子产品点某某某点com对吧，这是个二级域名，然后呢，这个地方呢，就是at冒号双斜线，呃，然后什么呃，纺织用品点某某某点com，然后下面这个APP冒号，这个床上用品点某某某点靠，大家想想，你们点击这些不同的分类跳过来展示的列表啊，差不多，但是你再点击加入购物车之后跳回去的地址是不是不同。
23:09
能理解吗？人家点击电子产品，诶，你要跳这个地址，跳回去点的是纺织用品，你要跳这个地址，点的是床上用品，你要跳这个地址，甚至还有其他地址是不是也不同，那么这个地址是完全不同的，并不像我们这里只是简单的跳过这个首页就可以了，那么这样是不行的，那怎么办呢？这时候怎么办，我这个加入购物车要跳去不同的地址怎么办呢？而且跳的这个地址是不是刚好跟他原来原来啊跟这个地址一样才行，如果说大家想想。大家想想啊，如果说我点击加入购物车的时候，我把这个地址发给服务器，那服务器再根据这个地址同同对象回来是不是就行了。这能理解吗？哎，对，只要把这个地址发过去就行了。那有同学问老师能发过去吗？那行可以啊，可以发过去，怎么发呢？大家看啊，其实也不需要我们发什么东西啊，大家注意在。
24:08
HTTP协议中有一个请求头，叫什么东西呢？Le。它可以把请求发起时。浏览器地址栏中的地址发送给服务器啊，也就是说当我点击加入购物车的时候，他就会把这个地址啊就发给服务器了，根本就不需要我们去做这个事情。就是这个。啊，那我们现在做个实验，我们看看它是不是真的发过去了。啊，注意看我们怎么做实验呢，现在啊，我们把这些功能代码先做掉。咱们先不关心这个东西了，咱们就来看看能不能得到这个地址，我们说这个大家看啊，这个请求头叫什么来着，叫是吧，来我先打印一下。
25:10
好，请求头的值啊，我先来看看request.get的这是什么东西。好，我先打印，然后呢，为了测试的话。大家看一下哈，我在这里面。加个目录，呃，加个什么目录呢？咱们就说吧。测试的，然后呢，我再复制一份。我随便复制一个走。复制了，然后放到这里面来。然后这个测试里面，我再给它分两个目录啊，一个是什么东西呢，大家看到哈，一个目录，哎呀，不小心点到了一个目录呢，表示这个电子产品，一个目录表示纺织用品啊来我们看看呃，再建目录。
26:13
电子产品啊，电子产品好，我复制一下放进来，那么还有一个纺织用品。纺织用品好。那我把它放进来，那现在嗯，稍等啊，咱们注意看，我把这个内容改一下，咱们说这个像电子产品。好，我把这些多余的没用的内容先先去掉啊，这个都去掉了。好都去掉，然后这里呢，都去掉。咱们就说这是电子产品。
27:05
然后呢，它有一个A标签。啊，这个就是什么东西呢，加入购物车。大概就这样，我让它跳转的地址是哪呢？呃，咱们让它跳到这个cut里面去，然后问号action等于an it。好，那么这边也差不多啊，我把这个复制一下，直接放过来替换上快一点，我就懒得改了啊，一点点改，然后这个呢，叫做床上用品还是纺织用品是吧，纺织用品纺织。纺纺织用品好，然后呢，把这个纺织用品拿过来。换成它好，现在呢，有这两个地址了，大家注意看，我现在就访问这两个地址。
28:03
就访问这俩地址啊来。我现在访问一下啊，这个地址路径还有点长，叫pageris下的是什么来着，我们看一下哈，Test，然后电子产品点index，点接着P，好，大家看这是电子产品吧，那么我们把这个换一下就变成纺织用品，没错吧，就两个，现在呢，这个加入购物车这个地址啊，都分别让他请求给了我们的这个加入购物车的N爱方法，我们看看这个地方它是不是能够得到，记住啊，他能不能得到当前浏览器地址栏中这个地址，为什么如果得到这个地址，从那上面根据这个地址跳回来。是吧，再跟这个地址跳出来不就好了吗？好，我现在先复制一下这个地址啊，比如说这个是纺织用品的，我先复制一下。
29:02
然后大家注意看我F12。我一会点击的时候，我看这个网络里面，它会不会发啊，我点看这里面。请求当中RI就是它，诶这个地址拿过来对比一下。稍等，大家看这个值是不是一模一样，他发给服务器了，那在请求头面都已经发给服务器，那你服务器再获取一下，再打印，那不就完全一致了吗。大家大家看见了吗？他是不是能得到一个地址啊，完全一样，那这个时候他就不就可以跳过去了吗？那这个是什么？呃，纺织用品的一个测试啊，那么我们看看电子产品是不是也一样。回来。啊，电子产品，这是电子产品吧，咱们刷新一下啊。然后我在这边清一下。大家注意看啊，我现在把这个地址先复制出来，这是电子产品的，我们看这是地址是不是也一样，然后我再点击加入购物车，我就看这里他是不是给我发过去了。
30:09
我复制走，大家看这这是不是有啊，一模一样吗？那服务器必然也能获取到。大家看一下这个三个地址是不是都完全一致啊，那这服务器不就可以很好的跳回你原来的这个页面的吗？你如果是什么东西呢？呃，这个。电子产品他点击到购户说他给你跳回电子产品，因为他已经把那个地址发给服务器了，那如果是仿真用品他也一样啊，床上用品也一样好，那这个方法呢，就解决了我们刚刚什么东西呀，回来首页这里大家看，就解决我们刚刚这个问题，我这里点的是哪一页，诶我点的这个我发起请求加过去的时候，就把这个地址发给服务器，它就不就不就可以很好的跳出来了吗。来，我们试试看这个效果哈。
31:00
呃，这大码有点多了，我关了啊关了这时候大家注意看一下哈，我这个地方。我把这个值拿到放到哪去用啊，咱们放到这里来用，我把这个重新打开。啊，重新打开。好，大家看我在重定向之前，我不是跳这个地址，而是跳什么，而是把这个值得到以后，是不是拿来做重定向的跳转啊，这样就好了，那咱们说从定向回原来商品所在的地址页面，这样就好了，就你是怎么来的，从哪个页面来的，哪个地址来，你给我回哪去是吧？好，那这个时候呢，咱们再重新部署一下，我们看这个效果。稍等啊。啊，部署好了，那我们清一下来，我们刷新刷新，比如说我现在是在第四页，我添加一个水浒传，我先把这个断点加上啊。
32:13
先看一次啊，断点看一次水浒传过来了，大家看一下吧，过来之后呢，我给你调试一下哈，来我们往下走走，这图出水浒传没问题，再往下走转化成为呃，看item也是水浒传。加入到购物车里面也是水浒传的，没问题的啊，那我现在跳过去走再来看是不是还跳回这一页。没问题吧，那如果说我去首页呢，就是咱们不看了啊，刚看过一次了，嗯，没问题啊，来走放过去，呃，现在呢，比如说我从入门到放弃这个书点它是不是也跳回来。看见了吗？嗯，木须肉盖饭也跳回来，你看这个地址打印。这个打印来看一下是不是都是对的呀，大家可以通过这个检查点了三次嘛，加了三个商品嘛，总的数量看见吗？诶后面也有内容，大家可以仔细观察一下哈，那现在他就可以跳过来了，哪怕你这个地方有价格搜索十。
33:11
50点击查询是吧，我就叫这个西游记，他是不是也能跳回来，诶也能跳出来，好了，这个就是添加商品到购物车。
我来说两句