1用户管理系统建设.docx

1用户管理系统建设.docx

《1用户管理系统建设.docx》由会员分享，可在线阅读，更多相关《1用户管理系统建设.docx（40页珍藏版）》请在冰点文库上搜索。

1用户管理系统建设

用户管理系统建设

Index.asp

用户登录模块

找回密码修改资料模块

新用户注册界面

Register.asp

Refail.asp

Regok.asp

Loginfail.asp

Welcome.asp

Lostpassword.asp

Userupdate.asp

Showquestion.asp

Shoupassword.asp

Userupdateok.asp

Logoot.asp

一、系统整体规划

（一）页面设计规划

在本地站点建立站点文件夹member。

其下将创建的文件夹及文件如图所示

（二）网页美工设计

本例采用“拐角型”布局结构。

美工设计效果如下。

素材可自己制作，也可使用我发给大家的。

二、数据库设计与连接

（一）数据库设计

通过功能分析发现，数据库应该包括注册的用户名、注册密码以及一些个人信息，如性别、年龄、E-mail、电话等。

所以数据库中应该包括上述信息的表，称之为“用户信息表”。

本实验中将数据库命名为member，创建的用户信息表member如图所示。

数据设计库表user的字段组成结构如下：

下面介绍在ACCESS中创建数据库的方法和步骤。

1.新建空白数据库；

2.保存为member.mdb，保存类型中选择“Microsoftofficeaccess2002-2003数据库”，是为了让数据库通用；

3.在空白数据库中建立新的“数据表”，另存为“表名称”为member。

4.按照字段的名称和属性进行设置。

5.打开member数据表，可以再其中预先编辑一些记录对象，其中admin的权限（authority）值为1，其余用户的权限为0，即为一般用户。

6.编辑完成，保存，关闭，数据库和存储用户名和密码等资料的表建立完成。

（二）创建数据库连接

具体步骤：

1.依次单击“控制面板”|“管理工具”|“数据源（ODBC）”|“系统DSN”命令；

2.单击添加按钮，在“创建新数据源”对话框中选择DriverdoMicrosoftAccess（*.mdb）选项，如图

3.单击完成按钮，打开“ODBCMicrosoftAccess安装”对话框，在“数据源名（N）”文本框中输入dsnuser，如图

4.单击选择按钮，找到需要找到的数据库。

5.确定之后，完成系统DSN的设置。

6.启动dreamweaver，在网站根目录下新建一个名为index.asp网页并保存

7.设置好“站点”、“文档类型”、“测试服务器”，在dreamweaver中执行菜单“窗口”|“数据库”命令或者快捷键shift+ctrl+F10，打开“数据库”面板，单击添加按钮，选择“数据源名称（DSN）”。

8.在这个对话框中，在“连接名称”中输入user，单击“数据源名称”，在其中选择dsnuser，其他默认，确定完成。

9.同时在网站根目录下将会自动创建名为Connections的文件夹，该文件夹内有一个名为user.asp的文件，可以用记事本打开。

10.保存文档，完成数据库连接。

三、用户登录模块的设计

（一）登陆界面

在用户访问该用户管理系统时，首先要进行身份验证，这个功能是靠登录界面来实现的。

所以登陆页面中必须有要求用户输入用户名和密码的文本框，以及输入完成后进行登录的“登录”按钮和输入错误后重新设置用户名和密码的“重置”按钮。

详细制作步骤如下：

1.首先来看一下用户登录的首页设计，如图。

2.index.asp页面是用户登录系统的首页，打开前面创建的index.asp页面，输入网页标题“帆云购物中心”，然后执行菜单“文件”|“保存”命令将网页标题保存。

3.执行菜单“修改”|“页面属性”命令，然后在“背景颜色”文本框中输入颜色为#CCCCCC，在“上边距”文本框中输入0像素，这样设置是为了让页面的第一个表格能置顶到上面，并形成一个灰色的底纹的页面，设置如图。

4.设置完成后单击“确定”按钮，进入“文档”窗口，执行菜单“插入”|“表格”命令，在打开的“表格”对话框中，设置3行3列的表格。

表格宽度为775像素，边框粗细、单元格边框和间距都为0，如图。

5.单击确定，完成表格插入。

