[音乐]
大家好,今天呢我们再来看一个示例,用户登录的实现 我们来看一下具体的要求。
首先呢还是以我们前面的例子加上一个登录窗 并且要有注册、
登录按钮 用户名不能为空,密码不能为空
用*号显示,若输入用户名为 admin,密码为 123456,提示登录成功
否则提示用户名和密码出错,并能具体判断是用户名还是密码错误 并且将文件命名
index5,并进行发布测试 所用到的工具还是 VS2013。
这里面要求主要呢要我们设计一个登录窗 实际上作为
VS2013 来说,它本身有登录控件
但是我们这个题目的要求呢是让大家自己去设计登录窗 并且包括注册按钮,它这块没有明确表示
注册按钮上面的功能,所以我们注册的功能先不加 我们只做登录的功能。
然后这里面呢 用户名和密码都是定死的
后面呢实际上我们还要做的事情就是 用户名和密码取自于数据库,当然我们现在还没学到
第四周的内容,所以我们先暂时先涉及这么一个例子 那么我们来一块儿完成这个题目
首先呢 打开 VS2013
题目要求我们新建一个页面 所以呢我们新建一个 Web 窗体,命名为 index5
但是由于呢,它本身是让我们在原来的页面基础上做的 所以呢我们这里面的内容呢所有的都和前面的一样
所以呢我们把页面,包括后台的代码我们都复制过来 这样的话就可以实现我们刚才的 要求。
这是把页面先复制过来
然后呢我们再把后台代码也复制一下,好,我们复制以后呢把有的
名字得改过来,好
我们先运行一下这个,看是否能正常运行,然后再进行我们下面的设计工作
我们生成一下,然后这块换成5 没有问题,所以我们可以来做。
现在呢我们就要设计登录窗口 登录窗口到底设在那块儿呢?我们可以根据自己的要求
根据我们现在当前页面的布局啊,实际上咱们可以放在这个 sider 这块儿。
好,我们是这样,我们先 给它 sider 部分建一个用户登录的
div 我们新建一个 div id
是 user,用户登录 然后呢我们所有内容实际上一块儿放到这个里面,好了我们开始放内容了
首先呢作为这个登录,传统窗口来说一般有这么几个对象,我们先把这几个对象放在上面 label
两个,button 两个,文本框两个,这个顺序我们一会儿可以再调整
然后两个按钮,我们把它分别设置一下,label 这个是 2,我们
写成密码吧, label1,这个我们写用户名,用户名
label2 我们写密码
好,把这个标签呢最好也改一下 lb,
lb 这个 2 是密码, pw 第一个呢我们换成
lb_user 好,这样的话就好识别了。
然后两个按钮 这个呢是注册
btn 这个是 register,注册
然后呢还有一个,这个是登录 我们写成
id, btn_login 好,然后还有两个文本框
我们让它的一个是用户名 这个我们写一个
tx_user 第二个我们写一个
tx_pw,这样我们在处理 的时候就比较好处理了。
好,现在整个的这个内容我们都放进去了 放进去以后呢,我们现在要做的事情呢实际是要把这个排好
我们把它稍微排一下啊,用户名
我们放这儿,然后呢
密码我们放到这儿,或者我们把它代码移吧,代码肯定是能放好
用户名,然后呢我们用户名的文本在这儿 我们给它都带
br 吧, br 换行一下,然后呢用户名的文本框
密码,这个是密码的 label,我们把它往前放
好,再给它加一个 br,这个也加一个 br
因为这个地方稍微挤一点,所以我们给它带上 br
然后下来呢,就是我们两个 按钮了,两个按钮呢我们这块呢给它放在一行
现在大家看一下,这个里面还有一个字体太大,看着不太舒服 没关系,不影响我们的功能。
实际上我们的题目要求呢还要进行验证 说用户名不能为空
密码不能为空,那实际上两个呢都必须有验证,这个验证怎么验证呢?
我们学过验证控件,现在又用上了,那么这两个验证都属于哪一类验证呢? required
field 验证 所以呢我们要有两个 required
field 验证 好,第一个我们给它属性设置成
有效需求验证 我们是用户,然后错误信息我们给它写一个
必须输入用户名,好
这是一个,第二个呢 我们写一个
RFV_pw 验证密码的
然后这个信息呢我们写一个 必须输入密码
好,这是一个,这两个验证控件呢我们文字就设好了,但是验证控件里面我们还有一个
有一个验证哪个控件,这个我们得给它绑定,所以呢这里面先要绑定
验证控件,这个呢是验证用户名的,所以我们绑定的是 tx_user
然后呢另外一个呢是验证密码的,所以呢我们要绑定 pw,这就对应起来了。
好,这是一步 然后呢大家还记不记得,人家题目要求密码必须是*号或者是
点号,总之是不能显示的符号,所以我们在输入密码的时候,这块实际上还有一个属性
叫文本模式,我们把这个文本模式呢设置成 password
我们可以在这块设置,也可以在后台代码里面设置,都一样啊 设置成这样的格式。
好了,现在我们整个这个外观界面呢就设置的差不多了
我们现在要做的事情就是写程序代码,这个程序代码我们刚才说了,注册我们先不关注
然后我们只关注登录,所以我们要触发登录窗口
那么触发登录窗口这块呢,实际上我们要进行验证 验证什么呢?用户名和密码,如果说正确的话
那么我们给它提示登录成功,否则的话呢我们要给它具体提示到底是用户名还是密码出错
好,所以呢我们判断,我们先取用户名
取用户名的话,我们先拿它的这个用户输入值先取出来 怎么取呢?是我们的text
.user 的 text 如果这个值呢等于
admin,我们下面这个写法呢可能比较容易判断
它到底是用户名还是密码出问题 如果是这个条件满足,我们再比较
tx_ pw 是否是等于
123456 如果这个还成立的话,两个都成立
了,那我们 alert 或者是
用其他方式显示都可以啊,登录成功 甚至呢我们这块可以就是用一个
response 然后加一个响应的 url
地址 就让它转向新页面了,我们在这块儿先给出一个警告
好,然后呢我们在这块要写内层的 else
else 这个是什么情况呢,大家分析一下
那么我们第一个 if,最外层的 if 已经进来了
说明呢已经用户名是正确的 然后呢,到这个密码这验证不对了,所以我们这块呢
给出来了提示应该是 alert()
抱歉,或者对不起 这是密码出错了
请重试 好,这是一个提示。
然后呢,我们这个内层的已经处理完了,再处理外层
如果用户名不正确的话
那么这时候呢,我们就没有必要再往下判断了,直接给出一个 alert()
我们把这个复制一下 [空白_音频]
对不起,用户名出错 请重试。
好 这里面呢从功能上来看呢是比较简单的
但是有些时候这个逻辑呢,我们要非常清晰。
好了 那么我们先试着看一下,看它这个程序运行的效果,所以我们生成一下
说这个引用不存在 我们写错了,alert() 是 JS
里面的 这个我们应该写什么,Response,要这么写
我们写错了 好,我们这么写一下。
好,我们现在运行试一下 这个我们要转换一下,它说是类型,两个类型不匹配
好,那这样我们处理一下就行了,我们把它 这个,这是
Text,我们刚才弄错了,这个忘了加 Text 好
我们再看一下错误列表 调试程序的时候呢
经常可能会出现一些问题,那么我们要根据问题呢,来判断它问题在哪块 好了,我们试一下。
还是我们上次那个问题,我们要给它 页面加载的时候要有一个赋值,这个我们遇到过这个问题
好,我们给它页面呢初始化的时候赋一个值 页面装入的时候,装入的时候
我们给它赋一个什么值呢?Un 这个,等于
点 None,好,保存一下,再生成一次
好,我们来刷新一下 好了, 现在有了。
这个注册这个按钮呢 跑到这个现在有点找不着了,没关系,我们先
验证登录,我们输入一个 admin
然后我们点登录,它提示,提示信息在底下啊,没看见 我们一会儿把它修改一下。
然后呢 我们再输入一个 123456,这个密码是看不见的
提示恭喜您登录成功,所以这个功能基本上实现了
然后我们再把密码输错一下,用户名也输错一下
它说,对不起用户名出错,但是实际上密码也错了,由于先判断用户名的,所以呢 说用户名出错了。
好,我们再来试一次,admin,用户名是正确的 密码是错误的,对不起,密码出错,没有问题。
所以呢 这个呢我们这个从功能上来说,是没有问题的
但是呢,有一些细节呢,还是不太好,所以我们这块呢 还应该把它
CSS,里面的字体 稍微做一个调整。
最好的办法呢就是我们现在呢 把 body
里面的字体呢都改小,这个看着字也比较大 所以我们这个字都改小,改成 14
号字,好,然后呢我们再看一下效果 好,这样的话呢,这个效果就比较明显了
所以呢,我们如果说是我们这个 能把字体调整到合适的位置呢,我们这个效果还是比较好的
当然这块这个字体呢,我们可以再单独控制。
好 这样一来呢,实际上我们这个例子就给大家简单介绍了一下 这个例子呢,实际上主要是让我们练习一些
Web 控件的使用 所以呢也希望大家呢能够下去自己再把这个 Web
控件呢,多练习练习 当然呢实际上这里面我们还有一些问题,比如说我们刚才显示的信息
为什么只能显示在这块呢?我们能不能弹出一个窗口呢?实际上我们可以通过 我们的一些
asp.net 的对象来完成,这个呢留给大家下去自己去做
好了,我们本次课呢,就先给大家讲到这里,谢谢大家