00:00
好吧,来啊。我们先还是来看一下我们上课讲的东西啊,上次课呢,我们主要是讲的这么几个部分,第一个呢,是去完成登录注册的功能。接着呢,去搭建了商家的整体界面。第三个是去实现了一个Mo数据,或者叫Mo数据接口的这样一个操作。啊,最后呢,我们去做了一下那个商家头部的那个组件。大概就这些是吧,好,我们现在看第一个就是完成登录注册的功能,就前面呢,我们做的是一些界面相关的一些效果,那后面呢,我们去实现功能,那首先我们实际上有两种登录注册的方式,对吧?啊一种是呃叫短信登录,实际上是利用的是什么。手机号和短信验证码吧,没问题,第二种登录方式呢,是密码登录,实际上需要三个数据,一个是用户名,一个是密码,接着是什么图片验证码。
01:08
啊,有这么两种登录方式。那登录它是有一个基本流程的。包括注册也是,它都有一个基本流程,嗯,什么意思呢?其实它首先会进行有一个概念叫表单的什么。前台验证。就做一些基本的一些合法性的检查。那为什么要做?这样做有什么好处?就是减少请求对不对?减少请求你可能说的格式本来就不对,是不可能正确。对吧,从格式上你就不对,你把那个请求提交给后台,那不增加了后台的压力嘛,对吧,所以我们在前台呢,一般会做一些简单的呃,合法性验证,那如果不通过了,我们会有一个什么。
02:00
提示,而且我们这个提示的组件是不是自己写的呀。对吧?啊,这个要知道,那验证通过以后,那我们下一步干嘛去,是不是发这请求啊啊得到返回的结果数据,那得到返回的结果数据,那结果数据一定是好的吗。不一定,因为我们无论是登录还是注册,有两种结果。成功或者什么失败,这个失败并不代表我请求出异常了,这个搞清楚。能懂吧,失败并不代表请求是异常了啊,那异常了肯定失败了,那必然的。对吧,我们这种失败是功能上的失败。那。那我怎么知道是成功了还是失败了呢?我们的数据是不是有一个标识属性,叫什么code,如果code的唯一说明什么,失败了就不成功,那不成功我是不是显示提示。
03:03
那第二个呢,是零零呢,就代表成功了,那成功了我相当于是不是会得到一个什么数据。我得了一个什么数据,接着我去取什么数据。如果我去登录去。达到一个什么。我成功了,我们说我们的数据结构,我们那个阶层数据就用了三个,三个部分组成code的message和data。现在我的问题就是,Data到底是什么样的data?是什么样的数据?也就是说date里面存的什么东西嘛。现在登录成功了,Data里面存什么东西不知道吗?说的什么用户信息呀。嗯,这个地方如果我登录成功了,我存的啊,它会返回一个一个用户信息给我,接着我就要去保存嘛。
04:07
这个保存是保上哪去啊。是X的state里面去啊嗯,下一步我们就是要去啊,记录或者存储啊,记录一下用户的信息。这为什么要记录啊?你没想过?你得想啊,你进入了,你你登录成功以后,你最后是不是要去进入某一个其他界面,比如说个人中心,比如说首页,对吧,那首页和个人中心要不要发生改变了,要他靠谁发生改变了,那不就靠state里面的user吗?登了不,我们个人中心那个界面是不是也有两种情况,一种是未登录的效果,一种是登录以后的效果,对不对,也就是说如果已经登录了,那个人中心是不是会显示用户的相关信息,用户名或者手机号对不对?
05:03
开始有显示吗?没有,你没登录之前怎么显示了,根本就不知道你是谁吧?这个大家应该是有一定的体验的,大家进入比如说你去淘宝去什么,你进去以后如果已经登录了,是不是会显示你的用户啊,如果没登录,它是不是显示一个登录注册的一个一一个文本提示让你去点击对不对对呀,就这样你必须存下。甚至于我们最后还要是不是实现一个自动登录的效果。对吧,我们要想实现自动登录,其实也非常简单,需要去自动的去什么发请求,获取用户信息,对吧,如果能得到用户信息,是不是就能实现自动登录了。那反之,如果得不到了。那肯定又不能自动登录嘛,你用户信息得不到对不对啊。这个要需要去知道啊。
06:00
哎,我们这个里面提示的里面用到了一个u view的制定世界还记得吧。就是它有一个绑定监听和分发事件。啊,这个不是我们有一个自定义的提示的组件嘛,里面就用了自定义事件啊。这不也是我们有组建通信的一种方式嘛,对不对,好。最后一个这里面需要注意的,其实也说过啊,就是使用大家跟一旦跟后台进行交互的,大家需要去知道一些使用network来检查查看请求查看哪些东西,我跟你说有哪些东西可以查。就我的请求,到底哪些东西可以看呢?其实就是我们接口的四个组成部分,对不对,四个部分可以看啊,第一个路径参数,请求方式和响应数据,好,那我问你啊。这个参数在哪看呢。
07:02
大家知道那个位置吧,啊,这里面有一个,它有一个有一个嗯,请求相关和响应相关的第一个它那个它那个network里面不有好几个选项吗。它是它也是个table可以切换的一个几个table对不对,而第一个窗口里面,它的第一个子窗口里面啊,就是会显示一些相关的信息啊,第一个呢,肯定就是你的地址对吧,接着就会是你的请求方式。那我的请求参数在哪里呢?汽车在哪里?那自己都没有注意过啊,只是知道看,看了以后才知道吧。仓鼠一般在哪个位置?在最下面。也就是说,在第一个窗口里面就能知道请求的情况,你的路径是多少,请求方是多少,你的参数是多少。
08:06
说的意思就是你你你不去看,蒙着眼睛你都能知道。你要做到这一点,你说白了,你就你要对这个东西很熟练。下面啊,另外一个呢,就响应数据,它有专门的response对吧,因为我看了没错了,应该是第三个啊,就会是response,大家选择这个response就能看到。这个情况。哎,有一种特别的情况啊,就是你打开子机上面什么都没有。那说明什么?前面又没什么问题。什么都没有。对吧,OK。什么?要说明什么呀?你想想看,里面什么都没有。说明后台没有返回啊,对不对,这个跟404还不是一样的啊404,那他会返回一个404的一个提示,对不对。
09:10
关键现在什么都没有,空白的。大家就没碰到过,我我就觉得有的同学应该是碰到过的啊,就是大家应该是通过窗口启动,有的时候那后台容易卡死。就是大家譬如说大家现在把后台启动了,这不启动了后台吗?啊,有的时候你去点了去操作看,有的时候去去选了,就容易导致于你的这个你的这个位置,尤其在开发过程中容易容易卡在这里。对吧,那你怎么办呢?其实非常简单,你按一下enter键,嗯,操作一下,它就会把所有的请求都返回。以前的后台卡住了。啊,这种情况也是有的啊,大家注意。再一个呢,是使用view的Chrome的插件去查看。
10:03
它其实可以查看两个方面的东西,因为它包含两个插件,一个是view的插件,一个是VX的插件,对不对?我们通过U的插件可以看什么呢?你告诉我看什么?首先可以看组件的结构,整个组件的结构也就是什么意思呢?我整个应用里面有哪些组件,是跟他们什么关系,怎么组成的?嗯,就上一次就有一个同学就是写了重复写了两个shop list啊,你看它的界面就是有两个列表。一模一样的两个表。你通过这个view的插件,你就能看出来它的整个整体界面,它的组合是哪些组件组合的对不对,跟你的设计的是不是一样的,首先相当于是看整体哪些组件,组件之间什么关系,下一个看什么,看组件内的数据。
11:03
能懂不组建的的数据有好几个,譬如说我接收什么属性,对吧,我有什么date,我有一些计算属性。这三个方面都可以看,能不能因为这些都是相当于组件那面能够给模板去显示的一些数据吧,我们说模板里面读数据不是三个来源吗?对吧,这三个来源都可以在组件里面看,你只要选中那个组件标签是不是右侧,就能看到某个组件内部的数据。这个需要知道,这说看主机的两部分啊。一个看整体,再一个看某一个具体的某个组件内部的情况,这是说的VIVO的插件,那另外一个呢,是VX的插件。件呢,其实有两个部分可以看啊,两个部分可以看,第一个看最终当前的状态,那么呢,看最终当前的状态是多少,就看当前是这个里面那哪些数据你想看哪个,那就不好说了,可能abcd你想看A,你想看C都可能再可看的就看过程。
12:22
大家要知道,我们要想改变单单是不是调到某一个tation,还记不记得那个VX里面的那那个结构,它左侧在VX那个那个插件的左侧显示是什么MU调用的一个过程,也就说你调用哪个MU是一还是二还是三,对不对,而且你选中它能看到变化前和后的一个状态改变。比如说你要显示当前的数据,你肯定要去执行A险,最后你打开看没有。对吧,没有看到这个A,最后没有这个A,按应该汇去掉这个A形的,对不对,那没有掉。
13:10
那是不是就能把我可能错的位置缩小到一定的范围,对不对,那我接着找为什么没掉对吧,我的请求有没有发,我要请求发了以后是不是我调错了。对吧,都有可能。记住了啊,这个看一个看结果,再一个看过程,看过程里面有个非常重要的就是看mutation是不是按照你的想法去调的。当你要很清楚你对这个代码要有一定的预期,什么叫有一定预算,你你的设计里面它应该是怎么调的。你要知道你连应该怎么调你都不清楚,那他这么调法到底对不对,你就不太清楚对吧。这个要搞清楚。
14:01
这些调试的操作都是大家必须得非常熟练的,他不仅只能会,只会不行啊,下面一个通过第八个语句来调试。这个呢,对于我们的模块化,组件化,工程化的项目非常关键,就大家要知道我们的项目写的代码。跟最后运行代码是两个代码对不对。因为它不要编译打包的嘛,对不对,所以说你直接想说去在GS里面去直接在运行的浏览器GS里面去打断点,平常我们还记得我们在调试那个vx view的源码的时候,是不是直接在浏览器里面给源码打断点。对吧,啊,这个已经不太现实了,因为我们代码进行了编译打包的处理,对吧,那怎么样锻炼调试了,其实也比较简单,我们说过调试啊,启动调试不是两种方式吗?一种是自己去在窗口里面找锻炼,一种是写什么第八个语句。
15:04
这种吧,啊这个也是非常常用的。那关键点就在于你在哪一个位置写第八个语句比较合适对不对,其实就跟我们在哪个位置打断点比较合适一样啊,是一个位置。这个我也不是不只操作一遍两遍了,应该是操作是啊,希望大家能够懂。好,这里面这里面有一个时差和行参匹配的问题啊,这里面尤其是我们在传参数比较多的时候,我们如果我们定一个函数FN对吧?传参数如果达到三个或者四个,那我们会做什么事?那我们在定义行参的时候,我们是会这么写啊,写个大括号,写个A,写个B,写个C对吧。记住了,我定义的,我定义的形参是这个样子的,那也就是说我接收几个参数一个。
16:04
对吧,我这此此时接受的是一个参数,那你在执行调用的时候啊,那你不能传A传B传C,你这么去传对吗?不对,这样你传的是三个参数,那有人说第二个和第三个有用吗?没用,只是把A是不是传给它了,那么A传给他,我a.a.ba.c有值吗?是不是没有值?这个什么呢?嗯,那也就是说我们传的时候是不是也得传对象。能理解吧?这地方就经常我们一不小心就可能出错,出错不要紧啊,就是你一不小心写错了这个一点问题都没有。非常正常。啊,如果你能,呃,关键是就看你最终能不能把这个问题找出来,把它解决掉,或者说能不能很快的找出来,首先保证能找出来,接着要提高速度,提高速度其实是你的你的编码的那种那种感觉,那种那种敏锐性强不强。
17:15
二。这个敏锐性是需要平常大家去不断的积累,去不断的想这些问题啊,总结这些问题,你才能反应更快。这实际上是最终大家去提高编码效率的一个非常关键的一些点调试啊,是大家最终能够去成长的一个很重要的一个途径。你写项目中,你说你不出错,那基本上不可能。对吧,那也就是说你怎么利用手里的工具啊,怎么利用你以前编码的一些经验来去很快的去定位问题,去解决它。其出错是必然的一个过程,但是解决问题是最关键的啊,这是这个。
18:06
那后面呢,就相对来说比较简单了,第一个呢,是后面一个就搭建。商家的整体界面,首先我们知道了我们那个商家啊,他的整体界面是一个,首先整体上从布局上是一个什么结构。上面有一个头部中间是个什么。是不是一些table广啊,接着下面是我的一个切换的部分,是不是,而我table里面有几个选项,三个,实际上是三个路由链接吧,对吧?三个路由链接这种结构非常常见。懂吗?我们一个是一个是我们主页面,还记得我们主页面的结构不。有个头部是不是有一个这个。啊,接着有一个底部,底部有是个table,就这种啊是非常常见的,包括我们前面练习过的啊,左侧是一个table选项,里面有很多菜单可以选,这种是不是也非常常见了,这无非就这些结构。
19:09
大家一定要能很快的看出来,看出来什么呀,整体结构这个非常关键的。因为你一上来就碰到这样的问题。那也就是说我们最终啊,大家看出来整体啊,我们的这个啊,我们当前这个是我们要研究的目标,我们整体是不是商家也就shop呀,它是个一级路由吧,对不对,那接着我们这三个路由,三个路由链接,它是不是对应三个路由组件,而这三个路由组件是说的什么子路由,也就是二级路由呗。对吧,一个二级路由肯定是某一个一级路由的子路由,这必然的。能不懂,嗯,那整体啊,我们就能搞清楚啊,我们整体的一个结构,说白了就是大家要需要去拆分界面路由,这个是大家必须要掌握的能力。
20:09
后面大家自己实战的时候也会碰到这样类似的问题,需要自己去拆解啊,好,后面这路由定义要配置使用,这个都没什么问题,这个并不难,主要是前面啊非常关键,拆好了后面写倒没什么。啊,第三个呢,我们要去默数据接口啊,也叫模拟数据接口,这个地方主要说的是啊,我们现在做的是前后台分离的项目。就有个前台应用,有个什么后台应用,前台应用后台应用是独立开发的。就扔了吧。一般来说是两个不同的程序员,或者甚至好几个不同的程序员去开发两拨不同的程序员,对不对啊,一波要开发后台,一波开发什么前台。那就有一种可能性,说后台的接口还没定义好,我该怎么办,对不?或者后台的接口现在访问不了,我的前台应用能不能写,能写,但是能写你得要有,要有提供数据去写吧,因为老师那我就写静态页面了,那我写静态组件了,这样总是不好的,对不对?我怎么样让你写的东西更接近于真实,最后的情况。
21:22
对吧,那此时我可以去通过一种方式来去模拟提供一些接口,对吧,虽然说模拟提供的接口的数据可能是假的。但是我要让它接近真实,这意思吧,啊,这个地方啊,首先大家对前后台分离有一个比较好的理解,其实这个比较简单。嗯,再一个呢,大家要到Mo GS啊,有一个理解和使用,我们最终是不是用Mo GS这个库来实现的Mo数据啊,对吧,最后呢,我们啊涉及到一个GS啊阶层的设计啊。
22:02
这什么呀啊,我知道了,这里面是拖动的,估计是。啊,就是我们要去根据实际情况呢,来设计整个阶层数据的结构啊,我们说过了,模拟的接口跟真实接口的阶层数据必须什么一致啊,叫结构要一致对吧,但是呢,它的值可以不一样,对不对值当然没办办法保证一致。能不能,但是结构,什么是结构呢?在哪些部分属于结构了啊,类型和什么名称,你就看那个东西,你指定那个东西哪个是名称,哪个是类型,对吧?啊。好,这是这个,那最后呢,我们去讲一下那个商家的头部组件,那商家头部组件呢,我们的接口相当于已经设计好了,对吧,可以去访问的。
23:09
那下面呢,我们就实际上要异步显示数据效果的一个编码流程,其实前面我们讲过有写三个部分吗?啊,这VX就什么组件是吧,呃,X的我们是不是有一个X的请求函数,有一个主要是这个,这个我们找个引好。对吧,就一个啊,主要是我们是不是要去写接口请求函数,对吧,我们这一次的接口情函数还需要用到代理吗?不需要对不对啊不需要。所以我们在写路径的时候就不要以斜杠API开头了,能不能还有一个事情?啊,还有一个事情就是我们啊,我们去写了,写了它以后我们不定义了嘛,对吧,就相当于这样,我们的接口是不是就用上了。
24:07
那我写好这个文件,我的接口就有访问了吗?能吗?不能,任何东西都是任何的,任何代码都是一样的。你写了一个模块,你都不用它,怎么可能起效果呢?不仅是这一个啊,任何你写任何GS模块那都一样,你写CS也一样,你写图片也一样,对不对。说白了你要不用上,它就是个死的东西,对不对,说白了是不能使用的,你得用上,怎么用上呢?说白了我们当前这个模块是不是需要去被加载一下才能用上,这个接口是不是才能用上呢?那什么叫接口已经定义好了呢?其实就是需要我们在这里面给它进行一个什么。是不是引入?听到不也就是说你没有第十行这条语句,那三个接口能访问吗?不能就是说一个事情还是那个事啊,就是你忘了写非常正常,就是你定义完定,定了半天,最后忘了写之后,这不人之常情。
25:13
你最后一访问也访问不到404啊,没人处理嘛,你这个请求必然是404。那没人处理,那下一步就很关键了,下一步你要是能自己想办法找出来,那这个慢慢整,你就能够肯定同类似的问题都能解决。如果你这个找不出来,那后面类似的问题你也有,也有可能找不出来,或者说有时候我靠运气也找出来了,那个靠运气不行啊,你你说白了,类似出了三个这样类似的问题,你解决一个都不能说明问题。听到不,你要保证出类似问题我都能解决。这就是没问题的啊。大家注意这样一个情况,就是出问题还是这样,出问题很正常。
26:04
啊,你不要觉得我老师你上课你怎么就不太出问题,因为我写的变多,在下面的时候也一样出问题。只是不好意思让大家看到而已,对不对?好,这是这个大家需要去重点关注的,后面呢是写VX,这个倒没什么难度啊,就是写if action对吧,去发价请求获取数据,得到数据后提交mutation对吧?我们肯定还要是不是设计那些状态保证数据啊,这事情咱已做的好了没有,而且我是感觉他这个写法还是比较好写的啊,没什么太大难度啊,最后呢,我们在组件里面啊,需要去通过dispa干嘛?去是触发action调用来获取数据,保存数据啊啊接着我们通过map state来干嘛?读数据显示吧,就不就显示了吗?
27:02
好,这里面还记不记得我们出现一个非常有意思的一个异常的情况,是经常会出现这样的情况,就can of。嗯,这种对于我们用模板去显示数据经常会出现。后面的这个。就是我一定要先理解啊,首先要看懂这个英文它的意思。啊,对吧,也就是说我在一个安find上面去读什么叉叉叉属性,那也就是说一般会这样啊,譬如说A点叉叉叉对吧,或者是a.B点差差对吧,如果是A点差说明A是什么。II。对吧?如果a.B点叉叉,那说明什么?B的值是案例方的,那说明A没问题对不对?这个要能够知道A应该是本身没问题的,对不对。
28:02
听懂不好,更准确的说可以推出来A,当前这个A对象里面没有什么。B、没有值。我甚至没有这个B属性对不对,因为没有一个属性的时候,它的属性值就是find的嘛,能懂吧。还记得这个问题是怎么导致的吗?啊,首先我们的状态里面的初始值是一个对象对吧?而对象里面的数据是异步从后台获取的。这个呢,也就带数据对象是过了一会才出来。是吧,那在界面显示的时候,他是不是先拿这个空对象去解析模板显示。对吧,但是我的模板里面啊,假设这个对象是A。对吧,假设这个对象是A,我在模板里面选A点叉叉叉行不行,这里没有问题,没有问题是不会报错的,懂能不能是不会报错的,那如果说我写了一个A啊,点B点叉叉,那必然就会报错,那么呢?因为现在B的值是什么I。
29:19
这个要知道它的整个过程啊。这个种好好啊,大家看到下面这个,看到下面这个,我现在问大家,如果我出现这样的情况啊,Can't read啊叉of,我就随便写一个of的意思是不是。他不是find的对吧,那说明跟刚才问题不是同一个问题了吧,那是类似的问题,那你说一个情况什么情况就会。对吧。
30:02
那你就说你刚按照刚才推你去推嘛啊,假设我现在是A点查他。出现这个情况什么意思?是不是A的开始的值?对不对,能不懂,那如果是a.B点叉叉了,说明B的值现在是让不是对吧。认头不啊,这个安全和让它是有区别的,对不对?好,假设是这种情况,你说怎么出现这种情况呢?你告诉我,我怎么写就会出现这样一种情况呢?怎么着?你没发现我们现在给处值的时候,我说哎,我有一个对象是吧,我给的数值是个空对象,那有人说老师你为什么指定一个人不值个浪呢,你浪费对象对对象也没用啊。
31:07
对不对,你开始根本就没数据嘛,是吧,没数据只因为浪不比指定对象更简单吗?对不对,是这意思吧,好,那是的意思,他就想我如果初始值为让它是不是初始解析的时候是拿着这个值是不是去解析模板,对吧?那我的模板里面是不是有一个for点叉叉叉有吧,到处都是,对不对。我在模板里面是不是经常到处都写点查,那我这么写着,你想想看。能行吗?不行。嗯,一上来不就报错了吗?来,现在呢,我就假设我已经写好了,哎,我当前呢,看这里,Can't read BG image of什么,那谁是浪啊?
32:09
In,我们写的这个表达式大话表式不是点BG image吗?是吧,能不懂尹老师这怎么解决啊,这没法解决,这解决出来太费劲了啊,因为我们在那个,我们说我们怎么解决来着。是不是在那个三层表达是外面,嗯,写一个为衣呀,对不对,那你如果你要负责,让你到处都是衣,我跟你说。这个什么懂啊,没有必要,是不是这意思啊,我开始啊,我这个解唯一解决方法就是去给他指定为什么空对象或者是空数组。对吧,这样能够保证什么在初始显示时两层的表达式不出问题。
33:07
但初始显示说明两层表达式开始的没有显示吗?没有,肯定没有啊,数据都没有,怎么可能显示了?这个能懂吧,啊把这两个给它搞清楚啊。行,那这样的话呢,我们就把我们还一个就是小事情,就是我们用了一个什么的传真影动画啊,今天我们还会用一下啊。好,那整个上一次讲的内容,我们就复习到这里啊。
我来说两句