将鼠标设置在第1行表格中，在“属性”面板中单击合并单元格

，将第一行表格合并，再执行菜单“插入记录”|“图像”，选择图片“01.gif”，如图。

6.单击确定，完成图片插入。

鼠标放置在第3行表格中，合并单元格，将第3行表格合并，插入图片“05.gif”，如图。

7.选择整个表格，在“属性”面板中，选择“对齐”为“居中对齐”，如图。

8.把光标移至创建表格第2行第1列中，在“属性”中设置高度为456像素，宽度为179像素，在垂直中选择“顶端”，再将光标移至这一列中，单击“拆分”按钮，在中加入background=”/images/02.gif”，效果如图。

9.在表格的第2行第2列和第3列中，分别插入同站点images文件夹中的图片03.gif和04.gif

10.单击第2行第1列的单元格，单击“文档”窗口上的拆分按钮，在和之间加入valign=”top”（表格文字和图片的相对摆放位置，可选值为top、middle、bottom）。

11.单击“文档”窗口的“设计”按钮，在刚创建的表格的单元格中，执行菜单插入表单命令

12.将鼠标放置在该表单中，执行菜单“插入记录”|“表格”，打开“表格”对话框，行数5，列为2。

表格宽度179像素。

单击并拖动鼠标分别选择第1行和第5行表格，单击合并按钮进行合并。

在第2行第1列中输入文字说明“用户名”，第2行第2列中执行菜单“插入记录”|“表单”|“文本域”，插入一个单行文本域表单对象，并定义文本域名为“username”，“文本域”设置如图所示

13.第3行第1列表格中输入文字“密码”，在第3行表格的第2列中执行“插入记录”|“表单”|“文本域”，定义文本域名为“password”，“文本域”设置如图所示

14.选择第4行单元格，执行“插入记录”|“表单”|“按钮”命令两次，插入两个按钮，分别更改属性变更，一个是登录时用的“提交表单”选项，一个是“重设置单”，“属性”的设置如图

15.在第5行输入“注册新用户”，并选择这几个字在窗口栏中选择“插入”|“超级链接”，并设置一个转到用户注册页面register.asp，效果如图

16.忘记密码可以找回密码，在表格第5行中输入“找回密码”，并设置一个转到密码查询页面lostpassword.asp的链接对象

17.表单编辑完成之后，来编辑网页的动态内容，使用户可以通过该网页中表单的提交实现登录功能。

打开“服务器行为”面板，单击添按钮，执行菜单“用户身份验证”|“登录用户”，如图

18.打开“登录用户”对话框，各项参数设置如图

19.单击确定后，返回“文档”窗口。

在“服务器行为”面板中就增加了一个“登录用户”行为，如图

20.表单对象对应的“属性”面板的动作属性值如图所示，为<%=MM_LoginAction%>，这是dreamweaver自动生成的动作代码。

21.保存到本地站点，完成首页的制作

（二）登录成功和登录失败页面的制作

登录如果不正确，就会转到loginfail.asp页面；如果登录信息正确，就会转到welcome.asp页面。

1.创建新ASP网页并保存为loginfail.asp在网站根目录下，在“布局”下拉菜单中选择“无”，；

2.登录失败页面设计如图所示。

在文档中选择“这里”文本，加入超级链接指向index.asp

3.保存，完成创建

下面制作welcome.asp页面

1.创建新ASP网页并保存为welcome.asp在网站根目录下；

2.类似的方法制作静态部分，如图

3.执行“窗口”|“绑定”，打开“绑定”面板，单击添加按钮，选择“阶段变量”定义一个阶段变量，如图所示

4.打开“阶段变量”对话框。

在名称中输入MM_username，单击确定

5.在文档窗口拖动鼠标选择“XXXXXX”文本，然后在“绑定”面板中选择MM_username变量，再单击“绑定”面板底部的“插入”按钮，将其插入到该“文档”的指定位置。

完了就可以看到“XXXXXX”被{Session.MM_username}代替，如图所示

6.在文档中选中“注销你的用户”文本。

执行“窗口”|“服务器行为”|“用户身份验证”|“注销用户”

7.打开“注销用户”对话框进行设置。

●“在以下情况下注销”用于设置注销，在本实验中选中“单击链接”，在右边下拉菜单中选择“注销你的用户”

