073-尚硅谷-尚品汇-购物车静态组件与修改

好了，那最后呢，咱们刚刚啊做了一件事，就是进行了路由跳转以及传参。对不？当然传参咱用了两种手段，第一种手段是不是query参数。在这是不是叫query？用了一下会话存储。会话存储一定要注意它是非持久化的，你将来用户这一关，我问你存储的数据是不是就消失了？但是现在老师没关，你刷新这个数据是不是还是有。对不对吧，好嘞。那接下来咱还得接着继续，你看这样，这是不是有两个按钮。你说一点击查看详情，老师问你。跑哪儿去？是不是又回到了detail当中？而你点它呢。进行路由跳转，是不是跳到购物车页？那咱们先看，你现在点查看详情有用吗？没用，你还得咋的跳回到当中，但是你要注意跳到detail当中，要不要给他穿参。

要不要？说老师这个四是怎么回事的呢？是不派参数。是不是这个产品的啥相应的啥ID，因为他monkey的时候是不是还要捞这个数据。所以说一定要注意，当你早的加入购物车成功之后，你回来的时候，还要把谁给你带回去。Ad。对不，那咱们先找到这个按钮叫查看商品，呃，详情咱们找一下。咱们应该找的是哪个组件呢？咱在这关了看这。把没用的先全都给他关了，因为东西太多了，咱找一下views下的谁呀。是不是就这个ad，咱们找一下它这块是不是有一个叫做。查看详情。看这。所以说当咱点击这个按钮的时候，还得打。回去那这样老师问你还能用A吗？

你要么用router link，要么是编程指导。对吧，那这块咱有必要用编程指导。没必要，你就说他这个一点是回去再带个ID。对不，那咱这给他咋的住了，给他换成谁？Router。杠。Link，对不？那当然你得有谁？啊，有兔兔，咱一会再说，首先说这类名是不是得有。因为他有箱子啥是不是钥匙。类名直接呼过以及。名字是不是给他捞过来？那他还有用了吗？没了。那咱们看，那当你一点击这个按钮，你要干什么，是不是要回到咱们的详情页，你是不是得写to。往哪儿吐？杠有没有杠？有底还，我说你完事了。没有，你还得带个啥回去。那个产品ID，产品ID在哪。

你就想咱产品的信息是不是通过存储带过来。他那怎么报错了。呃，老师刷一个新走啊，没错，你看咱的这个产品的信息是不是都带过来了。从哪儿带过来？绘画存储你看吧。他这里面有没有产品的那个ID。那咱们先看一下子啊，咱们这个组件当中，咱是不是已经计算为属性。你看这有个ID是他吗？朱老师，我也不知道那老师告诉谁是PUID，这就是产品ID。不是这个ID，这都知道。叫啥PUID？这呢你看吧，咱回去你看这这咱先看一下子，你看这举个例子刷新啊，你看现在的ID是几。四那咱过去要走。没问题吧，那你看它的这个puidd，哎呀，是ID还是I，哎，不是是ID。

I是不是四。对不，那你是不是得带回，那所以说你这一块的，你得咋的，老师问你，你是不是得写动态。对不对，对吧，那应该写上冒号。那这块料里面你是不是就可以插啥了。模板字符串对不？那这块是杠de杠。是参数，这应该谁应该是SKU info.a。是不是带回去？说老师为什么再回忆点还要带给这个ID，因为他在这个AR是不是在mount当中，是不是利用这个ID在捞那个详情呢。对不？对不对，对吧，那所以说咱们看一下。来点一下。看这啊，记住啊，叫啥叫什么。什么，Read me？差什么时差走？

这能懂不？哎，刚刚有个同学那圈好像问了一句，说为什么要加冒号。你要注意啊，咱这个GS不是什么GS，你这不要气走了，VE基础都学完了。你得知道你这个双引号是不是语法的规则里面放的是不是GS东西。对不，你不加他。就相当于你这玩意儿是GS，啥啥也不是。对不，你加上了这玩意是啥。是不是这个这个叫字符串。对不？哎，对不对。对吧，所以这块一定要注意啊，你一定要注意带冒号，这叫啥，这叫做V-B是不是，是不是详式的这个属性，那你要注意这两个玩意儿，它还是字符串。这玩意儿就不是了，这就是语法规则了，中间里面放的是GS东西。

这能懂不？诶，懂不懂懂吧，所以这块一定要注意，那还有一个地是谁，哎呀妈呀，跑偏了。看这那你如果点击的是谁。点击的是他呢。你得去哪？购物车你是不是得进行路由跳转，而且是得有购物车那个页面，咱有吗。没有，所以你还得咋的？是不是再引入一个静态组件，还要注册路由以及点大车进行路由跳转？那咱现在没有吧，没有怎么办老。咱找一下子，那前台项目当中是不是有代码，代码当中是不是静态组件，静态组件当中有个谁。看一下啊，这是不是这。购物车。而且购物车是咱整个前台项目当中很重要的一部分。这你必须要会。以及明天还有一个重要地。

