《Web前端网页制作》课程设计Word文档格式.docx

1、1 需求分析1.1 系统的功能需求标准学习资源共享系统学习资源共享分类管理，注册会员可发表文章，浏览文章，文章回复，查询文章、热门话题，热门学习资源共享，后台管理维护界面，真正实现节约资源、提高效率、业务处理的同时真正实现学习资源共享的功能作用。1.1.1 会员功能为了使学习资源共享有良好的秩序，在身份确定方面一定要作准确无误。在进入学习资源共享之前每一个用户都要在网站注册一个会员的账号。当然，网站在用户资料的保密方面承诺不外泄。注册号账号之后，用户就可以用账号登录网站，进行发表文章、回复帖子等，对于没有注册的用户是不能浏览帖子的，更不能发帖子。1.1.2 搜索功能用户可以根据自己的实际需求，

2、搜索学习资源共享里的全部文章。可按标题、类别以及关键字来查找各种需要的信息。1.1.3 版主功能版主功能主要是对帖子的管理，其中包括删除帖子、回复帖子、精华设置。删除帖子主要是有的帖子有不健康信息，对于这些信息给予删除。接收到需要回复的帖子时，提出意见、发表见解，给予适当的回复。精华设置是对帖子的访问提出的，用户访问的多信息利用率大，就可以设为精华，对于过时的帖子就取消其精华标志。1.1.4 学习资源共享展区功能学习资源共享展区是主要是各类信息的主题，其中包括用户自拟的主题，这样用户就可以用帖子进行交流。其中包括各种帖图、娱乐焦点、时事新闻等。在经过管理员的筛选，保留下来提供给大家的。在这里可

3、以供用户浏览帖子，发送帖子以及对别人的帖子给予自己的意见，即：回复帖子。1.1.5 后台数据维护功能后台管理主要是对用户的信息管理，其中包括用户管理、帖子管理、修改密码处理。主要是帖子管理，对用户发表的不健康信息给予删除，也包括对不同分区的信息管理，通过对数据库的更新来修改用户密码和发布公告。综合上述分析进行概要设计。1.2 ASP技术简介ASP全名为（Active Server Pages），它是微软公司推出IIS的一个组件，ASP实际是一种在服务器端开发脚本语言的环境。利用它可以开发出动态、交互、高性能Web服务器端的应用，且能较容易实现复杂的Web应用。利用ASP开发的脚本程序全部运行在

4、服务器端，与用户所采用的浏览器无关，从而极大地减少了对客户端的要求。其工作原理是：浏览器从Web服务器调用ASP文件（一种文本文件），服务器端的脚本引擎对每一条脚本语句解释执行，再把执行的结果生成HTML文件传给客户端7。ASP文件包括文本、HTML标记和ASP文件特有的脚本语句。制作ASP文件同HTML文件一样，可以用任何纯文本编辑器进行编辑。 ASP可以使用任何脚本语言，只需提供其相应的脚本引擎就可，ASP自身提供VB ScriPt脚本引擎，缺省为VB Script。ASP包括了5个内置对象：Request对象，从浏览器获取信息；Response对象，发送信息到浏览器；Server对象，控

5、制ASP执行情况，对服务器端ActiveX控件起作用；Session对象，存储用户任务的信息；APPlication对象，使多用户共享一个程序的信息。网站内容的动态化、数据库化是Internet网站发展的必然趋势，ASP以其简单、高效的开发方式及丰富的控制手段为Internet网站的开发应用提供了强有力的支持。1.2 ASP工作原理基于ASP的页面以*.asp文件形式驻留在web服务器上。一个*.asp源文件是文本文件，可以包括以下成分：文本 用于显示信息、页面标题等。 HTML标记 实现页面风格设计。ASP脚本（Script Commands）ASP工作原理图上图显示了ASP的工作原理，当浏

6、览器通过HTTP协议向web服务器申请一个由*.asp定义的页面时，web服务器响应HTTP请求，用ASP引擎解释被申请文件。当遇到ASP脚本命令时，ASP引擎调用相应的脚本引擎（脚本引擎以组件的形式驻留在web服务器上）进行处理。ASP提供两种脚本引擎，即VBScript引擎和VJScript引擎，若要使用其他脚本语言，需要在web服务器上另外安装相应的脚本引擎；当遇到基于COM标准的组件（组件本身是经过编译的可重用二进制码）时，ASP引擎启动相应的组件完成指定的功能。若ASP文件含有访问数据库的请求，ASP内置组件ADO（ActiveX Date Object） 通过ODBC与数据库连接，