●“在完成后，转到”用于设置注销后显示的页面，在右侧文本框输入logoot.asp，如图

8.确定之后返回“文档”窗口。

在“服务器行为”中就添加了一个“注销用户”行为，同时可以看到“注销用户”链接文本对应的“属性”面板中的“链接”属性值是<%=MM_Logout%>，这是dreamweaver自动生成

9.logoot.asp的页面设置比较简单，不做详细说明，在页面的“这里”指定一个链接到首页index.asp就可以了，如图

10.保存到本地站点。

就可以进行测试该系统的执行情况了。

文档中的“修改您的注册资料”链接到userupdate.asp页面，此页面在后面的修改中进行介绍。

（三）用户登录系统功能的测试

制作好系统后，需要测试才能上传到服务器使用，步骤如下：

1.打开IE，输入/index.asp，打开index.asp

2.在“用户名”和“密码”文本框输入，单击“登录”

3.如果登录信息错误，就会转到loginfail.asp

4.如果正确，则显示登录成功页面。

这里输入的是预设在数据库中的用户admin，成功就会转到welcome.asp

5.如果想注销，只需要单击“注销你的用户”即可，就会转到logoot.asp，然后单击“这里”回到首页。

6.至此登录功能测试完成

四、用户注册模块的设计

该模块是实现新用户注册功能

（一）用户注册页面

用户注册的操作就是向member.mdb数据库的member表中添加记录的操作，如图

1.创建新ASP网页并保存为register.asp在网站根目录下，在“布局”下拉菜单中选择“无”，

2.在dreamweaver中使用静态页面的工具完成如图所示的静态部分，这里说明的是在注册时需要加入一个“隐藏区域”并命名为authority，设置默认值为0，即所有的用户注册的时候默认是一般访问用户

3.还需要设置一个验证表单的动作，用来检查访问者在表单中填写的内容是否满足数据库中表user中字段的要求。

在将用户填写的注册资料提交到服务器之前，就会对用户填写的资料进行验证。

如果有不符合要求的信息，可以向访问者显示错误的原因，并让访问者重新输入。

4.执行菜单“窗口”|“行为”，打开行为面板的添加按钮，从打开的行为列表中选择“检查表单”，打开如图

本试验中，设置username、password、password1、answer、truename、address文本域为“值：

必需的”，“可接受：

任何东西”，也就是说这几个文本域必填不能空；tel和QQ文本域验证条件为“值：

必需的”，“可接受：

数字”，表示这两个必须填写数字不能为空；e-mail文本域的验证条件是“值：

必需的”，“可接受：

电子邮件”，表示该文本域必须填写电子邮件地址不能为空

5.设置完成，点击确定

6.在文档窗口单击工具栏中的“代码”按钮，在验证表单的动作代码中加入如下：

//宣告脚本语言为javascript

--

functionMM_findObj（n,d）{//v4.01

varp,i,x;if（!

d）d=document;if（（p=n.indexf（"?

"））>0&&parent.frames.length）{

d=parent.frame[n.substring（p+1）].document;n=n.substring（0,p）;}

if（!

（x=d[n]）&&d.all）x=d.all[n];for（i=0;!

x&&i

for（i=0;!

x&&d.layers&&i

if（!

x&&d.getElementById）x=d.getElementById（n）;returnx;

}

//定义创建对话框基本属性

functionMM_validateForm（）{//v4.0

vari,p,q,nm,test,num,max,errors='',args=MM_validateForm.arguments;

//检查提交表单的内容

for（i=0;i<（args.length-2）;i+=3）{test=args[i+2];val=MM_findObj（args[i]）;

if（val）{nm=val.name;if（（val=val.value）!

=""）{

if（test.indexof（'isEmail'）!

=-1{p=val.indexof（'@'）;

if（p<1||p==（val.length-1））errors+='-'+nm+'需要输入邮箱地址.\n';

//如果提交的邮箱地址表单中不是邮件格式则显示为"需要输入邮箱地址"

}esleif（test!

='R'）{num=parseFloat（val）;

if（isNaN（val））errors+='-'+nm+'需要输入数字.\n';

//如果提交的电话表单中不是数字则显示为"需要输入数字"

if（test.indexOf（'inRange'）!

=-1）{p=test.indexOf（':

'）;

min=test.substring（8,p）;max=test.substring（p+1）;

if（num

需要输入数字'+min+'and'+max+'.\n';

//如果提交的QQ表单中不是数字则显示"需要输入数字"

}}}elseif（test.charAt（0）=='R'）errors+='-'+nm+'需要输入.\n';}

//如果提交的地址表单为空则显示为"需要输入"

}if（MM_findObj（'password'）.value!

=MM_findObj（'password1'）.value）errors+='-两次密码输入不一致\n';

if（errors）alert（'注册时出现如下错误:

\n'+errors）;

document.MM_returnValue=（errors==''）;

//如果出现错误时将显示"注册时出现如下错误:

"

}