导航手位没学呢，不用惊讶。就是登录注册。因为咱们以前从来没有写购物车，因为我不知道你们爱的基础有没有讲过。啊，没有是吧，以及明天会出现谁登录注册，也会出现一些新的概念，比如说导航首位，比如说token，但这些都没关系，都很简单。但是今天你必须把购物车给我搞定。所以说咱们先把它的静态先打到CTRLC。给他打的螺滚放在哪？是不是放在咱们的views下的，是不是这叫收卡收啥意思？购物嘛，Car car车啊，但是说啥说这做了个T。踏车是不是C啊。对吧，就shop car的购物车好了，那咱们老师问你，你静态有的有木鱼吗？没有找谁。

Route。在哪，是不是在这配路由，而且你发没发现咱们现在配的路由都是几级路由，一级路由有二级。没有说老师，那咱为啥学二级三级，你放心后台效果。全是二级三级。OK吗？那当然，咱现在写的前列项目是不是全都是一起？对吧，那他还呀。来in part叫啥叫受？Card for wrong优美提示，爱杠wills下。Soup。Card。对不，那这块你是不是还得咋的。看C。是不是再来一个还是个一级，那这块还是一样。这块叫啥叫收抛。Card，记住全小写名字，你不能叫他名字干的以及组件应该谁舌。拍照super car。多。没问题，路由是不是也配好了，组件也有了，你要干啥？

你一点击。来看这一，点击这个去购物车结算是要进行路由跳转。那这儿还要。不要了吧，给它换成谁？Router-link，对不router？杠另，生命是多少？哎，他没提示这个很难受啊。啊，这样更好，也有写了。Router杠，那这块呢，你是不是得写到去购物车结算？CTRLCCTRLV，以及你还得有个谁。对不对。那这块往哪吐是不是杠。谁super card说，老师你这个为什么不加冒号？他不是动态的。这不就是咱学的标签属性和啥属性值吗？但是如果你要加冒号，是不是要写动态的，这这个两个引号之间是不是要写GS东西。

对吧，好，那咱们先看一下，走起。来看这去购物车看这啊，走是不是。说过来了，但你要注意现在这些东西都是啥？假的。都是静态，都是假的。你看这，这是啥？这是不是又是一个表格在展示你购物车里边的东西？但你要注意这个结构对。你看全部对应的是不是这个这玩意儿。对不对，看这。是不是这完了商品应该对应谁，是不是这个图片加名字。那你说这玩意对应谁？没有。价格是不是对上了，数量是不是对上了，小气是不是对上了，操作是不是有移出根，移出收藏。但你发现这。它这个静态结构是不对。这是不是多了？

所以说咱们写完静态要做的一件事啊，老师可笔记上也给你们写了，看这。看这啊，这是咱们第一件事加入购物车按钮，看这啊。这玩意咱是不是也搞定了。你看是不是购物车，但是要注意购物车的静态组件，你需要咋的？修改结构第三行是不是得干掉，它是多余的？OK吗？O，不OKOK吧，那所以说咱们得去找一下这个购物车的静态，咱们得稍微修改一下他的啥。静态组件找一下是这。那咱们呢，先把这些全都给它折上，这都给它折上，折上咱主要看结构。那咱们先看一下子。看到全部商品。那是不是就这。看是不是就这这这不需要改了。那这咱就给他打折上，那已经看它底下这有啥全部商品单价，我问你是不是这个。

说这。这个头咱就动了，不用你数数几个123456，你看这是几，1234567，对不是多了一列。所以这块咱用杆头这。不用吧，那主要是谁，是不是底下这，那底下这咱们看它每一个产品，它是用什么做的，咱可以审查元素。用啥做的？Ul，而且类名叫car-LIST3。这是不是就是一个产品？俩三，这是对应上。那这三个产品，你看这三个产品的第几个。数123是不是第三个是不是全干掉。那所以说咱先一个找，先找他的第三个。这是第一个，你看是不是那个复选框。第二个是不是。这是不是也要？第三，这是不是就不要？对，不给他干掉，那你这只是干掉了第一个，还有几个。还有两个这的第三个也给他打。

删了。是第三个日，这类面是不是带靠餐的？那以及这给他整，还有一个是这第三个是不是也给它干掉。对不，那咱们保存一下，这回再看它的静态结构，你看它对吗。对啥对，跑偏了。就是它的样式，你是不是得重新配置一下子，每一个这个这个展示产品的这个宽度的百分比。老师都给你们算好了，你自己不用到时候自己咋的。不用自己一个人去算，这一定要注意调整这个购物车静态组件。删除第几项，第三项，剩下的项是百分之多少，老师都给你算好了。OK吗？就这个样式，你不用自己去算，咱就直接一个改看这。那咱接下来得找谁了？老师问你。正要来找。看它这个分别叫什么呢？第一个我看下叫叫叫叫叫什么什么坑con con2是吧。

来看这啊，咱一个一个往底下找。哎呀，CONE。哎，是不是这处这玩意儿是不是删了。咱先一个找啊，C是这。Con应该是多少？15%，35%也有数啊，这应该是多少？15%。之后呢，第这个呢是多少35，那第三个咱是不是都删了。这玩意就打干掉。那第四个应该是多少十跟17，帮我数一下吧，这个应该多少十？再是多少是七。完了之后还有啥来着，十跟13再找六。是不是这这改成多少十，还有最后一个多少13，那这样它的静态才搞完。那这回是不是就舒服了？

这能懂不？所以说这里咱只是展示购物车的静态，以及稍微改一下它的结构，没问题吧？