web大作业报告

Web程序设计

期末考核报告

院系：数学与计算机学院

专业：软件工程

班级： 1202班

学号： 1205110308

姓名：袁琦

指导老师：蒋丽华

20##年5月16日

基于ASP.NET的电子通信录系统的设计与实现

一、需求分析

为了掌握使用ADO.NET访问与操纵数据库的方法，我们决定通过制作一个电子通信录系统来掌握，目标系统应该达到以下要求：

1. 系统的时间经济性。优化的逻辑设计和物理设计能够使系统的运行效率大大提高，系统的反应速度也会加快。

2. 系统的可理解性。用户很容易就可以理解系统的功能和如何使用系统。

3. 系统的可维护性和适应性。系统应该容易被修改、扩充和维护，能够适应用户不断发展变化的需求。

4. 系统的可用性。目标系统的功能要求比较全，必须要能够完全满足系统的业务需求。

二、系统框架总体设计

（一）本系统是基于ASP.NET电子通讯录管理系统的设计与实现，主要实现用户的注册和登录，添加通讯组，显示通讯组，添加联系人，联系人显示和查找，修改密码等功能。

主要模块如下：

1. 用户注册

2. 用户登陆

3. 添加通讯组

4. 显示通讯组

5. 添加联系人

6. 显示联系人

7. 查找联系人

8. 密码修改

电子通讯录系统的系统结构图，如图下图显示：

（二）数据库表的设计。

数据结构描述：数据库名－DataBase

用户名数据表结构（TableUser）

通信组数据表结构（TableGroup）

联系人数据表结构（TableUser）

说明：不同的用户拥有不同的联系组，不同的联系组用不同的联系人。

（三）电子通信录系统应至少包括下列功能页面（页面布局自定）：

1. 用户首先要进行注册，注册成功后，还要允许用户进行密码修改。

2. 通信组的创建 AddGroup.aspx

3. 通信组的显示与维护ShowGroup.aspx

通信组是根据联系人之间的关系建立不同性质的Group，以上页面主要访问数据库中的TableGroup数据表。页面主要功能分别为：组的创建和维护。比如，可以建立亲友通信组、工作通信组、同学通信组以及其他类型通信组等。

4. 联系人信息的添加 AddPerson.aspx

5. 联系人信息的显示与维护ShowPeople.aspx

根据联系人与通信组的关系，对联系人进行分类添加和维护，以上页面涉及到对TableUser数据表的操作，同时需要考虑与TableGroup数据表之间的关系。

6. 查找通信录 Findperson.aspx

设置查找条件，用户可以直接输入查询关键字，也可以先选择通信组，再输入查询关键字，系统返回查询结果，可以绑定DataGrid控件来显示查询结果。

三、详细模块设计及截图

（一）数据库设计

如下图所示，在SQL server数据库中新建了一个数据库名为DataBase,在该数据库中建了三个表，分别是用户名数据表结构（TableUser）、通信组数据表结构（TableGroup）、联系人数据表结构（TableContact），登录方式为Windows方式。

1、用户名数据表结构（TableUser）如下图所示，主键为UserID和Password.

2、通信组数据表结构（TableGroup）如下图所示，主键为GID和UserID.

3、联系人数据表结构（TableContact）如下图所示，主键为UID和GID.

4、建立三个表之间的视图（work）如下图所示，内部联系为：①TableContact.GID=TableGroup.GID；②TableGroup.UserID=TableUser.UserID.

（二）存储过程设计

电子通讯录采在数据库中采用了存储过程。用户的注册和登录，添加通讯组，显示通讯组，添加联系人，联系人显示和查找，修改密码都采用了存储过程，通过编译后存储在数据库，BALL层通过DAL层指定存储过程的名字并用UI层里面的参数，来执行。

（三）三层架构设计

这个电子通讯录使用了三层架构的设计，分为BALL，DAL，UI。BALL层里面有用户的注册和登录，添加通讯组，显示通讯组，添加联系人，联系人显示和查找，修改密码等业务逻辑。BALL层调用DAL里面的函数，UI层调用BALL层的函数。

（四）主页框架设计

设计思路：由于主页中有涉及到菜单栏和内容栏两部分，而且框架结构并不复杂，所以并没有采用css级联式，只是用了简单的左右式框架结构。主页关键框架结构代码截图如下图所示：（主页文件为Home.aspx，框架结构为左边文件为HomeLeft.aspx，右边框架文件为HomeRight.aspx，名字为f2,；其中左边文件的弹出方式是target=f2，即点击左边的超链接，内容在右边显示，此时左边相当于是导航栏）