//-->

编辑完成后，单击“设计”按钮，返回文档窗口

此时，可以测试一下执行的结果

7.在该网页中添加一个“插入记录”的服务器行为。

执行“窗口”|“服务器行为”，打开“服务器行为”面板，单击添加按钮，选择“插入记录”。

8.在对话框中设置：

●从“连接”下拉列表框选择user作为数据源连接对象

●从“插入到表格”下拉列表框选择member作为使用的数据库表对象

●在“插入后，转到”文本框中设置记录成功添加到表member后，转到regok.asp

●在对话框下半部分，将网页中的表单对象和数据库中表member中的字段一一对应，如图

9.设置完成后，单击确定，返回“文档”窗口，如图

10.设置检查用户名是否重复。

单击“服务器行为”上的添加按钮，在弹出的菜单中，执行“用户身份验证”|“检查新用户名”命令，在对话框中设置如下：

●在“用户名字段”下拉列表框中选择username字段

●在“如果已存在，转到”文本框中输入regfail.asp，该网页将在后面编辑

●设置完成如图

11.设置完成后，将该文档保存到本地站点中，完成本页制作。

（二）注册成功和注册失败页面

为了方便登录，应该在regok.asp中设置一个转到index.asp的文字链接。

同时为了方便访问者重新进行注册，则应该在regfail.asp页面设置一个转到register.asp页面的文字链接。

1.创建新ASP网页并保存为regok.asp在网站根目录下

2.regok.asp如图所示，制作比较简单，省去，其中“这里”指向index.asp的链接

3.如果输入错误或用户名已经存在，在应该显示注册失败的信息。

新建一个regfail.asp页面，设计如图。

其中“这里”指向register.asp的链接

（三）用户注册功能的测试

1.打开IE，输入，打开register.asp

2.输入一些不正确的信息，错填或者少填一些内容，以测试网页中验证表单动作的执行情况。

3.在页面中注册一个已经存在的用户名，如果输入admin。

单击“确定”，由于已经存在，浏览器会转到regfail.asp，如图，告诉访问者用户名已经存在。

此时，注册者可以单击“这里”返回register.asp，以重新注册。

4.在该注册页面填写任意注册资料

5.单击“确定”，浏览器会转到regok.asp页面，此时，访问者可以单击“这里”，转到index.asp以便进行登录

6.在Access中打开用户数据库文件member.mdb，查看其中的member表对象的内容，此时可以看到在该表的最后一行多了一条刚提交的注册信息。

五、用户注册资料修改模块的设计

（一）修改资料页面

该页面主要把用户所有资料都列出，通过“更新记录”实现资料修改的功能，步骤如下：

1.首先制作用户修改资料页面。

由于和用户注册页面相似，可以通过修改register.asp页面来得到所需要的记录更新页面。

打开register.asp，“另存为”userupdate.asp

2.打开“服务器面板”，删去全部的服务器行为并修改其相应的文字，修改完成后显示如图

3.打开“绑定”面板，单击添加按钮，选择“记录集（查询）”

4.在该对话框中设置“

●在“名称”输入upuser作为该“记录集”的名称

●从“连接”下拉列表框选择“user数据源”连接对象

●从“表格”下拉列表框中，选择使用的数据库表对象为member

●在“列”单选按钮组中先选中“全部”单选按钮

●在“筛选”栏中设置记录集过滤的条件为username=阶段变量/MM_userName。

完成设置后如图

5.设置完成，完成记录集的绑定

