毕业设计（论文）基于BS模式的班级风采展示网页的设计与测试

1、班级风采展示网页的设计与测试班级风采展示网页的设计与测试摘要摘要班级风采网站是为了合理利用网络资源、提供班级学习与交流、有效管理班级事务的网络平台。本网站基于 b/s 模式，在 asp.net 集成开发环境下采用c#语言开发完成。本网站由用户模块、在线论坛、风采相册、留言簿模块与管理模块等构成，其中用户模块实现了用户注册、登陆与修改个人资料等功能；在线论坛提供交流平台；风采相册实现图片上载和在线浏览功能；留言簿模块实现网上留言功能；管理模块实现用户管理、论坛管理、相册管理与留言簿管理等功能。本网站能促进班级内学生交流学习，实现用户自由访问，促进学习相互了解，增强班级凝聚力。关键字：关键字：网站

2、；b/s 模式；asp.net；c#the design of class-style website based on asp.netabstractthe 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 in

3、tegrated 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 users registration, login and the personal information. the online-forum is used for the communi

4、cation. 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

5、 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#目目 录录论文总页数：24 页1. 引言.11.1 设计背景.11.2 系统配置.11.3 开发工具与平台.12. 概要设计.22.1 功能需求 .22.2 系统流程.22.3 模块组织.33. 数据库设计.43.1 需求分析 .43.2 数据库表结构.44.详细设计.64.1 导

6、航栏与登录模块.64.2 论坛模块.74.3 班级相册模块.114.4 留言簿模块.174.5 管理员模块.175. 系统性能测试.18结 论.22参考文献.22致 谢.23声 明.24第 1 页 共 24 页1.1. 引言引言1.11.1 设计背景设计背景随着网络技术不断发展，计算机的普及，越来越多的人拥有了自己的电脑，越来越多的学校和班级通过计算机网络来管理其各项事务。同时，学生与学生之间通过网络来交流的方式也日趋频繁。在这种潮流的驱使之下，应该采用什么样的方式来更好的管理学生的各项信息，班级的各项日常事务，以及怎样使学生之间能够更好的交流，成为一个问题。本系统使用 asp.net 技术的

7、动态网页与 sql server2000 数据库结合设计建立的一个网络班级风采网站。用户首先通过内部网络访问本网站，进行简单的注册并经管理员审核通过后，即拥有了使用本网站上所提供的除管理模块外的各功能的权力。功能模块包括在线论坛、留言簿、风采相册等。在线论坛提供用户之间的主要的交流的平台，用户可以发起自己的帖子，来引起班级其它同学的对本帖的讨论或回复，同时用户也可对自己或别人的帖子提出自己的见解，从而很好地促进了班级内同学的交流。留言簿提供网上留言功能。留言可以是班级的老师班长或其它同学的留言，通过网络的迅捷的传输速率达到快速了解及处理班级事务的目的。风采相册可以将班级内同学的相册传到网站上自

8、由浏览，增加班级的亲和力。以上的几个功能很好的解决了上面所提出的问题。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 开发

9、模型相比，它增强了性能。asp.net 是在服务器上运行的编译好的公共语言运行库代码，利用早期绑定、实时编译、本机优化和盒外缓存服务，这相当于在编写代码行之前便显著提高第 2 页 共 24 页了性能。另外，由于 asp.net 框架补充了 visual studio 集成开发环，相比asp，使程序设计相对简化，结构更为清晰。（2） sql server 数据库sql server 是一个具备完全 web 支持的数据库产品，提供了对可扩展标记语言(xml)的核心支持以及在 internet 上和防火墙外进行查询的能力，提供了以 web 标准为基础的扩展数据库编程功能。同时提供了高效的数据库解决方

10、案，可处理海量数据，是个大型的数据库系统。其安全性、稳定性、扩展性、存储数据量都远优于 access、mysql 这些小型数据库。（3） visual studio.net 2003 开发环境visual studio.net 2003 是 microsoft 推出.net 应用程序开发工具。与以往的 web 开发环境相比，vs 2003 使执行常见任务变得容易，从简单的窗体提交和客户端身份验证到部署和站点配置。采用基于文本的分层配置系统，简化了将设置应用于服务器环境和 web 应用程序。由于配置信息是以纯文本形式存储的, 因此可以在没有本地管理工具帮助的情况下应用新设置。在设计时考虑了可缩放