7、对数据库进行访问，并将访问结果返回web服务器。ASP引擎将脚本和组件的运行结果生成相应的HTML语法成分，与文件中原有的文本和HTML标记一起组成标准HTML页面送至客户端浏览器。1.3 ASP体系结构当一个浏览器从web服务器请求一个*asp文件时ASP脚本开始运行，web服务器此时调用ASP从头至尾读取请求文件，运行所有命令并把HTML网页返回给浏览器ASP运行模式图 说明了ASP文件使用数据库访问构件通过ADO（Active Date Object）访问数据库的数据时，web服务器起着中间部件的作用。它接收用户web浏览器的web页请求使用ODBC把对数据或数据库的任何命令请求通过网络

8、送到数据库服务器，从数据库服务器接收数据并且把产生的web页和数据送回到用户浏览器。在图4.2中显示了在运行中各部分之间的关系：ASP各部分关系图 1.4 ASP的特点在使用ASP技术时应遵循这样一个原则：即ASP脚本必须与基于COM标签的组件配合使用才能开发出具有实用价值的动态web应用程序。基于组件，可以把应用程序的开发分成两大类任务：一类是开发能被很多程序使用的核心组件；另一类是集成这些核心组件提供的服务，构造出实现特定功能的应用程序。Microsoft及一些“中间件”厂商已针对不同的应用领域提供了许多组件产品，组件的使用者只需要理解组件的接口，不需要知道组件的内部结构和组件使用的数据。

9、在ASP技术中，ASP脚本相当于一种粘合剂，把一个个具有特定功能的组件集成在一起，以形成最终的软件产品。利用组件，开发人员可以专门做自己最擅长的工作，从而减少开发难度；利用组件，还有助于开发人员将用户界面与应用逻辑、数据服务分开，快速开发出可重性高的基于三层客户服务器结构的web应用程序。综上所述，ASP具有如下一些特点：（1）使用普通的文本编辑器（如记事本）即可进行编辑设计；（2）ASP脚本无需编译，容易编写，可在服务器端直接解释执行；（3）与浏览器无关，用户端只要使用可执行HHML码的浏览器，即可浏览ASP所设计的页面；（4）面向对象，在ASP脚本中可以方便地引用系统组件和ASP内置组件，

10、还能通过定制ActiveX Server Component（ActiveX服务器组件）来扩充功能；（5）ASP的源程序不会被传到客户端，因而可以避免所写的源程序故他人窃取，也提高了程序的安全性；（6）与任何ActiveX Scripting语言兼容, 除了可使用VBScript和JScript语言进行设计外，还可通过Plug_in的方式，使用由第三方提供的其它Scripting语言来扩充功能5。1.5 系统数据库连接访问Web数据库的技术有以下几种方式：公共网关接口CGI（Common Gateway Interface）、Internet Server 应用程序编程接口ISAPI（Inte

11、rnet Server Application Programming Interface）、Plug-in（插件）和ASP技术。这些技术都是为了克服HTML静态页面发展起来的。ASP是一个基于Web服务器的脚本开发环境，在ASP平台上可开发和运行动态的、交互的、高性能的Web服务器应用程序。ASP访问数据库原理图说明了ASP访问数据库工作原理。ASP程序在Web服务器端工作，当前端用户请求一个ASP主页时，Web服务器响应HTTP请求并调用ASP引擎执行该文件并解释执行其中的脚本，若脚本中有访问数据库请求，立刻通过ODBC或ILE DB与相应的后台数据库相连，同数据库访问组件ADO完成操作，

12、最后，ASP根据访问数据库的结果生成HTML语言的主页返回给前端用户，用户看到的只是HTML网页，而看不到ASP程序代码，增强了保密性。图5.1 使用中间件的数据库访问三层结构用户对数据库的存取权限认证是中间件中完成，对数据库的查询、插入、更新和删除操作等都封装在中间件中，该中间件位于服务器端，中间件对数据库进行操作后，再将处理结果通过Web服务器返回到浏览器端用户。这样，在用户端输入的用户名和密码，可以通过加密算法进行加密后在网络上传输，在中间件中进行解密认证，然后再进行数据库的存取操作，数据库存取权限的用户名和密码出现在位于服务器端的中间件中，这样就更加安全。本系统采用的正是这样的三层结构

