00:00
大家好。这一块,我们来对这个todo历史案例进行一个总结。那。首先我们来想一想,如果我们去,呃,开启一个,就是说写一个新的一个功能,首先要做什么啊。哎,第一步就是先去创建。对应的路由对吧,那创建完对应的路由之后呢,嗯,你要去。找到国际化的一个配置,把菜单的这个国际化,比如说中文的呀,这些呀,都给配置好对吧,那这是我们前面要做的几步,那接下来呢,这个改好之后呢,你还要去配置里面去创建对应的组件啊,创建对应的组件和页面。嗯,然后在这个页面就按照你的需求去完成你这个页面之后,嗯。呃,如果是表格的话啊,你就定义这个表格的这个。表的这个字段。把表格给渲染出来对吧,如果是其他的这个内容啊,就根据你的这个需求自己去排版就可以了啊,然后关于这些组件的用法呢。
01:06
啊,这里再给大家总结一下啊啊,如果你使用的是这个pro啊pro component,那就看这个文档。啊,看这个文档就可以啊,看他这个组件,但是这个呃里面呢,它有时候它的这个呃手册就是说文档有时候API写的不是很详细,那你这时候你要去什么呢。去and里面去看啊。因为这个。Comps就是对NTD的,呃,又一层的一个封装嘛,就是还是以这个NTD为基础,所以当我们在这个pro comps里面,呃,API里面去找不到我们要的一些属性,或者呃这个事件的时候啊,就去ad里面去看啊,那这是一点。就是我们尽可能的去使用pro comments,但这里面如果没有的一些组件呢,啊,我们就可以去我们使用这个NT里面去啊,这这这些组件去布局也可以啊,包括你看像我们的这个图标啊。
02:03
包括我们的这个,呃,有些东西啊,用的就是N的啊。再然后如果你要对这个啊n TD pro进行呃,比如说底层的一些配置和修改的时候啊,你要去看这个五米GS的文档啊,因为它的底层就是五米GS啊。再然后还有这个。At的文档啊,所以写这个。要看的文档比较多啊。啊,那这是关于这一块啊,当你页面准备完成之后,你就得想办法啊去。呃,拆分你的业务逻辑啊,比如说是添加的呀,等等啊是这个。呃,编辑的啊,然后请求放在哪里,因为你不管是添加或者编辑,我们都会涉及到网络请求,我们一般把服务端的交互请求去放到。这个service里面,嗯,来写我们的请求,然后每一类就是说每一组的话,你用一个文件名去。
03:02
创建就可以了啊。啊,如果有呃后端的API去使用,那么就直接去使用后端API的一个地址,但是如果没有的话呢,我们就去呃使用这个Mo来模拟我们的数据啊,同样可以达到哎,我们想要的一个效果。啊,这是关于呃,当我们去开启一个呃新的一个功能的时候,我们应该哎怎么去做,包括要看什么文档,这里稍微给大家总结一下啊。那接下来我们把我们的这个代码再稍微优化一下,首先是呃,这个列表这里啊,我们来找一找,就是nu这里来想一个问题,你看不管我们添加完数据还是呃更新完数据,都要去刷新这个状态,对吧,后面可能还有删除的啊功能,或者说其他的功能都要去刷新这个状态,那每一次都写这样的一个代码不是特别好。啊,所以呢,我们把它给。提成一个公共的方法啊。来写一下啊cost,呃,你可以叫什么?呃,Load data呀,或者说get data都可以。
04:06
Get贝塔吧,等于哎,一个函数。啊,就是我们的这个这个东西啊。获取图do啊。获取最新的todo啊,因为我们是调了这个model啊去使用的啊。那在这里呢,其实就是成功之后,我们执行里面的这个方法就可以了啊,包括这里也不用写这么多的代码。哎,这样就完成了一个。一个这个呃,简单的一个封装吧,啊好,然后再关于呃,就是说这些方法。哎,就是我们用的这些方法,究竟要写到。这个组件里面还是组件外面,这个取决于你有没有用到组件的一个。呃,这个属性啊,比如说像这个,我们为什么把它就这个方法,为什么把它写到这个里面呢?是因为呃,它用到了组件的purpose属性,对吧,或者说用到组件这个方法,因为我们要使用purpose里面的despite去更新,去获取最新的列表,对不对,所以我们就把它给写到这个。
05:12
这个组件的里面啊。啊,就包括这个表格的这个字段的定义,因为我们在定义字段的时候用到了这个方法啊,所以我们把这个表格字段的定义呢,也写到这个,呃,这个。函数式的这个组件里面,那其实如果有一些数据完完全全就是独立的啊,就是跟这个组件不太有什么参合的话,你再。这个组件外面去定义也行啊。啊,这是一点。呃,在接下来再说一点是关于。这个model的使用,也就是d va redus的这个model的这个使用啊,那这个使用呢。啊,取决于你。这个数据啊。是不是有多个组件共享,其实像你的数据,比如说呃,很少有组件去共享,就比如说就自己这个组件在用的话。不用不去使用这个model也是可以的,那之前一开始也给大家讲了啊,不使用model的一个方法,我们直接在这个生命周期里面去获取数据都是可以的,对吧,我们基于状态啊,然后基于这个生命周期去获取这个数据也是可行的。
06:11
对吧,啊。啊呃,然后呃,这里呢,像官方的这个手册。零里面有一个和服务端交互,也给了一个比较标准的一个前端请求流程,嗯,UI组件交互,然后调用model,然后是在model里面去调用service。然后service里面使用封装的,就开始发起请求获取数据,然后调用reducer改变状态,最后更新model,更新model的时候,状态的改变引起组件重新渲染我们的数据就刷新。这是它比较。呃,就是大概的一个完整的一个流程啊,当然这个model刚才跟大家说过了,你你你看情况用啊,看情况用你直接去请求数据也是可以的。好,呃,那关于这个。To list呢,就给大家总结到这里,然后通过这一章节的学习,我们对这个n TD pro也有了一个简单的认识啊,包括这些都给大家讲过,至少现在让大家去写一个东西的话啊,能呃,慢慢的去写。
07:11
呃,关于这个文档呢,就是很多东西的它的API。这个有时候你记不了这么多的,就常用的那几个属性可能还记住,所以记不住没有关系,你知道文档在哪能去。呃,在碰到的时候,用到的时候,我们能在文档里面找到,能用到啊,能最后呃解决问题这样就可以了啊,因为你看看每一个文档都这么多东西,你不可能说是全部记住的啊。好,那。关于这个。Nt pro的这个基础的一个学习,我们这一章就到这里,那下一章就开始我们的项目啊。好了,那这小节先结束。
我来说两句