1、zhu.aspx文件关键代码如下所示：

<HTML>

<HEAD>

<TITLE>武汉工业学院</TITLE>

</frameset>

</HEAD>

</HTML>

2、框架左边导航栏即zhuye.aspx文件关键代码如下所示：

<asp:Label ID="Label1" runat="server" ></asp:Label>

</span>

<a href="AddGroup.aspx" target=f2>创建通信组</a>

</p>

 </p>

<a href="AltGroup.aspx" target=f2>显示通信组</a>

</p>

 </p>

<a href="AltPerson.aspx" target=f2>显示联系人</a>

</p>

 </p>

<a href="AddPerson.aspx" target=f2>添加联系人</a>

</p>

 </p>

<a href="Find.aspx" target=f2>查找联系人</a>

</p>

 </p>

</p>

</form>

</body>

由代码可知，左边菜单栏的弹出方式是f2.

3、框架右边内容栏即zhuye2.aspx文件关键代码如下所示：

<h1 class="style2">欢迎登陆主页！</h1>

</div>

</form>

</body>

由代码可知，初始界面内容是“欢迎登陆主页！”，其后的的内容则是点击左边导航栏的超链接后的显示。

4、运行时截图如下所示：

分析：如图所示，登录主页后右边初始页面显示“欢迎登陆主页”，左边是导航栏。

（三）分模块设计

分模块包括10个部分，分别是主页（zhu.aspx）、登录页面（Default.aspx）、注册页面（zhuce.aspx）、添加通信组（AddGroup.aspx）、显示通信组（AltGroup.aspx）、添加联系人（AddPerson.aspx）、显示联系人（AltPerson.aspx）、修改密码（updatepassword.aspx）、查找联系人（find.aspx）以及配置文件（web.config）。由于主页文件在上面的框架结构中已经描述过了，接下来将描述另外9个分模块的具体实现。

1、登录页面（Default.aspx）

①设计思路：登录页面和注册页面在之前的实验中已做过，只是本次大作业要和数据库相连接，登录页面关键的就是从数据库中查询相关数据再通过按钮判断是否与查询出的数据的用户名和密码保持一致，如果一致则进入到主页，不一致则lable控件显示“用户名或密码错误”；如果用户只输入了用户名或只输入了密码就点击了登录按钮，则lable控件给出提示“输入的信息不完整”。其中数据库查询语句为“select * from TableUser where UserID='" + username.Text + "'and Password='" + password.Text + "'”。如果用户没有用户名，则点击登录按钮下的注册按钮进行注册。

②关键代码如下所示：

</head>

<h1 align=center><span class="style1">; 登录</span><span class="style1"

style="mso-spacerun: 'yes'; font-family: '宋体';"><o:p></o:p></span></h1>

</p>

<p align=center>用户名：

<asp:TextBox ID="username" runat="server" Height="38px" Width="168px"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"

ErrorMessage="必填字段!" ControlToValidate="username">请输入用户名!</asp:RequiredFieldValidator></p>

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"

ErrorMessage="必填字段!" ControlToValidate="password">请输入密码!

</asp:RequiredFieldValidator></p>

<asp:Button ID="Button1" runat="server" Text="登录" Width="256px"

onclick="Button1_Click" Height="47px" BackColor="#0066FF"

style="color: #FFFFFF" /><asp:Label ID="Label1" runat="server"

Text="请输入正确信息" style="color: #6666FF"></asp:Label>!</p>

<p align=center> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/zhuce.aspx" Target="_blank">如果您还未注册,请立即注册 </asp:HyperLink></center></p>

</form>

</body>

</html>

public partial class _Default : System.Web.UI.Page