13、的数据库访问模式。1.6 ACCESS数据库ACCESS2003是由Microsoft开发和推广的办公软件管理系统（OFFICE2003）提供的一个个人用数据库,具有操作简单，使用方便的特点：1真正的客户机/服务器体系结构。2图形化用户界面，使系统管理和数据库管理更加直观、简单。3丰富的编程接口工具，为用户进行程序设计提供了更大的选择余地。4与Windows NT完全集成，利用了NT的许多功能，如发送和接受消息，管理登录安全性等。5具有很好的伸缩性，可跨越从运行Windows 95/98的膝上型电脑到运行Windows 2000的大型多处理器等多种平台使用。6对Web技术的支持，使用户能够很容

14、易地将数据库中的数据发布到Web页面上。1.7 BS模式与C/S模式的比较分析C/S模式主要由客户应用程序（Client）、服务器管理程序（Server）和中间件（middleware）三个部件组成。客户应用程序是系统中用户与数据进行交互的部件。服务器程序负责有效地管理系统资源，如管理一个信息数据库，其主要工作是当多个客户并发地请求服务器上的相同资源时，对这些资源进行最优化管理。中间件负责联结客户应用程序与服务器管理程序，协同完成一个作业，以满足用户查询管理数据的要求。B/S模式是一种以Web技术为基础的新型的MIS系统平台模式。把传统C/S模式中的服务器部分分解为一个数据服务器与一个或多个应

15、用服务器（Web服务器），从而构成一个三层结构的客户服务器体系。第一层客户机是用户与整个系统的接口。客户的应用程序精简到一个通用的浏览器软件，如NetscapeNavigator，微软公司的IE等。浏览器将HTML代码转化成图文并茂的网页。网页还具备一定的交互功能，允许用户在网页提供的申请表上输入信息提交给后台，并提出处理请求。这个后台就是第二层的Web服务器。第二层Web服务器将启动相应的进程来响应这一请求，并动态生成一串HTML代码，其中嵌入处理的结果，返回给客户机的浏览器。如果客户机提交的请求包括数据的存取，Web服务器还需与数据库服务器协同完成这一处理工作。第三层数据库服务器的任务类似

16、于C/S模式，负责协调不同的Web服务器发出的SQ请求，管理数据库。B/S模式的优势 首先它简化了客户端。它无需象C/S模式那样在不同的客户机上安装不同的客户应用程序，而只需安装通用的浏览器软件。这样不但可以节省客户机的硬盘空间与内存，而且使安装过程更加简便、网络结构更加灵活。假设一个企业的决策层要开一个讨论库存问题的会议，他们只需从会议室的计算机上直接通过浏览器查询数据，然后显示给大家看就可以了。甚至与会者还可以把笔记本电脑联上会议室的网络插口，自己来查询相关的数据。其次，它简化了系统的开发和维护。系统的开发者无须再为不同级别的用户设计开发不同的客户应用程序了，只需把所有的功能都实现在Web

17、服务器上，并就不同的功能为各个组别的用户设置权限就可以了。各个用户通过HTTP请求在权限范围内调用Web服务器上不同处理程序，从而完成对数据的查询或修改。现代企业面临着日新月异的竞争环境，对企业内部运作机制的更新与调整也变得逐渐频繁。相对于C/S，B/S的维护具有更大的灵活性。当形势变化时，它无须再为每一个现有的客户应用程序升级，而只需对Web服务器上的服务处理程序进行修订。这样不但可以提高公司的运作效率，还省去了维护时协调工作的不少麻烦。如果一个公司有上千台客户机，并且分布在不同的地点，那么便于维护将会显得更加重要。再次，它使用户的操作变得更简单。对于C/S模式，客户应用程序有自己特定的规格

18、，使用者需要接受专门培训。而采用B/S模式时，客户端只是一个简单易用的浏览器软件。无论是决策层还是操作层的人员都无需培训，就可以直接使用。B/S模式的这种特性，还使MIS系统维护的限制因素更少。最后，B/S特别适用于网上信息发布，使得传统的MIS的功能有所扩展。这是C/S所无法实现的。而这种新增的网上信息发布功能恰是现代企业所需的。这使得企业的大部分书面文件可以被电子文件取代，从而提高了企业的工作效率，使企业行政手续简化，节省人力物力。鉴于B/S相对于C/S的先进性，B/S逐渐成为一种流行的MIS系统平台。各软件公司纷纷推出自己的Internet方案，基于Web的财务系统、基于Web的ERP。

