00:00
大家好,我是学习园地的特约讲师高洛峰,上节课咱们只是做了一个注册的页面,然后呢,咱们使用VNT里边的组件,这个表单的组件,当表单的组件里边我们输入有错误的时候,这个提交是不好使的,当里面输入正确的时候,是提交可以成功的,能处罚这个提交的事件,它内部帮我们做了一层验证,当然了,这个验证规则已经很全了,但这只是前端验证,我们交给数据库的时候,那还得需要后端去验证,所以呢,我们在这块获取,因为是双向绑定的,所以我们输入的数据都在这块,那在这里边呢,我们就可以去做一些验证,对吧,做一些验证。也可以做一些简单的验证啊,因为本身他都帮我们该验证都验证完了,那这里边也可以写先验证。先验证,然后呢再提交,可以是这样,那提交给服务器提。交。给服务器,那提交给服务器呢,我们肯定是用接口对不对,那然后我们在这个里边,网络里边每一个相关的,这跟用户相关的,那我们就建一个user.js都写在这里边user.js。
01:06
所有的跟用户相关的登录、注册、退出我们都写在这里面,那我们现在先需要的注册功能肯定先导入这个。Ipad先引入,呃,咱们封装的这个网络请求IQET,这个请求从我们当前目录下有个request从这里边引入进来,引入进来之后我们在外边想使用我们注册的方法,所以呢,我们得导出action,写一个注册方法IGIS方法,然后我们传的数据,把传的数据通过这个接口传给服务器,然后这里边我们返回上边我们的这个方法。对吧,在这个方法里边,我们去写配置就可以了,在这里写配置,那我们注册的接口在哪呢?找一下我们的注册接口,注册访问的是这个接口。API授权这个,所以呢,我们在这里边写配置的时候得写URL。URL。Ul,然后呢?
02:00
到这个地方去注册,注册的方法呢,我们使用的是post对吧?提交的方法,那我们得使用HTB的to方法,Me OD方法我们得改了,默认是get,你可以不写,但post我们必须得写,对不对?然后呢,我们把传进来的数据直接在这里边传,因为它是这样的格式,对不对。你看也是对象,我们传对象跟他这格是一样的,两个一样可以写一个,所以我们直接对就可以了,然后我们将这个方注册的方法,我们得在我们这个里边,如果想使用的话,想使用的话是不是得这里边得引入啊。引入这个方法,我们导出的这个方法,让我们从ne,嗯,Network里边的user user从这里边。我们把这个方注册拿过来,然后在这里边我们就可以提交注册了,这里边他说可以先验证一下,先验证,然后呢你再注册,比如说我们其他的他都报名验证了,那两次密码一不一致对吧?数据是双向绑定的,所以在表单里填完数据,这两个数据就跟表单的数据一样,所以我们看他两个添加的一不一致对吧?因为不一致的话,你看在这个位置我们是体验不到的,比如说用户名随便写的密码AAAAAA2遍不一致,AAA你看这样,然后邮箱AA圈点com,那我们随便点击一下,你点击。
03:12
你看它其实是里边虽然有什么危险是可以过去的,因为没有任何的错误提示嘛,所以验证不了,但是我们在这块可以验证一下,那就简单判断一下,比如说如果呃,这里边的用户音fo里边的password这个密码对不对,它不等于什么呢?User info里边的这个确认密码,如果两个是不一致的,不等于吧,那我们在这块就可以干嘛呀,就可以提示两次密码不一致,那我们用一个组件来提示吧,我们用组件看哪个提示比较好。组件用这个消息通知也可以,用轻提示也可以啊,那我们先看到消息通知,那我们就用这个消息通知吧,那我们用它的时候必须得导入这个组件,你在,呃,我们这个地方就是。主方法里边,这里边导入不太好用啊,这个你在哪用就在哪导入,所以呢,我们在这会使用。
04:03
就在这导入一下这个方法。导入这个方法,如果两次密码不一致,那我们在这块就通过它。No,这个里边直接写括号,写提示,当然它有很多提示的方式啊,你看这个方法导入进来。嗯。然后这里边儿你看可以是危险通知,可以加类型加消息对吧,也可以直接加消息对吧,消息然后多长时间有好多自定义的一些方式,比如说成功的通知对吧,主要通知危险的通知对吧。这样都可以,它是在上面这种提示的一种方式,那我们就用这个提示,那我们在这写上,比如说两次啊密码不一致。啊,不一致。不一致。第三。当然了,你可以自己去,呃,通过里边传对象,传类型这样的几种通知方式,你就啊直接传的话,就是这种默认的通知,那现在比如说两次密码不一致,那我们在这里边现在再访问一下。技巧,比如说A密码。
05:02
A这里边三,A这是BB这里边随便写上。然后我们提交一下。两次密码不一致,是不是就提示我了,对不对,这不过去,那这里边什么也不处理就行了,那否则假装否则,那就是提交服务器处理数据。在这块。接过电它可以往回撤啊,那在这里边,否则里边那我们就直接使用调用这个R。注册的这个接口里边,我们刚写的这个方法在这里边呢,我们写上直接把这个user if,它不就是这个对象嘛,对不对,数据嘛,我们在这块也把这个信息这这块是返回的,在里边双向保密用的,那在这里边我们直接传user衣,是不是就把这整个数据正确的数据都给我传过去了,N,然后res。里边返回我们这样的一个is。Res RO OG。打印一下,那如果我们提示的话,成功的话会返回201,失败的话,那会给我们返回一堆错误信息对吧?所以这里边儿我们就判断看他是成功还是失败,那现在假如我这里边填写错误信息ABC,然后。
06:13
密码哈,我这随便写的H哈,两次密码一致才能到下边A圈。com。来确定。你看一下这里边儿。现在给我们返回来了,你看这里边信息。返回的这么多信息,422对不对,访问的接口422不是,你看我页面上没有任何反应,因为返回422,你看我们接口里边。接口接口。接口里边如果状态码是四二,那说明什么?说明我们有这么多错误,可能是什么昵称不能为空啊,邮箱不能为空啊,密码不能为空啊,对吧,当然还有一些其他的一些提示四二,那我们通过这个来看。状态信息能看的更好一些。呃,在这里边我们点击网络。
07:00
你看这个注册错误的信息对吧,我们可以看到头部信息,我们是使用的这个授权对吧,返回的状态码呢是四二。头部信息看一下。然后这是我们的数据提交过的,想的这个,呃,附带的一些数据啊ABC对吧,密码确认密码是这些数据过去了,然后我们看这里面。你看给我们提示的错误对吧,提示的错误消息给我们返回来可视化的一个错误消息里边什么有密码至少为六位对吧?至少为六位。这里面的错误,然后返回的状态码是四二,看到了吧。这是跟我们想要的数据这样的一个格式,你可以通过这个网络请求在这去判断判断。所以呢,如果我们错误的信息书写错误信息的时候,那在这里边你可以通过判断什么呢?判断正确信息和错误信息来处理,但是我不想在这块去判断这个错误信息,为什么不想在这块判断错误信息呢?因为我们有好多地方都需要表单提交,那么都有可能出现什么出现这种错误提示的情况,那都出现这种错误提示情况,如果你每个地方单独写对吧,比较耗时,耗时我们有一个统一的地方,就是我们在写网络请求的时候,网络请求的时候,那返回的数据给我们返回错误信息是不是有个响应拦截呀。
08:14
那写拦截这个ER错误信息会在这块打印,对吧,你看如果有错误处理,咱们在这块统一可以处理,就是接口里边返回的错误信息统一的提示,我们可以在这里边,你比如说er.ROOG,我们在这块打印,我们不在这个地方。我在这个地方打印了,你看啊一样,我输入错误信息,接口返回错误,比如42啊或者什么的错误信息。记得这里边成功了,我们直接将数据返回过去对不对,这是响应拦截,不是请求拦截,响应的时候就数据请求接口,它回来的时候,回到客户端的数据的时候,对吧,你在这块可以做错错误的,呃,一些提示就在这个位置去接。那在这里边写错误提示,我们先打印一下吧,先打印一个这个错误消息,我们再看一下他的消息是什么样的啊,你看我们还回到这儿来,你刷新一下。再随便写一个错误消息AA对吧,密码AA这块也是AA,长度肯定不够,它会提示对不对AA呃。
09:08
井号b.com,这不不会写错的,然后提交,你看还是CR提示,这个提示不是在我当前写的这个,呃,注册页面这面提示的,而是在我们统一的对吧,请求拦截的时候显拦截的时候在这打印的,在这打印信息,那我们同样可以用networkwork去看一下,你看一样是这个信息,对吧,在这块可以看到这样的信息。对吧,错误,你看提示了邮箱不是一个合法的邮箱格式,密码至少是六位对吧,邮箱不开邮箱密码六位提示了两个消息对吧?提示这么多,那我们再看一下这个里面提示这个post这个错误。响应它这里边,如果我们想在这判断这个状态码,它是通过这里边的里边响应里边的有一个re,嗯,Po se.datata通过这个呃,数据给我们返回的这个错误信息,那我们直接通过这个响应里边的data,我们来看一下这个错误信息啊。
10:05
嗯。这块看一下,那我还得执行一遍。再返回。也清不掉啊A,密码A。A。A圈A井号,咱们不写正确的格式来提交。你看给我们提供一个消息,里边有一个什么。这里边有一个错误啊,错误是一个数组,有下边是email的,有密码是这个密码错误,但是我们有很多错误,而且这些字段是接口给我们定义的,不同接口返回的字段是不一样的,我们没有办法把所有的都提示给用户,有错误提示一个就行,你看咱们一般在一些网站做错误提示,一般都提示一个,所以在这里边我们想提示数据的话,我们加入通过这个组件。这不有消息框吗?对吧,我们在这里边也可以用,任何地方都可以用这样的提示组件啊,我们引入。这个呃,错误提示,然后我们直接用。
11:05
既然引入了,那我们就可以直接用这个方法。用到我们两次密码不一致。这块板面,那我们就可以直接在这个位置。做提示。提示提示两次密码不一样,那这里面提示的时候错误信息你看。假如说我们就想拿出这个email这个错误信息,对吧,它是在这个错误里边,所以呢,我们通过响应的数据里边点E。Or通过它是多个有对这个S这个,你看错误信息S这个嘛,对吧,然后访问里边的什么,访问里边的,比如说呃,Email访问email,然后呢,访问这个email。这里面还是个数。看到了吗?还是个数组,数组零对应这个,所以呢,访问这个。下面的。什么零就能访问到这个零的信息,第一个,但是不是所有的组件给我们提供的都是email对吧。
12:03
都是15000。当然了,里边有那有密码,有很多个字段,但是只要一个对不对,那怎么办呢?那我们就通过这个错误,通过这个里边这个错误,我们看一下能不能获取到这个错误里边的。这个里边的所有的键。获取到的所有的键,咱们有一个方法可以获取到,也就是什么通过OB对象里边有一个KYS,这样的话我们就可以获取到一个对象里边的什么。一个对象里边的所有的键对吧?压or里边这里边不有下标它的键吗?键是这个是数组,键是这个直数组对吧?获取它的K,那我们通过这个能获取通过对象能获取它的K,那获取这个K呢?那获取的默认就是什么?第一个这个K对不对。那获取这个K,那我们再访问这里边的零不就可以了吗?它第一个就是email加服务器端,不管怎么反馈,它都是固定的格式,只不过这个字段不一样,那我们通过这种方式获取这个字段就可以了。然后我们把这个错误消息不在这打印了。
13:01
我们直接用这个提示框,我们打印,你看如果有问题,我们在这块去打印一下就可以了,只要一个提示,这样的话,不管什么提示都可以,你比如说AA。刚才是一呃。然后这块bbb,然后嗯,AA井号BB也是,它如果出错。提交。提交一下。刷新刚好没刷新,刷新一下,再重来一遍AAAAA。Bbb这块得AAA相同才能过去啊,然后我就提示一个不对的井号bb.com。要。属性零,呃,没有读到这个属性零零,我们看一下,通过ER ER or里边的response,响应里边的数据,里边的错误,通过这个我们想拿到它的object case键,通过ER里边的report date ER获取它的这个对象,里边的所有的键没问题。
14:06
嗯,然后。这会儿。嗯。获取它的所有的键。这块是获取他所有的键对不对,那所有的键。所有文件。嗯,所有的键,我们只要它第一个键往下第一个,只要他第一个键对不对,因为这获取的是什么,是所有的case嘛,所有的键,当然你可以便利把错误消息提示,那我们用这个提示框呢,它只能展示一个那种提示多了他也放不下对不对,所以他就只访问它的第一个提示,然后加这个。然后我们这里边A。然后AAA。这块AAA。AAA圈井号。bb.com,来我们提交一下。你看邮箱不是一个合法邮箱对吧,那如果邮箱我是一个合法邮箱加个艾福,那么他告诉我密码长度又不够。提交你看密码至少六位字符在这统一提示,那这样的话,不光是我们这个表单这块,呃,有提示了,其他地方也有提示了,对吧,也有提示了,那现在我这里边只要判断什么,判断正确的就可以了,错误的判断你就不用去判断了,所以呢,我们这里边儿它会给我们返回一个,如果正确的话,在我们接口里边会给我们返回一个状态码,对吧?状态码它这里边是默认的,咱们直接用这个is里边它会有这个状态码,我们打一下正确的啊。
15:23
在这里边。你看打开这个正确的,咱们获取一下它的状态码,现在我输入正确的,比如说。啊哈。嗯, hello123,然后密码123,确认密码123肯定是多余六位的,对不对,然后邮箱ABC ch hello,一二三点。com随便写了一个啊,你看现在我提交。你看现在是正确的状态里边是不是有状态码是201对不对,然后给我返回的这些提交的这个数据什么的,对吧,所以呢,我们一旦注册是正确的,那我们在这里边就可以判断它的这个状态码是201,也就是如果。
16:03
通过这个I里边的ST us是这个吧,ST us对。通过这个状态码,如果状态码等于什么,等于201就是什么,就是正确的是正确的,是正确的话,那我们是不是就注册成功啊,注册成功提示一下,提示注册成功,我们还可以用轻提示,因为上面呢,我们做错误提示在上边啊,成功提示我们用轻提示,那我们再找个组件。再找组件。另外一个组件也必须得在。也不能在全局注册有一个新提示。找到。嗯,轻提示轻提这轻提示这个,那我们也是在哪个页面用,我们就加载哪个。当然了,这两个都是这一个里边直接这么做就可以了,在。嗯,这个里面我们加个逗号,加个轻提示这个就可以了。然后在轻提示里边,你看这里边你可以有这么几个成功的提示,你看成功对吧,加载提示这样文字提示。
17:04
就是单独一个提示自定图标的,那咱们就用成功提示对吧,注册成功就可以了,加一个这个。如果是201的话,在这里边,那我们就啊提加一个这个提示,然后他成功的方法是这个,那错误的方法就加二对不对,那我们写上注册成功。假注册成功就行了,那注册成功之后对吧,不能让他组在这个页面上,所以呢,如果注册成功,我们就让他到登录页面,但登录页面我们还没写呢,对不对,你这会儿先把这个功能写完吧,比如说我们这里边按po,因为得用路由才能转过去,所以我这里边加上加上自己路由from从。嗯,这个VUE这个里边。我们获取到一个。用户。也就是。嗯,注册成功之后,然后注册成功,用它提示一下一秒钟或者什么时候获取对不对,那我们加戴太帽子,这样好一些啊。不然提示之后,它还停留在这个页面对不对,我们加,然后。
18:02
比如说一秒钟吧。都成功了,别让他提示那个写太长时间对不对,那我们就可以。呃,但是跳转,但是跳转之前我们必须得把我们的路由拿到,对不对,CSTTR拿到这个路由又。出由,然后我们在这里边跳转到登录页面,什么参数也不用带过去,直接跳转就行,Lur.PU到我们的这里边,比如说PH pass路径就是到我们的烙。跳转一秒钟注册成功跳转就行了,这样的话,我们这个页面就行了,讲完了之后,那我们注册成功了,我们还需要做一步就什么。就是。如果是注册成功了,或者是不管注册成功还是失败吧,总之如果到这里边儿了,那我们就重新把user info里边的,比如说密码。那确认密码让它为空,User INF否里边的密码其他的你可以不为空,等于空,它组件也不清楚,但我们习惯性都是这么去写就可以了,这就是注册的这样的功能,那我们来试一下,看一下可不可以我们加一个。
19:07
加一个现在正确的,呃,重新翻新一下正确的注册一个这个咱们记住用户密码,因为他登录还是用这个呢,注册一个什么用户名了,比如说呃,E Du work。E密码是EDU123。六位EDU123,记住这个密码,然后 e workat.com.com。登录的时候得用邮箱登录接口就这么写的,零邮箱登录,而不是用这个昵称登录,对吧,邮箱是不能重复的e work。当然我们注册的时候最好做邮箱验证,不重验证,你看登录成功,然后跳转到了音,只不过log音我们现在没有对吧,现在跳转过来了,那我们现在数据库里边就增加了一个这个,那我们注册的时候,我们现在输入的这个用户名在这里边,我标记一下是edu work啊,艾特 Lmonkey.com,密码是user,呃。
20:02
又是。又是123。我就是USE123。嗯,对吧,当然重复的邮箱我们是注册注册不进去的,你比如说我们再注册一个,呃回来。来注册一个,比如说edu,我这个名字是是可以重复的密码US123,然后US123,你看重复的是注册不上的,比如说我们注册的是edu,呃,是 eduwork.com。点击要。告诉我邮箱已经存在是不行的,这是注册不了这个错误,别管你接口返回有错误,它肯定会在这提示在用户界面是看不到的,对吧。这就是我们完成了注册的功能,好,那下节课我们就开始写登录,那这节课我们就。
我来说两句