00:00
这节课来完成一下博客项目的登录与注册。手册在。安全相关的用户认证下面。LA,已经啊,默认为我们提供了登录注册相关的一些组件,我们可以使用提供的组件快速开始。首先要安装这个组件。在这个呃,虚拟机中。我们的项目下执行。安装命令。安装完成之后啊,使用这个命令或者这个命令去。啊。安装这个。登录注册相关的它的控制器,还有需要的一些页面,这两个命令有什么区别呢?第一个是我们传统的这种普通的外部界面。
01:04
第二个事实就是它会给你生成这个view相关的一些页面。我们使用第一种。粘贴过来。直行大约等个一分钟左右。命令执行完之后可以执行NPM,因此套安装嗯,Node所需要的一些模块,然后使用n PM runve。进行这个静态资源的一个编译。就是。啊,编译这个它的页面所需要的一些啊,CS和GS啊,在我们执行这个命令的时候已经在。我们的resource view下面给我们生成了几个文件夹,还有页面,比如这个also。对吧,这些都是我们刚才执行这个命令生成的,有相关的登录注册的页面,有忘记密码的页面,还有这个邮件认证的,还有生成了一些呃,模板啊,就是登录注册用到一些模板页。
02:02
因为这里。我们会去使用这个自己写的一个登录注册页,所以我们就不进行这个编译了,因为这个时间也是会特别长的。好,这时候啊,他在执行完这个命令之后呢,还会给我们去啊,注册了很多登录注册相关的路由,我们可以通过PP artist root对此来看一下。嗯。可以看到啊,多了很多这个。啊,密码相关的呀,包括登录相关的一个路由。啊,路又比较多,不好去查找的时候,我们可以使用这个。管道符啊,比如我们root ship route or号list,然后竖现使用管道符GRP去筛选我们需要的一些数据,比如我们查看登录相关的一些路由。啊,可以看到这个就是系统给我们提供提供的登录相关的路由,我们请求这个login就可以了,然后它的这个名字是login,然后post的这个login呢,就是我们提交登录的这个路由,包括他们所在的这个控制器啊。
03:16
然后所执行的方法都有。好,我们来请求一下这个login。这里呢,它会报错。报这个。就是说数据库没有连接,因为我们执行这个这个命令之后呢。他会在这个地方进行用户登录的一个认证,会去查一个表,一个三表去进行这个用户,看有没有用户有没有登录。我们执行完这个命令呢,现在啊,并没有用户表,所以还要继续。执行一个。呃,数据迁移啊,生成用户表。再执行完。呃,刚才的这个命令之后啊,这个命令之后。
04:04
那它不仅仅给我们生成了这些啊页面需要的一些文件,还给我们在database下面的migration里面生成了一些迁移文件,这些是用户相关的一些迁移文件。啊,我们只要执行数据迁移,就会给我们创建对应的用户的表。这里我们先把。数据库的配置给配置一下,然后去执行这个迁移,生成用户相关的一些表,啊,首先我们现在访问呢,他就报了这个是数据库连接不对的一个错误,对吧。那数据库的配置呢?我们所有的配置文件都在这个。都在这个con下面数据库的,是找这个database啊。可以看到默认使用的是MYSQL驱动,嗯,然后MYSQL的一些配置在这里,它的这个。啊,IP地址还有端口号,还有这个数据库名,用户名密码啊,不要直接去改这个配置文件,如果他使用了EV的这个配置的话,我们尽可能去改,因为的配置,这样的话能保证你本地的开发环境和线上的生产环境这个配置啊不一致啊,因为你本地可能是使用本地的一个密码,但是开发环境可能是使用的线上这个服务器的一些账号密码。
05:17
好,那我们去,因为去改这些这个。配置啊。找到我们的眼位。找到数据库连接,这里我们主要改的就是呃,连接的这个数据库还有用户名,还有密码,因为我们使用的是V。V呢啊,我们默认使用的,我们使用的这个数据库呢,可以在v grant配置文件里面去看,可以给大家看一下啊。在我们家目录。找到。Home stay。找到这个配容量和写的配置容量。编辑。好。最后一个啊,这个参数就是我们的一个数据库的一个名字。
06:04
对吧,所以。数据库名,我们配置这个就可以了。但是就是我们使用的这个home,它提供的数据库的账号和密码是什么呢?可以去呃手册的这里啊。在这个入门指南里有一个红,他在里面会告诉我们home所有相关的账号和密码。你们可以搜呃数据库连接。好,可以看到他告诉我们了啊,账号是这个,密码是这个。啊,端口号的话,因为我们在服务器里面,就是说这个虚拟机里面进行连接,所以端口号使用默认的这个330内就可以啊。330就可以,但如果你要是你的这个Windows电脑,你要想连接这个数据的话,你要使用33060,它这里进行了一个端口映射。好,那端号为什么不改,我们只要用这个账号和密码。账号。
07:01
密码写上,哎,这个时候我们的数据库就能去连接上啊,使用的这个库是这个库,用户是他,密码是他啊这些都是对的,现在我们再去刷新页面。啊,这个时候就会发现找不着这个塞信表了,因为他要去三信表检查有没有这个当前用,就是说用户的一个塞信信息,就来判断用户有没有登录吗。没有表怎么办,那我们刚才说过,在我们执行这个命令之后啊,执行这个命令之后,他给我们创建了一个迁移文件。在。呃。Database里面有有迁移文件,所以这时候我们只需要执行迁移命令,就会给我们创建相应的表。在执行签约问题之前呢,我们先讲解一下如何使用。PPT去连接我们的数据库。Q,这里可以点击database,然后点这个连接,连接你需要的数据库可以,这里可以选择MYSQL。
08:04
进行一个连接,然后他会告诉我们,因为我们这个买搜狗的这个驱动啊,它要重新下载一下。大约三分钟之后就会下载完成。这里啊,写我们要连接的一个名字,就是在本地显示这个名字,随便写都可以啊,嗯,取成home state。任务。啊,这是一个注释说明啊。接下来是我们的。呃,Host也就数据库的一个地址,数据库的地址呢,是我们啊home的这个虚拟机的地址,在这里配置的。复制一下。这两对啊端口号,因为我们是连接的这个地址的数据库,所以就用这个地址的这个。这个端口号就可以了。
09:06
用户名啊,我们的。我怕座的。就是我们这里配的那个密码。啊,可以在这里去看到这个密码。这里显示的。要使用的数据库啊,我们这里的话,因为使用的这个数据库是它,所以写这个啊。啊,可以测试一下链接。这已经联系上了。确定。这里会啊,显示我们的这个数据库。啊,当前。没有表,所以它这里面就是是空的啊。包括我们刚才在这里执行的话,也会告诉我们就是找不到这个表吗。
10:06
因为我们之前去安装啊。这个的时候他给我们生成迁移文件,所以只需要执行这个迁引文件,他就会给你迁移文件,给我们创建对应的表,PP partisan migrate执行。迁移。好,就给我们生成了这些表。之后。啊,刷新一下。就多了这几个表,就是用户表,就是记录用户登录的三星表啊,包括密码重置的表。呃,记录这个用户这个三这个talking的表,还有我们记录这个M的表,就是我们迁移过的这个表啊,它可以给我们记录这个表里面,当我们再次迁移的时候呢,它会就是。啊,去检测这个表里有数据的话,就就不会再次执行迁移了。好,这个是计划任务。啊,任务调度失败这个表我们主要用到的其实就是用户,用户表,现在我们在刷新啊,它就不会找不到表了,它会报一个就是说我们的这个啊,这个资源不存在是因为我们没有执行啊NPM啊install去安装对应的node相关的一些包。
11:10
这个时间比较久,再说我们也不使用它提供的一些页面,所以我们就把它给。啊,替换掉。刚才说过啊,他要用到的这个登录页面是resource。Will。Also里面的这个登录页面数据库,点这里先先结束掉。好,他要用这个登录的一个页面对吧,那把我们的代码其实拿过来就可以了,我们是在logo里面写的这个登录页啊。饿了吧?把这里去复制一下。把他的这个原有的代码给注释掉。啊。把我们的代码粘贴过就行了,不要急着删他原来这个代码,因为它有些东西我们还是会用得着的。接下来呢,你再去刷新的话,就会使用我们写的这个登录的一个页面啊,但是我们这个登录页呢。
12:06
啊,因为之前写的是静态页,所以很多东西还没有调整,包括我们这功能啊,都是不好使的。现在我们就去改改,主要改什么呢?改我们form表单提交的一个地址。啊,还有我们字段的一个名字,看看他原来用的是什么,它的地址是这个。地址是这个,我们就直接复制。他们的父母给换了。POS方式提交啊,请求就是提交到这个地址,接着看他的字段名字一个是啊这个。往后看一个是email,然后密码字段名是name,就是错的。我把这两个给换一换啊。用户名给个name email,然后这里就改掉啊,改掉是邮箱啊,请填写邮箱。密码的也给个name。
13:01
他座的。好啊,现在我们就可以去测试一下提交了。对吧,419419呢,是因为我们没有给这个,呃,放入talking,我们知道之前说过在进行post put等这些方式提交的时候呢。啊,他要求去让我们传一个这个talking进行CRF的一个认证。这个名字没有改,我们把这个名字改一改。所以我们要在这里写上一个CSRF,这样的话它就会生成一个隐藏的一个talking的一个字段,它会随着我们表单一起提交到后台,这样csf就能认证通过刷新一下。再次提交。对吧,给我们返回了,说明我们的。啊。这个提交有问题啊,就是信息不完整啊,或者说有错误消息,但是我们的错误消息并没有显示,可以看一看它是怎么显示错误消息的。
14:09
他使用的是一个自己写的一个组件啊,一个就是专门用于提示错误消息的一个组件。来复制一下,我们放到form上面吧。啊,放到这里来显示我们的错误消息,现在啊刷新再去执行一下。可以看到现在就有已经有错误消息了,对吧,它是说这个邮箱啊,字段必填密码字段必填啊,包括哪怕我们填了之后呢,去再去提交看一看。它就会变成说这个记录啊,就是在他们的这个数据库里面不存在,嗯,发现中文就是说账号密码不匹配。啊,那有时候这是提醒消息啊。它是这个英文的啊,不方便我们去。
15:02
呃,看。在之前也说过,在这个。Config里面APP,我们的应用配置里面有一个配置,就是国际化语言的地方。就是这个位置。啊,这个配置我们。这个是使用哪个语言,但是他使用的是哪里面的一个语言包呢?是使用的是。Resource里面的line里面的这个包是吧,它只有一个英文的一个包,对不对,我们想使用中文的怎么办?去下载一个中文相关的包可以使用。啊。找一找啊,使用这个。去下载一个中文的。相关的一个包,这个不是说中文的包,它是呃一个国际化的一个包,它里面有很多国内一个语言,我们只需要拿出来这个中文的放过来就可以了。这个他下载完成之后呢。在这个window目录。啊,问目录有一个。C开头的他还没下载完。
16:31
这时候下载完了。啊,这个目录我们重新刷新一下,在这里面会多一个这个目录。然后找到这里面的src,这些就是各个国家的一个语言的一个包,找到我们中国的包。我们使用这个。放入复制下,放入我们的。这个栏目录。OK。然后呢,你看它这里面。这里面你看一下,它就是把这个一些提示消息给翻译成了这个中文好。
17:04
接下来要去改一改这个APP里面的这个配置啊,Config里面的这个文件。这个里面的这个配置改成ZZ-CN此时再去。测试都变成了中文对吧。啊,但是这个消息它还是英文,它是写在。它是写在之前安装这个登录相关的组件的时候的,嗯。它默认提供的一个空气里面。对吧。我们这里就不去啊,改那个了。我们自己去定义一个错误的一个组件,因为很多地方我们会用到这个错误的一个提示,好。先把这个都关掉。这些啊,也都相关掉。找到我们的登录页面。
18:00
也就是说我们自己去写一下这个错误提示的一个内容。看一下这里呢,它是一个表单请求,它使用了love的表单请求的一个验证。后面我们会学表单,请验证相关的内容,现在先去看一下如何显示我们错误的一个信息。它验证里面有一个显示验证错误信息,也就是说当我们的这个信息被验证不通过之后呢,他会把错误信息放到do iris这个变量里面,我们判断只要这个变量里面有数据去循环。这个所有的错误就可以了。就这么复制一下。那我们要自己去定义这个错误的组件的话呢,有两种方式,就像我们之前在讲的时候,我们可以使用这个组件,但是比较麻烦,还可以自己去,呃新建一个。啊,这样的一个子示图,这么这种方式来使用也是可以的啊,我们建一个B啊第2BLA。
19:02
这样的一个指示图,专门用来处理我们的错误消息。啊,现在。啊。我们就不再去引用它,而是引用common下面的多啊,引入我们自己定义的这个错的一个视图。现在再来看一下。啊,是不是就变成我们自己定的这个视图了。当然如果你感觉它这个布局不好看的话,可以去呃优化一下,比如我们不使用这个L了。然后就是简单的使用一个换行就可以了。少个打括号啊。
20:06
好。现在呢,我们数据库可以去看一下有没有这个用户的数据。看右侧表,双击它就会在这里给我们显示这个用户表,这个数据可以看到现在没有用户数据,所以我们要先把注册的功能给优化好去注册。用户的一个数据,然后再来验证我们的登录。同样的啊,注册呢,你也可以在这里面去搜索,他给我们提供注册的相相关的一个路由,Artist root list。加EP。Register。啊和就是说登录一样,它也是给我们提供了这么两个。一个用来显示页面的,一个用来就是说执行注册的,好,那我们去请求一下这个地址试一试。
21:02
啊,也是没有页面跟我们登录一样啊,因为没有编译静态资源。还是用我们自己写好的这个注册的页面啊。复制一下。然后去替换掉O里面它原来的这个注册页面。就试一下。啊。在复制完这个代码之后呢,同样的是要啊把我们的。这个form表单的这个地址写对,然后这个csf加上。啊,然后把这个字段名都对上啊,这里先复制一下,然后看一下字段名,字段名是。呃,内幕。呃,邮箱就是email。然后还有这个password。这里啊,这个是泰国还这里name pass的,还有一个是pass斯wor。
22:00
Confirmation啊,确认密码的。是这么几个名字。现在要改一下我们的字段名字。好,Csf加上接着改我们的名字啊。嗯,用户名这里我们填个内蒙。邮箱。你卖我。密码。Password。这个用户名的话,这里ta就用T吧,不用不用那个邮箱格式。好,确认密码。Name。Pass。稍微confirmation看看对不对啊,这有点长。嗯,应该是对的。
23:03
啊,这个前面的单词打错了啊。这样内幕名字。一致。密,就是说还有我们的提交地址一致,就可以进行注册的一个验证了。试一下。点击注册。啊,直接给我们返回了,说明是有错误信息。我们在这里引入自己定义的这个错误信息的组件。再看一下啊。他又告诉我们啊,名称不能为空邮,就说邮箱密码都不能为空。接下来我们去注册一个。注册完成之后呢,它会自动给我们跳到一个页面啊,这个是他。组件默认的一个页面啊。当然还是因为我们没有编译的资源,所以这个页面进不去啊,但我们可以改一下,我们想让他这个登录或者注册之后进入到用户的一个个人信息。
24:07
改哪个地方呢?改。APP里面。Providers有一个root service provider。往上往上就是在最上面可以看到有一个加目录的一个地址。把用户的家的一个地址,我们改成user就行了,让他登录或者注册之后去到用户的一个。个人信息呀啊。这时候我们返回。就可以了,是已经登录状态了,在就是说在我们注册的时候呢,它会自动把我们去。啊,进行一个登录。而在登录或者注册之后,也就是说已经处于登录状态的话。我们这个登录和注册页面已经就进不去了,他就给我们重新向到我们这里。但是现在还有问题,我们登录之后应该显示用户的一个头像和一个用户名,并且把退出的这个按钮给显示出来,啊,现在没有,我们继续优化我们代码,找到头部这块的代码。
25:11
头部在layout。这块是我们的这个两个地方,那判断用户有没有登录呢,可以使用艾特also指令。这个就是登录的情况下,L就是没有登录。没有登录呢,就让用用户去登录或者注册,已经登录呢,没有显示用户的啊名字还有。这个退出这个指令的话,其实所有的这个模板相关的指令都是可以去。嗯。这个前端开发啊。模板里面都会有说。常用的一些模板中的一些指定,这个在说讲模板的时候也说过。
26:03
就我们这里的是验证指令。可以搜索政权指令。判断写好之后啊,这里就写。登录后的一个代码是头像昵称和退出登录时间关系,我直接复制。写过的一个代码。这个A标签是进入我们的用户中心,然后这个是用户的一个头像。啊,用户的一个头像。啊,这里呢。是获取当前登录用户的一个用户名,当前登录的用户呢,可以在这个also这个全局辅助行里面去拿到这个用户的信息,嗯,也可以使用also的这个门面去获取用户的一个,就是登录用户的一个信息,这里我们使用辅助函数。嗯,然后是退出登录,退出登录的话呢。
27:01
我们通过。这个查询啊,它也是这个我们之前安装的auto认证相关的一些控制器,它提供了这相应的路由功能,你看一下啊。退出相关的啊,退出相关的。可以看到你要使用post去请求这个log out对吧?所以啊,Post呢,这里我们就定义了一个表单,并且传入了这个csf,要不然你提交。过不了啊,那就是提交的地址是都给奥。那接着。啊,我们这里一个退出啊,这里用的是A标签,因为用八层的话,我们还要再给八层写样式,A标签的话就是不用写这个样式。嗯,但是A标签的话,怎么触发form的一个提交呢?可以在这个安可利克事件里面啊,就是说点击这个A标签的时候,获取我们这里定义的这个form表单啊元素,然后执行它的submit,就会进行一个提交动作,就会退出。
28:05
啊,接下来把这两个地址也改一改,这是我们以前写页面的时候地址,那现在已经有了这个登录的一个地址。就写我们登录的这个地址,包括注册的也是啊,把我们之前写一面的测试的就删掉好。嗯,现在来看一下啊。刷新一下。这个路由没有啊。也就是说我们用户详情。就是他个人信息,不是这个路由,去root里面看一下我们定的路由是什么。找到用户的。个人信息这里啊,我们的名字是这个。要用这个名字。对,我们root是根据它的这个呃的别名去生成啊,刚才我记错这个别名,那你把它改回来。
29:00
啊,现在就刷新。就有了吧,我们的头像,头像当然用的是一个临时的,因为我们还没有去写上传头像的功能。名字。点击可以进到这个个人中心对吧。再回到首页,点击回到个人中心,当然点退出的话,是会把这个信息提交到这个地址,就进行一个退出操作,你们退出。嗯,接着来测试一下登录。A,然后是邮箱是A艾特A密码。好。密码错误啊。但是我们发现一个问题啊,密码错误之后呢,这个信息没有帮我们给维持上,我们至少要让这个邮箱给维持上,对吧,好。啊,这个时候继续去修改一下,登录发现问题的时候及时去有纠正我们的问题。里面找到登录。嗯,想要获取我们之前输入的一个一个数据呢,会。
30:01
嗯,给我们就是它在出现错误的时候,给我们进行返回的时候,会把我们之前的输入给我们闪存到这个啊塞里面,我们可以用一个辅助函数O的去获取,比如这里我看这个Y6。然后给上这个O的啊,里面的名字就写我们对应的这个内部就可以了。密码就不用闪存了啊。接着大家试一下,刷新一下。嗯,这里我们写AA,我们故意把密码写错。可以看到我们之前输的信息就就在这儿对吧。啊,那既然我们登录存在这个问题,那注册肯定也存在这个问题,对不对。知道吧,好。啊,这里点注册的话,明显发现地址不对啊,说明我们这两个链接还没有改,你看。我们登录的话应该是,嗯,使用的这个路由,对吧,现在我们先。嗯,把。这个路由给都给纠正过来,再接着去改注册的这个数据维持的一个问题。
31:02
首先。找到外部页面,把我们之前用于写页面的这两个临时路由给删掉,就不要了。啊,然后找到。我们的这个用户的头部啊,既然这个文件夹已经不用了,其实这个这个头部的话呢,我们应该给他啊剪切到。我们现在在用的这个页面里面就是。这个头部啊,之前写页面是我们放到这里面嘛,但是现在我们已经把页面都放到这里面了。给他挪过来。好挪过来之后呢,把登录。上面引入的地方。啊,它自动帮我们,就是这个编辑器是自动帮我们改了啊。如果自主编辑性没帮我改的话,我们要手动改一下,好,现在链接对了,接着去。呃,加一下注册的这个一个维持。啊,先看一下注册的一个效果。刷新一下。
32:02
嗯,链接还没改呢啊,这两个链接还没改,我们只是引入的这个改了,引入的这个改了,但是我们的。这个里面的链接还没有改诶。这里改成登录页面的一个路由。这里改成注册页面的路由。好,这时候刷新页面。嗯,现在链接也改过来了。对吧,这个链接你看这都是对的啊,链接改过来了,那接着我们去填写一些信息。然后提交。没有维持上是不是。继续优化注册页面。把它的数据给维持上Y6啊,在有错误信息返回的时候,它会把我们之前的输入啊放到这个塞里面,所以可以使用O的这个辅助函数去取出来给我们进行闪存的这个信息啊,之前的一个输入。
33:07
有。啊,只要这两个就可以了,密码的话我们就不用进行闪存了,接着测试一下。没洗脸。好两次密码输入不一致,给我们返回了,而且信息还给我们去了,对吧,那现在我们继续登录啊。登录。填写我们之前第一次注册的一个邮箱和密码。登录之后可以看到正常的回到了我们个人中心的一个页面,对不对,但你会发现啊,这个用户名和邮箱不对,这是我们之前写页面是写死的一个数据嘛,现在把他的数据也给去改,对。他呢啊,因为我们登录之后呢,会把用户信息放到三里面,我们可以通过这个,你看我们之前写的这个头部是不是可以通过这个also里面的user去获取当前登录的一个用用户信息,所以啊,我们也用同样的方法去把用户的个人中心的这个表单给修改一下啊,Info里面。
34:06
嗯。这里就不用写死了,而是写。Also里面的。USA。里面的这个email。同样的啊。啊,这个是用户名啊,用户名我们使用它的这个name下面的这个才是邮箱,这个tap我们还没改,顺便改一下。邮箱。嗯,V6的话就是从当前登录的这个信息里面去获取。Also。里面的优。里面的email。再次来刷新一下页面。一看到就是变成我们当前登录用户的啊信息了。好,通过这个的学习,我们尝试去使用了。啊,Composer去安装啊两个组件,然后又去使用了一些art的一个命令,对这个art命令再进行一个练习。
35:05
嗯,接着去对登录和注册进行了完善,然后知道我们从这个also里面,这个辅函里面去可以拿到用户登录的一个信息。还有就是。那关于当表单提交错误,进行表单验证没有通过的时候,他再给我们返回的时候呢,会把错误信息给我们闪存到这个塞。我们使用这个。啊。入O的全局符的函数是可以取到闪存这个信息,注意它这个闪存是一次啊,是一次的。就是说当我们在刷新页面就没有了,它只会产生一次啊,我们现在测一下看看。把密码给输错。是不是当密码错误的时候,它就会给我们显示错误信息,但是我们再次刷新就没有了,它这个塞新时啊,只产出一次。好,到这里登录注册功能就已经完成了。
我来说两句