00:00
大家好,上节课呢,我们完成了用户的模块的一个登山改查类功能,那咱们趁热打铁完成一下用户注册和登录的这样一个过程,那首先呢,我们先做用户注册,在我们在用户添加的过程中,有一些未完善的东西,我们都在用户注册里边健康完善,所以呢,我们先来做用户注册,我们来打开我们的页面找一下我们的。到前端里边找一下,哪是注册的页面。Reg,点加码,我们看一下这个注册界面。前面的不要了,Rg.HTML好,这个注册页面我们将它改造一下,改成我们自己想要的很多个字段的,这个注册就几个字段,那我们需要用到很多域,它就是邮箱密码对吧,比较简单,咱们呃多加几个字段,把它丰富起来。来,我们找到这个页面,我们新建一个。新建一个GP文件,叫做reg的。我们把。这个里边的所有的代码全部。
01:03
过来。看一下它这里边儿,呃,加几个字段。比如说我们,嗯。用户名、密码再加上。所有资料我们都得加上,加上之后呢,它的样式应该就不太好看了,因为后边我们还要加上这个提示,提示信息,提示信息如果在下边加的话。呃,地面又太长,所以呢,咱们得对这个样式进行改造。哦。我们先来看一下它的原有的样式都放在哪个文件里边,我们右键检查。看一下。整个这个是一标头。整个这个背景。它的宽度480,我们把它改成比如说880,嗯,这样的宽度就不宽了,但是也太宽了,看一下呃,680。差不多。
02:00
六百八可以,这个位置还行,高度呢,我们把它去掉,让内容给改,或者是我们加点高度就行,那我们找到这个样手面。在冒个点CSS里面,我们找到它的CS。CSS找到。嗯。老点CS找到这里面我们改造一下。注册页面。呃,整个表单的宽度480,我们改成五百八或者680,高度我们给它去掉。如果我们改完样式文件感觉不好使的话,我们需要清除一下浏览器的记录,因为它还是使用这个缓存清除浏览器记录。我们来看一下注册的页面,刷新一下好,宽度就改变了,然后我们高度看一下,能不能根据内容的高度把它撑开。我们找到。
03:00
我们的。哦。这就叫。粘一下。我们一共是有几项九项。转过来的。知道一下,我们应该是。全部粘贴了,我们再新建一个。嗯。编码一定要注意编码,不然的话会有。会有乱码的问题,JSP。全在。我们看一下。哦,黄的是TMLGS,比方我们的GSP文件也错了。
04:01
把那个文件删掉。好,这样的话,我们就可以输入很多项了,那前面呢,我们加上加上这个提示,我们再看一下它的。嗯,这边的宽度是怎么弄的。整个一个。P标签。标签。这个没有问题。嗯。它是文本居中了,我们把文本居中给这个去掉,在reg的form里边,我们让它靠一边。靠一边。你说。是home的lo home home home的。找一下re。
05:04
RG里边这文本居中,咱们把它去掉,它默认靠左,默认靠左,咱们让他呃R点吧。咱们来一个比如说50也别太靠边。刷新一下。这样可以,然后我们前边加上我们的呃,标注。在。哦。这里面。前面我们加上我们。呃,想要的一个提示,比如说用户名啊。密码啊,输入啊,其实在这里边,你在这里边加上请输入什么什么,那你加不加标注也都可以,那我就不加标注了,那我们就在这里边儿,比如说请输入啊。我们先把每一个字段的名字、名称都把它改变一下,比如说我们注册的时候,将我们的这些注册项填进去,比如说请输入。
06:00
呃,后边已经。我们先把这个一个一个放去,比如用户名,用户名我们叫user。面。然后呃,有用户名,有姓名name。然后呃,有登录密码。登录密码。确认密码。确认密码。我们写写这个,那密码我们写PASSWRD。确认密码呢,我们写。Re,这个把第二个单单词首大写。呃,然后密码了性别,性别呢,我们用呃单小号来做,因为这两个值,所以没有必要用,用户随便输入男女不确定啊不行,就是男和女没有别的对吧?呃,出生出生日期,那我们用呃b day birthday邮箱日期完了是邮箱email。
07:05
然后是呃,邮箱完了是手机号。手机号完了之后,呃,送货地址,呃,Ad res,送货地址完了之后是这里边已经有了验证码,验证码呢,呃,我们也起个名字,不然的话我们也提交,提交不了叫VCOD。对就可了,然后我们一个一个把后边给改改过来,请输入用户名,请输入姓名。请确认,呃,请输入。密码。行。确认。密码。然后性别我们一会儿再讲,然后请输入。呃,出生日期。
08:02
然后请书。这个已经有了,请输入邮箱,请输入呃,手机。号码。然后在这请输入。送货。地址。好,验证码这一个一看就能可以看的出来,我们就不用去写了,我们来看一下。请用名码请书这个验证码他没有,呃,靠这边我们看一下什么情况。验证码。这个一个类。知道。好,验证码过来了。然后我们在后边留的地方是干嘛的呢?做提示用的,当然你不用这么宽对吧,那我们在后面加一个SPA。斜杠。
09:00
假如说有问题,不符合我们验证的时候,就要在这提示。就是密码性别之后邮箱手机号码,送货地址验证码后边我们也加一个。然后我们把性别这块改写一下,它这块有两个。类型改成RA,名字是性别V,流值呢?那我们有两个默认值是P。这个就不需要了。ZKBD啊,等于。CHBCKDD。然后我们再来。同样。加上女。I性别。女,正好改成FN小号,你们再看一下。这个是呃,样子比较比较难看,那应该是这里边儿,呃,他写的是统一的。
10:03
Input这样的,呃,一个样式,那我们就把这个给。强制弄一下该样式。比如说我们设置一下宽度,比如说15个像素用不了,那么呃,太宽高度,高度我们就先不改了。看一下关注。过来。对吧,也可以下。高度,嗯,高度我们也是设长15吧,跟它是一个方形。一下看一下,好,这样我们请输入用户名密码,这个用户注册这个字体,我们可以让它大一点。用户注册这是P,我们可以换成是比如说一。
11:00
斜杠一可以,你可以给他更多的这样的一个一个样式,比如说。直接开始啊。写到刚才的那个log.cs里去。比如说把。零的像素。Marin。零小。这个就用不上。这个疲劳它本身就是一个呃这样的一个标签字体的尺寸,比如说30个像素,呃,BCK加背景颜色,咱们给上随便给一个吧,偏红一点的,比如说3344,呃。啊,AA。背景颜色,然后呢文本。让它居中对吧,给一个让它上下居中。比如说给个60吧像素,然后字体颜色咱们使用的是白色的井号。
12:00
我们看一下。用户注册研发一点对吧。当然看起来还是比较。难看一些,没关系,你就先这么用吧,然后我们下一步就是。给每一个做验证,这只是我们写的一个,呃,一个界面而已,其他的我们在一点点细化,最重要的是我们一点注册的时候,或者是焦点一离开的时候,我们需要有一个验证。用户名对吧,不能为空,用户名验证的时候呢,是什么逻辑呢?一是不能为空,另外呢,已经注册的用户对吧,它是一个主店,你不能够再去注册。还有验证码,那我们需要重写,其他的还好一些,比如说出生日期,出生日期呢,呃,用户的格式它可以输入,比如说这样格式肯定不行,对吧,所以呢,我们这块最好用一些小插件。你在网上可以搜到很多JS的,日历类的,比如想式的都有,我随便找了一个小的插件,是我以前用过的,在商场项目里边。
13:02
这个器拿过来拷贝到我们的JS文件里边,然后加载一下就行,比如说把它拷贝到我们的,呃。DS文件里边。这是他其他是自带的啊,这块有个呃日历类,那我们有这个日历类,我们想在页面里边,假如说用到这个。不是日历这个DS这个文件,那我们就需要把它加到我们的。呃,这个里边。呃,Src等于。我们这是GS目录下的这个文件名叫做。哦,这。c.GS。好,这样的话,我们就把这个呃,GS文件加载进来了。载过来了,那你可以打开这个类,我们去看一下这个类里边有这么多对吧。
14:01
这么多的一个方法,那我们直接在这里边调用一下,好像哪块标签写错了,为什么下边。都已经加上这个下划线,不管它了,总之我们将这个呃加载进来就可以使用了。GS确保一下目录没问题,GS目录下的这个日历好。好像不要加这个没关系,然后我们在出生日期这个位置,我们。呃,把这个组件用一下,这个也就是什么时。呃,用户使用这个组件呢,就是当鼠标一放上去的时候,就让它弹出这个组件。对吧,当鼠标一放上去,比如说我们鼠标放上去,我们实线是false fo CU,鼠标一放上去,直接调用它那里边,它这里边有个吸的这样的一个,呃,对象用这个。
15:02
点我们调用它的显示方法就行了,C点数。显示方法,然后把这全进来,你选中之后他就会把这个添加进来,所以这个组件还是比较好用的,你只要下载一个一加一条代码就可以搞定来下。更新一下。鼠标一块儿去。有,只不过在这个下盖。因为以前说过这样的记录这个字段名放就可了。对吧。就可以了,一个很小的小组件,那我们在后台添加的时候也可以添加这样的后台用户添加时候,你也可以用一个这样的小组件,几条代码就可以加上,好,这个就是我们要写的表单页面,那下节课呢,我们就对表单在客户端先验证一下。
我来说两句