6.完成记录集的绑定后将upuser记录集中的字段绑定到页面上相应的位置上，如图

7.对于网页中的单选按钮组sex对象，单击“服务器行为”面板中的添加按钮，执行“动态表单元素”|“动态单选按钮”，设置动态单选按钮组对象。

打开“动态单选按钮”，从“单选按钮组”下拉列表框中，选择form1表单中的单选按钮组sex。

单击“选取值等于”后

按钮，从打开的“动态数据”对话框中选择记录集upuser中的sex字段。

并用相同的方法设置“密码提示问题”的列表选项，设置完成如图所示。

8.单击“服务器行为”面板上的添加按钮，选择“更新记录”，为网页添加更新记录的服务器行为

9.打开“更新记录”对话框，该对话框与插入记录的对话框相似，具体设置如图。

10.设置完成，返回“文档”窗口，将文档保存到本地站点中。

11.由于本页的MM_username值是来自上一页注册成功的用户名值，所以单独测试时会提示出错，要先登录，在登录成功的页面单击“修改您的注册资料”超链接到该页面才能产生效果。

（二）更新成功页面

用户修改注册资料成功后，就会转到userupdateok.asp。

在该页面，应该向用户显示资料修改成功的信息。

如果用户要继续修改资料为其提供一个返回到userupdate.asp的链接；如果不需要修改，则为其提供一个转到用户登陆页面index.asp页面的链接，步骤：

1.创建新ASP网页并保存为userupdateok.asp在网站根目录下

2.为了向用户提供更好的界面，应该在网页中显示用户修改的结果，以供用户检查修改是否正确。

应该首先定义一个记录集，然后将绑定的记录集插入到网页中相应的位置，方法与制作页面userupdate.asp中的方法一样。

通过在表格中添加记录集中的动态数据对象，把用户修改后的信息显示在表格中，具体操作参照之前的做法

（三）修改资料功能的测试

1.打开IE，输入，打开index.asp，在页面中登录，成功后进入welcome.asp，单击“修改您的资料”，转到userupdate.asp

2.在该页面进行一些修改，然后单击提交。

如果更新成功，浏览器转回到userupdateok.asp

3.在Access中打开用户数据库文件member.mdb，查看其中的member表对象的内容，此时可以看到，对应的记录内容已经修改

六、密码查询模块的设计

通过设置的问题和答案找到遗失的密码。

方法是判断用户提供的答案和数据库中答案是否一致，来找回密码。

（一）密码查询页面

本节主要制作密码查询页面lostpassword.asp，步骤如下：

1.创建新ASP网页并保存为lostpassword.asp在网站根目录下，在“布局”下拉菜单中选择“无”，设计的页面如图所示

2.在“文档”窗口中选中表单对象，在“属性”面板中，在“表单ID”文本框中输入form1，在“动作”文本框中输入showquestion.asp作为该表单提交的对象页面。

在“方法”下拉列表框中选择POST作为该表单的提交方式，接下来将输入用户名的文本域命名为inputname，如图

3.新建文档，输入网页标题“查询问题”，另存为showquestion.asp

4.在dreamweaver中制作静态网页，效果如图

5.在“文档”窗口选中表单对象，在“属性”面板中，在“动作”文本框中输入showpassword.asp作为该表单提交的对象页面。

在“方法”下拉列表框中选择POST作为该表单的提交方式，如图所示。

接下来将输入密码提示问题答案的文本域命名为inputanswer

6.执行“窗口”|“绑定”，打开绑定面板，单击添加按钮，选择“记录集（查询）”

7.在对话框中设置

●在“名称”文本框中输入Recordset1作为该记录集的名称

●从“连接”下拉列表框选择“user数据源”连接对象

●从“表格”下拉列表框中，选择使用的数据库表对象为member

●在“列”先选中“选定的”单选按钮，然后在下拉列表框中选择username和question

●在“筛选”栏中设置记录集过滤的条件为username：

=，表单变量：

inputname，表示根据数据库中username字段的内容是否和从上一个网页中的表单中的inputname表单对象传递过来的信息完全一致来过滤记录对象。

完成设置后如图

8.设置完成，关闭对话框，返回到“文档”窗口

9.将Recordset1记录集中的question字段绑定