00:00
啊,来啊。我们先把上次课讲的东西呢给他复习一下。呃,上一次课呢,我们主要是去完成了商品相关的展示,以及前面补充一个我们的那个分类添加还没做完是吧。那首先做的第一个呢,是分类添加的这个功能。前面的准备工作其实都做好了,就他最后去添加了,也就我去指定一下一个名字,这里我就随意的写啊。下面呢,可以去选择所属的负分类。啊是哪一个,也就说你要添加一级分类项呢,还是要添加二级分类项。当然这里面呢,主要也是分为我们需要去把界面写出来,需要用到一些D的组件,还要涉及到我们当前这个确认框的一个显示隐藏。
01:02
其实跟前面都一样的是吧,没什么太大好说的啊,最后有一个我们添加的功能。嗯,接后来我去可以去点击OK。那点击OK的话,大家想想看,我们现在肯定是要去请求后台接口去添加分类嘛,对那没问题,好,那我要请求后台的话,那前面我先要干嘛呀。收集数据吧,收集我输入数据对不对,那收集我输入数据需要用到哪个对象。Form理想。但是我当前这个categ组件,它本身有放对象吗?没有,是在我的这个内部的这个表单的这个组件里面才有是吧?那这里面就涉及到啊,将子组件的负对象传递给什么负组件。这里面实际上是一个什么组件,监控性呢叫指向什么负同性。能听懂吧?那只要想向互通性传递数据,我们最简单方法是怎么做啊?
02:05
通过函数类型的pro传一个函数给子组件,对吧,而直线调动的时候是不是可以去把。Form作为实参传过来对不对?那我的附件就可以去保存,到时候就可以反复使用。那当然收集完数据后,最后我们还是要去调用啊,添加分类的接口。啊,成功之后呢,还需要干嘛。重新获取什么分类列表?啊,这样我们就能够去看到我们最新的一个。天价的分类,那在最后。因为刚才我们添加的是一级分类是吧,没问题。这是这一个啊,在这里面其实比较麻烦的一点就在于我们添加的时候。一定是添加一级分类。不一定,比如说我现在去添加家用电器。
03:04
我需要去重新获取列表吗?不需要。因为我现在不需要展现它,对不对,这能听懂吧,能好。那当然也有一种可能性啊,比如说啊,这里可能性挺多的,我进入某一个子分类,它现在一个都没有是吧,那默认是不是就去添加它的分类,分类项是不是这个要不要重新获取。需要吗?需要而且获取的是当前的这个。列表分类项是吧?啊好,那当然也有可能干嘛呢,去添加一级分类的。那如果我添加一级分类,要不要重新获取?而且获取的还不是什么。我当前要显示什么,而是去重新获取什么?一级分类的数组吧。这能听懂吧,啊,这里面比较关键啊,但现在不需要显示,主要是我有点回退,是不是需要去看到最新的这个结果是吧。
04:10
所以我是需要的。当我在某一个子分类里面还一种情况,就是我不是添加当前的一个分类,也不是添加一级分类,而是添加另外一个一级分类的子分类。那这样的话,我需要重新获取吗?不需要,因为我没有显示的一个需求什么呢。当然就是不需要了。嗯,这个是整个里面可能稍微麻烦一点的。啊,这是这里。那后面呢,我们主要是去处理啊,我们商品的。商品管理相关的商品管理下,首先我们一上来是做了什么事情。就做订单页面吗。
05:01
我们上来做什么?啊,大家想想看,这是我们最终商品管理的功能,这个是它的这个显示商品列表以及搜索相关功能,对吧?那还有添加商品的功能,对不对,还有我们呃,商品详情的功能,以及修改产品的功能,你想呢,是在干嘛?啊,拆分路由。对吧,搭建我们这个商品管理的整个路由系统吧。因为我们这里面一个组件去整整个效果其实是比较费劲的吧,啊特别费劲,所以说呢,我们这地方应该是一个多路由的效果,也就它里面包含的子路由。那所以我们一上来就要需要配置路由,涉及到我们这里面有home detail和I out,也就是说添加和更新用的是什么。同一个是不是,然后这里面就涉及到root标签,Switch以及什么direct。
06:05
这一个是不是用一个自自动从冰箱的一个组件是吧。好,这里面要说一个事情,当我们在配置路由的时候,我们要配置什么东西,有几个要配置的像啊。我配置一个由有几个配置这样两个看到没,一个是pass啊,我们长就两个对吧,还有个什么这个component没找到,是不是指定我要配置的路由组件是吧,比如说啊,比如说就它吧。那我们配置的路径,我们当时设计为什么呢?斜杠什么还是。然我们后面那个配置路径是多少。是不是斜杠大斜杠什么。
07:01
但是如果我像刚才这种配法去配的话,它是有问题的,也就是说当我去请求product啊斜杠的时候,它会找到组件吗?默认找到了,它会匹配上谁这个后。对吧。也就是说这个地方就要说一个事情,它默认路径去跟路由匹配的时候,是一种什么样的匹配方式,我称它为逐层匹配,就一层一层的找路径是吧。啊,一层路径一层路径的去匹配。也就是说,它默认找他的原因就在于先拿着这个是匹配上了我的这个后。接着准备拿这个斜比特在这个home里面找他的什么。子路游。但我是这个意思吗?不是。我不是这个意思。我的意思是说,如果啊,你写的是这一整,就这。
08:05
路径,那就比如他那如果你写的是product detail。那就应该去找的主页是不是。这时候就涉及到一个。配型啊。啊叫after啊,怎么读的,我看一下啊。这X的发音好像不太发,这个我们看一下。Exact exact,好,这个单词是什么意思?准确的,那我们称它为是不完全匹配,所说的完全匹配什么意思?只有你写这个路径的时候,是不是才会真正的匹配上这个组件?那你后面还带了别的路径,会匹配这个组件吗?不会。那关键是我如果假设我问大家,如果我写的是这个路径后面还带上一个叉叉叉,那我应该写是谁呢?
09:07
是没有一个跟他们匹配的,没有一个匹配的,没有一个匹配的,那我希望呢,是不是显示他呀。那这个地方利用谁来做啊,Redirect?能听到吧。好,嗯,还有同学想到另外一种办法,什么办法呢?来看一下。他怎么做的,他这样做。Her home。是不是也可以?能听到吧。嗯,这个各位领导。但是就有一点。它还是有一点区别的,还是有一点区别的,比如他写的这个肯定跟他匹配了吧,写的这个跟他匹配了是不是,那如果我写的这个方案已经跟他匹配了是不是,那如果我写个product再加一个叉叉,是不是就跟他匹配了?
10:08
是吗?是跟大学吧,而且他会尝试着。根据这个路径去在这里,在这个里面去找什么。子路游。是这意思吧,而我们现在的效果啊,是稍微有点不一样。见面像我们一样,路径稍微会不同,我们这个意思,如果你后面加了一个斜杠,三杀会停在这个路径上吗?也就说你在那个地址栏里面会去看到写他他的这个路径吗。不会的吧?他为什么是不是自动重新到重定向到我们当前斜杠product这个组件吧。这能听到吧,啊能听到啊,还是稍微有一点不同的界面效果应该是基本上一样,但是稍微有一点清晰不同。
11:01
好,这是这个。这个属性呢,需要去知道啊好下面那后面呢,我们涉及到需要去显示我们商品的分页列表。而这一次我们的分页跟我们分类的分页,它的处理方式一样吗?不一样。完全不一样,一个我们称它为前台分页,一个是用什么基于后台的分页,也简称后台分页。那这个时候大家需要对两种分页的实现技术呢,有一个比较彻底的理解啊,那前台分页和后台分页的区别,我们主要是体现在。请求获取数据。的一些情况不一样,那请求获取数据,那这个地方要说啊,我如果是前台分页,它实际上是一次性获取什么所有数据,那翻译的时候还需要发请求吗?不需要。
12:03
那我们基于后台的分页,他每次请求只获取什么当前页的数据,那翻页的时候要不要发请求?很自然的吧,你要发提交。能听到吧,还有通过他们的请求接口就能看出来这是个前台分页还是后台分页,或者说如果你是一个前台分页,或者说你是一个后台分页,那个请求参数基本上就有一部分是确定的。那如果是一个后台分页,我们在发请求时需要携带几个额外的参数?一个是当前是第几页的页码,是不是叫page number,还有什么每页显示的数量叫page什么S,当然如果这个值后台已经定死了。那你就不用传了。听懂我意思吧,当然接口一般写的灵活一点,会让你去传。
13:01
而这两个参数,我如果是前台分页需要。不需要,为什么不需要?为什么发请求时不需要传递这些数据啊?原因在哪里?原因就在这里。很简单的事情。你都信,把所有数据都获取过来,你还要告诉后台,你当前第一页每页显示多少数量,有什么用呢?是不是?这是你前台的任务是不是?这能听到吧,后台不用管这些。再一个,响应数据也会有不同。那如果是前台病验,那响应数据就返回给你所有的数据的数组就可以了。你爱怎么着你就怎么着,你不封印。也跟我没关系,对后台说你分分页他是不知道的,是不是。这能听懂吧?好。那如果是基后台的分页,那你响应的数据,除了要首先肯定当前的数据就好,对吧。
14:09
这是必然的吧,当前日的数据统计返回,那光返回当前的数据,他能知道一共有几页吗?前台的知道吗?不知道不知道他还要分吗?就不能分了,所以说它至少还需要一个什么总记录数。这能听懂吧,需要总记录数啊。当然还有面临一个选择,其实选择了就是选择到底的一种分析方式,其主要看数据的大小,以及客户的一个需求,他到底是希望一个。后台分享的效果还是一个前台分享的效果。但如果客户没需求,我就自己会去适当做一个判断,是吧,嗯,这是这一个事情。那后面呢,我们需要去真正的去完成我们的分页的效果,当我们这个分页有一半的分页和带搜索的什么分页。
15:06
那我们首先来看的是一般分页,分页里面呢,首先它是不是有一些界面的一些2D的组件,这个难度没多大是吧,跟我们前面差不多。而且我们还涉及了一些状态是吧,这是当前页的什么?产品的数组吧,我们要显示就这个数据吧,这个po什么意思?我们总的什么商品的数量,那总的商品的数量不就他认识吗,对吗。是他认识吗?是不是?是不是这个数轴长度。那还要它干嘛呢?你要说是的话,那那就没有必要要卡。再问一遍,这个是什么速度?当前页的商品的。
16:01
而这个是什么?所有商品的总数量,那怎么能是他的认识呢?对不对?如果他认识我,就没必要设计这个状态了。能听到吧,刚才我们说过,如果是后台的分页及后台分页,它的响应数据除了要给你一个数组,是不是还要给你一个总记录数?能看到吧,能看到。那这样的话,我们需要去提交接口请求函数调用。并且去获取数据,这个时候提交的时候请求是不是要传递这两个参数啊,配置number以及什么配置塞,当然默认一上来显示请求第几页。第一页是不是从一开始的,就不是从零开始的,是从什么一开始的?那也有可能,你们公司项目可能从零开始。没关系,其实没关系的啊,这不是绝对的,一般从100比较合理一点,我们第一页第二页。
17:07
好,那接着我们一步去获取显示第一页的数据,显示这个就没其实没什么难度,记住获取到的数据是两个吧。一个是一个什么。涛涛。这个更新状态去让他去显示就行了吧。下面要说一个事情,翻页的时候他要干嘛去?也就是说我点一下是不是要发请求的呀,我点下一是不要发请求的,那发请求的特这个时候你说我得干心什么事。首先我得知道他翻页了吧,我怎么知道他翻页了呢?绑定监听是不是我们那个分线器的配置是不是有按嵌监听。但是这个名字啊。而我是不是要给他指定回调函数,而且回调函数它会默认给我传最新的配置number。
18:02
我们是不是相应的回排除处理啊,去获取最新的这个就行。其实这个翻页啊,去显示对应页的数据,这个很简单,没有多大难度。因为我们的方法基本上都写好了,只需要保定监听指定函数就行。啊,这是这个下面一个第二个功能,我们是有一个概念叫带搜索的分页。啊,搜索同时对搜索的结果是不是进行分裂效果处理啊。啊,首先我们要需要知道涉及到搜索了,这个时候是不是就有一些表单项的输入啊,啊,这里面我们是不是有两种搜索的方式,一种根据名字来搜索,一种根据什么描述来搜索,那这里面就涉及到我们的接口是不是也有不同。接口,诶这个选择哪一种方式,在接口里面的区别在哪呀。
19:01
不知道还记不记得参数名有不同。我们一个叫product,我简写一下啊,等于我指定的。这个值我比如说我输入A,那就等于A,这是参数名和参数值,听懂吧。啊,这能看懂吧?啊再一个如果我选择的是按照描述来分类,那就是product什么DC,那等于我输入的这个关键字。能听到吧。那这个时候。啊,这个时候这一个特,这个比较特别平常咱。参数都没有,参数名一般都不变,是不是,那我们这次参数名是不是都有变化。参数值变,这个咱最常用参数明变很少。那这个时候啊,它的最大的一个。比较特殊的地方就在于我的什么呢?
20:01
啊,我们来直接打开这个啊,应该说的比较多是在我这个请求这里面啊,我的这个请求参数啊,大家看一下我这里面是不是定义了一个概念叫设。而生的值是随便写的吗?不是只能是这两个中的什么某一个。而我的参数名,我的这个属性名是不是要用这个变量的值啊,那这个时候得用什么语法。是不是在外面套一个什么中花,那这个时候我的属性还是它本身吗。不是,而是它的什么值。也就是说一个意思,我如果不加这一个中框,还会找他吗?相当于这个参数就没用到。听懂我意思吧,因为我们这么写相当于怎么写啊。像你这么写。我们不加单引号的写法,是不是一种语法上的一种简写啊,所以这个地方要注意我们必须用什么中括号给它包起来是吧,这是我们这个接口里面。
21:13
啊,有点小难度的地方就要注意啊。好,那这个时候我们就涉及到我们再去接口型函数需要提交的数据有配要板。啊,配蓝宝是需要的,对不对,还有我们的这个设table。这三次面的一个值对不对,有两个值,再一个我们有一个什么。是不是设及内容的,这里面我们是有两个状态来分别保存这个,用来摆成这两个中的什么某一个吧。而这个保存的是我们搜索的关键字。最后我们是要异步去显示分页列表,那这个时候就说我。我怎么知道是一般的分享请求还是一个?
22:03
搜索的风险请求需要调用呢?我是怎么知道要到底要去进行搜索分验还是进行一半分验?看什么?很简单,就看我的这个such name有个值对不对?如果我的设有值说明什么?我是不是要进行什么搜索分页,否则是不是一般分验。这个要注意。而且还一个事情要说,我们这个时候收集数据怎么收集的。是用的form来收集数据吗?我们前面是不是都通过form对象来收集啊?这一次我们是通过form对象吗?不是,我们是实现了一个什么组件。叫受控组件对不对?什么叫受控组件?就实时收视数据的一个表达组件。啊,这里面要想实现售后图件需要整什么?
23:02
有几个啊,State and change这两个东西。关键点就把这两个东西搞清楚,懂不懂。首先我要去绑定M实时的收集数据对不对?除了收集数据,那是不是要存到状态里面去。那就需要有什么state。等到我真正去点搜索的时候,我还要自己去一个一个读吗。不用,因为我的状态里面已经什么实时的是不是收集到了数据。没问题吧,等你啊,就是这个。那后面呢,我们有一个更新商品的状态,这里面要说一个事情,我们的状态有两个,一个在售,一个什么已下架。它是根据哪个属性来确定我到底是个什么状态的。我的产品有一个叫什么status,那翻译过来就是什么意思。
24:02
状态。听懂了吧?Status翻译过来就是状态,那它的值啊,是一和什么啊?一呢代表在受,二呢代表什么已下降?那我点击某一个按钮,实际上是不是要将商品的状态从一变成二,或者从二变成什么?一这个时候是不是要发请求的呀?当然肯定要有一个对应的接口,请求函数是不是这样我们好处理嘛,其实这个就没什么难度了,主要是大家这个业务要搞清楚就行。嗯。好。那我们的这个后图像还有几个啊,点击这些按钮,比如说点击按钮,刚才说了点击详情是查看什么。我详情是跳转路由的吧,它跳转到是我们的那个什么。是不是detail主义,这个时候跳转没问题,主要是我们携带什么过去了。
25:04
是不是写着一个product对象过程?当有人说老师,我们不这么做不行吗?我们可以这么做啊,怎么做呢?啊,我可以去携带一个那个product ID过去,假设他ID是123。这样不好吗?这不也挺好吗?如果你仅仅是把product的ID带过去,那就有问题,你到了那边需要做什么事情才能显示产品的详情?是不是得根据商品的ID去后台请求去查询得到对应的商品?能听到吧,也不说这种方式不行啊,不是说这种方式不行也是可以的,就是咱们这种方式是不是就不需要去查询了。但是这里有一点啊,这个语法只支持but。咱不有两种吗?啊,一种叫哈root。
26:02
是吧,一个叫but,也就是一个有井号,一个什么没有井号,而这种这种方式只支持没带号的方式,因为你如果是带井号的方式的路由,那你就不能利用这个特性,那就只能传ID了。那你懂吧。啊,当然我们现在啊,不带井号可能居多一些。如果实在带个警号ID也是可以做的,不就是一个查询嘛,对不对。好。好了啊,这是这个,那进入我们的详情的组件的话,那我们就需要去显示商品的数据,那显示商品数据,首先我是不是得到商品的对象。能看到吧,这里完整写法应该怎么写来着?This件pro是点location吧,里面有一个属性叫什么?是对的,它的默认值是没有的,也就是本来是没有的。
27:00
如果你传了,是不是就有值了?而这个对的,现在这个对象,对象里面有哪个属性。Production,这是那个。能不听懂这整个是state,那我得到straight以后,我就得到商品了吗?还没有吗?需要点什么?不大。今天看了吧。啊,这个要注意啊,当然我也可以不加大括号,如果不加大括号,我还需要点吗。就不需要了,这个要能区别开来啊。啊,最终呢,去显示商品信息,这里面就会用到一些组件,其实这个就比较简单了,比如说他的,比如说历史的啊,就非常简单的一些组件,这没什么太大好说的。啊,这里面就有一个东西,就我最终是不是要去显示某一个商品的,它所所属的分类的名称呢。
28:01
这个是整个里面啊,最难的一个,也最有意义的一个部分的功能。既有的功能,如果你做的辨识多了,其实意义就不太大了。但是这个是我们前面没做过的,也就是说我们现在商品里面,它有两个ID,一个是开头ID。我就叫它简称了CD,还有一个是负分的ID叫什么呢?我假设叫他PID。是吧,那这个值有可能为哪一个特别的值?有可能为零,如果你代表我这个商品是一个什么样的商品?是一级分类下的商品对不对?能听懂吧,当然我有可能不是零,如果我这个PID不是零呢。那就是二级分类小商品,那这个时候是不是显示两个分类名称。如果它和零是不是显示一个分类名称?关键是我没有啊。我没有名字那个知道吗。
29:02
我只有ID,没有你说我干嘛?是不是查询呢。那查询就是个,我可能要发一个请求,也可能发什么。两个请求是不是,那这个地方就涉及到我是不是一次要发两个请求,两个请求都要成功才行呢。那这个时候我们可以用到一个技术叫什么promise点什么or,诶这个语法咱前面是专门讲过的,对不对啊,他可以一次性发多个请求,只有所有请求成功,是不是整理才成功。Ah but just uh。记住,这个返回的是什么?是不是总的方对象我接收的参数是谁的数组?多个什么promise对象的速度对不对?每一个promise是不是代表一个请求,那我两个是不是对应,我要去获取两个分类的一个请求吧。
30:02
当然我们不用promise点的话,我们还可以用什么技术?是不是用a think?来直接用,你不用我用两个wait是不是也可以可以可以但什么。效率低。能听懂吧,你你要知道两次位的什么意思,第二个请求是在第一个请求什么成功之后,完成之后才发的吧,中间是不是在空闲等待呀。能听到不有点浪费啊,有点浪费。而我们的是一次性什么发多个请求?这没问题吧?美女啊,这个语法需要去理解。嗯。行,那整体的基本上就暂时就这一些啊。
我来说两句