《用户注册登录模块设计》由会员分享，可在线阅读，更多相关《用户注册登录模块设计（47页珍藏版）》请在金锄头文库上搜索。
1、CompanyLOGO动态网页设计教程美工与技术徐延章徐延章 编著编著第第14章章 用户注册登录模块设计用户注册登录模块设计数据连接的建立数据连接的建立第第1 14 4章章 用户注册登录模块设计用户注册登录模块设计数据连接的建立数据连接的建立v用户登录及管理是任何功能网站应用程序中必备的功能，是系统安全的重要组成部分，本章介绍用户注册登录模块的设计。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo第第1 14 4章章 用户注册登用户注册登录录模块设计模块设计数据连接的建立数据连接的建立动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社
2、14.1 用户界面的设计用户界面的设计114.2 数据库的设计数据库的设计2 14.3 用户注册设计用户注册设计3 14.4 用户登录设计用户登录设计4 14.5 用户界面的美化用户界面的美化Company Logo14.1 用户界面的设计用户界面的设计v用户注册登录功能是任何功能性网站应用程序的必要组成部分，因此用户注册登录界面也必然是网页美工设计课题。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.1.1 美工的界面设计美工的界面设计v网页登录的界面中一般提供用户名和密码的输入框、登录和注册按钮等选项，如图所示是作者主持设计并开发主持的一个网
3、络办公自动化系统的界面。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.1.1 美工的界面设计美工的界面设计v网易邮箱登录的界面提供了简洁的造型，将用户名、密码、登录等清晰地展示出来。从美工设计而言，可以采用满版式的登录页面，也可以加入到网页中，形成登录版块。除了整体的界面效果外，文本框与按钮的设计往往成为设计的焦点。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.1.1 美工的界面设计美工的界面设计动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社v注册界面中一般包含用户名、密码之
4、类的一些信息输入项与性别之类的选择项，用于获取用户的信息。其中，用户名和密码是必备的内容，在设计时可根据情况进行分类，如基本信息、其他信息等，并将必填的信息加以标识，通常用红色*表示，网易邮箱注册的界面。在设计注册界面时，往往需要注意的是界面的清晰美观、层次清楚，而切忌用大量的图片和动画效果。Company Logo14.1.2 技术如何实现技术如何实现v对于注册界面，技术实现主要是采用在表格布局的基础上安排控件，然后用CSS样式控制界面的美工，对于满版的登录界面，可以采用背景图片的方式，再用表格安排登录控件，也可以采用切片的方式，进行布局。其中按钮的设计可以用ImageButton控件实现，
5、也可以通过CSS样式修改普通按钮进行更改。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.2 数据库的设计数据库的设计v根据需求进行数据库的设计，新建数据库UserDB，在数据库中新建表格users用来存放用户信息，其中用户名（username）和密码（password）是必备的字段。选择表分支，单击鼠标右键，新建表。v设计指导：输入ID字段名后，选择数据类型为int，在列属性中，设置标识规范为是，这样该字段就能够自动编号（即第一条记录ID值为1，每增加一条记录，ID值自动加1），从而能够可以作为记录的识别编号。单击工具栏中的设置为主键按钮 ，将
6、该字段作为主键，这样能够提高数据检索的速度，后面表的设计中同样参考这种思路。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.2 数据库的设计数据库的设计动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社字段含义字段名称数据类型备注编号IDint标识规范为是，主键用户名UserNameNvarchar 50密码PasswordNvarchar 50姓名NameNvarchar 50性别SexNvarchar 2电子邮件EmailNvarchar Company Logo14.3 用户注册设计用户注册设计v用户注册功能的设计主要包括注
7、册界面的设计、用户信息的合法性检查、重名的检测和用户数据的插入数据库操作。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.3.1 用户注册界面设计用户注册界面设计v首先在D盘新建网站myaspnet-6。打开Default.aspx网页，切换到设计视图，输入响应的文字，拖动相应的控件到界面中，设计效果。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.3.2 用户信息的提交用户信息的提交v在用户注册中，我们先实现注册的基本功能，即把用户信息插入到数据库中。这里先实现插入记录操作，而不做信息合法性验证，
8、验证部分在后面的程序设计中逐步完善。双击注册按钮，进入程序代码视图中，首先在引用部分添加对数据库命名空间的引用：vusing System.Data.SqlClient; /调用数据库命名空间v然后在按钮的Button1_Click事件中编写注册代码，主要是进行数据库连接，获取用户信息，定义SQL语句， 执行SQL命令，显示提示信息，程序代码如下：动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.3.2 用户信息的提交用户信息的提交vprotected void Button1_Click(object sender, EventArgs e)v
9、v /定义连接字符串v String constr = server=(local);database=UserDB;User ID=sa;pwd=111111;v /定义连接对象v SqlConnection conn = new SqlConnection(constr);v /打开连接v conn.Open();v /定义性别v String sex = 男;v /判断性别选项v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.3.2 用户信息的提交用户信息的提交vif (RadioButton2.Checked)v sex = 女;v /
10、定义sql语句v String sqlstr = insert into Users(UserName,Password,Name,Sex,Email) values( + TextBox1.Text + , + TextBox2.Text + , + sex + , + TextBox4.Text + , + TextBox5.Text + );v /定义命令v SqlCommand cmd = new SqlCommand(sqlstr, conn);v /执行命令v cmd.ExecuteNonQuery();v /显示信息v Label1.Text = 恭喜你，注册成功;v /关闭连接
11、v conn.Close();v动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.3.2 用户信息的提交用户信息的提交v调试程序，输入相应信息，单击注册按钮，显示注册成功，。打开SQL Server 2005，显示数据表Users中的记录，我们发现信息已经插入到数据表中。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.3.3 用户名的检测与信息验证用户名的检测与信息验证v前面完成了基本功能记录的插入，下面对程序功能进行完善，对用户名进行重名的检测和用户数据信息进行验证。对于用户名重名的检测，应该放在后
12、台程序中进行判断，而对于用户信息的完整性、正确性可以在前台利用验证控件进行检测。因此，在用户注册界面中，添加验证控件，并设置相应的验证属性。其中关于用户名、密码、确认密码需要进行信息长度的验证，可以选择验证控件进行自定义方式，设置标准表达式为（Custom），定义“密码、确认密码”验证表达式为w6,18，即6-18个字符。定义“用户名”验证表达式为a-z|A-Zw5,17，即以字母开头，6-18个字符。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.3.3 用户名的检测与信息验证用户名的检测与信息验证动态网页设计教程动态网页设计教程美工与技术美工
13、与技术机械工业出版社Company Logo14.3.3 用户名的检测与信息验证用户名的检测与信息验证动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.3.3 用户名的检测与信息验证用户名的检测与信息验证v在按钮的Button1_Click事件中修改注册代码，主要是先进行用户名重名的验证，即把用户输入的用户名作为查询条件，进行查询，如果存在记录表示用户名已存在，需要重新选择。如果没有记录，表示用户名可用，可以进行注册（插入记录），程序代码如下：动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.3.3 用
14、户名的检测与信息验证用户名的检测与信息验证vprotected void Button1_Click(object sender, EventArgs e)v v /定义连接字符串v String constr = server=(local);database=UserDB;User ID=sa;pwd=111111;v /定义连接对象v SqlConnection conn = new SqlConnection(constr);v /打开连接v conn.Open();v/以用户输入的用户名为条件进行查询v String sqlstr = select * from Users wher
15、e UserName= + TextBox1.Text.Trim() + ;v SqlCommand cmd = new SqlCommand(sqlstr, conn);v SqlDataReader reader = cmd.ExecuteReader();v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.3.3 用户名的检测与信息验证用户名的检测与信息验证vif (reader.Read()/如果阅读器能读，说明有记录存在，即存在同名的用户名v v Label1.Text = 用户名已存在，请更换！;v /关闭阅读器v reader.Cl
16、ose();v v else /不能读，说明该用户名可用v v /务必先关闭阅读器，否则不能执行下面的命令v reader.Close();v /定义性别v String sex = 男;v /判断性别选项v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.3.3 用户名的检测与信息验证用户名的检测与信息验证vif (RadioButton2.Checked)v sex = 女;v /定义sql语句v sqlstr = insert into Users(UserName,Password,Name,Sex,Email) values( + Te
17、xtBox1.Text + , + TextBox2.Text + , + sex + , + TextBox4.Text + , + TextBox5.Text + );v /定义命令v cmd = new SqlCommand(sqlstr, conn);v /执行命令v cmd.ExecuteNonQuery();v /显示信息v Label1.Text = 恭喜你，注册成功; v v /关闭连接v conn.Close();v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.3.3 用户名的检测与信息验证用户名的检测与信息验证v上面代码中
18、需要注意的是，执行查询用户名后，务必关闭阅读器对象，即reader.Close()，否则后面等SQL命令不能执行。调试程序，输入相应信息，显示验证的信息，输入正确信息，验证错误的信息消失。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.3.3 用户名的检测与信息验证用户名的检测与信息验证动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.3.3 用户名的检测与信息验证用户名的检测与信息验证动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.4 用户登录设计用户
19、登录设计v用户登录功能的设计主要包括登录界面的设计、用户身份的验证以及防止注入性攻击需要注意的问题。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.4.1 用户登录界面设计用户登录界面设计v新建网页login.aspx，设计登录界面。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.4.2 用户名登录的验证用户名登录的验证v用户登录验证主要是根据用户名和密码进行数据查询，如果有该记录，表示用户合法，否则提示错误信息。双击登录按钮，编写程序代码如下：v protected void Button1_Cl
20、ick(object sender, EventArgs e)v v /定义连接，打开连接v String constr = server=(local);database=UserDB;User ID=sa;pwd=111111;v SqlConnection conn = new SqlConnection(constr);v conn.Open();v /定义命令与命令对象v String sqlstr = select * from Users where UserName= + TextBox1.Text.Trim() + and Password=+TextBox2.Text.Tr
21、im()+;v SqlCommand cmd = new SqlCommand(sqlstr, conn); 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.4.2 用户名登录的验证用户名登录的验证v /定义阅读器接收结果输出v SqlDataReader reader = cmd.ExecuteReader();v /判断是否存在用户v if (reader.Read()v v Label1.Text = 登录成功;v v elsev Label1.Text = 用户名或密码错误;v /关闭阅读器与连接v reader.Close();v co
22、nn.Close();v动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.4.2 用户名登录的验证用户名登录的验证v调试程序，输入用户名与密码，如果正确显示登录成功，错误提示用户名或密码错误。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.4.3 用参数方式防止注入式攻击用参数方式防止注入式攻击v下面考虑一下安全性的问题，SQL语句存在注入式攻击的问题，原因是用户输入的信息可以作为语句被执行，下面我们进行这样一个测验。打开登录网页，调试程序，输入用户名为 or 1=1 or a=a，密码为asdfas
23、df(任意字符)，然后单击登录按钮，显示登录成功。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.4.3 用参数方式防止注入式攻击用参数方式防止注入式攻击v我们来分析一下程序的问题：v原来的sql语句：vselect * from Users where UserName= + TextBox1.Text.Trim() + and Password=+TextBox2.Text.Trim()+;v现在的sql语句：vselect * from Users where UserName= or 1=1 or a=a and Password= as
24、dfasdf ;v其中“or 1=1 or ”之间的“1=1”是一个永远成立的条件，相当于无条件查询，因此能获得所有记录，也就是说找到了相应的用户，这样是非常危险的，解决方案是采用参数方式进行编程，参数中的内容被认为是普通字符，不再担任sql命令中的角色。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.4.3 用参数方式防止注入式攻击用参数方式防止注入式攻击v修改程序如下：vprotected void Button1_Click(object sender, EventArgs e)v v /定义连接，打开连接v String constr =
25、 server=(local);database=UserDB;User ID=sa;pwd=111111;v SqlConnection conn = new SqlConnection(constr);v conn.Open();v /注释原来的两句命令v / String sqlstr = select * from Users where UserName= + TextBox1.Text.Trim() + and Password=+TextBox2.Text.Trim()+;v /SqlCommand cmd = new SqlCommand(sqlstr, conn); 动态网页
26、设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.4.3 用参数方式防止注入式攻击用参数方式防止注入式攻击v /换成下面的参数方式v /新建命令对象v SqlCommand cmd = conn.CreateCommand();v /定义命令语句，语句中的变量用参数写v cmd.CommandText = SELECT * FROM Users WHERE (UserName =UserName and Password=Password);v /为命令添加参数，并为参数赋值v cmd.Parameters.Add(UserName, SqlDbType.
27、NVarChar).Value = TextBox1.Text.Trim();v cmd.Parameters.Add(Password, SqlDbType.NVarChar).Value = TextBox2.Text.Trim();v /定义阅读器接收结果输出v SqlDataReader reader = cmd.ExecuteReader();v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.4.3 用参数方式防止注入式攻击用参数方式防止注入式攻击v/判断是否存在用户v if (reader.Read()v v Label1.Text
28、 = 登录成功;v v elsev Label1.Text = 用户名或密码错误;v /关闭阅读器与连接v reader.Close();v conn.Close();v 动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.4.3 用参数方式防止注入式攻击用参数方式防止注入式攻击v调试程序，输入用户名为 or 1=1 or a=a，密码为asdfasdf(任意字符)，然后单击登录按钮，显示登录失败，输入正确的用户名和密码，显示登录成功。同样，我们可以修改注册程序，以实现用户安全注册，修改相应的代码。动态网页设计教程动态网页设计教程美工与技术美工与技术
29、机械工业出版社Company Logo14.5 用户界面的美化用户界面的美化v网页界面的美化是每个网页美工与开发人员必须重视的一个环节，关系着网站形象的成败，本节重点介绍用户登录界面和用户注册界面的美化方法。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.5.1 用户登录界面的美化用户登录界面的美化v登录界面一般有两种方式，一是体现图文结合的方式，二是体现简洁的方式。对于图文结合的方式，可以采取图片切片然后重组的方法，对于简洁的方式可以采用CSS样式进行美化。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Log
30、o14.5 用户登录界面的美化用户登录界面的美化v14.5.1 用户登录界面的美化v登录界面一般有两种方式，一是体现图文结合的方式，二是体现简洁的方式。对于图文结合的方式，可以采取图片切片然后重组的方法，对于简洁的方式可以采用CSS样式进行美化。动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.5.1 用户登录界面的美化用户登录界面的美化动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.5.1 用户登录界面的美化用户登录界面的美化v完整的CSS代码如下：vbody vfont-family: Arial
31、, Helvetica, sans-serif;vfont-size: 14px;vcolor: #333;vtext-decoration: none;vv.btnlogin vheight: 28px;vwidth: 73px;vborder-top-style: none;vborder-right-style: none;vborder-bottom-style: none;vborder-left-style: none;vbackground: url(image/login.jpg);v动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14
32、.5.1 用户登录界面的美化用户登录界面的美化v完整的CSS代码如下：v.textbox vheight: 22px;vwidth: 155px;vborder: 1px solid #e1e1e1;vv.btnreg vbackground: url(image/reg.jpg);vheight: 28px;vwidth: 73px;vborder-style: none;动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.5.2 用户注册界面的美化用户注册界面的美化动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company
33、Logo14.5.2 用户注册界面的美化用户注册界面的美化动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.5.2 用户注册界面的美化用户注册界面的美化vbody vfont-family: Arial, Helvetica, sans-serif;vfont-size: 14px;vcolor: #333;vtext-decoration: none;vv.textbox vheight: 22px;vwidth: 155px;vborder: 1px solid #e1e1e1;v动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo14.5.2 用户注册界面的美化用户注册界面的美化v.btnreg vbackground: url(image/regbutton.jpg);vheight: 25px;vwidth: 86px;vborder-style: none;v动态网页设计教程动态网页设计教程美工与技术美工与技术机械工业出版社Company Logo
