00:01
Hello,同学们好,我是童学老师,接下来我们跟大家讲解一下,我们项目当中一个比较核心的一个业务模块叫城车人管理啊,单城市管理有两个入口,一个是在用户中心里面的城车人管理里面,这里能对我们的城市人进行一个啊编辑及删除以及新增的操作啊,另外一个入口在什么地方呢?在我们的这个选择好了下订单的时候。在下订单这个地方,我们有一个什么新增重确认的一个操作。啊,但这里面用的是同一个组件,因为逻辑是复用的,所以我们以什么以用户中心当中的这个层层管理进行一个完整的说明,因为里面要涉及到什么,涉及到一个征。SKY。三的操作,然后呢,这里面我们先来看增加的操作啊,在我们这个页面当中,我们什么先去到去到我们对应的哪个页面呢?去到这个link link这个页面当中啊,在这个页面当中一进来的第一瞬间,我们先做什么呀?我们先去请求得到我们所有的成车信息。
01:07
在得到了所有的求车信息之后呢?啊,进到的页面呢,我们先嘛,先去获取全部的连线的信息,然后得到所有的连线信息之后呢,它会这里进行一个列表的渲染。啊,就让我们页面当中,在这里面会进行一个列表渲染。在这里list OK,所以一开始我们得到的时候,我们就设置这个列表得到所的内容啊,这一步是比较简单的一个操作啊,重点站的地方我们先讲征帧的操作呢,在我们按钮当中点击的这个新增程序,人就会跳转到这个指定的页面,这里面我们是第一次使用的一个liator的一个。组件在这跳转的时候呢,我们去到了我们对应的这个页面当中的a link这个操作。
02:05
在这页面当中呢,我们先有会炫,我们渲一个表单,我们先看一下这个表单的内容。这里面呢,我们使用了re当中的一些对应的表单,然后第一个我们显示嘛,显示了一个。显示的一个选择,这个选择当中是我们通过这个方式来实现的,是什么选择一个对应的乘客类型,乘客类型当中我们使用了一个叫做Switch type的一个函数来处理这个业务,主要是根据什么,根据它这个选中的样式进行处理。啊,选上是以什么为准呢?是不是以type为准?如果我们设置它值为成人,那么就获得AC,就得到一个,现在我们看一下调试器当中,点开这里面看一下它的这个样式。啊,这1.g都不叉L同学们好,我们看一下这个地方。那么得到AC啊,我们再切换儿童,点击儿童时是不是下面一个AC?好吧,AC就决定了它现在这个选中的效果,所以我们这里绑定了一个tap事件。
03:10
在tap的时候呢,我们会执行对应的这个Switch type的函数。然后呢,从而对于这个值进行切换,从而让它是选择乘客的类型,实现这个效果。OK,然后下一步我们这里面就用了一个表单,表单当中呢,我们用了。当中的这一个。这样的组合样式,其中这里面看到一个用法,这什么,这是一个数据的双向绑定,数据双向绑定什么意思呢?同学们,我们可以在这里面轻易的能够得到一个东西,只要你用户输入的内容是什么,那么我的real内就实时的会变成什么,比如说这里面我写个程序人测试一下哈,我们重新编译。去到用户中心啊,再次来到从车人管理点击添加啊,我们这边叫。
04:00
看吧,只要我们输入任何内容,同学们,这个。就实时等于那个值。就是一个数据双向的绑定,用到了它的一个model value的形式啊,通过这样的方式是先看到后面呢,我们说表单都可以进行一样的一个的操作,比如说这里面有个乘客人姓名,他的联系。手机号码。然后到了下面这个地方,我们大部分什么,包括它下面的正确号码,我们都可以通过什么,通过双向绑定的形式,让它跟什么跟我们页面当中某一些date。看到没?这三个值保持一致。接下来我们看一下这样做好处有什么好处呢?我们就是在我们最终最后一步选择保存的时候,我就可以直接通过date中拿出这个值了,而我不用再去关心我怎么样才能读取到这个输入框里面的值,因为它已经进行了数据双向绑定,这也是我们现在开发当中最流行的MVVM的一种的构思构架思维,它能方便让我们进行业务的解耦。
05:04
然后呢,往下这一步我们看一下还有个什么操作呢,这里面我们有一个类型的选择,这里面用了什么,用了一个叫作re主线当中叫动作面板的一个操作啊,但这里有它对应的使用方式。啊,基础用法选项几啊,但在他选中的时候呢,我们会让它的值为什么为一个受。这个值决定了它是否显示。啊,一开始说我们看一下它的值默认什么呀,它的值默认是这个受的,这个初始的值是为空的,就是就是我们说的啊证件类型。选择这什么叫什么叫。叫动作面板哈。动作面板是否显示?啊,默认fo是否显示,那么今天做什么情况,我们是不是这里绑定了一个事件啊,注意这里面同学们啊,这个事件并不是在由我们的这个小程序里原本的代码来决定的了,而是由什么由你使用到对应的组件的时候。
06:09
它说明了什么主什么事件,它就有什么事件,因为这是一个B相方的主解啊,我们这里要看到click,我就会执行这个函数,而这个函数当中我做的事情很简单,我就把什么,把这个显示什么就是。就是显示啊。动作。面板。OK,显示动作面板就让用户能进行选择,而用户选择的时候就执行什么呀,执行了这个onla。啊,用户选择的时候就会执行这个函数,而在这个函数当中,我做的事情也很简单,直接的修改啊,在这个on select。在这里同学们哈,这里面就是我们根据地。啊或者什么,这里面就获得动作面板当中用户的选中。
07:06
想。啊,得到选项,我就设置这个对应的值啊,就是这个对应的值啊,选中了得到那个值并且什么,并且同时什么,同时还有什么。我们还有什么同时?隐藏。动作面板。OK,选中了吗?这样动作美满消失了对不对啊,还有什么时候让他消失,是不是在点击啊取消的时候。对吧哈,点击取消的时候,我们应该让它消失啊,这是我们的业务流程啊,在这一步操作好之后呢,我们就会怎么得到的,用户的一个输入的手机号码,以及用户的这个选择的证件类型,以及证件号码,以及乘客的姓名,然后呢,我们最终再点击添加的时候,就可以调我们对应的API,比如什么API呢。啊,对应的就是我们这个C的操作。使用的API,把对应的信息就能上传,就能传给我们的服务端,服务端当中就会返回对应的结果来告诉我们是否保存成功还是保存失败啊,这时候呢,我们可以进行一个操作啊,测试一下哈,这里面输入。
08:15
测试。啊。联系啊,联系人A。然后我们输入一个号码。然后这里输入证件号码。然后点击添加。啊,同学们这时候就会弹出个添加成功啊,添加成功之后呢,添加成功之后我们也是做的事情,让它就返回到上一层的页面当中啊。然后同学们会发现小细节,刚才我是刷新了之后才会看到新增的一个联系人啊,但是实际上我们在添加的时候,回到这页面我们应该是什么?应该是需要马上显示出最新的添加的联系人,意思是说让你重新获取一下当前的这个我的所有的乘车人的列表。
09:21
但是这个地方我们看一下,我们实际上呢,只执行的这个函数啊,是不是在load的地方,这是你一个get link list。这是我们在什么时候回来的呀,我们看清楚啊,在刚才我们执行好添加啊,我们执行好添加之后,我们会做事情,Back这个地方就是什么。就在这个地方执行一个微信点。就在这地方只是一个后退,但后退地方,同学们,我们这里有个小小的细节要注意了啊,同学们哈,这地方啊,就是有个小小的地方,我们需要把我这里先写的先,然后告诉你为什么么,我们应该再有个新的钩子叫N受。
10:03
然后呢,我们需要在里面再执行一个。为什么要这么做呢?请求了哈,如果是从啊跳转之后的页面。回跳。这里。是不会触发的吗?One?Load。你们记住了哈,说我们什么所以我们需要什么,所以在所以在添加好联系人之后,我们应该使用什么?使用on。So。的钩子。在。重新去获取全部的练习列表,好同学们,这个小小的细节啊,所以这时候我们再重新操作一下啊,我点击添加,然后就写上面写上一个啊CA1吧哈CAE,然后写上个电话号码。
11:12
然后这里随便写个身份证号码哈,点击添加。啊,同学们这时候呢,回到上一页,上一页当中让他执行了啊,我没保存同学们哈,这面刚才我是没有保存,我再重新操作一下哈,在呈序列表当中点击添加,然后进行C2,然后呢属一个审核号码。然后这里写一个深圳号。啊,同学们看到没有哈,就是回到这个当前的这个常用执行人这个列表当中,它会自动的去获取重新的列表,所以这里一个小小的细节需要提醒大家的啊,在我们完成了这一个征的流程之后呢,我们到下一个知道删除了,删除的操作呢,只要谨记一点就好,他们任何的删除操作,我们都需要对用户进行一个提醒,让他在二次确认之后,我们真正的才去执行删除,所以同学们在我们列列表当中,我们是怎么做删除的操作。
12:11
我们在删除的按钮当中绑定一个事件出版出版社这个啊to的事件,在这里面我们执行删除之,删除之前我们做什么事情啊,我们这里面先对它进行一个提醒,我们用了什么so model。So的当中的情况下,就是我们要对他什么,就是提醒用户删除操作。要确认OK,这里面我们什么提醒你。你确定要删除该用户吗?然后呢,第一个什么就是在success并不是这里有个销售误区啊的吗哈,就一般地区用说哈。是用户点击了。点击了选择,就是执行了选择之后的回调。
13:05
什么意思呢?同学们就是说很多人以为点击删除之后,它会有个确定的取消,一般我们以为点击确定就是成功,并不是这个小小的误区,懂吗?无论你点击取消还是点击确定,它都会只能success,这是用户做出的选择就是成功的,OK,所以这里面有小小的区别,好,所以这里面呢,我们学们is当中,这里面得到的这个回调当中,哈,回调当中的is当中的comfort。的才是。用户选择yes or no的一个选择啊,当他选择是的时候,这就为错,我们才是用户点击选择,所以这个地方很多人在用这个模态框的时候,经常这里有个小小的误区啊,同学们记住了哈,就是用户选择即实际选择之后的回调,并不是。并不是选择了。确定的回调。
14:04
们这里哈,这里才是。才是用户选择yes or no的一个情况,OK,然后这里面呢,用户选择,当你点击确定之后,我就执行请求了,把当前得到的这个ID,但我们也是绑定蓝牙绑定在这个节点上面,通过data set的形式进行一个传参啊,然后把这个参数传到后台,然后再进行删除,删除成功之后也要进行一个提示,并且我们是不是要重新。删除成功。之后就要么就是重新更新啊。里面。啊,这个常规操作啊,剩下的就是用户点击取消了哈,这是我们看一下得到的效果,取到我的中心乘车人,然后再点击点击删除。然后这里点击确定。啊,然后内容就删除成功了啊,同学们一定要记住哈,在用户删除的操作当中,一定要给他一个二次的确定,不然我们误触的操作就直接把用户删除是非常不合理的。所以这里面请。
15:09
用我们这样的对应的一些业务进行一个,让用户再去选择一个流程啊,接下来到编辑,他们编辑的流程,其实跟我们的这个。更改的流程是很像的,无非有个什么区别呢?我们在编辑用户的时候,我们需要做么?我们需要根据一个多了这一步。就。相比我们的添加操作哈,编辑就是需要先获取当前的联系人的基本,谢谢。啊,所以同学们,我们在这里面点击编辑就会去到a link这个页面当中,在页面当中一开始我们有一个特别操作,获取连线信息的一个操作。啊,在这里面得到连线的信息之后呢,我们才对这个表单进行处理啊,其他的业务逻辑跟我们的增加的流程是差不多的,请求接口改变了,改成了这个地方。
16:11
啊,但我们现在的代码当中是什么呀,我们是只允许你修改什么,只允许你修改你的联系电话。啊,看到吗?哈,这里面我们只取到嘛,取到了放啊,虽然这里面我也写了,但是上面用到的啊,我在这个接口当中,因为我只传递嘛,只传递了这个对应的一个。封的号码啊,但我说这是我们的一个局限啊,就稍微有点区别啊,因为为什么我是这么设计的,同学你想看一个人一旦你认证成功了,你身份证号码能轻易改吗?你也不能轻易改你的名字吧,对不对,说我们这里面只允许你去改你的手机号码。啊,这里面我们就什么啊编这里面提示有点错误哈,就是编辑成功啊,对应的这边就是有编辑失败的一个提醒啊,我们会去对应内容进行一个提示。啊,这是我们的编辑操作啊,这边我们可以改掉他的手机号码。
17:01
0002,然后点击啊,下面按钮有点变化啊,我们把这个按钮改成改成编辑。OK,保存一下,下了重新更新。然后呢,我们去到我们的这个从人管理这里面,我们对于啊,再进行一个编辑啊,这改成零啊,然后点击编辑。啊,填写编辑成功,然后我们再看这句去是否发生变化,同学们哈,这里面已经修改成功了,好了,到了这里呢,我们就完成了对于我们城市人的管理了哈,当然记住了,同学们,我们还有另外入口哈,我们在这个乘车的这个选择当中,里面是个对应口的,在开始说我们讲过也可以在里面进行一个。体验和测试,因为我们实际上在更方便,不可能每次都要用户去到我们的这个用户管理。
18:01
当中进行一个调整,我们还可以在这个地方接下来快速的去对晨晨进行添加的操作,好了同学们啊,这节课就到这里结束了,我们下节课再继续讲解其他的内容。
我来说两句