19、一些企业已经领先一步开始使用它，并且收到了一定的成效。B/S模式的新颖与流行，和在某些方面相对于C/S的巨大改进，使B/S成了MIS系统平台的首选。2 可行性分析2.1 技术可行性技术上的可行性主要是根据系统分析得到的需要开发的软件，来分析利用现有技术是否能实现待开发的软件。本系统需要连接到互联网上，运用ASP+servlet技术开发，方便快捷，开发所需要的软件工具都是简单易操作的且开源，安全，可维护性强。如下所示：Web服务器：IIS6.0版本.开发技术：ASP+ACCESS技术.开发工具：网页开发工具Macromedia Dreamweaver cs6.数据库：ACCESS服务器操作系统：

20、由于ASP语言的跨平台性，开发过程采用Windows7操作系统，也可以采用Windows10操作系统。现有的硬件和软件在功能上是可以满足系统开发的需求，开发所需要的软件工具都是简单易操作的，开发人员的技术水平完全可以胜任系统的开发。所以该系统在技术上是可行的。2.2 操作可行性该系统具有易用性，B/S结构使得客户端不必安装任何软件，只要有浏览器并连接到Internet或企业内部的Intranet上即可使用，免除了非专业人员操作技术上的困难。服务器操作系统采用Windows XP，Web服务器为IIS5.0版本，数据库为ACCESS。该系统具有友好亲切的使用界面，功能丰富并且使用简单，一般用户无

21、需培训即可使用，对运行的平台和机器配置要求不高，便于配置和应用。2.3 分析结论经以上分析，说明该系统在开发上是可行的， 在技术、操作上都有可行性，可以进行开发。3 概要设计3.1 系统总体构概要设计 为了能把系统的结构介绍得明确，我们采用示意图来加以辅助说明。图3-1 系统总体构成示意图 依照上图第一层是学习资源共享系统，然后接下来份管理员界面（也就是后台）和会员界面（也就是前台）。管理员界面分用户管理和帖子管理，会员界面主要就是浏览帖子，修改密码，回复帖子登录功能。3.2 数据模型3.2.1 数据流图图3-2 整体数据流图 首先，用户访问学习资源共享系统首页，如果是游客可以注册成普通会员，

22、并且登陆，如果是管理员，可以直接登录管理网站后台，管理前台用户发的帖子和管理留言信息以及会员注册信息。用户注册之后登录成为网站会员，前台可以浏览别人发的帖子，也可以发布帖子，还可以回复帖子。3.2.2 系统设计E-R图为了让大家能对各个实体之间的对应关系有所了解，画实体关系图如下：图3-5 系统设计E-R图3.3 数据库设计网上学习资源共享中所有的主题，用户的注册信息，回复的帖子等等，都是通过数据的形式来进行管理和维护，他不同于实体的文字交流。数据库就形如一个仓库，他是用来存放数据的地方。我们在前台进行的每一步，都需要调用数据库中的数据。数据库设计的合理与否，安全性，稳定性这些方面都直接影响着

23、网站的运作。一个好的数据库设计方案，往往能够让网站的效率事半功倍。所以在对数据库的设计要格外的悉心，考虑的要格外周全。确定数据库的物理结构，在关系数据库中主要指存取和存储结构。如果物理设计结果满足原设计要求，即可进行实施，否则，就需要重新设计和修改物理结构，有时甚至要返回逻辑设计阶段修改数据模型。数据库系统是多用户共享的系统，对于同一关系要建立多条存取路径才能满足多用户的多种应用要求。现代技术的飞速发展是数据库存储变的简单、方便、易行。无论是索引法还是聚簌法都可以使物理设计顺利实现。4 详细设计及实现本网站系统的设计实现主要分两个方面：前台页面的的设计实现和后台管理界面的设计和实现。4.1 前