11、性，增加了专门用于在聚集环境和多处理器环境中提高性能的功能。另外，进程受到运行库的密切监视和管理，以便当进程行为不正常（泄漏、死锁）时，可就地创建新进程，以帮助保持应用程序始终可用于处理请求。2.2. 概要设计概要设计2.12.1 功能功能需求需求为了满足班级风采网站的交流的根本目的，根据班级所固有的特点，本网站应包括五大模块：用户模块、在线论坛、风采相册、留言簿模块与管理模块。用户模块主要功能就包括角色划分与用户注册，角色主要划分为一般用户和管理员，一般用户可以对自己的信息查询及修改等，管理员通过管理模块来管理整个网站；在线论坛，论坛主要实现注册用户能在此网站平台之上交流，一般用户可以回复别

12、人的发言，亦可提出自己的言论，以获取他人的建议与意见；风采相册，包括用户上传图片以及图片的浏览功能；留言簿模块，实现用户在线留言。最后是管理模块，主要是管理员对于整个网站的综合性管理，包括用户模块管理、在线论坛管理、相册管理与留言簿管理。2.22.2 系统流程系统流程根据设计要求，用户登陆本网站首页时，选择用户的角色，管理员选择管理员入口进入管理员登陆页面，验证成功后直接进入网站管理模块，对班级的各模块进行管理，包括用户管理、论坛管理、相册管理与留言簿管理。一般用户通过普通用户入口进入一般用户登陆界面，在此页面登陆验证成功后即拥有了访问网站各项功能的权力。包括个人信息、论坛、上载图片、浏览图片

13、、给第 3 页 共 24 页班级留言等功能。班级风采网站使用流程如图 2-1 所示。图 2-1 网站使用流程图2.32.3 模块组织模块组织整个班级网站主要包括的模块有：用户模块、论坛模块、管理员模块、相册模块与留言簿模块。其中管理员模块可化分为用户管理模块、论坛管理模块、相册管理模块与留言簿管理模块四大块。模块组织如图 2-2 所示。用户模块论坛模块管理员模块相册模块班级网站用户管理模块论坛管理模块相册管理模块留言簿模块留言簿管理模块图 2-2 网站模块组织图网站首页管理员入口普通用户入口管理员用户管理登 录注 册论坛主页上载图片页浏览图片页个人信息页错误处理页成功 录论坛管理相册管理留言簿

14、管理是 录留言簿主页否 录成功 录失败 录第 4 页 共 24 页3.3. 数据库设计数据库设计3.13.1 需求分析需求分析作为一个班级风采网站系统，同其他类型的网站一样，首先应该包括用户表，用户表用来存储已注册用户的各项信息。 在线论坛对应于数据库中两张表：帖子信息表和帖子回复表。帖子信息表中存储了论坛中用户发的所有帖子。同时每一个帖子都应有它的回复，在数据库的存储中，将所有的帖子的回复都放到了帖子回复表中，通过表中帖子的不同编号来区分不同的帖子的回复。网站还包括相册模块和留言簿模块，因此数据库中还应包含图片信息表与留言表用来存储上载图片的所有信息和留言的各项信息。3.23.2 数据库表结

15、构数据库表结构根据需求分析及模块划分，设计数据库表结构如下。（1）用户信息表用户信息表中包括有用户编号，用户名，用户密码，用户 qq，用户 e-mail，用户自我描述共六个字段，主键为用户编号，具体设计如表 3-1 所示。表3-1 用户基本信息表users编号字段名称数据类型说明1idint用户id(主键)(自动)2usernamenvarchar(20)用户登录名3passnvarchar(20)用户密码4qqint用户qq号5mailnvarchar(50)e-mail6signnvarchar(200)用户自我介绍（2） 帖子信息表表3-2 帖子信息表threads编号字段名称数据类型说

16、明1threadidint帖子编号(主键)2authornvarchar(50)发帖人用户名3subjectnvarchar(50)帖子标题4contentntext(16)帖子内容5replyint帖子总回复数6totalviewint帖子被浏览数7posttimedatetime发帖时间第 5 页 共 24 页帖子信息表包括帖子编号，发帖用户名，帖子标题，帖子内容，帖子总回复数，帖子总浏览数，发帖时间共七个字段，主键为帖子编号，具体设计如表3-2所示。（3）帖子回复表回复信息表包括回复信息编号，帖子编号，回复标题，回复内容，回复者用户名，回复时间共六个字段。主键为回复信息编号，帖子编号是此

17、表的外键，用此字段与帖子表的主键帖子编号相联系。具体设计如表3-3所示。表3-3 回复信息表messages编号字段名称数据类型说明1messageidint信息id(主键)(自动)2threadidint帖子编号(外键)3subjectnvarchar(50)回复信息标题4contentntext回复内容5authornvarchar(50)回复者6posttimedatetime回复时间（4） 相册表相册表包括相片编号，相片名称，相片上载时间共三个字段，主键为相片编号，具体设计如表3-4所示。表3-4 相册表photos编号字段名称数据类型说明1photoidint照片id(主键)2pho

