《学生信息注册与系统》由会员分享，可在线阅读，更多相关《学生信息注册与系统（114页珍藏版）》请在金锄头文库上搜索。
1、第5章 学生信息注册与系统登录,5.1 学生信息注册,5.2 系统登录,L5.1 学生信息注册,L5.2 系统登录,任务目标,设计好的学生信息注册模块如图5.1、图5.2所示。,图5.1 用户注册页面（1）,图5.2 用户注册页面（2）,设计好的登录页面效果如图5.3所示。,图5.3 系统登录页面效果,5.1 学生信息注册,1学生信息注册页面的布局 为了方便学生的注册，把学生的注册页面分为3个视图完成，第1个视图学生录入自己的学号和姓名，第2个视图学生录入自己的个人信息和密码保护信息，第3个视图显示用户录入的信息，并提示用户注册成功。因此用户注册页面的布局应按照如图5.4所示设计。,图5.4
2、学生信息注册页面的布局,5.1 学生信息注册,2设计学生信息注册页面 设计步骤如下所示： （1）打开创建的“学生成绩管理系统”网站项目，右击“解决方案资源管理器”内的Students文件夹，选择“添加新项”选项，在弹出的“添加新项”对话框中，选择“Web窗体”模板，命名为“StudentRegister.aspx”，选择“Visual C#”语言，不选中“选择母版页”复选框，单击“添加”按钮完成学生信息注册页面的创建。 （2）切换到StudentRegister.aspx页面的设计视图，打开属性窗口并选择顶部下拉框中的“Document” 文挡对象，设置StyleSheetTheme属性为“主
3、题1”，把光标定位到“设计视图”中的Div内，打开“应用样式”窗口（选择“视图”“应用样式”菜单项），单击“应用样式”窗口中的“#innerLayout”样式规则，给该层应用样式规则，打开页面的“源”视图，选中标记，打开“应用样式”窗口，单击“新建样式”按钮，出现“新建样式”窗口，设置“选择器”为“级联样式”，选中“块”类别，设置text-align属性为“center”。,5.1 学生信息注册,（3）切换到StudentRegister.aspx页面的源视图，光标定位在Div内，双击“工具箱”的“标准”选项卡中的MultiView控件，并在MultiView控件内分别添加3个View控件，添
4、加后视图中的代码如下： ,5.1 学生信息注册,（4）切换到StudentRegister.aspx页面的设计视图，在3个View中分别添加Panel控件，3个Panel控件的GroupingText属性分别设置为“录入姓名与学号”、“录入基本信息与密码保护信息”和“你的填写信息”。 （5）光标定位到“录入姓名与学号”的Panel中，选择“表”“插入表”菜单项，弹出“插入表格”对话框，设置行数为2，列数为3，单击“确定”按钮，添加一个2行3列的表格。按照同样的方法在“录入基本信息与密码保护信息”Panel内插入一个2行3列的表格，在“你的填写信息”Panel内插入一个2行2列的表格。 （6）在
5、“解决方案资源管理器”内，打开主题文件夹中的StyleSheet.css文件，在其内部加入如下的代码。,5.1 学生信息注册,（7）选择“录入姓名与学号”Panel内的Table的第一列，通过“应用样式”窗口，给其应用“ThreeTableOne”样式，同样的方法给第二列应用“ThreeTableTwo”样式，第三列应用“ThreeTableThree”样式。“录入基本信息与密码保护信息”Panel内的Table的第一列应用“ThreeTableOne”样式，第二列应用“ThreeTableTwo”样式，第三列应用“ThreeTableThree”样式。“你的填写信息”Panel内的Table
6、第一列应用“TwoTableOne”，第二列应用“TwoTableTwo”。 （8）在“录入姓名与学号”Panel内的Table中按照如图5.5所示添加控件，并按照表5.1设置相关控件的属性。,图5.5 View1设计,5.1 学生信息注册,表5.1 控件属性设置,5.1 学生信息注册,（9）在“录入基本信息与密码保护信息”Panel内的Table中按照如图5.6所示添加所需控件，相应控件的添加与设置方法见表5.2。,图5.6 View2设计,5.1 学生信息注册,3编写学生信息注册页面后台代码 添加代码步骤如下： （1）页面第一次加载的时候，设置MultiView默认显示第一个View，因此
7、需要在Page的Load事件内添加代码，按【F7】键切换到StudentRegister.aspx.cs代码页，添加如下代码： /页面第一次请求的时候执行 if (!Page.IsPostBack) this.MultiView1.ActiveViewIndex = 0; /显示第一个视图 （2）当用户填写完学号和姓名后，单击“下一步”按钮，需要判断系统里是否已有重复的学号，如果有则提示用户，没有则设置MultiView显示第二个View，并设置验证码为当前时间，因此需要添加“下一步”按钮的Click事件代码，按【F7】键切换到设计视图，双击“下一步”按钮，系统自动切换到代码页并添加了“But
8、ton1_Click”方法，在此方法中添加如下代码。 在顶部引入如下的命名空间： using System.Data.SqlClient; using System.Collections.Generic;,5.1 学生信息注册,（3）当通过文件上传控件浏览选中一个图片后，单击“上传”按钮把需要上传的图片上传到服务器上，并通过Image控件显示出所上传的图片。首先在解决方案资源管理器内添加一个命名为“upload”文件夹用于存放图片，按【F7】键切换到设计视图，双击“上传”按钮，添加“上传”按钮的Click事件代码，代码如下所示： /*利用FileUpload控件的PostedFile属性的S
9、aveAs方法进行保存， 保存的路径应该是服务器端的绝对路径*/ /利用Server.MapPath实现相对路径与绝对路径的转换 this.FileUploadstuPic.PostedFile.SaveAs(Server.MapPath(“/upload/“) + this.FileUploadstuPic.FileName); /把上传的文件的相对地址赋值给image控件 this.ImagestuPic.ImageUrl = “/upload/“ + this.FileUploadstuPic.FileName;,5.1 学生信息注册,（4）填写完所有信息后，单击“注册完成”按钮，实现把
10、学生所填写的所有信息添加到数据库中。按【F7】键切换到设计视图，双击“注册完成”按钮，添加Click事件代码，代码如下。,5.1 学生信息注册,4在浏览器中使用本页 （1）在浏览器中查看本页，首先显示如图5.7所示的界面。,图5.7 学生注册界面（a）,5.1 学生信息注册,（2）分别录入用户名和学号，单击“下一步”按钮，则出现如图5.8所示的录入详细信息界面：,图5.8 学生注册界面（b）,5.2 系统登录,1设计系统登录布局 登录界面的布局设计如图5.9所示。,图5.9 登录界面的布局设计,5.2 系统登录,2设计系统登录页面 设计步骤如下： （1）打开前面所创建的网站项目，在“资源管理器
11、解决方案”中右击“Default.aspx”，选择“视图设计器”，选中页面中的div，通过“属性”窗口设置其id为“main”。 （2）选择“视图”“应用样式”菜单项，打开“应用样式”窗口。单击窗口中的“新建样式”选项，在弹出的“新建样式”对话框中的选择器框中输入“#main”，选择“定位”类别，设置position为“absolute”，width为“700 px”，height为“180 px”，top为“50%”，left为“50%”。选择“方框”类别，设置margin的top为“90 px”，right和bottom为“0 px”，left为“350 px”。单击“确定”按钮，会在De
12、fault.aspx“源”视图顶部生成如下的代码。,5.2 系统登录,（3）切换到“源”视图，在id为“main”的div内添加如下代码。 / 标记用来创建圆角矩形 （4）在“源”视图中，选中“fieldset”标记，打开“应用样式”窗口，单击“新建样式”选项，在弹出的“新建样式”对话框中设置“选择器”为“级联样式”，选择“定位”类别，设置其width为“100%”，height为“100%”，修改后的代码如下： （5）切换到“设计”视图，把光标定位到“fieldset”内，选择“表”“插入表”菜单项，在弹出的“插入表格”对话框中设置“行数”为“1”，“列数”为“2”，“宽度和高度”为“100
13、%”，单击“确定”按钮，在fieldset标记内插入一个1行2列的表格。,5.2 系统登录,（6）选中左边列，打开“应用样式”窗口，单击“新建样式”按钮，在弹出的“新建样式”对话框中设置“选择器”为“级联样式”。选择“定位”类别，设置其width为“350 px”；选择“边框”类别，设置右边框的border-style为“solid”；选择“背景”类别，设置背景图片为“主题”文件夹内image文件夹中准备好的图片“system.gif”，background-repeat为“no-repeat”，x和y轴的background-position为“center”。以同样的方法选中右边列，设置其
14、width为“350 px”，设置完毕后效果如图5.10所示。,图5.10 左部效果图,5.2 系统登录,（7）把光标定位到第二个td标记内，选择“表”“插入表”菜单项，在弹出的“插入表格”对话框中设置“行数”为“4”，“列数”为“2”，宽度为“100%”，单击“确定”按钮，在此列中插入一个4行2列的表格。 （8）打开“应用样式”窗口，单击“新建样式”按钮，在弹出的“新建样式”对话框中设置“选择器”为“.right”，“定位位置”为“当前页面”。选择“定位”类别，设置width属性为“150 px”，height属性为“35 px”；选择“块”，设置text-align属性为“right”。单
15、击“确定”按钮，在“当前页”内创建一个嵌入式的css样式规则，代码如下： .right width: 150px; height: 35px; text-align: right; ,5.2 系统登录,（9）打开“应用样式”窗口，单击“新建样式”按钮，在弹出的“新建样式”对话框中设置“选择器”为“.left”，“定位位置”为“当前页面”。选择“定位”类别，设置width属性为“200 px”，height属性为“35 px”；选择“块”类别，设置text-align属性为“left”。单击“确定”按钮，在“当前页”内创建一个嵌入式的css样式规则，代码如下： .left width: 200p
16、x; height: 35px; text-align: left; （10）选中右边单元格内的表格的第一列，打开“应用样式”窗口，选中“right”样式，给第一列应用“right”样式规则。选中右边单元格内的表格的第二列，打开“应用样式”窗口，选中“left”样式，给第二列应用“left”样式规则。,5.2 系统登录,（11）如图5.11所示，在表格内添加相应的文本和控件（标准选项卡内），并按照表5.3设置相应控件的属性。,图5.11 右部效果图 表5.3 控件属性设置,5.2 系统登录,（12）右击此页面，选择“在浏览器中查看”选项，浏览器中的效果如图5.12所示。,图5.12 用户登录,5.2 系统登录,3编写系统登录代码 （1）编写所需的基础类库 为了密码管理的完全性，不能直接保存用户的明文密码，而应该把用户的密码通过MD5加密后保存到数据库中。此学生成绩管理系统的教师密码由管理员提供，所以这里不对教师密码加密，而只对学生密码进行加密。因为这个方法经常使用，所以把其放入一个类中，方便调用，其中还可以放置一些经常使用的方法。右击App_Code文件夹，打开“添加新项”对话框，选择“类”模板，修改名称为“commTools.cs”，类内部的代码如下。,