24、台页面的设计与实现4.1.1 首页的设计实现通过Dreamweaver这个网页制作工具可以简单方便的画出前台页面（如下图）。在首页设置用户登录按钮、注册按钮、管理员登录按钮以及其他版块的链接等。没有登录的用户不能进出其他版块。在ASP中这是怎么做到的呢？我们通过过滤器的应用来实现我们的目的。图4-1 学习资源共享首页图4.1.2 用户登录界面的制作 当用户点电击“登录”时，页面会链接到login.ASP也就是我们的登录窗口4.1.3 用户注册界面的制作用户注册界面的制作技术与登录界面的技术很相似，不同的就是这里增加了对脚本语言的使用以及AJAX技术的应用。为了能让用户注册符合我们的要求以便于管

25、理，我们采用了脚本语言（这里主要是vb脚本）。在用户填写的时候如果该用户名已经有人注册了，那么在光标焦点离开用户名文本框的时候后，在右侧的文本框中会显示“该用户已经存在，请重新选择用户”，如果可用，则显示“该用户名可用”，为了使大家明了而又不让大家对冗长的代码厌烦，只给大家看部分关键的代码：界面效果如下图：图4-4 注册页面图4.1.3 用户分区界面的制作 在这里用户可以到不同的版块浏览帖子，发帖子，回帖子。在这个版块里，我们主要解决的问题是：发帖子、浏览帖子、回复帖子以及如何处理分页的问题。4.2 后台页面的设计与实现后台的设计主要有管理员管理设计和版主管理设计。版主只能对自己分区内的帖子与

26、回复进行管理，而管理员可以对所有区内的所有帖子和回复以及用户进行管理。其实现的功能与实现相关技术基本相似，所以我们只写管理员对后台管理的具体设计与实现。4.2.1 管理员登录界面的设计管理员在后台管理所有信息必须保证安全，我们首先要做个管理员的登录界面，版主的登录界面与此相同。图4-9 管理员登录页面图4.2.2 管理员管理的设计与实现管理员登录成功后，在管理界面对学习资源共享的帖子、用户以及公告进行管理，首先是管理分区，通过对数据库的查询，显示出每个分区的帖子信息，从而进行删除、精华设置等操作。那么后台的管理功能又是怎么样实现的呢？（1）新帖的管理 我们把用户新发的帖子排序，然后取出最新发布

27、的5条显示出来（如图），并对内容进行查看，如果是非法的内容就删除掉。图4-11 显示新帖页面图5 测试5.1 测试的任务及目标5.1.1 测试的任务在软件投入生产性运行之前，尽可能多地发现软件中的错误。5.1.2 测试的目标 （1）测试的目的是为了发现程序中的错误而执行程序的过程。 （2）好的测试方案是极可能发现迄今为止尚未发现的错误的测试方案。 （3）成功的测试是发现了到今为止尚未发现的的错误的测试。5.2 测试方案 测试有两种方法：黑盒测试和白盒测试。黑盒测试又称为功能测试，在程序接口进行，只检查程序功能是否能够按照规格说明书的规定正确使用，程序是否能适当地接收输入数据并发生正确的输出信息

28、，而且要能够保持外部信息的完整性。白盒测试又叫结构测试，完全了解程序的结构和处理过程，这种方法按照程序内部的逻辑测试程序，检验程序中每条通路是否都能按照预定要求正确工作。5.3 测试用例测试是软件开发时期的最后一个阶段，也是软件质量保证中至关重要的一个环节，它的目的是发现程序的错误和不足之处。本系统采用黑盒测试中的等价类法，对系统进行测试。检测网站有问题需要大量的输入数据，下面只列出一部分测试用例：5.3.1 会员登录测试建立有效等价类，输入正确的用户名和密码，期望结果是进入用户界面。无效等价类如表5-1所示：表5-1 会员登录无效等价类无效等价类期望结果密码空缺用户名空缺用户名错误密码错误验证码错误密码为空！用户名为空！用户名或密码错误！测试用例：第1组：用户名：niqingzhu 密码：123456 验证码：正确填写 测试结果：进入用户界面（chenggong.ASP）第2组：niqingzhu 密码： 验证码：第3组： 密码：第4组：1 验证码：第5组：ni 密码：第6组：错误填写验证码不正确。5.3.2 发帖测试建立有效等价类是各个项均填写完全，希望结果实提交成功。无效等价类如表5-2所示：表5-2 发帖无效等价类标题空缺作者内容空缺标题不能为空！作者不能为空！内容