00:00
好,嗯。我们先来回顾一下我们昨天讲的东西啊。昨天呢,我们主要是去做了两个方面的东西,一个是。首页这个数据的异步显示,再一个呢,就是我们注册登录功能的一个页面效果。大概是这样的情况对吧,好。我们来看一下。也就是说现在说的一步数据显示,也就是说数据是从后台去获取的,那我们前台需要写哪些方面代码了,其实就两个三个方面应该说对吧,一个是。肯定搞了是吧?接着我们说过,从后台获取的数据是不是都要用VS来管理啊?那这里面肯定也涉及到VX的一些代码。那最后肯定数据肯定是要在主界里面进行义务展现的。
01:00
那也就是说我们前台应用主要就是这三个方面了。那X这一部分呢,其实并不是特别难啊,因为我们一共这里面就两个模块对吧,一个叫X等于GS。它其实是用access加promise来封装了一个请求的一个函数。再一个呢,是接口请求函数的一个模块。那就说我们每一个接口是不是都对应一个。特有的一个请求函数吧,那也就是说我们要去请求某一个接口,只需要干嘛?是不是调用接口请求函数就可以?这里面这些要求大家必须能够去会根据接口文档去写接口请求函数。这个要知道,尤其是要传什么参数啊,对吧,名字叫什么呀。返回值是什么?其实返回值我们的返回值都确定的,对吧?啊都是promise。
02:02
好,因为我们是一个前后台分离的项目,在开发中它是不是就是一个快率啊。对吧,那开发中跨域最简单的解决办法是用什么?代理来去做对吧,啊代理来做,那这里面啊配置倒没什么,主要是大家要对代理有一个理解。嗯,对于浏览器来说。他知道代理的存在吗?不知道,那也就是说浏览器提交的是对谁的请求?浏览器提交的是对当前前台应用的请求。他根本就不知道服务器的存在。我们不有服务器应用和前台应用吗?也就是说我们的前台应用假设是8080,而服务器呢,是4000对吧?浏览器是把请求提交到4000,还请交到8080。把你对很关键,这个就是大家要理解的地方。
03:04
对吧,还是请求的是8080对吧。但是啊,背后当我请求8080,其实8080啊,这个也是有服务器处理的,其实是前台服务器和后台服务器的区别,这个要知道我们的前台应用,我们的前台应用是运行在前台服务器上了,而后台应用我们不会后台应用代码吗?它是运行在后台服务器上的,懂不懂,只是前台服务器监听的账号是多少,8080,而后台服务器监立呢?是什么?事先这个搞清楚啊,应用和服务器之间的关系,我的应用是运行在某一个服务器上了。对吧,我们的前台应用要不要服务器支撑。也是运行在服务器上的,懂不懂,一旦我们通过虚拟地址去访问,能得到一个资源,说明必然是有服务器存在。
04:02
这个能不懂啊,包括我们的后台应用自然也是运行在服务器上,只是他们俩是两个不同的服务器啊,一个是8080,这个一定要清楚啊,一个是4000。对吧,那我们的前台应用服务器,除了有这个,除了有我们的应用以外,它是不是还运行着一个代理的一个代码啊,我们称为代理服务器啊,实际上就是一个执行能够。进行代理的一些程序。他能干嘛呢?它其实啊,它也是运行在我8080上面的。那我们的前台应用在发请求的时候,发的是对多少的请求?8080的请教。能不懂我的代理服务器,就我这个代理程序就会干嘛了,拦截这个请求对吧,最终来帮你去转发给谁去转发请求什么事千,那转发请求事千,最终4000是不是返回了一个结果。
05:11
对吧,那带你他用吗?他不用。对吧,他本身不用,他只是帮我们去转发请求,得到数据以后呢,你刚才不被他拦截了,那他自然就再交给你,也就交给我们的前台应用,对不对,交给我们的前台应用。也就是说,你要知道代理是什么东西。代理是什么东西?他的作用是用来帮我们转发请求的,代理是什么东西啊?咋又说不上呢?到底是什么呀?那时候的作用,作用是转发请求,关键是什么东西?你比如说我的前台应用对吧。首先来说它是一段,它是一些程序对不对,而且这程序呢,能够和后台进行交互的程序,能够给用户展现一些数据的程序,对不对,那你说我的代理是什么呢。
06:13
但你是什么呀?其实刚才我说过了,这个代理运行在哪。前台服务器上对吧,它可不是什么服务器啊,不一定是服务器啊,实际上是一张程序啊,是一些程序也跟我们的前台应用一样,只是前的角色不一样而已,我们的前台应用是用来给用户进行交互的,展现给用户看的。能够跟后台进行交互的一些程序,那我的代理服务器呢,它其实也是一些程序。啊,接着有两个方面,一个方面是说这个程序运行在哪个位置。你一个程序肯定要运行在某一个,因为它是来处理请求,拦截请求之类的,那肯定要运行在某一个服务器上,运行在某一个端口上面,对不对。
07:08
那它运行在哪呢?是运营在我的后台,还是运营在前台?对啊,这很关键,一定要想清楚。你不能我一说你一过。自己想清楚啊,代理服务代理这个程序,我们有时候也称为代理服务器啊。它是运行在前台。服务器上了,那也就是说他肯定相当于监听的是哪个端口。8080对不对,8080。这个这个知道。啊,那也要我们,我们对于前台应用来说,他发的请求还是8080的请求,所以浏览器开的是8080。对不对,只是我们的代理他的作用,他其实是去拦截我的请求,并帮我转发请求,首先他就知道,我一发请求出来他就知道,对吧,他拦截请求主要是为了帮我去转发请求,那有人说老师他跟我转发到哪去了,你是不是有些配置来告诉代理。
08:18
对吧。这个能够去搞清楚啊。最后还是得靠自己大去说,反正我已经说了不止一遍了。就抓住一些关键点,因为这些关键点是容易被问的。啊,它运行在哪里,它是干嘛的,它什么东西啊。对不对。很多时候大家要去理解一个东西啊,需要去总结出来关于他的几个问题,那个几个核心的问题能够去回答。啊,关于代理呢,我们就先说到这里啊,接下来我们需要去啊写VX相关的代码。
09:03
那你就得知道我写VX要写些东西对不对,一上来我们除了下载VX这个包,这个肯定是没问题,肯定要下。我们写编码的时候,一上来是干嘛呀?你说我写VS代码下载完以后。干嘛赶紧说?引入对呀,一上来我就创建好几个JS文件,简单来说就是对吧,建一个文件夹是吧,现在在文件夹里面是不是创建好一些模块啊。好一些模块啊,State index state,还有什么store啊,Ts actions get action。所有相关的模块通通进行创建好。对吧,那下面就是分别去实现它里面的各个模块里面的东西,那就说你要知道每个模块它的作用是什么,对不对。
10:04
啊,State,我们这个地方是不是需要去有一个概念叫设计state,什么意思呢?其实我这个状态里面到底包含哪些状态属性,因为我们是不是要从后台获取数据啊,所有从后台获取数据基本上都会放到SP里面去。能懂吧,你说老师那数据什么类型的,那就看你得到什么类型的数据了。对不对。好。接着啊,有action和mutations,以及我们的这个store里面的index。啊,尤其是这个这个store其实是比较简单的啊,就是store的最终的那个index是固定的一些一个代码啊,Mutation里面主要是去更新state的对吧,Action里面呢,呃需要去,呃大家看到,因为我们重点是不是要去写E,不简单一个。
11:02
对吧,就包含一些衣服再买去。那我们这里面定义E100必然会用到什么呢?Think wait吧,因为我们不是用这种方式简化吗?下面流程就是基本流程是发送,而这请求得到数据,得到数据以后再去。com什么,大概就是这样的一个流程。啊,整好的时候呢,需要去配置这个没什么啊,其实基本代码就这一些。啊,下面呢,我们来组建要去异步显示数据,大家想想看,我们异步显示数据,我得做些什么事。我的组件里面得做些什么事,还记得我前面说过啊,123。第一步。触发谁的?触发异步调用来干嘛去?从后台发请求获取数据呗,只是说数据获取出来放哪里是里面是不是第二步。
12:06
干嘛,是不是读读哪里的数据。是不是里面的数据,第三步是模板里面去显示数据,就这么回事。基本的就这三步。啊。一般呢,我们会在mountain里面是不是PA分发一个action呢,对吧,分发触发一个action调用啊,接着在接着我们通过map state啊去读取状态数据,对吧,接着我们在模板中干嘛显示数据。模板中啊,下一个总结一下,模板中显示数据来源于呢,有三个data自身的状态数据对吧?Pro外部传输数据,还有一个计算属性,下面要说计算属性的数据来源有哪些。
13:02
你比如说就是我根据谁来计算。对,哎,还有什么。还有别的computer什么意思,就我有A计算属性,B计算属性,对不对?这个B设计计算属性,可以根据A计算属性进一步进行计算。可以,当然还有我们V里面的什么state,或者是get。基本上就是这些了,没有别的了。啊,你把这些东西搞得特别清楚是非常有用的啊,好,我们在显示异步显示轮播图的时候,稍微有点费劲的地方说一下,那首先呢,我们肯定要从VX里面是不是读取食品分类的数组啊。对吧,但是这个地方要知道它是个一位数组,是不是它是个一位数,而我们最终要显示的数据需要是个什么二维数组,所以我们就有一个计算属性,要做一个事情,根据异物数组生成什么二维数组,这里面一定要用计算属性,对吧。
14:15
好,下面在显示S维塔的时候,有了二维数组就好了吗?不是我们说在显示是不是不能形成轮播呀,默认不能形成轮播啊,我们接着。我们用的是什么呢?诶这个是吧,我加什么?哎,我们好像用的就是water监视嘛,对吧,监视属性的改变,一旦属性改变了,说明数据是不是来了呀,来了以后我下一步这要干嘛呢。当界面什么这个当界面更新的时候,是不是才去触发毁掉啊,嗯,第二上面这种方式还能用啊,这是我们自己设计的一种方式,后面呢,我会跟大家去用啊。
15:02
这是关于一步显示数据这一个啊,这种事情是大家必须能够掌握。因为大家去做项目是这种是最最普通的一些效果就一不显展现数据,如果你这些事情你都做不了,那你即使你找了一个12000,一万三一万四都没用。啊,我前面就跟大家说过了,大家做大家做不下去,有或者说不能说大家做不下去,有的人,有部分同学啊,极少数同学,每个班都有那么一两三个就做不下去的,原因其实非常简单,并不是因为它难的功能做不出来。对吧,就很最直接原因就是它简单的东西做不出来。啊,你可以进了公司以后说我忘了怎么发请求,这忘了很正常,忘就忘对吧,忘了其实是不可怕,可怕的是你忘了以后你不知道去哪学。
16:02
你心里就慌,就不知道干嘛,就是耗,耗一天两天,三天四天,一周以后,既然一个请求都没发出去。这就是挺恐怖的一件事啊。那你想公司肯定不会要你呀。对不对啊,大家要至少要保证啊。把基本的我们讲过的这些都要能做,你说有一些特别难的,你做不了,这是比较正常的,你多花点时间,说不定也能磨出来。你的功能就是磨出来的。这是这个,那接下来我们去讲一下登录注册的一些界面相关效果,没有去前后台交货啊。嗯,涉及到什么切换登录方式,手机号的合法检查,这个用什么来着。是不是正则啊,以及计算属性是不是啊,倒计时的效果又用了什么?循环定时器对吧?循环定时器好,接着切换显示隐藏。
17:08
还记得这里面其实有两个点,一个点是我们应该有两个输入框,对不对,一个是text的输入框,一个什么password。是不是切换显示隐藏他们呢?还有一个是引我们是不是有一个移动动画。对不对,一个小圆球小圆圈的一个移动动画啊好,下面一个就是前台的一个验证提示,这里面呢,我们写了一个自定义的一个组件,其实完全可以用me UI来做啊,后面我们就会用me UI啊。这个其实你要说多来也不至于啊,我们主要是做一些前台验证,大家要有这个概念啊,什么叫前台验证,什么叫后台验证,这个要清楚。好,这第三个呢,是。需要大家去知道的一个东西啊,这个其实也很关键,就是大家。
18:01
经常出问题啊,就是一些前后来交互出的一些问题。啊,我去后台发请求啊,我最终也写了代码是吧,界面看不到啊,那是哪些情况呢?那我应该有一个什么样的基本的调试的过程呢,对不对。啊,这里面啊,大家看一下,我跟大家去总结了这三步啊和三点,第一个是你要去知道如何查看你的应用是否发送某个请求,对吧,到底有没有发请求啊。你见面没看到你写的代码就一定发了吗?不一定,可能代码根本就没执行,一不小心把方法名写错了,对不对?这是有可能的。所以你一定要知道,先确定到底面发这个很好确定打开谁。打个水浏览器的什么来我都懂吧啊,这个就我就不再去看了啊。
19:00
打开浏览器network,这个是经常我跟大家去问的东西啊,再一个啊,就是发的时候呢,也可能出现一常用的一些错误的码,比如404啊,就是500啊。对吧,404经常会出现。什么意思啊?就是你请求的这个路径没人处理。老婆,你请求的资源不存在啊,这里面就要检查啊,你请求路径到底对还是不对啊,是不是有问题啊,对不对。啊,再一个因为我们开发中是不是经常要配置代理,你看你的代理是否生效。首先你的配置,再一个你的配置以后要重启,你是否有重启呀,这个也不好说,尤其是开始用的时候。再一个你有的时候可能服务器都没启动。你这慢的跑啊,我的服务器就4000,你看我服务器都没跑。你要知道你这个出现这个问题可能会有哪些方面有问题啊。
20:02
再一个啊,后台返回数据,但页面没有显示,因为我看的那个后台返回数据啊,它没有显示。对吧,返回数据,只能说我是不是获取了数据,但是我们说过了,数据是不是得放到B里面去。那我是不是得检查一下,怎么检查。是不看我们的看下工具啊,这个应该会啊,我就不带大家去一个看了啊。这个是反复跟大家强调,但一定要会能够利用工具来提高你的开发效率。再一个啊,有人说老师我B是不是有啊,怎么就不显示了对不对,那你也得看你的组件有没有毒啊。对不对,你要组件没有读,是不是也没法显示啊,真的是。就这些嘛。
21:00
你有读也不能代表我这里是是否读完,是读取正确的,你别写了一个错误的对吧,我本来状态里面是A,你写了一个读E,那怎么能读出来呢。你说A和B我肯定很清楚,关键是有的时候一个单词你ABC你没看清楚,你看成abd了。这是有可能。嗯,大家一定要注意啊,你可能出问题的点,把那些点。给他都看一下。平常的时候啊,出了问题一定要自己改,多改多解决bug,你才有这方面的能力,你就你的你的嗅觉就特别灵敏。你这改的多,你才反应快,你要改的特别少,那你反应就很慢,这很正常。啊,这一个部分这个啊,关于关于请求相关的出的问题,大家可能是是特别特别多的啊,大家以后工作也可能肯定会出现这样的问题。但一定要能够去利用工具,无论是浏览器本身的工具,还是浏览器的插件,对吧,都要会用。
22:07
其实我们每天都在用啊,大家平常课上看我或者听我讲课的时候,你一定要注意我在用什么样的,用什么样的操作,这个操作你会不会,你要不会,那你一定要用心记一下。行,这是关于我们昨天讲过的一些东西啊。
我来说两句