18、tonamenvarchar(50)照片名称3uploadtimedatetime上传时间（5）留言表留言表包括留言编号，留言者姓名，留言标题，留言内容，留言时间共五个字段，主键为留言编号，具体设计如表 3-5 所示。表3-5 留言表guestbook编号字段名称数据类型说明1guestbookidint留言id(主键)(自动)2subjectnvarchar(50)留言标题3contentntext留言内容4usernamenvarchar(50)留言者姓名5uptimedatetime留言时间第 6 页 共 24 页4.4.详细设计详细设计4.14.1 导航栏与登录模块导航栏与登录模块4.

19、24.2 论坛模块论坛模块用户登陆后进入论坛主页 showthread.aspx。该页面主要设计目的是显示论坛所有的帖子，点击某一帖子进入该帖子对应的页面。并可以通过点击发表帖子控件进入发表帖子页面，将发表的帖子即时的显示在帖子主页上。页面设计如图 4-1 所示。此页面主要控件是 mydatalist 控件，其它为显示控件或超级连接控件。后台首先通过 page_load 调用相关方法实现 mydatalist 的数据绑定。绑定之前首先计算当前页面显示的总的帖子数，调用 threadsdb 中的 currentpagethreads函数，同时对页面分页。图 4-1 论坛页面设计视图（1）page

20、_load 代码如下所示：private void page_load(object sender, system.eventargs e)if (! this.ispostback)int totalpage;int records;int page;if (requestpage =null)第 7 页 共 24 页page =1;elsetrypage = convert.toint32(requestpage);catchpage =1;threadsdb threads = new threadsdb();dataset ds;ds = threads.currentpagethre

21、ads(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(&page);if (start != -1)surl = surl.remove(start,surl.length - start);if (page=1)hlprev.

22、navigateurl =surl+&page=1;hlprev2.navigateurl =surl+&page=1;elsehlprev.navigateurl = surl+&page= + (page-1) ;hlprev2.navigateurl = surl+&page= + (page-1) ;if (page totalpage)hlnext.navigateurl =surl+&page= + (page+1);hlnext2.navigateurl =surl+&page= + (page+1);elsehlnext.navi

23、gateurl =surl+&page= +page;hlnext2.navigateurl =surl+&page= +page;mydatalist.datasource = ds;第 8 页 共 24 页mydatalist.databind();（2）上面代码调用到的 currentpagethreads()的方法代码如下：public dataset currentpagethreads(int currentpage,int pagesize,out int totalpage,out int records)sqlconnection myconnection =

24、 new sqlconnection(configurationsettings.appsettingsconnectionstring);sqldataadapter mycommand = new sqldataadapter(getthreads, myconnection);mycommand.selectcommand.commandtype = commandtype.storedprocedure;dataset allthreads = new dataset(); mycommand.fill(allthreads);dataset dscurrentthreads = ne

25、w dataset();records = allthreads.tables0.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; iendindex; i+)datarow row = d

26、scurrentthreads.tables0.newrow();row.itemarray = allthreads.tables0.rowsi.itemarray;dscurrentthreads.tables0.rows.add(row);return dscurrentthreads;第 9 页 共 24 页（3）currentpagethreads()方法调用存储过程 getthreads，代码如下：create procedure getthreads asselect(threadid,subject,author,content,totalview,reply,posttime

27、)from threadsgo（4）最后，在 html 页中对数据列进行具体的绑定，其中需将帖子标题列绑定在超链接中。具体代码如下：ahref=showmessages.aspx?id= 4.34.3 班级相册模块班级相册模块（1） 图片上载图片上载页面主要控件由文件上传控件filemyfile和button1后台代码来实现。按钮button1首先取得上传文件的文件名与文件扩展名，然后对文件扩展名进行比较，保证上传的为bmp，jpeg，jpg，gif 四种图片中的一种，之后用photos类的对象photo调用类中的方法checkphotoname()，判断上传图片名在数据库中是否有重名。若无重

28、名，则将图片写入到固定的文件夹中，同时将此图片的文件名定入数据库中，调用类photos的方法insertphoto()。设计视图如图第 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(fi

29、lename);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=上传成功; elselabel2.text=请上传图片,只支持bmp,jpeg,gif,jp

30、g格式.; 图 4-2 图片上载页设计视图checkphotoname()方法代码如下所示：public bool checkphotoname(string photoname) sqlconnection myconnection = new sqlconnection(configurationsettings.appsettingsconnectionstring); sqlcommand mycommand = new sqlcommand(checkphoto, myconnection);mycommand.commandtype = commandtype.storedproc

31、edure;/ 向存储过程中传递参数。 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.r