{

private SqlDataReader ExecuteDataReader(string cmdText, params SqlParameter[] paras)

{

string myConnStr = System.Configuration. ConfigurationManager. ConnectionStrings["whf"].ConnectionString;

SqlConnection conn = new SqlConnection(myConnStr);

conn.Open();

using (SqlCommand cmd = conn.CreateCommand())

{

cmd.CommandText = cmdText;

cmd.Parameters.AddRange(paras);

SqlDataReader reader = cmd.ExecuteReader(CommandBehavior.Close Connection);

return reader;

}

return null;

}

protected void Button1_Click(object sender, EventArgs e)

{

if ((username.Text == "") || (password.Text == "")) { Label1.Text = "输入的信息不完整!"; }

else

{

string myConnStr = System.Configuration.ConfigurationManager. ConnectionStrings["whf"].ConnectionString;

SqlConnection conn = new SqlConnection(myConnStr);

string cmdtext = "select * from TableUser where UserID='" + username.Text + "'and Password='" + password.Text + "'";

SqlCommand cmd = new SqlCommand(cmdtext, conn);

conn.Open();

SqlDataReader dr = cmd.ExecuteReader();

if (dr.Read())

{

Session["UserID"] = username.Text;

Session["Password"] = password.Text;

Response.Redirect("zhu.aspx");

}

else { Label1.Text = "用户名或者密码错误";

dr.Close();

conn.Close();

}

③运行时截图如下所示：

分析：如图所示，登录时可以直接用已注册的用户名及其密码登录，lable控件会给出实时信息，若未注册则点击“如果您还未注册，请立即注册”进入注册页面即可。登录成功后直接进入主页。

2、注册页面（zhuce.aspx）

①设计思路：用户进行注册时，由于在数据库中已将UserID设置为主键，所以当注册已存在的用户名时lable控件给出信息“该用户名已存在”，若注册名与密码均无误则给出信息“注册成功”，同时向数据库内插入一条数据成功，数据库插入语言为“INSERT INTO TableUser(UserID,Password,CreatTime) values('" + username.Text + "','" + password.Text + "','" + time.Text + "')”；注册成功后自动进入登录页面进行登录。

②关键代码如下所示：

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"

ErrorMessage="输入错误！" ControlToValidate="username">必填字段！

</asp: RequiredFieldValidator>

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"

ErrorMessage="输入格式错误！请重新输入！" ControlToValidate="password">必填字段！</asp:RequiredFieldValidator>

<asp:Button ID="Button1" runat="server" Text="注册" onclick="Button1_Click"/>

<asp:Label ID="Label1" runat="server"></asp:Label><p/>

</form>

</body>

public partial class zhuce : System.Web.UI.Page

{

protected void Button1_Click(object sender, EventArgs e)

{

try

{

if (Page.IsValid == true) Label1.Text = "注册成功";

string mySql, myConnStr = System.Configuration. ConfigurationManager. ConnectionStrings["whf"].ConnectionString;

sqlServerClass SqlServer = new sqlServerClass(myConnStr);

//执行SQL语句

mySql = "INSERT INTO TableUser(UserID,Password,CreatTime) values('" + username.Text + "','" + password.Text + "','" + time.Text + "')";

SqlServer.ExecuteNonQuery(mySql);

Response.Redirect("Default.aspx");

}

catch (SqlException ex) { Label1.Text = "该用户名已存在！"; };

}

③运行时截图如下所示：

分析：未注册用户可以在此页面进行注册，用户名和密码为必填项，lable控件会给出实时信息，注册成功后自动跳转到登录页面。

3、添加通信组（AddGroup.aspx）

①设计思路：此页面是用户用来添加通信组的，添加时需要填的信息包括四项，分别是：通信组ID、用户名、通信组名、通信组描述，其中通信组ID是必填选项，通过RequiredFieldValidator控件控制用户这一必填选项，如果用户没有填就按了添加按钮则给出 ErrorMessage="必填字段！" ，其他几个文本框则没有特定要求；当填入的信息无误，用户按下了添加按钮后将会对数据库插入一条数据，插入语言是“INSERT INTO TableGroup(GID,UserID,GName,GDescription) values('" + TextBox1.Text + "','" + TextBox2.Text + "','" + TextBox3.Text + "','" + TextBox4.Text + "')”。

②关键代码如下所示：

<div>通信组ID：<asp:TextBox ID="TextBox1" runat="server" >

</asp:TextBox><asp:RequiredFieldValidator

ID="RequiredFieldValidator1" runat="server" ErrorMessage="必填字段！"

ControlToValidate="TextBox1"></asp:RequiredFieldValidator>

<br />

用户名：<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

通信组名：<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

通信组描述：<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>

<asp:Button ID="Button1" runat="server" Text="添加" onclick="Button1_Click"

<asp:Label ID="Label1" runat="server" ></asp:Label>

</div>

</form>

</body>

public partial class AddGroup : System.Web.UI.Page

{

protected void Button1_Click(object sender, EventArgs e)

{

if (Page.IsValid == true) Label1.Text = "添加成功";

string mySql, myConnStr = System.Configuration.ConfigurationManager. ConnectionStrings["whf"].ConnectionString;

sqlServerClass SqlServer = new sqlServerClass(myConnStr);

//执行SQL语句

mySql = "INSERT INTO TableGroup(GID,UserID,GName,GDescription) values('" + TextBox1.Text + "','" + TextBox2.Text + "','" + TextBox3.Text + "','" + TextBox4.Text + "')";

SqlServer.ExecuteNonQuery(mySql);

}

③运行时截图如下所示：

分析：点击“创建通信组”后，框架右边显示添加分组页面，相应lable控件给出实时信息。

4、显示通信组（AltGroup.aspx）

①设计思路：显示通信组实质上是查询数据库的过程，该页面的显示方式采用的是GridView方式，这种方法比较简便；数据库查询语言是“select * from TableGroup”。

②关键代码如下所示：

<h1 class="style2"><span class="style1">显示分组信息</span></h1>

<asp:BoundField DataField="GID" HeaderText="GID" ReadOnly="true" Sort Expression="GID"/>

<asp:BoundField DataField="GName" HeaderText="GName" ReadOnly="true" SortExpression="GName"/>

<asp:BoundField DataField="GDescription" HeaderText="GDescription" ReadOnly ="true" SortExpression="GDescription"/>

</columns>

</asp:GridView>

</form>

</body>

public partial class AltGroup : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

string myConnStr = System.Configuration.ConfigurationManager. ConnectionStrings["whf"].ConnectionString;

SqlConnection conn = new SqlConnection(myConnStr);

string cmdtext = "select * from TableGroup";

SqlCommand cmd = new SqlCommand(cmdtext, conn);

conn.Open();

SqlDataReader dr = cmd.ExecuteReader();

while (dr.Read())

{

GridView1.DataSource = dr;

GridView1.DataMember = "TableGroup";

GridView1.DataBind();

}

③运行时截图如下所示：

分析：点击导航栏的“显示通信组”后，框架右边显示分组信息，如图，显示出两个我已经创建过的分组信息。

5、添加联系人（AddPerson.aspx）

①设计思路：添加联系人与添加通信组的实现方法类似，也是向数据库中插入一条数据，区别是插入的表名不同，选项也不同，用户需要填写的选项包括9项：联系人ID、所在通信组ID、联系人姓名、联系人性别、联系人地址、邮政编码、联系人手机、联系人电话、联系人E-mail，其中联系人ID、所在通信组ID、联系人姓名是必填项，通过RequiredFieldValidator控件控制，若用户没有填这三个中的任意一个都将提示“必填字段”；有不同的是联系人性别这一栏通过RequiredFieldValidator控件控制用户只能输入“男”或“女”，若输入有误则给出ErrorMessage="输入错误！" ；数据库插入语言为“INSERT INTO TableContact(UID,GID,Name,Gender,Address,PostCode,Telephone,Mobile,Email) values('" + TextBox1.Text + "','" + TextBox2.Text + "','" + TextBox3.Text + "','" + TextBox4.Text + "','" + TextBox9.Text + "','" + TextBox5.Text + "','" + TextBox6.Text + "','" + TextBox7.Text + "','" + TextBox8.Text + "')”。

②关键代码如下所示：

<H1 align=center class="style2">添加联系人</H1>

<div> 联系人 ID：

<asp:TextBox ID="TextBox1" runat="server">

</asp:TextBox><asp:RequiredFieldValidator

ID="RequiredFieldValidator1" runat="server" ErrorMessage="必填字段！"

ControlToValidate="TextBox1"></asp:RequiredFieldValidator>

所在通信组ID：<asp:TextBox ID="TextBox2" runat="server">

</asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="必填字段！" ControlToValidate="TextBox2"/>

联系人姓名：<asp:TextBox ID="TextBox3" runat="server">

</asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="必填字段！" ControlToValidate="TextBox3"/>

联系人性别：<asp:TextBox ID="TextBox4" runat="server"/>

<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="输入错误！" ControlToValidate="TextBox4" />请输入“男”或“女”

联系人地址：<asp:TextBox ID="TextBox9" runat="server" ></asp:TextBox>

邮政编码：<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>

联系人电话：<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>

联系人手机：<asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>

联系人 E-mail：<asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>

<asp:Button ID="Button1" runat="server" Text="添加" onclick="Button1_Click" Width="185px" BackColor="Blue" ForeColor="White" />

<asp:Label ID="Label1" runat="server" ></asp:Label>

</div>

</form>

</body>

public partial class AddPerson : System.Web.UI.Page

{

protected void Button1_Click(object sender, EventArgs e)

{

if (Page.IsValid == true) Label1.Text = "添加成功";

string mySql, myConnStr = System.Configuration.ConfigurationManager. ConnectionStrings["whf"].ConnectionString;

sqlServerClass SqlServer = new sqlServerClass(myConnStr);

//执行SQL语句

mySql="INSERTINTOTableContact(UID,GID,Name,Gender,Address,PostCode, Telephone, Mobile,Email) values('" + TextBox1.Text + "','" + TextBox2.Text + "','" + TextBox3.Text + "','" + TextBox4.Text + "','" + TextBox9.Text + "','" + TextBox5.Text + "','" + TextBox6.Text + "','" + TextBox7.Text + "','" + TextBox8.Text + "')";

SqlServer.ExecuteNonQuery(mySql);

}

③运行时截图如下所示：

分析：点击左边的“添加联系人”后，框架右边显示添加联系人的页面，相应lable控件会给出实时信息。

6、显示联系人（AltPerson）

①设计思路：显示联系人页面与显示通信组页面的方法相识，也是用的GridView方法在页面排列，数据库查询语言“select TableContact.GID,UserID,UID,GName, GDescription, [Name],Gender,Address,PostCode,Telephone,Mobile,Email from TableContact, TableGroup where TableContact.GID= TableGroup.GID”。

②关键代码如下所示：

<h1 align="center">显示联系人信息</h1>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" >

<asp:BoundField DataField="GID" HeaderText="GID" ReadOnly="true" SortExpression="GID"/>

<asp:BoundField DataField="UserID" HeaderText="UserID" ReadOnly="true" SortExpression="UserID"/>

<asp:BoundField DataField="UID" HeaderText="UID" ReadOnly="true" SortExpression="UID"/>

<asp:BoundField DataField="GName" HeaderText="GName" ReadOnly="true" SortExpression="GName"/>

<asp:BoundField DataField="GDescription" HeaderText="GDescription" ReadOnly="true" SortExpression="GDescription"/>

<asp:BoundField DataField="Name" HeaderText="Name" ReadOnly="true" SortExpression="Name"/>

<asp:BoundField DataField="Gender" HeaderText="Gender" ReadOnly="true" SortExpression="Gender"/>

<asp:BoundField DataField="Address" HeaderText="Address" ReadOnly="true" SortExpression="Address"/>

<asp:BoundField DataField="PostCode" HeaderText="PostCode" ReadOnly="true" SortExpression="PostCode"/>

<asp:BoundField DataField="Telephone" HeaderText="Telephone" ReadOnly="true" SortExpression="Telephone"/>

<asp:BoundField DataField="Mobile" HeaderText="Mobile" ReadOnly="true" SortExpression="Mobile"/>

<asp:BoundField DataField="Email" HeaderText="Email" ReadOnly="true" SortExpression="Email"/>

</columns>

</asp:GridView>

</form>

</body>

public partial class AltPerson : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

string myConnStr = System.Configuration.ConfigurationManager. ConnectionStrings["whf"].ConnectionString;

SqlConnection conn = new SqlConnection(myConnStr);

string cmdtext = "select TableContact.GID,UserID,UID, GName,GDescription, [Name],Gender,Address,PostCode,Telephone,Mobile,Email from TableContact, TableGroup where TableContact.GID=TableGroup.GID";

SqlCommand cmd = new SqlCommand(cmdtext, conn);

conn.Open();

SqlDataReader dr = cmd.ExecuteReader();

while (dr.Read())

{

GridView1.DataSource = dr;

GridView1.DataMember = "TableContact";

GridView1.DataBind();

}

③运行时截图如下所示：

分析：点击导航栏的“显示联系人”后，框架右边显示联系人信息，如图显示出我之前已经创建的联系人信息。

7、查找联系人（find.aspx）

①设计思路：查找联系人的页面和思路都比较简单，实质上是查询数据库的过程，查询语句为“select * from TableContact where [Name] like'" + TextBox1.Text + "'”。

②关键代码如下所示：

<h1 align="center">联系人查找</h1>

<p align="center">请输入联系人的名字:<asp:TextBox runat="server" ID="TextBox1"/></p>

<asp:Button ID="Button1" runat="server" Text="查找"onclick="Button1_Click" BackColor="Blue"/></p>