00:00
现在我们先把基本的写一写。先把基本的写写,我们首先要现在的任务是发一个请求,先拿一个验证码过来。这个验证码,哎,我之前给大家介绍的时候说了,这是不是有个server。哎,这有闹的古城。在这个里面,我先去看一个东西。如此,这个里面放的路由。然后呢,我就需要这个index.gs。首先看一下这个,这我是不是注册了路由,其实这个可以不要,它删了都没关系,我们只看这吧。这不是有个跟路由吗。注册这个路由方法get,然后这一步我去word一个数组啊,我利用它来就用它来,相当于是一个验证码。初始化的一个数据吗。我问一下这一步是干嘛的?看不清是吧。
01:00
这一步是干嘛的?这是用来解决跨域的,对不对,哪一种方式啊。这叫哪一种方式?你们学解决跨域应该通常用的方式有两种。一种叫杰森。一种叫。Cars。学过吧?而咱们现在我在这用的方式不就是cos吗?Courses它如何解决跨域比较简单,首先你要知道courses是一门什么技术。哎,他只需要在服务器端去设置一个响应头,叫access control access control。后边这星号的话,是允许所有的域资源进来。
02:02
你也可以放指定的运。哎,这是cars,跨域也很重要啊。那说到这个了,再说一下JNP。他也可以解决解决跨域。但有没有讲过JSP是一种技巧而不是技术啊?一开始讲过。那么它是什么样的技巧,也是技巧是来源于一些灵感利用的什么东西?他利用的是script标签的src属性,不受跨域的限制吧。为什么不受宽裕的限制?啊。四个标签本身就跨越的。我先问一下大家什么时候有跨越的问题啊?在刚学加请求的时候,有没有讲过他有加有一个不好的地方,就是它存在跨域的问题。
03:04
跨越这个问题是谁来决定的?是这引擎去判定的。浏览器一擎。是JA引擎,记住浏览器引擎里面有很还有很多内置的引擎,其中有一个就是加引擎。还有什么G,这些都是人家内置的。而这样子存在跨域问题是因为我,而这样子引擎可以判断拦截你的跨域请求率,你跨域的资源进来。那为什么标签的src属性不受跨域的限制呢?首先你得知道SC标签的src属性,发起就是谁来发。在你们没学的时候,这个是不是已经有了?那是因为标签的src属性发的请求是浏览器引擎去发的。他根本没有通过二加斯引擎这一关。
04:01
他发的是普通的HTTP请求,记住了,不是这请求。所以它不受跨越的限制。哎,我们知道这些啊就OK,然后你要记住GCP啊,需要在服务呃浏览器端提前定义好一个回调函数。而回调函数,哎,它肯定是有个型参。这声明好。到时候你把这个回调函数的名字发给后台,后台返回数据的时候是将你这个回调函数拼接成串。调用。这是不是拼起来的,这个当初给大家讲了吧,拼接成串,中间放什么?放你返回的数据。哎,返回给前台的话,它是不是自动会调用,你提前定义好那个comeback,而我这包的数据正好是以13的形式给你注入进来,你在那个back里面去使用。
05:03
知道为什么叫JSP吗?他全名叫什么?杰森为拍。是不是这个。Json判定J层P。啊接式数据判定我们之前啊,印象中的判定是那边句对吧。那编剧为什么要用Penny这个词呢?是因为Penny这个词直译过来是填充物的意思。你们可以下来查一下。提出过,所以才用它来表示那边距。而潘尼还有一个意思叫电子。电子就是为什么他在这叫他你返回的come back,这是不是要两,相当于包了两片垫子,中间夹的是阶层,阶层的数据啊。
06:01
哎,所以它在这叫JSP,相当于这两个电子包含着它。这叫接神。大家好像刚刚对这个adjust请求和这个普通的HTTP请求,不知道我们开发请求是不是在network看。The network,你刷新一下。在哪看价值请求,在哪看全部的请求。有没有发现这有个二。二是什么意思啊,你点击这个二里面,你会发现这有一些请求。这就是发了请求,而这个正好是所有标签发的吗?对不对。你想我页面里面是不是肯定要引入这些东西。哎,在这我们能看到script标签的src属性发的,但是你点击一下这个,你会发现这没有请求。为什么没有啊,你看这三个单词什么意思?SH2正好是http request,你点击这个意思是将其他的一般的请求过滤掉,我只看诉求。
07:10
有吗?是吧,没有这些底层的东西,大家要知道一点。这东西会用吧。没关系啊,咱们接下来会经常用到它。啊,然后啊,既然讲了,我就再说一下GCP记住了,他只能发什么请求,什么类型的请求。只支持GA的请求是因为src属性,它只会发盖的请求。而courses是不是既支持也支持post?问大家宽裕,就是问刚刚我说的那些东西。来吧,我先在这儿写一点。大佛,哎,他在那呢?传一个方程进来。然后大家看我这是不是有一个BT啊,哎,这个按钮我呢先获取一下这个按钮井号BT,然后来一个。
08:12
接下来来一个function,用ta也行啊,都可以好,这呢是给他绑定一个点击事件,我呢先把这个页面打开啊,就这么一个大户按钮,对比要醒目啊。我的意思是,当我们一会儿点击这个按钮,需要你去发送一次请求。然后请求刚刚我那个no的工程里面那个路由地址。然后那边返回这个数组,大家看我这个弄这我最终res点三的时候返回的是这个数组啊,看到没有。相当于它就表示一个验证码,然后你看我这是不是set timeout,我是延时返回的,延时返回的意思是哎,模拟网速差一点。不是立即返回吗?这是三秒,我先给它改成两秒来,我先保存一下。
09:01
保存一下,那现在我们是不是得先启动这个服务器啊。这不是你当前的工程吗?我问一下大家怎么启动?找病的,然后呢。又见run。有吗?你们说的找3W,这个你们是用web启动的时候,右键是不是3W。那是web STEM给你提供的快捷方式,不要太依赖于它,假如说哪天不让你用web的。你是不是通过命令行可以启动CMD进,这不就是当前项目的根目录吗?然后呢?CD密码。你最终启动的命令不就是用弄得起吗?你是noe工程,我是不是都有自动有noe命令啊,其实你右键转的这个3WB的下边,3W也是用no起的,只不过是appto帮你分装好了。
10:08
你们是不是想说的是这个?这个命令没学过。我是一个no的工程,那我肯定是自带有nod的命令,我要执行哪一个文件,我肯定是能用nod去找到它去运行。现在我弄的是在根目录下,我先找是不是找B的文件,再找它下边的3W。然后呢,回车。其实这已经启动了。启动了。因为这没有任何的报错提示啊,然后呢,我刚刚注册的路由是个跟路由。啊,那我现在可以去反问一下他。数据拿到了吧。说明启动了啊。
11:00
这不是响应吗?那我先把这个服务器停掉它。CRC已经停掉了。大家还知道其他的启动方式吗?没关系啊,不知道没关系,接下来你不知道,我专门给你补一补。知不知道先说。不知道no的这一种,记住了,可以启动啊,你在你no的工程里面任何位置都可以用nod的命令。还有一种方式是用NPM来启动的。那这里讲的太多了,我之后我专门抽出时间给大家讲吧,其实我可以看到这儿,哎,我一看这个文件,我其实漏一眼,我就知道我怎么启动当前的项目。我再给你换一种方式去做看看啊。也启动了。哎,也启动了,哎这个呢,之后我就专门抽出时间来给大家说吧,啊这样讲的话拉的太长了。
12:02
好,现在我当前的项目启动了,然后呢,大家看咱们去访问这个地址,是不是能拿到这个数据。能拿到这个数据,拿到这个数据好像有点太快了。时间改错了是吗?哦,我就说呢,咱们是不是想改成两秒。我动漏油的话,我是不是得我看一下,我得重新重新干嘛。咱们把这个,嗯。又激动了啊。你看这在转两秒以后刷新一下没有问题,现在服务器这边启动了,那我点击这个按钮,让他去发请求,对于我来说应该也不是什么难事。到那附件儿。那这方法大家都用过吧,那接下来呢。首先我们得需要知道一个东西叫它。
13:01
用过吧。是否规定一下请求的方式啊,URL这请求的地址我的先给他空着,你们还学过什么,这个学过吗?啊。Data time规定足迹返回来的数据类型。在这是不是杰森?然后就是success,这对应的是成功的回调,如果说拿到的话,它是不是会自动注入进来一个时差。还有一个与他对应的,你发起就失败,有可能是失败。整一个方式来一个A,那接下来呢,失败的话,我就让他输出一下,没问题吧,来我们来测一下。把这个URL得拿过来放到这儿。没问题吧,来来到我们这个大红按钮这刷新一下,先看看这啊。
14:00
这不发了一次请求吗?这没问题吧,看conslo这不出来了吗?在这哎,大家一定要会用,哎,知道在这都能看些什么东西。这个是把我们发请求的地址。304什么意思啊。重定向对不对。图离线这这是什么?这是HTTP它的状态码对吧。那最常用的状态丸有哪些?上来第一个200 200表示成功304。重定向我线等一下,我问一下重定向到哪。那你们有没有?听过这个。01020304都有。咱们更多知道是304是不是请求纯净项,但是纯净项到哪。重定向的意思,发言请求重新指向一个位置而已。
15:02
指向哪?什么时候会出现304?当你有缓存的时候。也就是说304表示的是从定向到缓存,记住了啊记住了,我可以给大家验证一下。我呢,先把当前的这个缓存给他干嘛清除了,现在是不是没有缓存。刷新一下看着啊。等一下。这还是304吗?不是,是因为我是不是刚才把缓存清掉了。啊,301~303记住了,它求定向是到服务器。304是从立项到缓存。哎,其实301302303细分的话还能区分下来,感兴趣的同学可以去看一下,不要只知道它重定项不够。
16:01
然后还有我们常用的是不是还有404 404什么意思。V少,通常说是你发发送那个请求,我根本找不到,这个时候看到404,你先去查哪告诉他查这个URL,很有可能是你的URL写错了。然后还有一个。是不是有500,那500表示什么。什么服务器错误,哎,前端人员以后看到这个其实是最高兴的。也不说最高兴的吧,最好是不要看到他,因为有时候一旦项目出了问题了,你第一时间根本不知道是前端人员的责任还是后端人员的责任。然后你去检查,咔,看到500,哎,你就可以松一口气,不是你的事儿知道吧。好了,现在这一次请求发出来,验证码也能拿到了,那我们接着往下看,大家看我这段代码是专门去发请求的。
17:01
我能不能把它拿走。看着。放进来。相当于我是不是专门分装了函数,就是去发起求啊,那然后我是不是能在这去调用一下它。这没问题吧,好,接下来我们再回归到我们刚开始的需求那。当我点击一个按钮去发请求,然后发请求的同时,你的按钮最起码应该给我变一个颜色,告诉用户不能点击。通常来说是变成灰色。那我们先把这个做一下。我一点击,除了发送请求的同时,其实我上来可以干一个活。当就是当前的八吗?咱们能不能给它设一个背景色?呃,Background,哎,通常来说会变成green green代表着灰色。刷新走你。
18:03
没问题吧,但是你不能一直是灰色呀。你比如说两秒以后,我按钮要高亮显示,让用户可以再次点击。高亮的意思是这个意思。这,这叫高亮。这个知道吧,啊多量解释这个也简单,两秒以后,那我可以干嘛。是不是整一个延时定时器,这来个两秒,那接着这个里面怎么写。我,你有这个认识不?定时器的这意思指向的是window,所以你这不能直接用它,你还得是井号BTN。然后把这个颜色是不是换成它就OK了。好,这是我们第一步要做的事情。刷新走你。咔,是不是变回来了?好,颜色方面达到了我们的要求了,但是你看一下。
19:00
这根本是骗人的,也就是说你根本拦不住用户再去点击这个按钮嘛。我们要真正意义上的去限制用户,在颜色变灰的时候,他点击是没有用的怎么办?有没有想法?我先提示一下大家,禁止用户去操作一个按钮。你们说的Dis?那也就是说我是不是应该在这给他添,除了背景颜色变灰的话,应该添加一个disable的属性啊。我就分开写了啊,当this drr添加这些属性,我能用pro吧?Disabled with mom。为触,我们来看一下。刷新啊,我看一点,其实我告诉你肯定加上去了。刚刚你有没有发现这个按钮这个字变灰了?
20:03
然后你再去看检查一下这。先确认一下这是不是加上来了。好,那这个时候加上来,按理说用户现在点击这个按钮是不是一直失效的。看着。是吧,不太不太靠谱啊。你会发现虽然说加上这个Dis的属性了,诶根本限制不了用户去点击。这是为什么?再看呢,我把它换成click。注意啊,我把party start换成了K。刷新咔加上去了。咔咔咔,我这儿一直在点。现在用户又不能点了。那是为什么?我这给大家列出来了。Disable这个属性是禁止用户去操作按钮以及表达项,但是他在出这个属的时候只是针对的是click事件。
21:05
并没有针对我们的踏事件做出处理。我刚刚是不是用了一个叫touch的。在用的时候它失效了,哎,所以在我们turn star的时候,这个家伙靠不住。不要。那怎么办呀?还有没有其他的方式?既然disable的属性靠不上了,我们能不能自已去设置一些?稍微给大家点时间考虑一下这个事情,因为这个以后这些思考的问题就得你们自己去思考来稍微。先给你点提示啊,当用户一点击它。首先一点击它,哎,我我得有一个标识标,呃,标清楚用户刚刚点击过。
22:05
也就他再次点击的时候是进不来的,但是两秒以后用户再点又可以进来了。有思路吗?比如说我表示一个请求是否在发送。上面为false,或者说我这表示的是。用户是否可以点击?上来为false表示的是。可以点击。那第一次我这个on time start1进来,我应该是先去干嘛判断用户。是否可以点击。判断谁啊?Is sand如果说它为处的话干嘛?
23:05
直接return在这我表示是啊,用户。点击失效,说白了。能懂我的意思吗?是我初始化的一个值是否为false,大家想一下,初始化为false,那么当用户第一次点击的时候,这个判断有没有用?是吧,没有用啊,因为我第一次是应该让人家点的,这既然卡不住,那我接下来这些逻辑什么正常执行。然后第二次点击的时候,它就要起作用了。首先,如果你没处,我是不是直接反出去啊?那么你第一次点击的时候,你应该得干一些活。是吧。智力处。懂我的意思吗?第一次进来不进仓,但是这一步代码是不是要执行。然后用户再一次进来,是不是能卡住他。
24:02
我们先来看一下。刷新卡第一次请求肯定发了,然后你再点一,其实现在是一直失效了,因为一直是不成turn了。那这样一直这样是不行的,我们得在一个恰当的时机,是不是将这个还原成false。什么时候?那是不是在这个里边和它是同步的呀。咱们来看一下。刷新开一点。啊,第一次能看我再点,然后我一直点,你会发现是失效的,什么时候可以点,除非那个背景颜色亮了以后。现在我们已经是把把这个限制住了,验证码发了三次,拿到三条。到这儿大家能不能懂?那种好?
我来说两句