00:00
大家好,我是学习园地的特约讲师高若峰,上节课我们在详情页里边通过添加购物车可以实现添加购物车,然后呢,也在我们状态管理里边加了一个购物车的数量,然后呢,将这个购物车的数量在我们的呃,属于菜单栏上面显示这个数量,但是呢,这个数量只有添加的时候,我们才通过这个状态管理里边,我们去改变更新这个购物车的值,对吧?他在这里边来获取购物车,然后得到购物车的长度去添加,这样的话用户体验不好,一上来的话一登录对吧?那购物车数量永远是零,只有点添加的时候才更新,那我们需要嗯,在一些地方去处理实时更新显示这个状态的数量,因为在状态管理里边添加的数量,我们一点刷新,它就会怎么的,它就会嗯给我们消失对吧,不会长久保存,那你也不能说把所有的状态管理都保存到这个里边。对吧,那样的话不是不可以。不是不可以,但是呢,我们最好还是用状态管理,在多个页面可以用同一个状态,那我们在这里边去用,但是呢,也让它显示数量,用户体验感好一些,那我们可以在比如说APP里边,我们在加这个数量的时候,我们让它自动加载下这个方法就可以了,那我们在APP里边添加一下,APP里边用我们加SPA,加载SPA标签,然后e support导出。
01:15
缺少的这样的一个,呃,对象在里边,我们写上塔。在这里边我们想用状态管理,那我们肯定得是按port引入一下,嗯,UE状态from从VEX里边,从这里边引入一下,然后在这里边引入一下,那我们还得引入一下。比如说呃,通过这个V,呃,From vuee里边我们把谁引入呢?把呃挂载的生命周期引入,引入进来,这样的话,我们在这里边就可以通过挂载的这个生命周期,我们在这里边当页面一加载的时候,也就一刷新的时候,对吧?那任何页面刷新它都会执行APP嘛,那在这里边都会执行下这个方法,在执行这个方法的时候,那我们cost创建一个s tre,我们呃通过用这个。
02:03
通过它我们来,呃,执行一下这个方法,那执行这个方法,这个方法怎么呢?它就会调用。调用什么,调用commit提交到这个方法对不对,这个方法里边就会改变我们的,呃,状态的数量,改变这个状态数量,所以呢,我们把这个方法。嗯,Action里边。这款啊。这款完了。啊,我们。没事。在这里面。当然获取这个对象,获取对象我们不在这块,获取对象我们在再发和外边就可以了,嗯,然后呢,通过这个s to里边,我们调用分发的一个方法,我们执行一下这个方法就行了,其他的我们也不用去做,这样的话,我们页面在任何地方一执行的时候,对吧。你任何一个菜单,它都会调用一个方法执行,调用到它,然后分发更新一下购物车的数量,那根数购物车数量这里边就有了。
03:01
让我试一下。嗯,比如说你看这里边咱们添加的原来数量有四页对吧,我们刷新一下。刷新一下内容,你看加载了他就执行了这个对吧,那点分页页面分,那页面也有了,那我们现在新添加一本图书,新添加一本图书,比如说那找一本咱们没加过的。秘密大全,加入购物车。你看添加成功购物车备五对吧,那我们现在就可以跳转到购物车页面,那购物车页面呢,我提前也给大家把这个呃结构给写了啊。因为这里边儿需要一些样式摆放,然后呢,用到我们这么多组件。那所有的交互,那些交互的是咱们课程内容,但是这些样式的东西都是用VMT里边的组件引入的,比较耗时,呃又没有什么基础点,都是咱们前面呃讲过这个组件组么件一共用了这么几个组件,你看啊,用了check group这个组件,然后呢,呃呃选择块这个组件。以及我们的,呃,像这种按钮是咱们前面学过的组件,然后还有这个提交按钮,对吧,全选框这些按钮我们就加了这么几个组件,呃,还有。
04:08
呃,这个。组件,以及我们的不长的组件。补偿就是加加减减,这样的话,我们到购物车里边就会给我们形成这样的情况,对吧,这只是一个静态的这个显示的,当然全选反选这个咱们还没做,所有功能都能做,只是样式提前帮大家写好了,然后这么一拖拽对吧,这边有个删除按钮,然后这边呢,是有库长有不长。啊,不长。然后我们可以改变购物车的数量,然后合计一点结算,跳转到生成订单,创建订单的那个环节,这样的一个情况,这个样式有点带你可以往下调整这个数据啊。或者把这个往上调调都可以啊,也无所谓了。购物车里边有五个,那现在在这个里边,购物车里边,一般购物车的上边我们也显示一个购物车的数量,那这块呢,跟我们前面做的是一样的,我们加一个括号,加一个看吧,看标签,然后这里边加一个类来一样是吧,直接加一样式,让字体颜色RA,我们来一个红色的,然后这里边我们。
05:06
用上一个差值,然后直接我们通过s state里边的s state状态管理里边我们直接访问他的购物车CRT购物车的Co体数量。就可以了。你看五个上边对不对,如果你两边需要一些空格的话,这块可以。找个空白一下。啊门这个没起效果,那你咱们是他是编译的时候把这口格都去掉了,那你可以把那个用呃实体的东西把这个口格加上就当无所谓了,就放在这了,这样的话上面有个购物车数量,下边有购车数量相同的,那现在呢,我们就可以便利这个数据了。看下边的格式,只是引用了我们可能用到的这些if relative,对吧,To,然后加上呃,On,呃,Mount,就是生命周期挂载的那个和计算属性在VB里边,然后导入了路由和状态管理,这几个都能用上,然后和擎提示这一个框在这里边导入了这个是我们上面那个组件,注册组件,这里边加上这两个,所以呢,其他功作都没加。
06:10
咱们就加这些共能就可以,那现在。我想做这个列表,从这个里边,购物车里边把数据都拿过来,那首先我肯定得需要用到我们购物车里边的。呃,所有的东西对吧,通过访问接口,那接口呢,我们通过呃,Net work里边,我们将所有的跟购物车相关的都写到这个文件里边,对吧?购物车相关都写在这个文件里边,所以呢,我们就需要从这个里边把购物车,比如说现在我们需要得到购物车里的数据,那我们就访问这个方法。得到。购物车在。啊,这几个差都关掉。放假。你关掉吧。这用上了就关掉,这让它少一点啊呃,这个呢,是我们前面那些组件新加的,用到了这个组件这个这个这几个。这几个组件构架的,然后呢,在这块把这几个都引入了啊,所以呢,我们在这里边是购物车里边是可以直接用到这些组件的啊,那我们嗯,Get看看就是得到购物车了,那这里边这几个如我们都用得上,那我们就先全把它导入吧,比如说删除购物车的方法,我们也拿过来。
07:15
删除购物车的方法,还有我们这里边儿,呃。改变就是选中购物车的这个我们也拿过来,呃,还有这里边儿我们还能用到像。修改购物车,改变购物车里边数量肯定得需要的,所以我们这个也拿过来,呃。这四个就差不多够我们这边用了,够我们这里用了,然后呢,我们想便利购物车,现在呢,购物车你看在这里边,通过这个去显示的购物车,对吧,通过这个。那我们在这里边就可以去便利,便利这个购物车的每一个,因为这是一个购物车,如果我们复制一个。你看复制一个拿过来。三个,那这里边就会有三个,所以呢,我们先把这个数据拿过来,你看这里边儿就有三个。
08:03
对吧,那我们现在只需要用一个,只要我们去便利,那便利的时候呢,得有购物车的数据,那我们通过这个接口获取购物车数据,那他说了,在便利数据的时候,咱们一定先要做什么,先要做数据模型,对吧,也就页面上需要显示什么数据,咱们就先先需要把这个数据我们先升级出来,对吧。那我们这个页面管理的状态比较多,那我把所有的状态都放在一起,把所有状态都放在一起,这里边,呃是数据模型,也就是状态。状态,也就是这页面里边用到的数据,那我们统一放在一起,比如说我们叫做ST,当然这不是VX的状态了,是本页面的用状态,我用呃,这里边去声明,因为它需要一个对象,比如说我们这里边现在需要的就是什么,这个购物车列边,那我们直接就用list吧,简单声明一下,呃,需要这个,那我想把所有的数据在页面里边去需要,那我们怎么办呢?我们是不是在这里边就得返回啊,那返回的时候我们可以把这里边的每一个起步返回,如果直接返回ste不是不行,那用的时候就个S里边就list得这么用,那如果想要页面里边直接用list,那我用点点点对不对?
09:09
三个点就解多了,使用这个把它解构一下SKT展开,然后导出就可以了,这样的话我们就可以直接使用list,那这个list我们数据模型建完了,那页面呢,我们也可以去建,使直接使用这个list子对不对,所以呢,我们直接在这个里边去遍利这个list子就可以了,那当然了,我们这块如果购物车为空,比如说购物车为空的时候,我们让他先显示这个购物车为空的对不对,然后让他怎么着可以继续前往公物啊这些东西list就是我们在没获取数据之前,这个数据长度肯定是零的,所以我们通过这个数度长度为零来判断这个。那我们把这个注释打开。注是打开你看啊,如果长度为零,那我们这块加一个V-if或者是V杠受都可以啊,你判断一下,判断一下list的,因为在这页面现在可以直接跑list的意思,咱们声明数度格式是空对不对,所以它的长度在没获取数据之前,它的长度什么它的长度是零对吧。
10:07
长度是零,是零的时候,是零的时候让它显示,那我前面是不是加个叹号啊,对不对,这样的话就变成这是真的时候它显示嘛,也就是为零的时候,下边这些内容才显示,所以呢。你看下边显示,但是上面是静态的,因为为零的时候,我们还有数据的时候,我们电离数据,没有数据的时候,我们先不变的数据,所以我们这块先注释一下,先看一下这个样子,这样的话就是购物车空空如也对不对,你可以前往购物去跳转,所以呢,我们在呃这块只是这个样式比较简单啊,就是只是我们来一个什么一个图片空购物车,对对,空空如也,然后加一个前往购物,那加一个前往购物呢,我们就是用一个按钮来做的,那在这个按钮里边我们可以加什么呢?呃,我们可以加一个事件前换购物嘛,那我们就加一个c Li点击的事件,在这个事件里边我们加上o to这样的一个方法,那当然这一个方法你就需要在页面里边,当然直接在这块写这个方法也可以啊,直接在这里边我们写路由也不是不行的,对吧?但是最好我们把它写一个都写到这个方法里边,我们看也是比较方便的。
11:10
那我们在这里边,其实在影片里写的不用返,对吧,我们还是在这写吧,就是继续购物啊,继续购物,或者是前往购物前往。嗯,购物,然后这里边呃,我们加上这个cos的生命一个勾to这样的方法,我们用上箭头函数加上一个,然后直接这里边前面不已经生成路由器了嘛,对不对,那我们直接用路由器里边ru里边直接点PU pass指定一个路径就可以了,我们指定pass路径直接的到首页后。这样的话保存一下,你看如果购物车数据是空的,咱不用刷,它会自动刷啊。下边会有一个。勾,那我们得把勾得怎么办?你不引入是不行的,对不对,不返回是不行的,所以呢,得把这个返回返回,我们刷新一下页面,可是这方法还有今天一点购物,你看又回到了我们首页,把数据加载慢对吧,那我们再回来。
12:10
购物车空空物业,但是我们上面这个长子里边是有东西的啊,只是我们现在还没店里。那如果有数据的话,我们就不用管这个对吧,有数据它的数据就不空了,那我们就可以在上面去便利这个数据了,对吧?所以呢,如果有数据,那我们就获取这个数据,那获取数据呢,我们这个接口已经写完了,对吧?那我们直接在这里边去调用这个接口就可以了。但是获取呃,获取数据有可能有多个地方用,所以呢,我们如果直接写在,呃,你看写在啊want里边不是不行,但是如果有其他就是用的话,我们还得重复用,所以咱们说数据初始化的时候,咱们为了公用,最好是做一个什么,做一个方法就是iit。这样的一个方法。你看,然后呢,在这里边我们干嘛,我们调用一下,这样的话,如果其他地方用的时候,是不是我们就可以重复用这个方法了,不然的话,你在这里边如果直接写内容,那我们不能重复调用组合APM就把所有东西都组合在一起,你可以随便去声明对不对,那比我们呃用传统那种条条框框那种限制要好得多,所以呢,跟我们写JS的习惯是一样的,用到什么方法,我们单独写一个,这就是在这里边。
13:20
怎样啊,初始初始化购物车数据,初始化购物车数据在这里面,在这里边呢,首先我们初始化数据的时候,一般的我们都给别人一个提示,给别人一个提示,那我们可以用什么上面我们不加载这个。呃,轻提示了吗?那我们就用这个轻提示,比如说呃,To在这个里边有成功的方法,有失败的方法,是不是还有加载的方法啊,对不对,那就是一直有转圈圈加载中对不对,然后我们这里边它需要加一个。看一下我们找到这个题目提示。那纸质这一块对吧,呃,找到这里面。
14:01
新提示太这个新提示你看。指定图标指定位置更新。里边有一个。嗯,加载。呃,加那种。展示那个加载的一个一个提示,但是加载这里边好像有一个属性,呃,叫做。嗯。不用管了,就直接写吧,然后直接这里边你可以直接写消息就加载中就行了。嗯。这块如果我们让他是点击消失的,我记得有一个这个再找一下看有没有一个。就是成功加载。加的。失败加的加点就是这。就可以加一属性一点基就消失了,行不加那个了,就直接加这个吧,直接加个啊消息这里边写加载中。
15:01
加载中,然后来几个点,来几个点这块。然后呢,当我们数据加载完,假如说往下一直执行的话,我们可以怎么样,我们可以加载完之后就调用,这里边有颗粒尔,其实它是有这个方法的,然后就能把那个加载清除掉,这样的话显得时间比较短一些。来刷新一下。那些提示加载中,然后呢,几秒钟它消失,其实加在这个都无所谓,它就是几秒钟,那我们想让它,呃一直存在,通过这个清除加载完数据让它消失。的话还是。嗯,叫做。看看能不能提示啊,Me message有这个消息,消息呢,我们是加载中对不对,然后再加一个叫。对,这个。有提升。变成帧,然后呢,我们这里边就可以通过get得到购物车这个数据。得到购物车,那得到购物车,我们想要购物车和购物车里边数零的,我们在写购物车的时候,这里边盖到购物车接口里边可以要我们传一个这个字串,对吧?也就是是否要我们包含,也就是组合成这样的接口访问这个,呃,API下边的CTS这个接口让我们in的包含什么do DS这样的话,在我们数据里边就会包含这个数据,如果你不加这个,那我们数据里边就不包含这个商品的数据,就购物车本身的数据,那我们这个date你看就是一个字符串,那我们就这么包含的,对不对?那这两个我给你展示一下,因为接口里边,我们在讲接口的时候也说过,它就是这么提示的,对不对?
16:32
告诉我们必须,嗯,如果需要数据就包含,那假如说我不存数据,它就不存内容,它就是空的对不对,然后n res res里边我们呃,加载数据,加载数据比如说都处理完了之后,那我们可以调用这个。点C把这个框数据下载完,把这个框怎么呢,去给它关掉对吧。然后我们这里边儿就可以。呃,加载数据,加载数据。
17:03
看一下加载数据。购物车里边有几个,选中几个。我们先不做别的,我们先看一下这里面数据啊,数据什么样的,Res点里边的dak。我们现在看一下这个数据,咱们加参数和不加参数两个都使用一下,你看现在呢,我们在获取数据的时候,这个就购物车本身的数据,你看这里边就有ID,用户的ID,购物车ID和数量和是否被选择上,是否被选中的默认你看都是被选中的,对吧,默认都是被选中的这样的数据,那现在呢,我想让它带有商品的信息,因为只有商品ID,那我们还这里边还需要商品图片呢,对不对,还需要其他东西呢,所以在这里边我们使用in include。包含什么gods商品信息?那我们现在再来看一下这样的获取数据。把它关掉,重新刷新一下。我们往上来一点,你看获取数据就不一样了,这里边多了一个标着点,你看除了这些东西,这里面还多了一个什么。呃,子数组你看有一个的包含这个就带这个,然后呢,里边有什么像呃,商品的名称啊,对吧,商品的名称啊,然后描述啊,当然你可以点更多呀,价格啊这些东西啊,库存啊都有了,通过这里边,所以呢,我们这个信息是需要的,是需要的话我们就加上这个参数就可以了。
18:19
但是不是说所有都需要,所以呢,你不用说非得写到那个封装的接口里边写死对吧,不写死在这也是可以的。那这数据呢,打印这个数据我们就留在这块,因为我们要经常看一下这个数据对不对,那有这个数据了,那我们就可以怎么办呢?那我们就可以把这个呃数据放到我们的列表里边,放到我们列表里边对不对,它这里边R放到这个列表里边,将R里边的DT。放到这里边儿来。这样的话,我们列表里边是不是就不是空数组了,就有数据了,对吧,那鼠标这里边就有数据了,那我们在刷新这个页面的时候。把这个关掉。它就不会出现什么空空如也的那个,你看先刚开始一加载没有数据的时候,空空如也,然后加载完是不是到这来了,对吧,关掉,然后到这里边,到这里边我们是不是就可以遍利这个数据了,其他的呢,咱们现在先不用管,咱们现在就呃先便利这个数据,把数据都遍辑出来,一点点的操作,这块是我们显示数据的地方,对吧,我们打开。
19:21
然后呢,我们将这个打开,因为遍历所有数据的地方,我们通过哪啊,是不是通过这里边是加载的所有的数据,对吧,我们刚才复制了几份,它就怎么样加了几份这样的一个数据,所以呢,我们把这个循环写到这里边,我们可以把它敲开。然后呢,在这写上循环啊,V杠或V杠。循环这个数据。呃,我们叫做it,当然我们也用这个标代,所以我们这块it em in代的数据比较多,就要把这下标我们拿过来对不对,然后通过列列表里边去变历,当然我们一定要加一个K对不对?K呢,我们就直接用这个音代词嘛,不重复的就行。
20:03
这样的话,里边购物车列表里边有多少数据,那我们就可以编辑多少数据了,编辑这个数据的时候,那我们就可以在下面需要用到的地方,数据地方我们就可以一个一个去改了。比如说呃,在这个里面。这个名称,那名称我们就可以通过哪去改呢?是不是我们就可以加一个差值的方式,在itm里边,它里边有个子数度是不good对不对,这个里边是不是就有我们的标题啊开头标题对吧,那这个呢,就是我们的呃,购买的数量,你可以选择一个购买的数量或者是一个。库存量啊,库存量应该显示库存量不是我们购买数量,购买数量是不是加加减减这个位置这块我们放了库存量,那我们这块就IM里边库存,每个商品对应的里边有个库存叫S,应该这。对吧,那我们先看一下这两个,其他我们先不看,诶可以有五个数据,对吧,业内五个。但是里边内容你看名称都编辑出来了,但是呢,里边价钱呢和其他的我们还没有,那我们继续往下去写,比如说价格,每本书的价格,那我们这里边前面那个,呃,人民币符号留着,对吧,我们只是在后边把这个价格拿过来,价格呢也是在商品里边,那我们用差值的方式留着I t emm里边的。
21:17
呃,商品里边的P这个价格,当然我们可以连接个。点零零,然后你可以用那什么方式去处理啊,不一定说在这里边处理这个价格,你可以在后台把所有跟价格相关的都预算完,然后直接显示价格就可以了。是可以得到或者基本属性什么的都可以,那在老版本里边还有一个过滤,后边通过一个函数的方式。去处理啊。嗯,这是价格,你看一下有。啊,可以了,这些价格对吧,不同的每一个价格都拿出来了,然后呢,我们这个不长,就是加加减减那个不长对吧,也是我们的一个组件,这个组件里边呢,比如最小值,我们必须购买的什么11,但是你这块前面一定要加冒号,不加冒号,它字符串加冒号,它是一个整数,对吧?那最大值是多少呢?最大值你写几,这个不长,它就能只能点到几,比如这里面默认是十,那我每个商品只能点到十,只能点到十。
22:17
你看就变成灰色变不了了,对吧,它库厂本身就给我们加这个限制了,那我们这块呢,购买的数量肯定是不能超过库存的,所以呢,我们这里边给它做成一个变量,IM里边的商品里边有个库存SCK,这样的话,你购买的数量就不能超库库存对吧?没货了的话,你怎么买啊,你看你比如说找库存小的,这个库存现在是16个对吧,那我们加。到十就加不了,但这88的你得加多少对吧。可以让他全买,或者是你这里限制就最多每个商品购买五个,但是有的用户他就想买多个,那你肯定得呃用这个多对不对,然后呢,这个是不常中间显示的值,默认显示五嘛,那就是我们购买添加购物车添加了几个,我们这里的数量就方它有几个对吧?默认的这个库购买的数量,那我们在呃购物车里边有一个数量,MM购物车里边肯定会有一个购买数量,对吧?这购买数量不是商品里的,是购物车里的,你选择商品的数量放在这里面就可以了。
23:17
当然名字呢,就是这个不同的一个ID,我们只要是让它不同就行了,比如说it m点那是商品ID吧,这个名字就是商品ID,这样的话,我们可以对应改变哪个商品的,改变哪个商品的ID就可以了,对应改变哪个商品的ID,通过这个名字啊。这样的话,我们加加减减的时候,在数据库里边就知道改变的是哪个数量,通过这个名字白的方式,但是如果写的话,我们可以加这个对不对啊,然后这个里边改变的话,支持什么异步的改变,当然这里边我们得这改变,只是现在改变了什么。改变了,嗯,界面上的这个区别对吧,其他的还没改变,只是改变了界面上的这样的一个数字啊,那我们得把它改到什么,改到数据库里面去才可以,对吧,才能用这个数量去改变,所以呢,如果我们想把这个数量改变到数据库里面去,那我们这里边每次加加减减的时候,得把这个值,是不是我们在接口里边做过一个方法,什么方法呢?修改购物车对吧?只要我们传ID,就是我们内部刚才传的那个,然后数据呢,就是nu等于一这个值,这样的话我们就能把数据给传过去,那我们这里头我们就把这个功能加上了。
24:21
嗯,这个。诶不是你敲开敲开这里边在这写吧,嗯,加一个点击的时候,这个不长,不管是你点击的哪个按钮,因为点击按钮对吧,那这个数量是不是就跟着变。当然这个是双向绑定的这个值的数量啊,那我们,呃,不是双向绑定的数量,是这里边中间这个模块中间显示这个数量,那我们只要这个数量通过这个ID传到服务器里边,就让他在服务器改变的数量,不然我们一刷新这个数量,你看如果不加这个。我们虽然在这改变这个数量了,对吧,那我们一刷新这个数量怎么样。你看又回到原来购买的数量了,你加加再刷新。
25:03
那又回到原来的数量了,所以呢,我们得要在数据库里边,把数据库的表,购物车的表的数量给改掉才可以。那当然了,购物车表也是需要授权的,但是咱们现在是登录的状态,所以呢,这些授权都是做过,他会带着通讯过去,所以是可以的,这里边立刻点击的时候,我们调一个。啊,调用方法吧,On change改变码。做一个调用这个方法,那做一个on change改变数量的方法,那我们一定是什么呢?在我们的,呃。这个里面。这个这个接口里边我们讲了,然后呢,我们也把这个。改变数量的。改变购室外购物车的这个方法引入了,那我们就可以做一个方法。做一个方法,我们就在这块吧,啊改变啊。异步应该说异步改变呃购物车数量数量,那我们证明一个方法,Cost,呃,On change这样的一个方法,等于那需要我们传两个值,传两个值一个是呃,它这个会在这个不长里边会自动传过来的。
26:13
会自动把这个把这个值过来的,然后呢,和我们这个详情,我们就可以通过。中间这个值,它就会把这个值给我进来。会把我们的啊,会把我们的这个值,这个数量值给我传进来,然后呢。因为这是组件里边固定写好的,然后还需要把什么呢,就不需要我们去传了,呃,还需要一个。嗯,详情吧,TL详情就会把里边的所有的。呃,也就是我们改的那ID,就是这个组件,相当于整个组件给我们传进来,那我们通过这个呢,就可以直接调里边内把那内容里边对应的ID嘛,我们传进来,这样的话,我们一点击的时候,你看我们打印下这个。呃,Ve.rog打一下这个值和de g.LG打一下这个值,你看一下分别代表什么?
27:02
啊,我们这个方法on。啊,这块我们的进程函数啊。也是建到函数,然后呢,这个我们还得把这个函数干嘛呀,我们是不是得呃扔出去啊对吧,扔出去,然后呢,再给把你开始使用,那这个时候我们再看一下。来听一下。嗯,没问题,你看我们现在点击一下点击。你看,呃,这里边儿是点击的。就把我们点击的这个事件,事件给我们传进来了。这个是作为这个事件,对呀,应该是。看一下on change on返回去这两个值。第二个应该是获取他的ID,通过这个是代表这个不长的这个组件,这个组件里边的呃,Name,通过这个我们看一下能不能把这个ID打印出来,他现在打印这个是没有值的。试一下。
28:01
刷新一下。点击一点点。没有定义这个。对呀。On change这个方法名看一下写没写错。不长。应该是我们调用事件错了,这个不长,它应该是称着事件,不是凹称事件啊,应该是称着事件CH改变事件,因为它有改变才会调用这个,嗯,称可是点击的时间对吧,应该是改变的时间啊,你可以看一下这个VNT第里边去,应该是这个。然后我们在这里边,我们现在再看一下,可不可以刷新一下。然后这个你看里边现在没有反应错误对不对,我们里边点一个加加,你看一个五,一个36对吧,五呢,就是中间的值,我再点击加加,你看六就把六传过来了,再点击七,七传过来了,36呢,就是我们的对用的这个ID对吧?也就是第二个参数传过来,它要求我们必须有这两个参数,一个呢是我们现在这个框,我们就可以获取到里边的ID,然后一个呢,是当前它现在这个改变的值,那我们现在知道这两个选项了,那我们可以干嘛,是不是就可以把这两个值改到我们的呃,数据库里边去,对吧?所以我们先做一个。
29:16
Cost呃,先直接调用的修改方法吧,修改购物车的方法,修改购物车的方法我们前面在做的时候,咱们就需要传两个参数,一个是传对应的这个ID对吧,一个就是传值,这个值得是这样的一个对象的格式,数据的格式,所以呢,我们先把这个数据格式。呃,直接传里边了,咱们也不需要其他的,那第一个呢,肯定是存ID的,ID在哪呢?是不是bet I里边的name是这个并麦D,也就是我们上边绑定的。Name在name这块我们把ID传过去了,对吧,那ID我们传了得确保这个数量死的,然后呢,就值值,他要的一个什么格式呢?就是一个呃,Name,嗯,Nu就是接口里边需要的这样的格式,你可看接口文档,它需要的就是A等于几,那等于几就是我们这里边实际的要修改的值,对吧?实际要修改的值是不是就是VIE啊。
30:11
这块传进来这个值对吧,那这两个你暂时就先不需要了,那需要这两个值,然后在这里边。Res,我们对应的数据在这面去写对吧,就可以了,那我们其他什么也不改变,这里边,呃,也不需要接受这个参数,它就返回这个状态,其实你要不要这个,然后都可以,这块直接就是可以修改的,那我们现在看一下。那我们现在将这个,呃,这本书点击一下。变成五,现在我刷新一下,如果它还是五在这块,你看就证明我们改成功了,对吧,刷新一下还是这个五。就改成功了这个数量,但是这个数量改变了,你看我们在数据库里边将购物车的那个数量改变了,呃,购物车数量改变了,那么我们本身声明这个列表没有再重新再调用这个方法,没有重新调用方法,这是以前调用的,那我们在客户端内存里边这个list里边的数据会不会变呢?
31:09
嗯,肯定是不会变的,对不对,因为我们现在改变的是服务器的用这块,只是我们把服务器的数量给改变了,而我本身客户端的这个历史的数量是没有改变的,这块别忘了改变。将在什么?嗯,Mo MOU TED中的中的list中的um也要改,也要改,为什么要改呢?不然的话,咱们后期计算属性计算那价值,假如在客户端计算,那就会出错,因为我们是通过这个里边把数据的价格价钱都计算的,对吧?但是呢,那个数量改了,服务器的数量改了,刷新也变了,那刷新肯定是没问题的,重新再改了对不对,但是你点击完你不刷新,这里边数量是不变的。对吧,你刷新它会执行这个从服务器重新获取数量,但是你不刷新的点击数量,这里边是不会改变的,所以呢,我们将它改变,不然的话,我们计算总价钱的时候,数量是不准的,所以这个是不要忘记的,所以呢,我们在这块将服务器改成功的时候,我们在这块要改一下。
32:11
那ST,嗯,Atee,嗯,获取到这里边什么列表,当然我们也知道改的是哪个对不对,那我们知道ID了,也知道值了,那我们肯定也容易改,那我们就变离这个列表吧,我们用for也行,用for变动。便利这列表,便利这列表让它的每一项,这里边便利的每加一个,用它加一个回调方法,相当于把数这里边的每一项都传给了这个,对不对,都传给这个,那在这个方法里边,那我们就可以干嘛呀。在这里边就可以判断一下。便利的时候。如果。这个数组里边的这个ID等于我们传进来的de,呃,Detal里边内不就代表这个ID嘛,对吧,如果是和这个ID是相等的,那么我们就将这个list里边的你的IM代表单独的每一个list,让它这里边的数量就等于我们传进的修改的这个数量,这样的话,像数据库的数量和这个就一致了,就可以了。
33:08
来,我们现在。看一下刷新一下。你看现在我们改变数量对吧,在列表里边数据改变了,这样的话,我们在计算总数的时候没问题,但是你看现在我点击的时候,它这边总出现问题,你看在晃动,如果点快的话,你看这还在晃动,对吧,然后导致状态出错了,你看。是这样的一个问题。怎么办呢?那我们这块因为它异步处理的,你点击的速度太快,他还没处理完呢,你又改变了,然后他拿到数据,然后你又改变了,对吧?会出现这样的一个问题,没等处理完你就改变了,毕竟每点击一下,它并不是在客户端改变,而是跟服务器改变了,对不对?所以呢,这里边我们每点击一下,别让用户点击那么快。这样的话会出现子锁,你那边泌改变完了发回来这后又改变了,又发这事维又改变了,所以这个改变的事件会总去执行,所以会出现刚才那个效果,那如何解决这个问题呢?很容易,你只要是加一个听提示对吧,不提示完我们就不让它改变就行了,所以我们这块加一个这个,这里边我们改成修改中,修改中就可以了,那当我们修改完,修改完在这里边所有的。
34:16
当然并写在循环里啊,所有修改完我们再只要是服务器发挥完,修改完我们就让他停止。这样的话就不会出现这问题,就业务处理的时候,经常咱们会用这种等待框对吧,现在我们点击一下,你看修改中对吧,修改完了之后全部修改完就可以了,现在他想快点,他也点不了对吧,都修改中就不会出现那个问题了,这加这个就可以解决杆菌数量的问题。好,那个这节课我们先到这里,那个时间太长了,下节课我们继续。
我来说两句