00:00
大家好,我是学习园地的特约讲师高国峰,上节课呢,我们做了这个,呃商品呃详情页,那做完商品详情页呢,咱们按照流程下一步就要加入购物车了,但上面详情页上节课咱们做的这个图片这块是不生效的,咱们点开这个里边你看一下。咱们调整一下这个图片,它的图片这个我们怎么加样都不好使,那我们把这个样式就加到全局里边去吧,加在这是不好使,也不知道为什么,那我们把它加到全局里边,在我们的c SI base里边,那我们让所有的图片都是宽度,默认100%高度,让它自动就可以了,来,我们再回过来。这里面你看就可以帮我们完成这样的一个显式,在手机里边就可以看这样的一个情况了。那在加入购物车和立即购买这些呢?以及我们购物车的列表,因为它都要跟用户相关,是哪个用户购买的?所以呢,购物车的所有的相关的操作,那我们都需要干嘛呀,都需要授权才可以完成,还有我的个人中心对吧,那个人中心呢,也得登录之后才可以去操作的一个组件或者是一个页面,那么这些呢,都得有登录注册,所以呢,咱们这节课呢,就开始先完成登录注册授权这样的一个过程,那有了这样的过程,登录完之后,我们才可以操作这里边儿所有内容东西,包括我们这里边的。
01:18
你看啊,像我们的购物车操作这里面产品咱们前面完成都是产品展示,产品展示的是不需要授权,谁都可以访问的,就不需要登录就可以看到,但是我们你看操作购物车就必须得有用户授权,前面呢,我们商品列表你看就不需要用户授权,对吧?是这样的,那除了购物车的所有订单的肯定也是跟用户相关的,那后边的所有操作都需要授权这块,包括比如说呃,用户的地址和管理。地址的管理,你看都需要授权的,以及我们呃收藏当然也跟用户有关的,对吧,也得需要授权的,所以这些呢,都得需要有token登录之后才可以做到啊,只有前面咱们的首页,首页的数据,商品的数据不需要授权,其他的都可以,那授权呢,我们就使用这个认证的API登录注册这些。
02:07
就可以了,当然不一定全用上啊,当然了,授权你个人中心的设置,比如说更改头像啊,对吧,比如说手机验证啊,找回密码啊,这些接口里边功能都给我们实现了,所以呢,你只要调接口就可以了,那我们就先完成简单的注册登录。那上节课我们完成的信息呢,还有那个评论,那评论呢,也得用户登录授权对吧?收藏也可以,所以那两个功能前面咱们没写,那嗯,需要你去把它完成,嗯,还有咱前面几个没写了,收藏功能,评论功能,搜索功能这三个大家去自己做作业,然后后边的功能呢,我也是把主要的流程全写完,但是呢,像呃,一些不是主要的流程,比如更改头像啊,对吧,密码找回啊,这些呢,由你来补全就可以了,因为毕竟咱们做项目式练习,对吧,不然的话咱们就不需要讲了,我直接把做好的项目给你不就完了吗?对吧,不一样了,那看用户注册。我们先看一下需求,那用户注册的时候,我们看一下用户登录注册,注册的时候呢,我们需要用户名密码确认密码,电子邮箱,然后也有账号点击到登录对吧,前面呢,加一个头像logo之类的。
03:11
然后我们找到。嗯,用户登录注册,这是注册的接口,需要我们提交的有有这么多有名称email,因为我们用的是email,登录密码和确认密码,需要这个,如果创建成功对吧,注册成功返回的是这个吧,注册失败返回是这个码,是这样的一个情况来,我们就开始先写这样的一个模板页面,那所有的用户我们可以放到哪啊,我们可以把它放到这个,呃,Profile下边这个呢,默认这个是个人中心的页面,当然我们单独有一个需要有一个注册的一个。呃,页面对吧,那我们就建一个建一个注册的一个组件,当然这属于页面级的组件,那我们在这里边新建一个,我们叫注册叫做re GI叫这个名称。注册那有了这个组件这块写上啊用户注册注册,那有了这个组件,那我们需要在路由里面,我们把这个加进来在这里面。
04:13
嗯,随便找一个加进来这个位置吧,个人中心下边我们加一个。这块加一个呃,用户注册,当然我们可以让他访问登录和呃其他的一个页面的时候,我们可以让他其他跳转,那我们在这个路由导航里边呢,我们还需要去加载,对吧?你看如果没有登录这里边到登录页面需要访问一些路由的,那等我们写完注册的时候,呃,写登录的时候,然后一起去写这个功能的跳转,现在我们就直接访问导航跳转,那这里边我们给改成注册,Re re GI,呃,IJST注册这里边名字也改了,Re GIS tr这块也改成re GIS tr,当然这个组件我们还没有呢,同是兄弟个人中心,这块改成什么用户注册这样的一个功能,然后我们将这个。
05:04
给创建一个这样的一个组件,使用懒家的组件。Con ST注册组件这一个方法,通过方法引入M这块复制吧。就这一个过来,然后这块是不是在购物车下边的对吧?P嗯,P下边有一个注册组件,这样就可以了,那我们现在在访问注册组件的时候,因为我现在没有地方跳转,咱们说了,咱们会让它自动跳转再登录这块,对吧?所以呢,咱们现在先通过地址去访问。通过地址直接访问这个re,先把注册功能做完,然后咱们从登录那块跳转过来就行,你看用户注册加上这个,那同样。在用户注册,嗯,这个里面,我们需要找到我们其他的一些属性,把这个拿回来吧。拿过来改成用户注册,用户注册或者叫做新用户注册,新用户注册这样的一个一个功能,然后我们再把这个拿过来。
06:13
在这块导入,然后呢,再加上给注册组件。NAV,嗯,NAV2反过来好,用户注册就可以了,我们是直接访问的地址栏过来了,对吧,然后呢,里边呢,我们需用户注册,那里边我们就需要把所有的注册信息写在这块对吧?那我们加一个div这块,然后呢,我们将它顶部,因为有一个这个状态栏,所以呢,我们就我直接开始写上是吧marin top让它是50个像素。然后我们第一个先放的,一般用注册直接放表单就行,那你假如说想放呃,喜欢放一些图片之类的,那你也可以放一个图片,比如div,然后我们这块你加一个直接写上是吧,让里边的文本a tr放在中间,对吧,然后我们使用呃,V image有一个这样的一个图片。
07:08
有一个这样的图片,也就是我们的图片组件,这些咱们最好都复制一下。找到我们的图片组件。这个图片组件,这个组件呢,咱前面是生过的,先随便放一个,呃,放一个logo。这个吧。填充可见区域。去掉这个组件,咱们前面注册过了,所以呢,你这块不用注册,不用注册,我们只需要把src改掉就行,Src呢,一般都是放这个企业的logo,那咱们就呃找到呃学习园地把这个logo。呃,复制链接地址。拿过来。嗯,这是整体的网站的链接地址了。咱们找一个嗯,圆的码的w.com。啊,找到这个复制图片地址,复制图片地址,然后你发过来。
08:00
这样的话,我们在用户注册这里面,你看就已经有了这个嗯图片了,对吧,有了这个图片了,当然我们可以刷新一下刚才那个。它的位置。改变一下啊,你比如说这块让它的p PA top等于比如说50像素。你往下稍稍放里头放在中间这样的一个位置,那图片加了下边呢,我们就加表单,表单呢,我们也使用这个组件,在组件里边专门有这样的处理的,呃,表单的组件。往下找你看哦,有单个组件,咱们就用这种,你看用户名密码对吧,这样的验证的方式对吧,它都存在。那用表单的话,我们得注册什么,注册form。注册form,然后表单我们还有里边的每一个什么,还得需要注册里边的每一个这个区域输入框啊,手机号啊,整数数字啊,你看这种表单用起来也比较简单啊,那我们一个一个注册,比如说先注册我们的这个表单报给到我们的,呃。
09:01
怎么这么多?关闭,嗯,关闭其他其他都关掉,咱们再一点点找,不然的话它页面太多了,打开别乱了,在这里边。我就在前面加了加表单,然后呢,这块加上use,把表单加过来,然后这里面每一个输入框,输入框就这块儿。像数字键盘啊什么的,你想用哪个都得一个一个的导入,我们加过来C复制一下在这个里边。拿过来,然后我们再use使用它,好这样呢,我们就可以使用这个单了,可以使用这个表单,那我们看一下这个表单,我们就拿这个用户名密码,当然这个需要登录的还有很多,对吧。组件我们就拿这个就可以了。但是里边数据绑定用户名密码这里边儿也都需要我们去做的啊,先拿过来,先把这个界面拿过来,嗯,放到顶部,咱们直接把这个放在哪呢?直接嗯单独的一一个吧,放在这吧,嗯。
10:02
卡机了啊,好了。然后把这表单拿过来,里边一点提交按钮,我们得做,然后绑定的是用户名,绑定的是呃密码这块,然后呢,再有嗯,点击提交,点击提交呢,会处罚这个方法,会处罚这个方法。那咱们再看一下,咱们现在做的是注册页面,那除了有用户名密码,还有什么确认密码和电子邮箱,那咱把这几个拿过来确认密码和呃电子邮箱。嗯,咱们得对照一下,我们提交接口的时候,数据什么样能绑定上,你看啊,有名字,有email,有密码,有密码确认,这个比较长,密码确认对吧,咱们先不用粘心,先拿过来。然后用户名咱们是绑定的是name,密码咱们绑定的是password没问题。Pass word没问题,然后呢,还得有什么,还得有确认密码,这里边我们复制一下CTRL一下CR确认密码,那确认密码绑定的。
11:00
这个属性,我们得把这个属性拿过来。确认密码,然后再有,嗯。还有一个是对吧,还有一个呢,我们就用。普通的文本的就行,拿过来。在这块加上这块,我们绑定的就是email。绑定的是email,然后这块是电子。嗯,邮箱。有。嗯,行。电子邮箱,然后。这个名字也是,然后请输入正确的电子邮件格式,请。输入正确的电子邮箱格式。这几个双向绑定,我们把这几个都嗯确定过来,然后这里边儿它每一个都自带验证。每一个都自带验证,然后密码这块写上确认密码,请填写一致密码。
12:08
来我们看一下页面结构有没有了,你看用户名密码对吧,这里有两个密码,这块我们得改成,嗯。确认密码,确认密码。对吧,确认密码。啊。这样的话,我们这个表单就写完了,然后呢,这里边儿现在都有一个验证规则,请证明填写电子邮件的格式等等,那里边的所有验证规则,你都可以单独的找这里边儿去写一个印证,它默认的话有这么几个,你看啊。最下面。可以指定这里边儿的颜色呀,大小啊什么的东西都是可以指定的啊。就是外观的属性,然后下边是嗯规则,那如果写这个的话,就是必须为什么选择字段,然后这块呢是错误,如果出现错误提示消息什么,然后这块你可以通过函数验证,这块呢你可以写正则验证,加这个属性,你写正则表达式,比如说邮箱的格式,你就可以在这里边去写了,然后呢,仅在表单提交时出发这个验证。
13:12
一会。嗯,其他的你自己看一下吧,因为他把前端的验证都给我们写完了,还有这个发送验证码,如果验证码的话可以用这个。但是咱们这个按钮好像是嗯,不太看着,看起来不太舒服,你看咱们现在这个按钮是灰色对吧,灰色的按钮,那咱可以把这个按钮修改一下。嗯。这个地方,嗯,没问题。然后看一下,这是它提供的一个一个按钮,它用的是info的这样的一个格式,对吧。这块,那咱们可以给这个按钮,你可以自己去,呃,里边去加加类对不对,那咱们就可以把这个div。咱们可以设置一下也都可以,然后或者是里边呢,我们再加一层div也行,那比如说这里边我们先把这个按钮的呃样式给改一下,这里边我们可以加一个,它有个属性是加个颜色cover加个颜色,比如说等于blue一个蓝色的,有蓝色太蓝了。
14:15
对吧,RGB那咱们就是RGB随便写几个吧,比如说呃四四呃B8,然后呢,八三随便写几个RGB啊,这个颜色差不多对吧。为什么上边空间预留那么大呢?上边空间。好像那丁50。写了图片之后的图片。200等于50放在中间,你图片位置是不是大了一些,这把这个。可以完全放在。拿来啊,我们可以把它放到这个小上。放到这,他往上提升了一点,大致就这个位置就可以,但是这个默认的这个图片,这个图片的高度高了一些。
15:09
这个图片的高度。也这块。不写高端。不写高度。又太近了。下面。这就可以了。有名密码,现在我一点提交按钮的时候,你看所有的,因为它是没有提交,就是没有验证,没有任何合法的,所以是提交不过去的,如果有合法的就能提交过去,那我们现在在这里边儿,咱们现在是把组件挂上来了,那我们还得把这个用户的信息一个一个的和我们这里边儿绑定的内容都得对应上。所以用户信息本身是一个对象,那我们在这里边做一个set up。Setup,首先呢,我们这里边一定得来一个cost,来一个user info,用户信息,我们指定一个re。得先把这个导入进来,Report导入ref re from,从呃,我们的VE里边啊,我再来,然后这里边用re对吧,用它加载一个对象信息,先把这个对象信息,因为它是双向绑定的,所以呢,数据给拿过来,这样我们输入的数据就是这个,我们可以把这数据直接提交给数据库就行了,密码p SW wordd。
16:23
呃,密码默认是空,然后呢,我们的密码确认这个这个太长了,密码确认。拿过来。看我上面绑定的是不是也是这个密码确认啊,是这个密码确认,然后咱们判断的注册规则都是不能为空啊,然后提示的错误消息,你都可以把它改掉,按照那个规则。嗯,确认密码,然后再加上1EMAIL。这么几个,嗯,可以了,加上这个,然后我们返回,返回什么呢?我们可以把这个数据全部给我们一起返回,对不对,所以我们在这块咱引入to I FS,所以呢,用点点点to I FS,直接把这个user音符拿过来,就给我们上面一一绑定就对应上了,对吧?把这个拿过来,然后呢,我们一点提交按钮的时候,它会处理对吧?所以我们这里边得。
17:20
你看他这块还绑定了一个这个方法。所以我们在这里边得需要做一个我们这样的方法,才能够让我们去提交。提交做一个这样的一个方法。嗯,随便我们是随便做一个,就介头函数我们去做吧,这里边我们打印一下rog,打印一下一行艾符就证明我们怎么了,点击这个按钮是生效的。我们在这里边,在这你看现在在。刷新一下。用这个了,那必须得干嘛,得得把这个方法加过来,你再刷新一下。
18:00
没有错误了,对不对,现在你看我们提交好不好,用一点提交,你看下边都没有执行,因为我们有问题,他是不让我们提交的,对吧,那如果这里边输入用户名,比如说ABCDEF。嗯,当然这个跟后端验证规则得相同啊,向后前这只是前端防止君子一些协议对吧,那提交到后端,后端还会验证一下。所以呢,我们后端验证的时候,我们再处理密码。我得记忘了这个两个输入一致,比如说ABC123456,记着点这个ABC123456,然后邮箱ABC圈a.com,你看我们现在就没有问题了,没有问题点击提交。就可以过来,但是这里边儿。嗯。Ref双向绑定。啊,怎么有一个注意的消息啊,意思是ref没用上,嗯,错误。世界就用一个方法看一下。
19:00
On submit这个方法没问题,然后我们在这块也反馈这个方法了,在这个里边我们注册的时候,On submit表单一提交按钮会调用这个方法实现。也就是处发了这个方法没有问题啊啊,这这个错了,那个log log,然后这里边打一下这个。来我们看一下,现在刷新一下。刷新一下,这里边随便写AAA。然后密码ABC123456。ABC123456,然后邮箱AA圈 abb.com,随便写一个先行验证,你看提交现在就可以提交了,所以写正确的数据就可以提交,不然的话你这块提交是提交不了的,但只有我们写正确能提交,当然这只是前端验证,你在我前面验证跟你接口里的验证规则写的是一致的,然后我们在这个里边就可以去处理提交,写正确数据交给服务器。好,这节课我们先写到这里。
我来说两句