00:00
大家好,在完成了登录哎,获取用户信息以及退出之后呢,我们这节课来完成首页的一个统计的一个功能啊。那首先我们得准备一个路由以及图标对吧?好,那我们一步一步来,先把我们的账号给登录上。登录上之后,然后找到我们的代码啊,开始去写代码,那首先去添加一个路由,找到con菲。在这个,嗯。这个里面去添加一个路由啊,好匹配这个根目录,然后我们来匹配一个。嗯,大。大细胞的一个仪表盘啊,统计面板,让他使用的组件是。使用艾服吧,Pages下面的。嗯。好。比如说我们去这个pages下面去建一个这样的一个目录啊。
01:06
找到pages。来新建一个目录。大在里面,我们来新建一个。呃,index.gs叉啊,因为我们这个语法是用的是GS嘛,所以我们就建个GS叉。这个是问我们是否添加到get啊,不再提醒不添加我们,最后我们自己手动添加就可以啊RSC来创建,快速创建一个。呃,函数式的一个组件。那。BOARD。那里面先随便简单的输出一句话啊。哎,就输出我们的这个内容吧。嗯,接下来。给他一个名字啊,就是我们的路由显示的一个名字内,那就叫这个啊大构好,下面我们来看一看效果啊,已经有了一个大气胞的啊,只不过是。
02:04
嗯。我们得进到这个地址才可以。对吧,好。那我们这个一开始呢,进到这个这个首页,你看它进到首页的时候呢,它会出现一个404对吧,因为我们在登录之后,登录成功之后,会重新下这个首页,我们为了解决这个404的问题呢,我们就给这个呃首页一个重定向,让首页重定向到我们的答起勾。好,那接下来开始写啊。找到路由这一块。还是在这儿啊,还是在这个这个地方啊。来写一个复制一下。就是匹配到根目录的时候啊,内目标了,这个也不要我们直接干什么redirect。R啊,重定向的大西胞哎,这样的话就解决了这个根请求的根目录的时候,它出现404的问题,当我们请求根目录就会重定向的我们大细胞的啊,重叠到这里面啊,接着来看看效果啊。
03:06
好,你看你去访问这个根目录的话,就会给你重叠向到我们的大细报道啊,那接下来一点一点完善,首先是这个国际化的一个问题,对吧,还有一个是图标icon的一个问题,那我们先把这个icon给加上,呃,Icon呢,那去这个里面去找。图标,我们来找一个类似于这个统计的。编辑类数据类,那就用它吧。Icon。把它给粘贴上啊,注意是字符串,不要加这个。现在是有了啊,图标看一下是有了,对不对,那把这个国际化我们也去配一下。找到。Locus,然后ZHCN没有。这里面我们来加一个啊。没有点。
04:01
报啊,这个是我们的。数据面板吧,就是统计面板。好,可以看到这个文字有已经有了啊,啊,当然这个呃,写我们写这个项目的时候,有时候可能比如说这个路径啊,或者说这个名字跟我们我之前的这个例子会有些区别,但是嗯,没有没有关系啊,这个内容都是一样的啊。好,那接下来就开始去完成我们的布局,那这个布局比较简单啊,就是。三个G东西。看到了吧,那这个呢,我们直接去NTD里面去找就行了,我们先把这个页面的布局给做出来之后,再去考虑数据的问题,来找NT里面组件,你去找这个数据统计啊,应该是在。嗯,看看在哪儿啊。呃,统计数值这呢啊,我们看用哪一个。就用这个就可以了啊。
05:00
来直接把他的这个。肉给复制一下。因为这个样式我们不需要,我们直接从这个肉开始复制就可以了。来粘贴一下。哦,这个达它已经有了,那我们这个就。先把它给删了吧,啊把它给删了。把它上面这个给改了就行了,因为它默认的就是带的有有这么一个东西啊,我们把那个给改了啊嗯,一开始我没注意,它是有的。好,嗯,这个就不管了,关了,嗯之后呢,这里面哎,再复制一下这个代码吧,复制一下我们的这个效果。来,粘贴过来。嗯,从这个NTD里面,我们再把用到的这些组件,比如roll啊,Call啊,Card啊,还有这个呃,Start个词等等这些要引入过来,对吧,那我就直接去复制了,我就不手写了。
06:02
呃,像这个,呃,组件就是UI库的东西,直接复制就可以了,还少一个这个图标是不是。来,把这个图标也拿一下。好,这个它标红的话呢,这个是ES这个link,它语法的一个检查,其实你在后面加上一个空格,它就不标红了啊,因为如果按照比较规范的一个格式的话。最外面的这个是,呃,说明我们要写这个GS的就是表达式了,那里面呢,实际上就是我们的这个对象对不对啊,这样是比较。比较规范的一个格式啊,啊,其实调不调都行,你要是看着别扭,红线别扭,你可以调一下,那接下来。来看一看我们的效果。啊,已经有了,对不对,诶,但是这边显示的是三个啊,我们再给他加一个嘛。三个来再加一个复制一个靠就可以了啊好,但是你这么一复制呢,你会发现啊,它跑下面去了,对不对啊。
07:03
那调整一下它的这个SPA,把12改成八,因为它的布局的话,它是按照二十四二十四个去布局的,所以你看三八二十四刚好。就是显示三个了。嗯,接下来就是这个文字以及这个颜色是吧,那这个颜色呢,其实是可以通过它去控制的啊,比如说我们。嗯,随便写一个。234。ABC啊,随便写个颜色。就变成这种蓝色了啊。啊。嗯,接下来呢,就是把这个字改一改,看看我们都有什么,有这个用户数,商品数,订单数,呃,其实这个统计的这些内容啊,具体还是要看你的API都提供了什么数据,我们来看一下我们的API文档,找到后台API。找到首页统计这里啊,看一下,那这里面呢,首页统计给我们返回了用户数量,订单数量,以及就商品数量以及订单数量,对吧?啊,所以我们其实就写这三个就可以了啊。
08:06
用户数、商品数、订单数。来把这个改一改啊,从第一个开始改开头。这个是用户数。商品数。然后订单数订单数。啊,这样的一个效果,那如果这个箭头你不想要的话呢,我们就不写了啊,你想留着的话就留着啊,这个就不说了。好,然后。这个value就是取决于啊,这边显示的这个这个值。啊,这个Y6。呃,这个是后缀啊,这个是后缀,你不要的话就就不要了啊就可以。可以不要,那这个是前缀。这个在这个手册里面都可以看到的,看他的这个API,比如说它的这个。
09:02
数值的前缀呀,数值的后缀等等啊,那这个百分号我们是不要的,那我们这个后缀就不要了啊,前缀的箭头你们看情况要不要啊,这是取得这个保留的这个位数。就是小数点的一个位数。嗯,我们是整数,整数其实这个也也不用要啊,它不可能实现小数啊。嗯。可以把它改成零也行啊,虽然就是说不可能出现小数,但是我们把它直接改成零啊,好,其他的也是一样,像这个也不要了啊,那这个改成零。同样的后缀,不要这个改成零。我们先把页面准备好之后,接着再去考虑数据的一个问题,好。那页面我们已经准备完了,那看一下我们的这个页面。是直接使用的,这个div并没有使用pro components的布局,对吧,你要想使用也可以,那你如果要使用的话呢,可以去使用。
10:00
比如说看布局这里。布局这里,呃,有一个。啊,Guard content啊,它封装了等宽以及流失的逻辑,那如果我们不想要那个title,可以使用这个布局对吧?呃,如果想要那个啊,这个上面的这个标题,哎,我们就使用这个。配置container清楚吗?啊,那我们直接用div也行,因为这个效果是差不多的好。接下来考虑我们的数据问题,数据肯定得请求API去得到这个数据,对吧,那凡是涉及到API的地方。啊,我告诉大家怎么这个顺序怎么写,就是一个功能怎么写,那首先我们现在先把页面准备出来,对不对,这些数据,哪怕是写写子的一些假数据也行,这是第一步啊,那第二步呢,就是看看我们要用的一个API,然后把API在service里面,我们先准备好。来找到我们的service。嗯,应该按照这么一个流程去写好,我们有登录的获取用户信息的啊,对吧,那我们再建一个获取这个统计面板数据的。
11:00
服。嗯,大写board,大报加GS。在这里面。把这个request给导入过来啊,导入这个request呢。呃,就是说你要从。从哪导入到铜这个?工具里面啊,我们处理后的这个开去导入啊,接下来分别暴露export。函数啊,你可以写箭头函数,也可以写这种方形都可以啊。Function。那我们来写一个,这个是。嗯,就是get。打的。对。使用这个法取得啊,Basketball的这个数据好。那在这里面呢,Return request,看一下我们的请求方式,这个得和API对应上啊,是一个get的请求方式。
12:02
那get的话就直接写就可以了,那把我们的这个地址给配置上啊,还是不要API,我们配置过前缀了已经。好,直接这样就可以了,泛。打报。Board啊,这边都写了啊。啊,我们这是第二步啊,第一步准备我们的页面准备的UI,那第二步把需要的这个API数据我们准备好啊,把这个初始写一下,获取面板数据。统计面板数据,嗯。嗯,因为这个面板数据。只有这一个页面在用,嗯,所以呢,我就我不去使用这个models了,那我就直接在这个页面里面去发起请求,获取这个数据就可以了。哎,之前给大家讲过这个models,也就是d va。的使用,就是取决于你这些数据是不是要有多个组件共享,那你像我们的用户信息有头部啊,有其他地方在用,对吧?所以我们可以使用这个model,使用这个dva,那像比如说只有一些数据,就这个页面自己在用,那么不使用也可以啊,那这个我们就不使用了。
13:06
啊,那接下来。也就是说在这个组件啊,挂载之后,我们要获取到这个API里面返回的数据,这时候就要用到这个生命周期啊,那函数式组件用生命周期就得借助于HX,嗯,把这个use effect我们来导入进来,然后。在这里来使用这个FOX啊,第一个是一个函数啊,是一个回调函数,第二个参数给上这个空数组啊,防止组件更新的时候也也也去执行它。啊,因为它嗯是表示了三个函数嘛,就是我们给这个参数的情况下,和不给的情况就不一样啊。接下来在这里啊,发送请求。请求获取。啊,统计数据好,嗯,我们来想一个问题啊,我们发送这个请求。
14:02
啊,我先发送请求吧,等会再给大家说这个问题啊,那怎么发送请求呢?是不是直接我们不走这个model,不使用DVI的话,不使用d va的话,就直接是使用我们的这个service啊,这个方法去获取这个请求就可以,对不对?好,那直接把这个方法写上。嗯,我们先来导入一下吧啊,有时候你直接写它能帮你导入,有时候就不能啊from。Service里面的DA导入这个方法之后,诶,我们的这个数据啊,比如说date。等于。这个方法执行后的一个数据。是这样的吧,但是你这么写会有问题,因为我们这个请求它是一个异步的啊,那我们怎么去解决异步呢?还是使用A森和厄维特啊,这样比较简单,要不然你还得去这个点点认各种去链式调用就就就比较麻烦了啊,来加上一个a think,然后这边我们加上一个A贝,这样让它啊以一种同步的方式去执行就可以得到。
15:05
这个date对吧?啊,那我们先来打印一下date,看看数据有没有拿到好吧。来打开控制台。好,可以看到这已经输出了,对吧,是不是得到了这个数据,对不对,那接下来。就是要让这些数据去使用上。我们。返回过来的这些数据。清楚了吧,来。嗯,我们来看一个事情啊,我们这个date呢,你是在这个里面去定义的。对不对,你这个组件里面怎么去使用呢。而且随着你啊这个数据的改变,我们还要让组件重新渲染。对吧,那我们先解决第一个问题。这个date在这里面,那外面肯定就是说最下面肯定使用不了,对吧,它是一个函数体内嘛。使用不了怎么办?我们可以把这个date给定义到外面,比如说在这啊,我们let date啊,等于一个。
16:02
啊控对象嘛,好,那这时候拿到值之后再给data赋值,下面我们就可以用date的这个啊对应的数据,比如说这个用户数。哎,我们就可以使用date点。看一看啊,是直接看文档啊,User content。那同样的来复制一下商品数。商品数是啊,Good content。接着是我们的订单数。订单数是这个order content。好,接下来这个就写完了是吧,那我们来回过头来刷新一下,看一看效果啊。就发现都是零,而且这边明明拿到的数据为什么它都是零。来想一想,想一想这个问题。好,那我给大家说一下。大家可能也想到了啊。
17:00
这个组件它渲染的速度是比较快的,因为你这个网络请求它执行是比较慢的,也就是说我们这个组件已经渲染完了。啊,这些一开始没有啊,取的就是零已经渲染完了,你这边数据还没拿到,我们假如网络慢的情况下,可能这个执行了五秒或者十秒才拿到数据,那这个组件早就渲染完了呀。所以。它这里取的就是零嘛,对不对,所以我们必须得怎么办。啊,你一开始零没问题,但是我拿到数据之后,我必须得让你组建存渲染。我们什么情况下可以让组件重新渲染?是不是当组件的状态发生改变的时候,我们就会让就组件就会自动重新渲染对吧?所以那这个数据我们是不是可以基于状态?好哎,又是一个问题啊,那函数式的组件我们要使用状态,是不是还在使用h use state。我们在这里来定义状态,就不用这个变量啊来定义了,我们来定义状态啊,定义组渐状态,逐渐状态啊,状态改变会呃,引起组件重新渲染,引起组件重新渲染,那使用后怎么定义状态呢?诶,还是得let去定义一个数组啊,从这个use里面去解构出来两个东西,一个是我们自己定的变量,再一个是啊,就是说一个是我们自己定义的状态名,再一个就是设置状态的方法,嗯,它是从这个use set里面。
18:29
哎,可以解构出来这两个方法,那这个我们就不要了啊。呃,这里面可以给一个默认值,嗯,对象的话,我们就给一个默认空的一个对象就好,这样的话下面用点调用的话,它不会出问题是不是。接下来,呃,当我们拿到数据之后,我们就调用这个set date这个方法去修改这个状态。嗯,把这个date给它设置上,那修改状态的话。嗯,这个就是换一个变量吧啊,这个is data就是返回的这个数据啊,不要和这个冲突了啊,那我们拿到返回的这个数据之后,就调用这个set data去修改我们的这个data这个状态,那组件状态的改变就会引起组件的程序渲染,就可以得到这个数据啊,就哪怕你请求再慢都没有问题。
19:17
清楚了吧,啊,那这是一个呃方式,我们来看看。是不是数据就有了,我刷新一下,大家注意一下一开始。它是零,随着数据的回来,那组件数渲染就把这个数据填充上了。哎,是不是也可以啊,也就是说一些呃比较简单的功能,就是说呃,这个组件内的数据就只有这个组件去用,我们就直接去呃发送请求去获取数据就可以了,没必要再借助于这个d va使用这个model,那就比较麻烦啊。来注册给大家写清楚啊,嗯,得到数据之后。更新啊组件状态,哎,这时候就可重新渲染组件啊。
20:01
啊,当然因为这个请求比较简单,我们就没有去判断他的状态,你要写的严谨一点的话,你还要去判断他的这个请求的状态是不是成功啊。啊去,因为他有可能去请求,有可能会请求失败啊,其实像这样简简单单的一个盖子请求的话啊,一般不会出现什么问题啊,啊如果你要是说呃,把代码写的更严谨一些的话,即使是get请求,我们得你得判断一下。啊,不过呢,我们在这个。在这个request中间件里面已经做了一层处理了。就是哪怕当你。就是说拦截器里面已经做了处理了,哪怕当你真的是出现错误的时候,也已经有一个很好的一个提醒了啊,所以我们在使用这个,呃,查询的时候呢啊,及时查询也可以。好。那这节课我们就通过简单的一个啊例子,完成了首页的这个统计面板的一个功能。那这一章节的内容我们就已经完成了啊,在每个章节的功能完成之后,我们要把我们的代码去推送到get的这个仓库啊,现在我们来推送一下gate仓库啊,把这些都关掉。
21:08
来折叠一下。打开我们的终端啊,把这个停掉,在推到get仓库之前,你先使用get space查看一下当前的一个状态。可以发现。哎,我们增加了啊,就是说修改了这么多文件,一个Mo,然后是增加了这两个文件对吧。啊,接着呢,Get ad添加到这个索引区啊,再来查看一下状态,就会发现它已经变成了这个绿色啊,说明我们已经加到索引区了,那接下来要使用get啊,Commit提交到本地的一个版本库啊,Gate的这个备注啊,大家一定要写好方便呃别人查看,也方便日后自己查看。嗯,就是说我们可以简单的这个标记,如果我们是新增加了一个功能,我们就可以啊ADB冒号啊,后面跟上我们新加的一个功能啊,如果我们是比如说是修改了一个bug啊,那就可以啊,简单的写个fix啊,修复了什么什么bug,对吧?啊,如果我们是呃对代码呀,对其他的这个功能进行了一些这个呃重构啊,我们就可以简单的写一下这个啊if,因为那个factor它是重构的这个意思啊,我们就写它的一个缩写,哎,比如说我们既不是新增的功能,也不是说呃修复了bug,只是说对某些代码进行重构,我们就可以用if去标识。
22:30
这样这个标识加上我们的呃,修复的内容,我们就能在看这个日志的时候,很清晰的知道我们去改了什么东西啊好,那这个我们是新增的一些功能,对吧?啊,我们就使用这个I的吧。哎,比如说啊登录。嗯,登录退出。写个完成吧,完成登录退出以及呃,数据面板功能。
23:06
好。呃,这个完成呢,你也可以不写,哎,为什么呢?因为我们其实一看到这个I就知道是新增了这些功能,对吧?啊,那如果你是修改了bug呢,你就就写这个fix啊,如果是啊,我们成功了某某些代码,就写那个呃瑞啊RI if都可以啊简单的标识一下好,接下来提交这个只是把我们的代码提交到了本地的这个版本库,我们要把它给推到线上的啊版本库啊,直接使用get to。就可以把它推到这个线上的这个版本库啊,这样的话,别人就是我们团队成员就可以去拉取这个代码。在之前啊,给大家讲过我们的代码呢,不会说是单独再拷出来一份给大家了,如果大家想看到某一阶段的一个代码的话,你可以使用get命令,呃去呃回退到那个版本去查看,对吧?啊,那比如现在我们。啊,已经。完成了这个功能,我们可以通过get log看一下现有的提交的一个记录,一开始是初始化商这个商城的这个管理是吧,然后是我们艾增加了一个功能,那如果我们想要回到这里看这个初始化的这个代码的时候呢,你只要复制这个ID就可以了,不用复制完你随便复这个,只要保证不重复就可以啊,随便复制个几位就可以啊,然后。
24:19
接下来我就回退到这个版本啊get。啊,回退呢,用这个reset啊,杠杠hard后面跟上我们要回退到这个ID啊,比如说要回退到这个这个ID,诶这个时候他告诉我们这个had现在就说已经处于这个初始化商品,就是商城管理的这个项目处于这个阶段,这时候你再看代码,就是一开始我们初始化的那个代码,可以看一下这个配置里面是比较干净的,就一个登录页,什么都没有,对吧,包括我们的service里面,我们直接写代码都没有,对不对。啊,那如果你还要想,呃,回到刚才我们写的那个功能怎么办呢?这时候你可能又会想到了,我使用这个get log,哎,你会发现一下这个日志,哎,之前那个没有了,对不对,然后这个get log呢,只会显示你当前所处的这个,呃。
25:05
版本之前的一些记录啊,那后面的是不显示的,这时候怎么办,你可以使用这个G啊。Ref re。哎,这个reflo呢,它会显示你所有的一个进度,比如说可以看到这个就是我们所有的操作呢,都会在这个reflo里面去去记录,你看一下这个就是我们呃ad,然后添加了这个登录退出数据面板,对吧,你现在你。就是说拿到他的这个ID,他的ID是谁,在这复制ID,我们就可以去跳到这个版本来,接下来我们再来跳跳一下这个版本啊,Get reset啊,切换版本啊,切换这个我们提交的这个版本的记录,就是用get,然后杠刚hard后面跟上我们的ID就可以了。那这个ID就不要了,来现在我是回到这个ID来现在就回到了这里面对吧,那这时候你再去看你的代码都是有的,比如说刚才我们写的。这个。
26:00
啊,面板的功能就都有了啊,如果大家要想看某一阶段的一个代码的话,就这么去看啊,然后嗯,一定要记住这个gflo这个命令的话会显示。你所有的操作的一个记录啊,包括刚才我们进行啊,这个版本移动的记录也会有。清楚了吧?啊,当然我们可以直接看我们的备注去,呃,跳到我们需要的那那一个版本,这也是之前给大家为什么说这个备注一定要写好,这样的话,我们想看哪个版本的这个功能的话,直接就看备注就很很清楚了,要不然你全写上这个什么,呃,Commit你要备注都是A的话,你都不知道哪一版本干了什么啊,这个卡的这个备注一定要写清楚啊。好,那个关于get呢,简单的给大家做一个简单的一个说明,那这一章节就到这里啊,在下一章节我们就开始去完成用户的一个管理。
我来说两句