动态网页设计与实现论文.docx
《动态网页设计与实现论文.docx》由会员分享，可在线阅读，更多相关《动态网页设计与实现论文.docx（21页珍藏版）》请在冰豆网上搜索。
动态网页设计与实现论文
中央民族大学
动态网页的设计与实现论文
项目编号：
GCCX2013110029
项目类型：
国家大学生创新创业训练计划
指导教师：
吴立成
项目成员：
丁亚平、拜健、吴万明、刘鑫珂、晏超、沙那提
依托单位：
信息工程学院
2014年03月16日
动态网页的设计与实现
摘要
随着网络技术的发展，通过互联网实现棋类的人机博弈成为了当前计算机博弈领域迫切需要的一项关键技术，就此，项目拟研究棋类人机博弈的动态网页技术，并开发实现一个可通过互联网登陆进行人机博弈的动态网站。
项目将使用HTML5来编写前台，JSP为主要语言编写后台，结合Photoshop、Flash、JavaScript等技术完善网页设计。
为实现人机博弈技术而采用C/S结构来增强交互性，提高软件效率，并采用多线程技术从而满足多用户共同安全使用的需求。
最终实现一款人机博弈动态网站，即中央民族大学博弈网站。
本网站页面主要由Dreamweaver软件设计的静态html页面和利用JSP技术制作的动态页面构成。
其中详细介绍了关于用户注册、用户登录、信息发布、留言板的设计与实现。
关键词:
DreamweaverJSP技术MYSQL数据库
ThedesignandimplementationofadynamicWebpage
ABSTRACT
Withthedevelopmentofnetworktechnology,throughtheInternettoachievehuman-computergamechesshasbecomeakeytechnology,theurgentneedforthecurrentcomputergamefieldthereon,dynamicWebpagetechnologystudychesscomputergameproject,anddevelopmenttoachieveadynamicwebsitethroughtheInternetonhuman-computergame.TheprojectwilluseHTML5towritethefront,JSPasthemainlanguagebackground,combinedwithPhotoshop,Flash,JavaScriptandothertechnologytoimproveWebpagedesign.Inordertorealizetheman-machinegametechnologyandusingC/Sstructuretoenhanceinteraction,improvetheefficiencyofsoftware,andtheuseofmultithreadingtechnologytosatisfymulti-usercommonsecurityusagerequirements.Therealizationofamanmachinegamedynamicwebsitefinally,namelyMinzuUniversityofChinagamewebsite.
ThiswebpageismainlycomposedofadynamicpageandmakeuseofJSPtechnologyofDreamweaversoftwaretodesignthestaticHTMLpages.Thedetailedintroductionontheuserregistration,userlogin,informationpublication,thedesignandRealizationofthemessageboard.
Keywords:
DreamweaverJSP'stechniqueMYSQLdatabase
目录
引言2
1.开发工具及编程环境2
1.1.开发工具2
1.2.编程环境2
2.动态网站的工作原理3
2.1.WEB工作原理3
2.2.动态页面工作原理4
3.JSP简介及JSP技术工作原理6
3.1.JSP简介6
3．1．1.JSP页面的结构6
3．1．2.JSP的运行环境6
3.1.2.1.JSP对硬件的要求6
3.1.2.2.JSP对操作系统的要求7
3.1.2.3.JSP对软件环境的要求7
3．1．3.JSP的内置组件7
3.2.JSP技术工作原理8
3.3.JSP访问数据库8
4.需求分析9
4.1.系统功能分析9
4.2.各个模块具体功能10
4.2.1.会员注册与登录模块10
4.2.2.留言模块10
4.2.3.信息发布模块11
5.数据库设计11
5.1.数据库需求分析11
5.2.数据表的设计11
6.动态网站系统实现13
6.1.系统编码原则13
6.1.1.编码实现原则13
6.1.2.代码编写规范13
6.2.系统实现13
6.2.1.网站首页13
6.2.2.用户注册页14
6.2.3.信息发布页面15
6.2.4.留言板页面16
6.2.5.后台管理页面16
结束语16
引言
最早互联网出现时，站点内容都是以HTML静态页面形式存放在服务器上，访问者浏览到的页面都是这些实际存在的静态页面。
从此，国内外多年来一直是采用静态页面的模式，这种方式极为原始，客户端浏览的是固定非交互式页面，但随着业务的复杂度和用户需求的不断增加，静态页面带来许多困难，主要有：
（1）不易维护，为了不断更新网页内容，你必须不断地重复制作HTML文档。
（2）网站的内容（新闻、产品数据等）不能保存在数据库中成为永久信息资源，不能用于搜索、查询、分类、统计。
（3）无法自动更新、与用户交互，以及无法因时因访问者而变。
随着技术的发展，特别是数据库和脚木技术ASP，PHP和JSP等的发展，美国等发达国家，在越来越多站点上大量采取动态的页面发布手段。
比如，在www．GOOGLE．COM上搜索一个内容，得到的搜索结果（页面文件“本身”）在GOOGLE服务器上并不存在，而是通过程序在我们输入搜索内容时调用后台数据库实时生成的，也就是说，这些结果页面是动态的。
静态页面的站点只涉及文件的传输问题，而动态站点则复杂得多，用户和站点之间出现大量的交互，网站不再仅仅是内容的发布，而是成为了一种“软件应用”，是软件业向互联网上的扩张，从软件的角度看，动态站点是逻辑应用层和数据层的分离，数据库负责站点数据的存储管理，而ASP，PHP，JSP等负责处理站点的逻辑应用。
这样做的好处除了增加很多交互功能外，更重要的是站点的维护、更新和升级都方便了许多。
在计算机技术和通信技术的推动下，“网络地球”迅速形成，并一下在深刻地影响着人类社会生活的方方面面。
通过网络获取信息、通过网络展示自身已是个人和单位生存与发展的重要手段。
如何建设一个信息更新准确快捷、网上运行流畅高速、界面美观引人入胜的高水平网站自然成为网站主人的追求，也网络技术人员的重要课题
1.开发工具及编程环境
1.1.开发工具
本系统是在Windows7下开发的，使用MYSQL作为后台数据库,采用JSP技术编写服务器端应用程序，利用辅助开发工具、可视化网页编辑器Dreamweaver8来进行前台页面的开发。
Dreamweaver是Macromedia公司推出的一款专业网页开发软件，提供了高度可视化的集成编辑环境，强大的网页编辑功能和站点维护功能，具有强大便捷的数据库作支持，多种动态网页技术的支持，强大的操作功能和便捷直观的操作界面。
1.2.编程环境
Windows7操作系统，MicrosoftPersonalWebServer。
利用IIS可以在个人电脑上发布自己的主页。
在将站点上载到Internet提供商之前，可将PWS用做开发平台，并可以用浏览器预览站点，以查看外观和所提供的功能。
2.动态网站的工作原理
2.1.WEB工作原理
WEB工作方式基于客户机和服务器。
一个客户机可以向许多不同的服务器请求，一个服务器也可以向多个不同的客户机提供服务，一个客户机启动与某个服务器的对话，服务器通常是等待客户机请求的一个自动程序。
协议是客户机请求服务器和服务器如何应答请求的各种方法的定义。
如图2.1所示：
图2.1客户机和服务器的关系
在这个结构中，充当服务器（有许多可用的WEB服务器，最常用的是Apache，IIS和Iplanet的Enterprise服务器）的就是WEB服务器软件，而计算机上运行的WEB浏览器（Netscape，MicrosoftInternetExplorer等）就是对服务器发出请求的客户机程序，当WEB服务器接收到WEB浏览器的请求后，将请求的数据发送到WEB浏览器，浏览器对接收到的数据进行解释并在屏幕上显示出来。
这实际上是一个请求一应答的过程，这个过程遵循以下步骤：
（1）在计算机上运行一个WEB浏览器客户机程序，如Netscape或者MicrosoftInternetExplorer。
（2）通过网络与Internet建立连接。
（3）向Internet上的服务器请求一个页面。
为此，浏览器要发送以下消息：
含传输协议的URL地址：
例如：
http：
／／cdqf．xicp．net。
（4）服务器收到请求后，查找所请求的HTML到组成的页面文件。
（5）服务器将所请求的页面传到客户机上。
（6）浏览器接收到服务器传来的HTML文件后，将对它解释并在屏幕上显示出来。
根掘以上的步骤，要解WEB原理，除了知道它是客户机服务器结构外，还需了解在WWW中，WEB服务器做什么工作、客户机上的浏览器傲什么工作，客户机和服务器通讯时采用的协议。
下面，我们对这些内容逐一解释。
WEB服务器及浏览器的功能
一个WEB服务器的功能是：
（1）接受请求。
（2）请求的合法性检查。
（3）针对请求获取并制作数据，包括Java脚本和程序、CGI脚本和程序、为文件设置适当的MIME类型来对数据进行前期处理和后期处理。
（4）把信息发送给提出请求的客户机。
WEB服务器发送给客户浏览器的是一个HTML文件，服务器对浏览器的请求信息的传输是分次的，先传输纯文本信息，再传输多媒体信息。
一个WEB浏览器的功能是：
（1）制作一个请求（通常在单击某个链接点时启动）。
（2）通过网络将请求发送给某个服务器。
（3）解释服务器传来的HTML文档，并把结果显示在屏幕上。
协议通俗的说，协议是计算机问通讯所共同遵守的一些规则。
WEB中，客户机和服务器之间根据通讯内容的不同遵守不同的协议。
经常用到的协议有MAILTO（邮件协议）、FTP（文件传输协议）、NEWS（新闻组协议）等。
各种协议使用了统一资源定位器URL（UniformResourceLocator），URL提供了一定的信息，使我们能够在Internet上的任何一台机器上访问任何可用的公共数据，URL的标准格式如下：
协议名称：
II机器地址：
端口号／路径名／文件名.
2.2.动态页面工作原理
客户端的动态页面：
在客户端模型中，附加到浏览器上的模块完成创建动态页面的全部工作。
HTML代码通常随包含一套指令的单独文件传送到浏览器，该文件在HTML页面中引用。
但是，常见的另一种情况是这些指令与HTML代码混合在一起。
当用户请求WEB页面时，浏览器利用这些指令为页面生成纯HTML。
也就是说，页面根据请求动态生成。
这个过程遵循以下步骤：
（1）编写一套用于创建HTML的指令，并将它保存到．html文件中。
也可以用其他语言编写一套指令，这些指令可以包含在．html文件，或放在单独的文件中。
（2）用户在其浏览器中输入请求页面地址，该请求就从浏览器传送到WEB服务器。
（3）WEB服务器确定．html页面的位置，也许还需要确定包含指令的第二个文件的位置。
（4）WEB服务器将新创建的HTML流与指令通过网络传回浏览器。
（5）位于浏览器的模块会处理指令，并将．html页面的指令以HTML形式返回，但只返回一个页面，即使有一两个请求也是如此。
（6）浏览器处理HTML，共显示该页面。
由于客户端脚本代码的不安全性、需要较长的页面下载时间等缺点，我们没有使用客户端动态页面技术。
服务器端的动态页面：
利用服务器端模型，HTML源代码与另外一套指令被传回到WEB服务器（可以混合在一起传送，也可以分开传送）。
当用户请求页面时，再使用这套指令给页面生成HTML，页面会根据请求动念生成。
这个过程遵循以下步骤：
（1）编写用于创建HTML的指令，并将这些指令保存到文件中。
（2）用户在其浏览器中输入请求页面地址，该请求就从浏览器传送到WEB服务器。
（3）WEB服务器确定指令文件的位置。
（4）WEB服务器根据指令创建HTML流。
（5）WEB服务器将新创建的HTML流通过网络传回浏览器。
（6）浏览器处理HTML，并显示WEB页面。
与客户端模型的不同之处是处理指令的位置。
在页面返回到浏览器之前，所有处理工作都在服务器上完成。
此方法的主要优点是页面的初始逻辑隐藏在服务器中，只有HTML代码传回浏览器，这样就可以保证大多数浏览器能够币常显示该页面。
客户端和服务器端技术都没有在静态WEB页面的正常处理中增加太多的复杂性（客户端技术的步骤（5）或服务器端技术的步骤（4）），但有一步是至关重要：
对于动态页面技术而言，直到请求WEB页面之后,才生成定义WEB页面的html。
3.JSP简介及JSP技术工作原理
3.1.JSP简介
3．1．1.JSP页面的结构
JSP注释
<%--*****--%>是不输出到客户端的注释符。
<%!
--*****--%>是输出到客户端的注释符。
指令元素
<%@pagecontentType=”text/html”%>设置指定页面内容类型
<%@include...%>在翻译阶段引入一个文件
<%@taglib...%>声明一个页面使用的，包含自定义行为的标记库。
行为元素
useBean>使一个JavaBeans组件在该页中可用
setProperty>设置JavaBeans的属性值
forward>将对请求的处理转交给一个servlet或JSP页面
脚本元素
<%thisisascriptlet%>嵌入脚本代码
表达式元素
<%=thisisanexpression%>嵌入java表达式
方法声明
<%!
thisisadeclaration%>用于在JSP页面的实现类中声明变量和方法
3．1．2.JSP的运行环境
JSP运行需要安装JDK和一个JSP服务器，目前比较流行的JSP服务器是Tomcat、Weblogic和Resin。
3.1.2.1.JSP对硬件的要求
JSP运行对CPU和内存要求比较高，尤其是开发的过程。
目前常规的CPU已经完全可以满足需求，一般P41.7以上的CPU就可以完全胜任开发和运行工作了。
对内存的要求是使用1G以上的内存，尤其是开发数据库的项目，尤其需要大内存，不然调试程序的效率极其低下。
3.1.2.2.JSP对操作系统的要求
操作系统环境可以选择Windows操作系统，也可以采用Unix家族的桌面系统。
推荐使用WindowsXP/2003Server操作系统。
尽量和以后系统发布的环境一致，这样就可以尽量避免出错的可能性。
3.1.2.3.JSP对软件环境的要求
JDK5做了很多的改动，添加了很多功能，所有不再建议使用JDK1.4.2的版本。
开发JDK推荐使用Tomcat，目前的Tomcat5.5.x完全可以满足JSP的运行需要。
当开发项目的时候，需要一个集成开发环境，有两个选择JBuilder和Eclipse。
数据库支持是必须的，国内很多基于JSP的项目都采用Oracle，因为Oracle的昂贵，很多中小项目还在使用SQLServer数据库。
因此Oracle和SQLServer是两个需要配置数据库环境。
这里选择Oralce10g和SQLServer2000来安装和配置
3．1．3.JSP的内置组件
JSP提供了六个内建对象，供用户直接调用：
1）Request对象：
客户端的请求信息被封装在request对象中，通过它才能了解到客户的需求，然后做出响应。
它是HttpServletRequest类的实例。
2）Respons对象：
包含了响应客户请求的有关信息，但在JSP中很少直接用到它。
它是HttpServletResponse类的实例。
3）Session对象：
指的是客户端与服务器的一次会话，从客户端连到服务器的一个WebApplication开始，直到客户端与服务器断开连接为止。
它是HttpSession类的实例。
4）Out对象：
是JspWriter类的实例,是向客户端输出内容常用的对象
5）Page对象：
就是指向当前JSP页面本身，有点象类中的this指针，它是java.lang.Object类的实例
6）Application对象：
实现了用户间数据的共享，可存放全局变量。
它开始于服务器的启动，直到服务器的关闭，在此期间，此对象将一直存在；这样在用户的前后连接或不同用户之间的连接中，可以对此对象的同一属性进行操作；在任何地方对此对象属性的操作，都将影响到其他用户对此的访问。
服务器的启动和关闭决定了application对象的生命。
它是ServletContext类的实例。
7）Exception对象：
是一个例外对象，当一个页面在运行过程中发生了例外，就产生这个对象。
如果一个JSP页面要应用此对象，就必须把isErrorPage设为true，否则无法编译。
他实际上是java.lang.Throwable的对象
8）PageContext对象：
提供了对JSP页面内所有的对象及名字空间的访问，也就是说他可以访问到本页所在的SESSION，也可以取本页面所在的application的某一属性值，他相当于页面中所有功能的集大成者，它的本类名也叫pageContext。
9）Config对象：
是在一个Servlet初始化时，JSP引擎向它传递信息用的，此信息包括Servlet初始化时所要用到的参数（通过属性名和属性值构成）以及服务器的有关信息（通过传递一个ServletContext对象）
3.2.JSP技术工作原理
JSP主要的功能是在Web环境下，由客户端浏览器传递一些信息给Web服务器，再由Web服务器去启动所指定的程式码来完成特定的工作，如图3．3所示。
①户请求②执行JSP程序③数据库操作
⑥客户响应⑤动态产生HTML④返回查询结果
图3.3ASP的工作原理
1用户通过Web客户端浏览器请求某个功能页面
2Web服务器接受这个请求，根据系统的逻辑设计将这个请求对应的JSP文件读出，交给JSP处理程序
3JSP处理程序解释这个文件，执行相应的处理过程，如数据库的访问与操作等。
4JSP从数据库中取得数据后，将按照文件的要求形成一个标准的HTML页面。
5将生成的HTML页面交给Web服务器。
6Web客户端浏览器将该HTML文件解释执行并显示出来。
这样就完成了一次客户浏览器端提出来的某个JSP请求。
从以上可以看出，由于脚本在服务器上，而不是在客户浏览器运行，传到浏览器上的Web页面是在服务器上生成的，所以服务器脚本不易被复制，用户看不到所要浏览页上的JSP的源代码，只能看到解释后的结果，这样就可以做到对源程序保密。
3.3.JSP访问数据库
三种常见的JSP通过JDBC访问数据库的方法
①在JSP页面中直接访问数据库
②在Servlet中访问数据库
③通过JavaBean封装对数据库的访问
4.需求分析
4.1.系统功能分析
本网站是一个关于中央民族大学博弈动态网页，包含会员的注册与登录、留言和信息发布、主要功能是作为中央民族大学计算机博弈小组的成果和荣誉进行宣传。
总之，要实现本网站的初衷经过分析必须要具备以下几个模块
（1）会员注册与登录模块
（2）留言模块
（3）信息发布模块
（4）数据库模块
4.2.各个模块具体功能
4.2.1.会员注册与登录模块
会员注册与登录是动态网页中的一个很重要的部分，只有通过注册成为会员，才能实现某些相关的操作和浏览相关的信息，在注册过程中还需要对会员所填的内容进行检测,不符合要求的情况会给出提示，在填写注册信息后，可以对所填信息进行确认。
而且在个人信息修改页面可以进行修改。
会员登录需要验证帐号和密码，在登陆成功后，用户登录的信息会在系统session中保存，一直会保留到用户推出登陆或关闭浏览器，利用此对登录管理者，会员和浏览者的权限进行限制，加以区分。
4.2.2.留言模块
用户在浏览完中央民族大学计算机博弈小组的相关事迹过程中有什么感想或者说有什么更好的建议，可以通过留言板给管理员留言，管理员通过登陆后，可以对用户的相关留言进行回复、编辑或删除。
4.2.3.信息发布模块
为了方便维护和更新网站内容，设计了信息发布模块，可以更便利的发布最新信息，供网民参考，借鉴。
利用后台，通过对
5.数据库设计
5.1.数据库需求分析
根据系统功能设计的要求以及功能模块的划分，需要建立以下数据表：
用户注册数据表
留言管理数据表
管理员数据表
文章管理数据表
5.2.数据表的设计
表是关系数据库中基本的数据逻辑存储块。
它由一组数据列组成，根据不同关系数据库系统可以使用不同的术语来描述列、行以及表。
列也叫字段，或属性，而行可以叫记录，表可以叫做关系。
本网站的数据表主要包括以下3个：
（1）用户注册数据表（user）：
用于记录所有用户的注册信息
表1用户注册数据表
字段名称
数据类型
说明
ID
自动编号
ID键值
Username
文本
用户名
Password
文本
密码
Question
文本
密码问题
Email
文本
电子邮件
（2）用户留言数据表（yonghu）:
用于记录用户的留言信息
表2用户留言数据表
字段名称
数据类型
说明
y_id
自动编号
ID键值
y_name
文本
用户名
y_liuyan
备注
留言的内容
y_time
日期/时间
留言时间
g_huifu
文本
管理员回复的内容
（3）管理员数据表（_guest）:
管理员登录信息
表3管理员数据表
字段名称
数据类型
说明
g_name
文本
管理员名称
g_password
文本
管理员登录密码
（4）管理员数据表（_article）:
文章管理信息
（5）表2用户留言数据表
字段名称
数据类型
说明
a_id
自动编号
ID键值
a_name
文本
升级会员 