Web课程设计说明书.docx
《Web课程设计说明书.docx》由会员分享，可在线阅读，更多相关《Web课程设计说明书.docx（23页珍藏版）》请在冰豆网上搜索。
Web课程设计说明书
目录
前言2
正文2
1工程概况2
1.1开发环境3
1.2选择开发技术3
2个人网站简介3
2.1设计的目的和意义3
2.2设计的思路与总体方案4
2.3网站的功能介绍4
3数据库设计7
4程序功能的实现9
4.1网站母版及导航设计9
4.2角色管理和用户管理设计10
4.3相册管理页面的设计和实现15
4.4新建相册页面设计15
4.5相册浏览页面的设计和实现17
4.6自定义HTTP处理程序设计及主页面的实现20
4.7网站中其他页面的设计和实现22
致谢25
参考文献25
前言
在微软提供的初学者工具包中，有一个个人网站建设的实例，这个个人网站主要来源于ASP.NET初学者工具包PersonalWebSiteKit（简称PWS）。
PWS是一种个人信息管理网站，在网站上可以发布感悟、生活图片和简历等，使个人信息得到更好地管理和保存。
PWS网站虽然是一个功能不多的网站，但也是一个很典型的具有三层框架的网络系统。
为了满足用户管理和相册管理的需要，在数据库上进行了必要的设计，设计了储存图片和相册的数据库表，此外还设计了一个新的数据访问类，该类主要实现与数据库的链接，根据业务需求，实现对相应数据库表的查询和修改等操作。
在业务处理层设计了大量的方法和类，以便实现与数据层交互，在这里定义了相册类文件Album.cs和图片类文件Photo.cs，其它的方法如相册创建获取方法和图片创建获取方法都包含在PhotoManager.cs文件中。
表示层主要是个页面的功能实现，在这里直观的体现了网站的功能。
正文
1工程概况
在PWS网站中主要创建了一个母版，并运用到网站的其他网页上面，从而简化了各页面的制作与管理。
Default.master母版页创建完成后，还要实现网站导航的功能，这里利用HyperLink控件，实现页面地址的链接，如果页面层次结构发生变化，则需要更改母版的多个链接地址，至少需要在页面的顶部和底部重复同样的工作。
在VS2005中提供了专门的页面导航控件，如SiteMapPath控件和Menu控件等。
通过使用页面导航控件，可以很方便的管理页面。
对于一般的浏览者来说，只能浏览公开的相册及内容，对于非公开的相册，只有注册会员才能够浏览。
在PWS网站中设计了简单的用户管理功能，包括用户注册和登录以及用户的状态等。
此外，还需要角色的管理，实现用户授权，以便确定哪些用户可以进行网站的管理，哪些用户只有浏览的功能。
在PWS网站中，图片的编辑与显示是其中一个非常重要的功能，为了实现这个功能，首先就要把这些图片上传到数据库中，然后把数据库中的图片读取并显示在网页上。
相册浏览页面的设计和实现，通过SqlDataSource控件来连接前面所建立的数据源，通过使用DataList和FormView来显示数据内容。
自定义HTTP处理程序，就是实现接口IHttpHandler，要实现这个接口必须设置IsReusable属性和实现ProcessRequest方法。
创建一个自定义的HTTP处理程序，最后实现所有的个人网站功能。
1.1开发环境
本设计是在WindowsXP操作系统下进行开发和设计的。
页面设计工具采用MicrosoftVisualWebDeveloper2005软件。
数据库设计工具采用SQLServer2000软件。
操作系统：
WindowsXP，版本：
Professional
数据库管理系统：
SQLServer2000；
功能模块开发语言：
ASP.NET；
1.2选择开发技术
ASP.NETAjax技术是一种实现异步（Asynchronous）网络应用的技术，它被整合在ASP.NET2.0之中，是ASP.NET的一种扩展技术。
通过ASP.NETAjax技术，开发人员或程序员可以将Web服务器控件和客户端脚本结合起来，并在此基础上实现Web页面的局部更新功能。
因此，当浏览器与服务器交互时，ASP.NETAjax技术可以将页面中的一部分内容呈现出来，并且可以避免将浏览器中的整个内容提交到服务器。
在PWS网站中，主要实现了以下功能：
网站导航、个人简历显示、常用链接使用、用户注册登录、相册浏览和管理。
2个人网站简介
2.1设计的目的和意义
该系统的应用目标是让已经注册过并且经过管理员同意的用户可以浏览我的图片，知道我的个人简历，下载他们认为好看的图片，管理员收集了一些常用网站或者搜索引擎地址，为了方便网站用户登录到其他网站上，并且能把点击数排在前5位的网站链接放在TOP5栏中，供用户更加便捷的使用。
管理员可以通过登录到自己的平台，对自己的照片进行编辑、删除、修改，还可以添加和导入照片，定义自己上传的这些照片是否公开，对网站的数据库建设和业务处理层中的各种方法和类进行了详细的定义
2.2设计的思路与总体方案
2.2.1系统功能
个人网站根据用户身份的不同，将操作划分为管理员、用户。
2.2.2网站的总体结构
PWS网站是一个比较简单的网站，共有11个页面，分为5个层次，如图1-1所示。
图1-1网站的总体结构
2.3网站的功能介绍
在PWS网站中，主要实现了以下功能：
网站导航、个人简历显示、常用链接使用、用户注册登录、相册浏览和管理。
（1）网站导航功能是网站实现的最主要的功能之一，用于链接到PWS网站的其他网页。
在PWS网站中包含11个具体功能网页，如何实现这些页面之间的快递链接和导航，这就是网站导航要解决的问题，如图1-2所示为页面导航条的页面效果，需要说明的是，导航功能是在母版上实现的，因而，导航条在每一个网站的最上面和最下方都有，使用很方便。
这部分具体实现过程和源代码将在母版页上说明上详细介绍。
图1-2网站导航的显示效果
（2）单击导航条上的“简历”按钮，链接到个人简历显示页面（Resume。
Aspx）。
这个页面将表示个人的信息。
以简历的形式显示在页面上，需要说明的是，由于PWS网站设计的局限性这个网页是静态实现的既不是通过数据库来动态地改变页面上的内容。
如果需要改变网页的内容，需要在设计的模式下使用HTML语言进行设计。
（3）单击导航条上的“链接”按钮，链接到常用链接页面（Link.aspx）。
在这里可以直接链接到常用的搜索引擎，如XX和谷歌等；还可以链接到一些其他的娱乐网站，如网易、新浪等。
这里会把这些常用链接按使用次数排列顺序，最常用的5个链接会放在TOP5中。
与Resume.aspx页面相同，这个网页也是静态实现的，如果需要改变网页的内容，需要在设计模式下使用HTML语言进行设计。
（4）在PWS网站中用户分为两个角色:
管理员和朋友。
管理员拥有网站管理的权限，而朋友角色只拥有网站浏览的权限。
这两个角色需要手动进行设置，选择“网站”→“ASP.NET配置”菜单命令。
选择“ASP.NET配置”菜单命令后，会出现一个“网站管理工具”的页面，这是ASP.NET2.0内部的一个管理页面，用于管理整个项目的会员数据库和配置设置。
切换到“安全”选项卡，打开如图1-3所示的页面。
在这里可以创建用户并设定用户角色。
图1-3创建用户并设定用户角色
在这个页面上，创建一个管理员账户admin和一个朋友账户friend，以便以后的网页测试使用。
单击导航条上的“注册”按钮，链接到用户注册页面（Register.aspx），这里在管理员审核情况下可以注册新的账户，注册页面如图1-4所示。
图1-4用Register.aspx页面创建用户
用户登录模块设置在主页（Default.aspx）上面，输入已注册好的用户名和密码，既可以相应的管理员或朋友身份登录到PWS网站。
登录设置如图1-5所示。
图1-5登录页面
（5）相册浏览和管理师PWS网站实现的最主要的功能之一，这部分功能分为两部分。
1、相册管理部分：
这部分只有是管理员角色的用户才拥有使用权限，主要实现相册的增加、修改、删除等功能，包括的网页有Admin/Albums.aspx、Admin/Photo.aspx和Admin/Details.aspx。
其中Admin/Albums.aspx用于实现相册的管理，如相册的增加、相册的标题的更改、相册属性的修改、相册中图片的增加等功能；Admin/Photo.aspx主要用于实现图片的批量上传，以及单张图片的增加，还可以修改每张图片的标题，以及删除该图片等；Admin/Details.aspx用来显示放大的图片，以便浏览查看。
2、相册浏览部分：
这部分只要是注册用户都可以使用，如果相册被定义为“公开”则未注册用户也可以浏览，这部分包含的网页Albums.aspx、Photo.aspx和Details.aspx。
Albums.aspx用于显示相册内容；Photo.aspx用于显示某一相册中的所有图片；Details.aspx用于显示单张图片以及下载图片的网页链。
该模块由7个子模块组成，主要负责超级管理员、管理员和学生的身份管理以及系统基础数据的管理。
3数据库设计
要把图片上传到数据库中，首先要新建一个PERSONAL数据库，这个数据库保存在网站根目录的APP_Data文件夹中，数据库建立完成后还需要在PERSONAL数据库中建立保存图片的数据库表，这里需要两个表:
Albums（见表1-6）数据库表和Photos数据库表。
Albums数据库表是用来保存已经建立的相册。
在这个表中定义了3个字段，其中AlbumID是相册编号，是表的主键；Caption是相册的标题，用来描述该相册的内容；IsPublic用来定义相册是否公开，如果公开的话则任何浏览这者均可浏览这个相册，否则只有注册用户可以浏览这个相册里的图片。
Photos数据库表用来存储图片。
这个表定义了7个字段，其中PhotoID是表的主键；AlbumID是该图片所属相册的相册编号：
Caption用于存储图片的标题，可以描述该图片的内容；BytesOriginal是一个image类型的字段，表明该图片将以二进制的形式存储到数据表中，而不是像其他图片的应用，仅仅将图片的地址存储到数据库表中；BytesFull、BytesPoster、BytesThumb、这三个字段也是image类型的，分别用来存储大小不同的图片，其中BytesFull存储600像素大小的图片，BytesPoster存储198像素大小的图片，BytesThumb存储100像素大小的图片，这部分定义在PhotoSize.cs文件中。
Photos数据库表视图见表1-7所示。
guestInfo（见表1-8）数据库表用来存储留言者信息的表，这个表将其数据库与前台Datalist相联系，让浏览者不仅看见自己的留言信息，也能够看见其他人的留言信息。
表1-6存储图片表（Photos）
PhotoID
Int
4
存储图片
AlbumID
Int
4
相册编号
Caption
nvarchar
50
图片标题
BytesOriginal
Image
16
存储大小不同的图片
；BytesFull
Image
50
存储大小不同的图片
BytesPoster
Image
50
存储大小不同的图片
BytesThumb
Image
50
家庭住址
表1-7保存相册表（Albums）
字段名
数据类型
宽度
字段描述
AlbumID
Int
4
相册编号
Caption
nvarchar
50
图片标题
IsPublic
Bit
1
是否公开相册
表1-8留言者信息表（guestInfo）
字段名
数据类型
宽度
字段描述
ID
int
4
访客ID编号
userName
varchar
20
访客用户名
Sex
varchar
4
性别
QQ
varchar
20
访客QQ
Email
varchar
40
电子邮件
Content
varchar
300
发帖内容
Reply
varchar
300
回复内容
postTime
datetime
8
发帖时间
Albums数据库表用来存储相册的内容，Photos数据库表用来存储图片的内容，其中这两个表是通过AlbumID实现主键与外键的相互关联，以方便对数据库进行操作。
连接数据库的字符串不需要写入代码中通过Web.config配置文件就可以设置链接数据库的字符串。
通过Web.config配置文件设置连接数据库的字符串，可以提高数据库应用程序的可扩展性，即当改变数据库的连接方式时，只需要修改Web.config配置文件中的数据库连接字符串即可。
4程序功能的实现
4.1网站母版及导航设计
在PWS网站中主要创建了一个母版，并运用到网站的其他网页上面，从而简化了各页面的制作与管理。
4.1.1母版页的设计
首先要在网站上添加一个母版页。
右击“解决方案资源管理器”中的网站目录，从弹出的快捷菜单中选择“添加新项”命令，选择创建母版页的对话框，创建一个模板页。
在“名称”文本框中输入“Default.master”,“语言”选择“Visualc#”。
PWS网站的母版页设计视图如图1-9所示。
图1-9母版页的设计视图
4.1.2网站导航功能的实现
首先要在网站上添加一个web.sitemap页，即右击“解决方案资源管理器”中的网站目录，从弹出的快捷菜单中选择“添加新项”命令，在打开的窗口中选择“站点地图”模版，名称为“web.sitemap”，单击“添加”按钮，即可在网站中添加一个站点地图文件。
在web.sitemap中描述了PWS网站的页面层次结构，整个网站分为4层：
第一层包含Default.aspx；通过Default.aspx页面链接到第二层的页面，包含Resume.aspx、Links.aspx、Albums.aspx、Register.aspx和Admin/Albums.aspx页面；通过Resume.aspx页面可以链接到第三层中的Photo.aspx，而Photo.aspx又可以链接到第四层的Details.aspx页面；同样，在第二层的Admin/Albums.aspx页面可以链接到第三个层次的Admin/Photos.aspx页面，再通过这个Admin/Photos.aspx页面链接到第四个层次的Admin/Details.aspx页面。
4.2角色管理和用户管理设计
4.2.1用户管理设计
在VS2005中，提供了专门的用户管理控件，可以实现用户注册、用户登录等功能。
只需要拖放控件，不需要编写任何代码即可放松地实现一般网站所需要的用户管理功能。
在PWS中提供用户注册的页面是Register.aspx控件，在这个控件内部封装了注册用户的许多基本功能，如查询该用户名是否重复、电子邮件地址是否重复、是否新建用户等功能，这些功能需要数据库的支持，数据库存放在网站项目的APP_Data文件夹中。
首先右击“解决方案资源管理器”中的网站目录，从弹出的快捷菜单中选择“添加新项”命令，添加Register.aspx页面，选择“选择母版页”，选择在上面已经设计好的母版页进入Register.aspx页面中，在页面上拖放一个CreateuserWizard控件，对该控件的属性的设置参数看源代码设计部分，Register.aspx页面的设计视图如上图1-4所示。
在用户成功注册后，就可以使用这个用户名登录到网站了。
登录功能设置在网站的主页上，当然也可以单独地做成一个登录网页，创建过程与注册页面的创建过程基本一样。
要实现登录功能，需要在页面上拖放一个Login控件，登录页面的设计视图如上图1-5所示。
登陆成功后的效果如图2-1所示，用户名为李志博，登陆成功后显示“欢迎李志博！
”。
当用户登录成功后，LoginView控件将显示登录后的页面，也就是代码中LoginName控件中设置的内容。
图2-1登录成功后的效果
4.2.2用户留言设计
用户留言是运用TextBox控件和数据库，然后再反映到留言页，留言页运用DataList控件，运行效果如图2-2所示：
图2-2留言页的运行效果
4.2.3角色管理设计
用户管理只是验证用户身份而已，即该用户是否是一个合法的用户，要实现用户对某些图片的浏览以及对网站管理还需要对用户实现角色的管理，即对用户进行权限分配，使有的用户可以对网站进行管理，而有的用户只可以浏览非公开的图片。
在PWS网站中通过Global.asax文件中的相关语句创建了两个角色（Administrators和Friends）
要在网站设置角色，首先一次选择“网站”→“ASP.NET配置”菜单命令，会出现一个“网站管理工具”的页面，切换到“安全”选项卡，打开其中的创建或管理角色界面，如图2-3所示。
图2-3创建或管理角色界面
在这个界面上可以创建角色，在文本框中输入角色名称，单击“添加角色”按钮即可：
也可以对角色进行管理和删除。
图2-4中显示的是用管理员角色登录与用朋友角色登录的网站导航的区别。
图2-4不同角色登录后的导航的区别
4.3相册管理页面的设计和实现
在PWS网站中，图片的编辑与显示是其中一个非常重要的功能，为了实现这个功能，首先就要把这些图片上传到数据库中，然后把数据库中的图片读取并显示在网页上。
4.4新建相册页面设计
要想在网页上浏览图片，首先要建立相册，这些相册用来编辑地存储图片并将图片分类。
在PWS网站上，Admin/Albums.aspx页面就是用来建立相册的，其页面运行效果如图2-5所示。
图2-5Admin/Albums.aspx页面的运行效果
为了实现上述页面中的功能，还需要定义一个公共的Albums类，以便使页面上的相册与数据库中的Album表关联起来，Albums类的定义包含在Album.cs文件中。
要新建一个相册，单击add按钮即可，创建相册时用到与数据库交互的静态方法包含在PhotoManager.cs文件。
单击rename按钮可更改相册标题，单击delete按钮可删除该相册，单击edit按钮可编辑相册的内容。
实现这些功能的业务层代码包含在PhotoManager.cs文件中。
4.4.1图片上传页面设计
要将图片上传到数据库中，首先要建立上传图片的页面，在PWS网站中Admin/Photos.aspx页面就是用来实现这个功能的页面，其页面的运行效果如图2-6所示。
图2-6Admin/Photos.aspx页面的运行效果
这个页面主要实现了图片的上传和批量上传的功能，为了实现这个功能，还需要在Admin/Photos.aspx代码页上添加一个FormView1_ItemInsering事件函数。
为了实现上述页面中的功能，还需要定义一个公共的Photos类，以便使页面上的相册与数据库中的Photo.cs表关联起来。
在上传图片到数据库的过程中，最重要的就是图片大小的处理，处理的处理方法包含在PhotoManager.cs文件中，其中ResizeImageFile方法用来新建一个原始尺寸的image型图片，CalculateDimensions方法用于决定图片尺寸的计算方法，保证交换后的图片的大小要么在高度上为规定尺寸，要么在宽度上为规定尺寸。
在这个页面实现上传单张图片和批量上传图片的基本功能，具体的页面效果上图所示。
要确定上传图片，单击add按钮即可，上传图片时用到的与数据库交互的静态方法包含在PhotoManager.cs文件中。
在这个页面上单击rename按钮，可以给图片重命名，单击delete按钮可以删除该图片。
实现这些功能的业务层代码包含在PhotoManager.cs文件中。
4.4.2图片显示页面设计
在PWS网站中Admin/Details.aspx页面就是用来实现图片显示的页面，为了实现页面显示的功能，还要在Admin/Details.aspx.cs代码页中填入一些代码（这段代码的作用是读取图片并确定图片的大小），在这个页面上实现单张图片显示的基本功能。
4.5相册浏览页面的设计和实现
本节主要介绍相册浏览页面的设计和实现，通过SqlDataSource控件来连接前面所建立的数据源，通过使用DataList和FormView来来显示数据内容。
4.5.1相册浏览页面设计
在PWS网站中，用于显示相册内容的网页时Albums.aspx页面该网页以表格的形式显示每一相册的每一个图片，每行显示两个相册，相册显示其中的第一张图片，图片下方会有标题和图片数量。
Albums.aspx页面的运行效果如图2-7所示。
图2-7Albums.aspx页面的运行效果
为了实现页面的功能，还需要加载GetAlbums方法，这个方法包含在PhotoManager.cs中，为了能在相册中显示其中的第一张图片，还需要加载GetFirstPhoto方法，在这个页面上实现浏览相册的基本功能。
4.5.2相册内的图片浏览页面设计
浏览某一相册内的所有图片时Photos.aspx页面实现的主要功能，该页面中以表格的形式显示图片，每行显示4张图片，并且在图片的下面会有相应的标题，单击该图片将会链接到Details.aspx页面，单独显示该图片，Photos.aspx页面的运行效果如图2-8所示。
图2-8Photos.aspx页面的运行效果
从上面的代码中可以看到，在运行Photos.aspx页面时还需要传第一个AlbumID参数，以便在Photos.aspx页面选择显示指定相册中的所有图片。
为此，还需要加载GetPhotos方法，才能实现页面上功能，这个方法包含在PhotoManager.cs中，还需要在Photos.aspx.cs代码页中定义一个DataList1_ItemDataBound事件，以便调用GetPhotos方法，在这个页面上实现浏览某一相册内所有图片的基本功能。
4.5.3特定图片浏览页面的设计
能够实现显示相册内特定图片的功能的页面是Detail.aspx页面，该页面只显示一张图片，并在该图片的上方显示其标题，在图片的下方显示下载该图片的链接地址，同时，在页面上方还有导航按钮，如“First”等。
Detail.aspx页面的运行效果如图2-9所示。
图2-9Detail.aspx页面的运行效果
还需要在Detail.aspx.cs代码页面中加载Page_Load事件，在这个页面上实现浏览某一特定图片的基本功能。
4.6自定义HTTP处理程序设计及主页面的实现
4.6.1自定义HTTP处理程序设计
所谓自定义HTTP处理程序，就是实现接口IHttpHandler，要实现这个接口必须设置IsReusable属性和实现ProcessRequest方法。
创建一个自定义的HTTP处理程序步骤如下。
首先右击“解决方案资源管理器”中的网站目录，从弹出的快捷菜单中选择“添加新项”命令，即可打开创建HTTP处理程序的对话框，从中选择“一般处理程序”，在“名称”文本框中输入“Handle.ashx”，单击“添加”按钮即可。
在PWS网站中的自定义HTTP处理程序代码包含在Handle.ashx文件中，在这里实现了ProcessRequest方法并设置了IsReusable属性。
如代码所示，ProcessRequest方法分为四个部分：
基本设置部分，包括设置参数部分等；switch条件语句读取图片部分；判断输入参数获取指定图片部分；判断输入参数获取指定图片部分；将图片数据流转换成二进制数
升级会员 