32、ead()第 11 页 共 24 页return true;elsereturn false;checkphotoname()中调用存储过程代码如下：create procedure checkphoto (photoname nvarchar (50) asselect (photoname)from phtotswhere photoname=photonamegoinsertphoto()方法代码如下：public void insertphoto(string photoname) sqlconnection myconnection = new sqlconnection(confi

33、gurationsettings.appsettingsconnectionstring ); sqlcommand mycommand = new sqlcommand(insertphoto, myconnection);mycommand.commandtype = commandtype.storedprocedure;/向存储过程中传递参数。 sqlparameter parameterphotoname = new sqlparameter(photoname, sqldbtype.nvarchar,50);parameterphotoname.value = photoname;

34、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();ins

35、ertphoto()方法调用存储过程insertphoto代码如下：create procedure insertphoto(photoname nvarchar (50) asinsert into photosvalues (photoname)go第 12 页 共 24 页（2）相册浏览模块相册浏览页的设计与帖子浏览页的设计思想基本相同，包括显示主控件mydatalist和上传图片超链接按钮。页面设计如图4-3所示。同样，mydatalist也需在后台先进行表的数据绑定与分页，然后在html中对表中的列绑定。图4-3 图片浏览页设计视图后台page_load源代码如下：private v

36、oid page_load(object sender, system.eventargs e)if (! this.ispostback)int totalpage;int records;int page;if (requestpage =null)page =1;elsetrypage = convert.toint32(requestpage);catchpage =1;photos photo = new photos(); dataset ds;ds = photo.currentpagephotos(page,12,out totalpage,out records);第 13

37、页 共 24 页lblpage.text = lblpage2.text = page + / +totalpage;lblrecord.text = lblrecord2.text = records.tostring();string surl = request.url.tostring();int start = surl.lastindexof(&page);if (start != -1)surl = surl.remove(start,surl.length - start);if (page=1)hlprev.navigateurl =surl+&page=1;

38、hlprev2.navigateurl =surl+&page=1;elsehlprev.navigateurl = surl+&page= + (page-1) ;hlprev2.navigateurl = surl+&page= + (page-1) ;if (page totalpage)hlnext.navigateurl =surl+&page= + (page+1);hlnext2.navigateurl =surl+&page= + (page+1);elsehlnext.navigateurl =surl+&page= +page

39、;hlnext2.navigateurl =surl+&page= +page;mydatalist.datasource = ds;mydatalist.databind();elseresponse.redirect(/users/login.aspx);第 14 页 共 24 页currentpagephotos()代码如下：public dataset currentpagephotos(int currentpage,int pagesize,out int totalpage,out int records) sqlconnection myconnection = new

40、 sqlconnection(configurationsettings.appsettingsconnectionstring); sqldataadapter mycommand = new sqldataadapter(selectphotos, myconnection); mycommand.selectcommand.commandtype = commandtype.storedprocedure;/ 建立并填充一个dataset。dataset allphotos = new dataset();mycommand.fill(allphotos);/ 创建一个新的dataset

41、。dataset dscurrentphotos = new dataset();/ 计算所有photos的条数。records = allphotos.tables0.rows.count;/ 计算当前页第一条photos的位置。int startindex = (currentpage-1)*pagesize;/ 计算当前页最后一条photos的位置。int endindex = startindex + pagesize;/ 计算photos的页数。totalpage = records/pagesize;if (totalpage*pagesizerecords)endindex =

42、records;/ 建立一个与dscurrentphotos数据结构完全一样的dataset.dscurrentphotos = allphotos.clone();/ 取得当前页的所有记录，并保存到新的dataset中去。for (int i=startindex; iendindex; i+)datarow row = dscurrentphotos.tables0.newrow();row.itemarray = allphotos.tables0.rowsi.itemarray;dscurrentphotos.tables0.rows.add(row);return dscurrent

43、photos;调用存储过程 selectphotos 代码如下：create procedure selectphotos asselect *第 15 页 共 24 页from photosgo最后在 html 页中对其 mydatalist 进行列绑定。绑定形式在前面已有，这里不再给出。4.44.4 留言簿模块留言簿模块留言簿的实现与论坛的实现大同小异，页面包括一个主控件 repeater 和提交留言按钮 button1，设计视图如图 4-4 所示。图 4-4 留言簿设计视图repeater 控件代码与论坛 datalist 控件代码相似，button1 后台代码如下：private vo

44、id 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 管理员模块管理员模块管

45、理员模块主要是对各模块的信息进行管理，总体设计为，在页面加入四个 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();第 16 页 共 24 页利用 button1 调用此绑定函数并设置 panel1 的 visible 属性为 true，利用datagrid1_deletecommand 事件执行删除命令并对 datagrid1 进行重绑定。当然datagrid1_deletecommand 必须先在 private void initializecomponent()