搜索
CompanyLOGO动态网页设计教程——美工与技术徐延章编著第14章用户注册登录模块设计——数据连接的建立章用户注册登录模块设计——数据连接的建立用户登录及管理是任何功能网站应用程序中必备的功能，是系统安全的重要组成部分，本章介绍用户注册登录模块的设计。动态网页设计教程——美工与技术机械工业出版社章用户注册登录模块设计——数据连接的建立动态网页设计教程——美工与技术机械工业出版社14.1用户界面的设计114.2数据库的设计214.3用户注册设计314.4用户登录设计414.5用户界面的美化5用户界面的设计用户注册登录功能是任何功能性网站应用程序的必要组成部分，因此用户注册登录界面也必然是网页美工设计课题。动态网页设计教程——美工与技术机械工业出版社美工的界面设计网页登录的界面中一般提供用户名和密码的输入框、登录和注册按钮等选项，如图所示是作者主持设计并开发主持的一个网络办公自动化系统的界面。动态网页设计教程——美工与技术机械工业出版社美工的界面设计网易邮箱登录的界面提供了简洁的造型，将用户名、密码、登录等清晰地展示出来。从美工设计而言，可以采用满版式的登录页面，也可以加入到网页中，形成登录版块。除了整体的界面效果外，文本框与按钮的设计往往成为设计的焦点。动态网页设计教程——美工与技术机械工业出版社美工的界面设计动态网页设计教程——美工与技术机械工业出版社注册界面中一般包含用户名、密码之类的一些信息输入项与性别之类的选择项，用于获取用户的信息。其中，用户名和密码是必备的内容，在设计时可根据情况进行分类，如基本信息、其他信息等，并将必填的信息加以标识，通常用红色*表示，网易邮箱注册的界面。在设计注册界面时，往往需要注意的是界面的清晰美观、层次清楚，而切忌用大量的图片和动画效果。技术如何实现对于注册界面，技术实现主要是采用在表格布局的基础上安排控件，然后用CSS样式控制界面的美工，对于满版的登录界面，可以采用背景图片的方式，再用表格安排登录控件，也可以采用切片的方式，进行布局。其中按钮的设计可以用ImageButton控件实现，也可以通过CSS样式修改普通按钮进行更改。动态网页设计教程——美工与技术机械工业出版社数据库的设计根据需求进行数据库的设计，新建数据库UserDB，在数据库中新建表格users用来存放用户信息，其中用户名（username）和密码（password）是必备的字段。选择表分支，单击鼠标右键，新建表。设计指导：输入ID字段名后，选择数据类型为int，在列属性中，设置标识规范为是，这样该字段就能够自动编号（即第一条记录ID值为1，每增加一条记录，ID值自动加1），从而能够可以作为记录的识别编号。单击工具栏中的设置为主键按钮，将该字段作为主键，这样能够提高数据检索的速度，后面表的设计中同样参考这种思路。动态网页设计教程——美工与技术机械工业出版社数据库的设计动态网页设计教程——美工与技术机械工业出版社字段含义字段名称数据类型备注编号IDint标识规范为是，主键用户名UserNameNvarchar50密码PasswordNvarchar50姓名NameNvarchar50性别SexNvarchar2电子邮件EmailNvarchar50用户注册设计用户注册功能的设计主要包括注册界面的设计、用户信息的合法性检查、重名的检测和用户数据的插入数据库操作。动态网页设计教程——美工与技术机械工业出版社用户注册界面设计首先在D盘新建网站myaspnet-6。打开Default.aspx网页，切换到设计视图，输入响应的文字，拖动相应的控件到界面中，设计效果。动态网页设计教程——美工与技术机械工业出版社用户信息的提交在用户注册中，我们先实现注册的基本功能，即把用户信息插入到数据库中。这里先实现插入记录操作，而不做信息合法性验证，验证部分在后面的程序设计中逐步完善。双击注册按钮，进入程序代码视图中，首先在引用部分添加对数据库命名空间的引用：usingSystem.Data.SqlClient;//调用数据库命名空间然后在按钮的Button1_Click事件中编写注册代码，主要是进行数据库连接，获取用户信息，定义SQL语句，执行SQL命令，显示提示信息，程序代码如下：动态网页设计教程——美工与技术机械工业出版社用户信息的提交protectedvoidButton1_Click(objectsender,EventArgse){//定义连接字符串Stringconstr=server=(local);database=UserDB;UserID=sa;pwd=111111;;//定义连接对象SqlConnectionconn=newSqlConnection(constr);//打开连接conn.Open();//定义性别Stringsex=男;//判断性别选项动态网页设计教程——美工与技术机械工业出版社用户信息的提交if(RadioButton2.Checked)sex=女;//定义sql语句Stringsqlstr=insertintoUsers(UserName,Password,Name,Sex,Email)values('+TextBox1.Text+','+TextBox2.Text+','+sex+','+TextBox4.Text+','+TextBox5.Text+');//定义命令SqlCommandcmd=newSqlCommand(sqlstr,conn);//执行命令cmd.ExecuteNonQuery();//显示信息Label1.Text=恭喜你，注册成功;//关闭连接conn.Close();}动态网页设计教程——美工与技术机械工业出版社用户信息的提交调试程序，输入相应信息，单击注册按钮，显示注册成功，。打开SQLServer2005，显示数据表Users中的记录，我们发现信息已经插入到数据表中。动态网页设计教程——美工与技术机械工业出版社用户名的检测与信息验证前面完成了基本功能——记录的插入，下面对程序功能进行完善，对用户名进行重名的检测和用户数据信息进行验证。对于用户名重名的检测，应该放在后台程序中进行判断，而对于用户信息的完整性、正确性可以在前台利用验证控件进行检测。因此，在用户注册界面中，添加验证控件，并设置相应的验证属性。其中关于用户名、密码、确认密码需要进行信息长度的验证，可以选择验证控件进行自定义方式，设置标准表达式为（Custom），定义“密码、确认密码”验证表达式为\w{6,18}，即6-18个字符。定义“用户名”验证表达式为[a-z|A-Z]\w{5,17}，即以字母开头，6-18个字符。动态网页设计教程——美工与技术机械工业出版社用户名的检测与信息验证动态网页设计教程——美工与技术机械工业出版社用户名的检测与信息验证动态网页设计教程——美工与技术机械工业出版社用户名的检测与信息验证在按钮的Button1_Click事件中修改注册代码，主要是先进行用户名重名的验证，即把用户输入的用户名作为查询条件，进行查询，如果存在记录表示用户名已存在，需要重新选择。如果没有记录，表示用户名可用，可以进行注册（插入记录），程序代码如下：动态网页设计教程——美工与技术机械工业出版社用户名的检测与信息验证protectedvoidButton1_Click(objectsender,EventArgse){//定义连接字符串Stringconstr=server=(local);database=UserDB;UserID=sa;pwd=111111;;//定义连接对象SqlConnectionconn=newSqlConnection(constr);//打开连接conn.Open();//以用户输入的用户名为条件进行查询Stringsqlstr=select*fromUserswhereUserName='+TextBox1.Text.Trim()+';SqlCommandcmd=newSqlCommand(sqlstr,conn);SqlDataReaderreader=cmd.ExecuteReader();动态网页设计教程——美工与技术机械工业出版社用户名的检测与信息验证if(reader.Read())//如果阅读器能读，说明有记录存在，即存在同名的用户名{Label1.Text=用户名已存在，请更换！;//关闭阅读器reader.Close();}else//不能读，说明该用户名可用{//务必先关闭阅读器，否则不能执行下面的命令reader.Close();//定义性别Stringsex=男;//判断性别选项动态网页设计教程——美工与技术机械工业出版社用户名的检测与信息验证if(RadioButton2.Checked)sex=女;//定义sql语句sqlstr=insertintoUsers(UserName,Password,Name,Sex,Email)values('+TextBox1.Text+','+TextBox2.Text+','+sex+','+TextBox4.Text+','+TextBox5.Text+');//定义命令cmd=newSqlCommand(sqlstr,conn);//执行命令cmd.ExecuteNonQuery();//显示信息Label1.Text=恭喜你，注册成功;}//关闭连接conn.Close();}动态网页设计教程——美工与技术机械工业出版社用户名的检测与信息验证上面代码中需要注意的是，执行查询用户名后，务必关闭阅读器对象，即reader.Close()，否则后面等SQL命令不能执行。调试程序，输入相应信息，显示验证的信息，输入正确信息，验证错误的信息消失。动态网页设计教程——美工与技术机械工业出版社