班级风采展示网页的设计与测试.doc

591 论文网 www 591LW com 班级风采展示网页的设计与测试班级风采展示网页的设计与测试 摘要摘要 班级风采网站是为了合理利用网络资源 提供班级学习与交流 有效管理 班级事务的网络平台 本网站基于 B S 模式 在 ASP net 集成开发环境下采用 C 语言开发完成 本网站由用户模块 在线论坛 风采相册 留言簿模块与管 理模块等构成 其中用户模块实现了用户注册 登陆与修改个人资料等功能 在线论坛提供交流平台 风采相册实现图片上载和在线浏览功能 留言簿模块 实现网上留言功能 管理模块实现用户管理 论坛管理 相册管理与留言簿管 理等功能 本网站能促进班级内学生交流学习 实现用户自由访问 促进学习 相互了解 增强班级凝聚力 关键字 关键字 网站 B S 模式 ASP net C 591 论文网 www 591LW com The Design of Class Style Website Based on ASP net Abstract The website of class style is used to rationalize the use of network resources provide learning and communication and effectively manage the classes affairs This website is completed based on the B S mode with ASP net integrated development environment and C language This website is consisted of the user module the online forum album style guest book module and the management module The user module is consisted of user s registration login and the personal information The online forum is used for the communication The album style contains picture up loading and online browsing The guest book module accomplishes the online leaving messages The user management module can accomplish the forum management album management and guest book management This website is to promote the communication during the students in class learning and is achieved free access to users for learning mutually and increases class cohesion Key words website B S mode ASP net C 591 论文网 www 591LW com 目目 录录 论文总页数 24 页 1 引言 1 1 1 设计背景 1 1 2 系统配置 1 1 3 开发工具与平台 1 2 概要设计 2 2 1 功能需求 2 2 2 系统流程 2 2 3 模块组织 3 3 数据库设计 4 3 1 需求分析 4 3 2 数据库表结构 4 4 详细设计 6 4 1 导航栏与登录模块 6 4 2 论坛模块 7 4 3 班级相册模块 11 4 4 留言簿模块 17 4 5 管理员模块 17 5 系统性能测试 18 结 论 22 参考文献 22 致 谢 23 声 明 24 591 论文网 www 591LW com 第 1 页 共 24 页 1 1 引言引言 1 11 1 设计背景设计背景 随着网络技术不断发展 计算机的普及 越来越多的人拥有了自己的电脑 越来越多的学校和班级通过计算机网络来管理其各项事务 同时 学生与学生 之间通过网络来交流的方式也日趋频繁 在这种潮流的驱使之下 应该采用什 么样的方式来更好的管理学生的各项信息 班级的各项日常事务 以及怎样使 学生之间能够更好的交流 成为一个问题 本系统使用 ASP NET 技术的动态网页与 SQL Server2000 数据库结合设计建 立的一个网络班级风采网站 用户首先通过内部网络访问本网站 进行简单的 注册并经管理员审核通过后 即拥有了使用本网站上所提供的除管理模块外的 各功能的权力 功能模块包括在线论坛 留言簿 风采相册等 在线论坛提供 用户之间的主要的交流的平台 用户可以发起自己的帖子 来引起班级其它同 学的对本帖的讨论或回复 同时用户也可对自己或别人的帖子提出自己的见解 从而很好地促进了班级内同学的交流 留言簿提供网上留言功能 留言可以是 班级的老师班长或其它同学的留言 通过网络的迅捷的传输速率达到快速了解 及处理班级事务的目的 风采相册可以将班级内同学的相册传到网站上自由浏 览 增加班级的亲和力 以上的几个功能很好的解决了上面所提出的问题 1 21 2 系统配置系统配置 运行本系统需要满足以下的一些配置要求 硬件环境 服务器端 客户端 处理器 Intel Pentium 4 内存 256M 硬盘空间 20G 软件环境 操作系统 Windows 2000 2003 XP 网络协议 TCP IP 浏览器 Internet Explorer 6 0 显示器 VGA 或更高分辨率的显示器 1 31 3 开发工具与平台开发工具与平台 1 ASP NET 技术 ASP NET 是一种建立在通用语言上的程序构架 能被用于一台 Web 服务器 来建立强大的 Web 应用程序 与以前的 Web 开发模型相比 它增强了性能 ASP NET 是在服务器上运行的编译好的公共语言运行库代码 利用早期绑定 实时编译 本机优化和盒外缓存服务 这相当于在编写代码行之前便显著提高 591 论文网 www 591LW com 第 2 页 共 24 页 了性能 另外 由于 ASP NET 框架补充了 Visual Studio 集成开发环 相比 ASP 使程序设计相对简化 结构更为清晰 2 SQL Server 数据库 SQL Server 是一个具备完全 Web 支持的数据库产品 提供了对可扩展标记 语言 XML 的核心支持以及在 Internet 上和防火墙外进行查询的能力 提供了 以 Web 标准为基础的扩展数据库编程功能 同时提供了高效的数据库解决方案 可处理海量数据 是个大型的数据库系统 其安全性 稳定性 扩展性 存储 数据量都远优于 access mysql 这些小型数据库 3 Visual Studio NET 2003 开发环境 Visual Studio NET 2003 是 Microsoft 推出 NET 应用程序开发工具 与以 往的 WEB 开发环境相比 VS 2003 使执行常见任务变得容易 从简单的窗体提 交和客户端身份验证到部署和站点配置 采用基于文本的分层配置系统 简化 了将设置应用于服务器环境和 Web 应用程序 由于配置信息是以纯文本形式存 储的 因此可以在没有本地管理工具帮助的情况下应用新设置 在设计时考虑 了可缩放性 增加了专门用于在聚集环境和多处理器环境中提高性能的功能 另外 进程受到运行库的密切监视和管理 以便当进程行为不正常 泄漏 死 锁 时 可就地创建新进程 以帮助保持应用程序始终可用于处理请求 2 2 概要设计概要设计 2 12 1 功能功能需求需求 为了满足班级风采网站的交流的根本目的 根据班级所固有的特点 本网 站应包括五大模块 用户模块 在线论坛 风采相册 留言簿模块与管理模块 用户模块主要功能就包括角色划分与用户注册 角色主要划分为一般用户和管 理员 一般用户可以对自己的信息查询及修改等 管理员通过管理模块来管理 整个网站 在线论坛 论坛主要实现注册用户能在此网站平台之上交流 一般 用户可以回复别人的发言 亦可提出自己的言论 以获取他人的建议与意见 风采相册 包括用户上传图片以及图片的浏览功能 留言簿模块 实现用户在 线留言 最后是管理模块 主要是管理员对于整个网站的综合性管理 包括用 户模块管理 在线论坛管理 相册管理与留言簿管理 2 22 2 系统流程系统流程 根据设计要求 用户登陆本网站首页时 选择用户的角色 管理员选择管 理员入口进入管理员登陆页面 验证成功后直接进入网站管理模块 对班级的 各模块进行管理 包括用户管理 论坛管理 相册管理与留言簿管理 一般用 户通过普通用户入口进入一般用户登陆界面 在此页面登陆验证成功后即拥有 了访问网站各项功能的权力 包括个人信息 论坛 上载图片 浏览图片 给 591 论文网 www 591LW com 第 3 页 共 24 页 班级留言等功能 班级风采网站使用流程如图 2 1 所示 图 2 1 网站使用流程图 2 32 3 模块组织模块组织 整个班级网站主要包括的模块有 用户模块 论坛模块 管理员模块 相 册模块与留言簿模块 其中管理员模块可化分为用户管理模块 论坛管理模块 相册管理模块与留言簿管理模块四大块 模块组织如图 2 2 所示 用户模块论坛模块管理员模块相册模块 班级网站 用户管理模块论坛管理模块相册管理模块 留言簿模块 留言簿管理模块 图 2 2 网站模块组织图 网 站 首 页 管理员入口 普通用户入口 管理员 用户管理 登 录 注 册 论坛主页 上载图片页 浏览图片页 个人信息页 错误处理页 成功 录 论坛管理 相册管理 留言簿管理 是 录 留言簿主页 否 录 成 功 录 失 败 录 591 论文网 www 591LW com 第 4 页 共 24 页 3 3 数据库设计数据库设计 3 13 1 需求分析需求分析 作为一个班级风采网站系统 同其他类型的网站一样 首先应该包括用户 表 用户表用来存储已注册用户的各项信息 在线论坛对应于数据库中两张表 帖子信息表和帖子回复表 帖子信息表 中存储了论坛中用户发的所有帖子 同时每一个帖子都应有它的回复 在数据 库的存储中 将所有的帖子的回复都放到了帖子回复表中 通过表中帖子的不 同编号来区分不同的帖子的回复 网站还包括相册模块和留言簿模块 因此数据库中还应包含图片信息表与 留言表用来存储上载图片的所有信息和留言的各项信息 3 23 2 数据库表结构数据库表结构 根据需求分析及模块划分 设计数据库表结构如下 1 用户信息表 用户信息表中包括有用户编号 用户名 用户密码 用户 QQ 用户 E mail 用户自我描述共六个字段 主键为用户编号 具体设计如表 3 1 所示 表3 1 用户基本信息表Users 编号字段名称数据类型说明 1IDInt用户ID 主键 自动 2UserNameNvarchar 20 用户登录名 3PassNvarchar 20 用户密码 4QQInt用户QQ号 5MailNvarchar 50 E mail 6SignNvarchar 200 用户自我介绍 2 帖子信息表 表3 2 帖子信息表Threads 编号字段名称数据类型说明 1ThreadIDInt帖子编号 主键 2AuthorNvarchar 50 发帖人用户名 3SubjectNvarchar 50 帖子标题 4ContentNtext 16 帖子内容 5ReplyInt帖子总回复数 6TotalViewInt帖子被浏览数 7PostTimeDatetime发帖时间 591 论文网 www 591LW com 第 5 页 共 24 页 帖子信息表包括帖子编号 发帖用户名 帖子标题 帖子内容 帖子总回 复数 帖子总浏览数 发帖时间共七个字段 主键为帖子编号 具体设计如表 3 2所示 3 帖子回复表 回复信息表包括回复信息编号 帖子编号 回复标题 回复内容 回复者 用户名 回复时间共六个字段 主键为回复信息编号 帖子编号是此表的外键 用此字段与帖子表的主键帖子编号相联系 具体设计如表3 3所示 表3 3 回复信息表Messages 编号字段名称数据类型说明 1MessageIDInt信息ID 主键 自动 2ThreadIDInt帖子编号 外键 3SubjectNvarchar 50 回复信息标题 4ContentNtext回复内容 5AuthorNvarchar 50 回复者 6PostTimeDatetime回复时间 4 相册表 相册表包括相片编号 相片名称 相片上载时间共三个字段 主键为相片 编号 具体设计如表3 4所示 表3 4 相册表Photos 编号字段名称数据类型说明 1PhotoIDInt照片ID 主键 2PhotoNameNvarchar 50 照片名称 3uploadtimeDatetime上传时间 5 留言表 留言表包括留言编号 留言者姓名 留言标题 留言内容 留言时间共五 个字段 主键为留言编号 具体设计如表 3 5 所示 表3 5 留言表GuestBook 编号字段名称数据类型说明 1GuestBookIDInt留言ID 主键 自动 2SubjectNvarchar 50 留言标题 3ContentNtext留言内容 4UsernameNvarchar 50 留言者姓名 5UptimeDatetime留言时间 591 论文网 www 591LW com 第 6 页 共 24 页 4 4 详细设计详细设计 4 14 1 导航栏与登录模块导航栏与登录模块 4 24 2 论坛模块论坛模块 用户登陆后进入论坛主页 ShowThread aspx 该页面主要设计目的是显示 论坛所有的帖子 点击某一帖子进入该帖子对应的页面 并可以通过点击发表 帖子控件进入发表帖子页面 将发表的帖子即时的显示在帖子主页上 页面设 计如 图 4 1 所示 此页面主要控件是 myDataList 控件 其它为显示控件或超级连接控件 后 台首先通过 Page Load 调用相关方法实现 myDataList 的数据绑定 绑定之前首 先计算当前页面显示的总的帖子数 调用 ThreadsDB 中的 CurrentPageThreads 函数 同时对页面分页 图 4 1 论坛页面设计视图 1 Page Load 代码如下所示 private void Page Load object sender System EventArgs e if this IsPostBack int TotalPage int records int page if Request page null 591 论文网 www 591LW com 第 7 页 共 24 页 page 1 else try page Convert ToInt32 Request page catch page 1 ThreadsDB threads new ThreadsDB DataSet ds ds threads CurrentPageThreads page 12 out TotalPage out records lblPage Text lblPage2 Text page TotalPage lblRecord Text lblRecord2 Text records ToString string sUrl Request Url ToString int start sUrl LastIndexOf if start 1 sUrl sUrl Remove start sUrl Length start if page 1 hlPrev NavigateUrl sUrl hlPrev2 NavigateUrl sUrl else hlPrev NavigateUrl sUrl hlPrev2 NavigateUrl sUrl if page TotalPage hlNext NavigateUrl sUrl hlNext2 NavigateUrl sUrl else hlNext NavigateUrl sUrl hlNext2 NavigateUrl sUrl myDataList DataSource ds 591 论文网 www 591LW com 第 8 页 共 24 页 myDataList DataBind 2 上面代码调用到的 CurrentPageThreads 的方法代码如下 public DataSet CurrentPageThreads int currentPage int pageSize out int totalPage out int records SqlConnection myConnection new SqlConnection ConfigurationSettings AppSettings ConnectionString SqlDataAdapter myCommand new SqlDataAdapter GetThreads myConnection myCommand SelectCommand CommandType CommandType StoredProcedure DataSet allThreads new DataSet myCommand Fill allThreads DataSet dsCurrentThreads new DataSet records allThreads Tables 0 Rows Count int startIndex currentPage 1 pageSize int endIndex startIndex pageSize totalPage records pageSize if totalPage pageSizerecords endIndex records dsCurrentThreads allThreads Clone for int i startIndex i endIndex i DataRow row dsCurrentThreads Tables 0 NewRow row ItemArray allThreads Tables 0 Rows i ItemArray dsCurrentThreads Tables 0 Rows Add row return dsCurrentThreads 591 论文网 www 591LW com 第 9 页 共 24 页 3 CurrentPageThreads 方法调用存储过程 GetThreads 代码如下 CREATE PROCEDURE GetThreads as Select ThreadID Subject Author Content TotalView Reply PostTime From Threads GO 4 最后 在 HTML 页中对数据列进行具体的绑定 其中需将帖子标题 列绑定在超链接中 具体代码如下 A href ShowMessages aspx ID 4 34 3 班级相册模块班级相册模块 1 图片上载 图片上载页面主要控件由文件上传控件fileMyFile和Button1后台代码来实 现 按钮Button1首先取得上传文件的文件名与文件扩展名 然后对文件扩展名 进行比较 保证上传的为bmp jpeg jpg gif 四种图片中的一种 之后用 photos类的对象photo调用类中的方法CheckPhotoName 判断上传图片名在数 据库中是否有重名 若无重名 则将图片写入到固定的文件夹中 同时将此图 片的文件名定入数据库中 调用类photos的方法InsertPhoto 设计视图如图 591 论文网 www 591LW com 第 10 页 共 24 页 4 2所示 Button1代码如下所示 private void Button1 Click object sender System EventArgs e Photos photo new Photos string filename Path GetFileName this filMyFile PostedFile FileName ToString string fileExt Path GetExtension filename if fileExt gif fileExt jpeg fileExt bmp fileExt jpg if photo CheckPhotoName filename Label2 Text 上传文件名已经存在 请更改文件名后重新上传 else this filMyFile PostedFile SaveAs Server MapPath allphotos filename photo InsertPhoto filename Label2 Text 上传成功 else Label2 Text 请上传图片 只支持bmp jpeg gif jpg格式 图 4 2 图片上载页设计视图 CheckPhotoName 方法代码如下所示 public bool CheckPhotoName string photoname SqlConnection myConnection new SqlConnection ConfigurationSettings AppSettings ConnectionString SqlCommand myCommand new SqlCommand CheckPhoto myConnection myCommand CommandType CommandType StoredProcedure 向存储过程中传递参数 SqlParameter parameterPhotoName new SqlParameter PhotoName SqlDbType NVarChar 50 parameterPhotoName Value photoname myCommand Parameters Add parameterPhotoName myConnection Open SqlDataReader reader myCommand ExecuteReader CommandBehavior CloseConnection if reader Read 591 论文网 www 591LW com 第 11 页 共 24 页 return true else return false CheckPhotoName 中调用存储过程代码如下 CREATE PROCEDURE CheckPhoto PhotoName nvarchar 50 as Select PhotoName From Phtots Where PhotoName PhotoName GO InsertPhoto 方法代码如下 public void InsertPhoto string photoname SqlConnection myConnection new SqlConnection ConfigurationSettings AppSettings ConnectionString SqlCommand myCommand new SqlCommand InsertPhoto myConnection myCommand CommandType CommandType StoredProcedure 向存储过程中传递参数 SqlParameter parameterPhotoName new SqlParameter PhotoName SqlDbType NVarChar 50 parameterPhotoName Value photoname myCommand Parameters Add parameterPhotoName SqlParameter parameterupload new SqlParameter uploadtime SqlDbType DateTime 8 parameterupload Value System DateTime Now myCommand Parameters Add parameterupload 打开数据库连接并执行命令 myConnection Open myCommand ExecuteNonQuery myConnection Close InsertPhoto 方法调用存储过程InsertPhoto代码如下 CREATE PROCEDURE InsertPhoto PhotoName nvarchar 50 as insert into Photos values PhotoName GO 591 论文网 www 591LW com 第 12 页 共 24 页 2 相册浏览模块 相册浏览页的设计与帖子浏览页的设计思想基本相同 包括显示主控件 myDataList和上传图片超链接按钮 页面设计如图4 3所示 同样 myDataList也需在后台先进行表的数据绑定与分页 然后在HTML中 对表中的列绑定 图4 3 图片浏览页设计视图 后台Page Load源代码如下 private void Page Load object sender System EventArgs e if this IsPostBack int TotalPage int records int page if Request page null page 1 else try page Convert ToInt32 Request page catch page 1 Photos photo new Photos DataSet ds ds photo CurrentPagephotos page 12 out TotalPage out records 591 论文网 www 591LW com 第 13 页 共 24 页 lblPage Text lblPage2 Text page TotalPage lblRecord Text lblRecord2 Text records ToString string sUrl Request Url ToString int start sUrl LastIndexOf if start 1 sUrl sUrl Remove start sUrl Length start if page 1 hlPrev NavigateUrl sUrl hlPrev2 NavigateUrl sUrl else hlPrev NavigateUrl sUrl hlPrev2 NavigateUrl sUrl if page TotalPage hlNext NavigateUrl sUrl hlNext2 NavigateUrl sUrl else hlNext NavigateUrl sUrl hlNext2 NavigateUrl sUrl myDataList DataSource ds myDataList DataBind else Response Redirect users login aspx 591 论文网 www 591LW com 第 14 页 共 24 页 CurrentPagephotos 代码如下 public DataSet CurrentPagephotos int currentPage int pageSize out int totalPage out int records SqlConnection myConnection new SqlConnection ConfigurationSettings AppSettings ConnectionString SqlDataAdapter myCommand new SqlDataAdapter SelectPhotos myConnection myCommand SelectCommand CommandType CommandType StoredProcedure 建立并填充一个DataSet DataSet allPhotos new DataSet myCommand Fill allPhotos 创建一个新的DataSet DataSet dsCurrentPhotos new DataSet 计算所有Photos的条数 records allPhotos Tables 0 Rows Count 计算当前页第一条Photos的位置 int startIndex currentPage 1 pageSize 计算当前页最后一条Photos的位置 int endIndex startIndex pageSize 计算Photos的页数 totalPage records pageSize if totalPage pageSizerecords endIndex records 建立一个与dsCurrentPhotos数据结构完全一样的DataSet dsCurrentPhotos allPhotos Clone 取得当前页的所有记录 并保存到新的DataSet中去 for int i startIndex i endIndex i DataRow row dsCurrentPhotos Tables 0 NewRow row ItemArray allPhotos Tables 0 Rows i ItemArray dsCurrentPhotos Tables 0 Rows Add row return dsCurrentPhotos 调用存储过程 SelectPhotos 代码如下 CREATE PROCEDURE SelectPhotos AS Select 591 论文网 www 591LW com 第 15 页 共 24 页 From Photos GO 最后在 HTML 页中对其 myDataList 进行列绑定 绑定形式在前面已有 这 里不再给出 4 44 4 留言簿模块留言簿模块 留言簿的实现与论坛的实现大同小异 页面包括一个主控件 Repeater 和提 交留言按钮 Button1 设计视图如图 4 4 所示 图 4 4 留言簿设计视图 Repeater 控件代码与论坛 DataList 控件代码相似 Button1 后台代码如下 private void btnSubmit Click object sender System EventArgs e GuestBooksDB GuestBook new GuestBooksDB GuestBook AddGuestBook userNameField Text contentField Text subjectFiel Text Response Redirect GuestBook aspx AddGuestBook 方法代入三个参数 留言人姓名 留言标题 留言内容 并调 用存储过程 AddGuestBook 将值传入数据库添加留言 4 54 5 管理员模块管理员模块 管理员模块主要是对各模块的信息进行管理 总体设计为 在页面加入四 个 DataGrid 控件 用以显示各模块信息 同时加入四个 Panel 控件 将四个 DataGrid 控件一一拖入其中 再建立一个页面头建立一个导航栏 通过选择进 行对某一模块中信息的删除 用户模块的实现过程 建立用户模块控件 DataGrid1 的绑定函数 如下所示 private void UsersBind UsersDB user new UsersDB DataSet ds ds user GetUsers this DataGrid1 DataSource ds this DataGrid1 DataKeyField ID this DataGrid1 DataBind 591 论文网 www 591LW com 第 16 页 共 24 页 利用 Button1 调用此绑定函数并设置 Panel1 的 Visible 属性为 true 利用 DataGrid1 DeleteCommand 事件执行删除命令并对 DataGrid1 进行重绑定 当然 DataGrid1 DeleteCommand 必须先在 private void InitializeComponent 中声明 DataGrid1 DeleteCommand 代码如下 private void DataGrid1 DeleteCommand object source System Web UI WebContr