画鸵萌宠网
动态网页的设计与实现
摘要
随着网络技术的发展，通过互联网实现棋类的人机博弈成为了当前计算机博弈领域迫切需要的一项关键技术，就此，项目拟研究棋类人机博弈的动态网页技术，并开发实现一个可通过互联网登陆进行人机博弈的动态网站。项目将使用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'stechniqueMYSQLdatabase3目录
引言...............................................................................................................................21.开发工具及编程环境................................................................................................3
1.1.开发工具..................................................................................................................................31.2.编程环境..................................................................................................................................3
2.动态网站的工作原理................................................................................................4
2.1.WEB工作原理...........................................................................................................................42.2.动态页面工作原理..................................................................................................................5
3.JSP简介及JSP技术工作原理.................................................................................7
3.1.JSP简介...................................................................................................................................7
3．1．1.JSP页面的结构...........................................................................................................................................73．1．2.JSP的运行环境...........................................................................................................................................73.1.2.1.JSP对硬件的要求.......................................................................................................................................73.1.2.2.JSP对操作系统的要求...............................................................................................................................83.1.2.3.JSP对软件环境的要求...............................................................................................................................83．1．3.JSP的内置组件...........................................................................................................................................83.2.JSP技术工作原理...............................................................................................................................................93.3.JSP访问数据库...................................................................................................................................................94.需求分析...................................................................................................................10
4.1.系统功能分析........................................................................................................................104.2.各个模块具体功能................................................................................................................11
4.2.1.会员注册与登录模块....................................................................................................................................114.2.2.留言模块........................................................................................................................................................114.2.3.信息发布模块................................................................................................................................................125.数据库设计...............................................................................................................12
5.1.数据库需求分析....................................................................................................................125.2.数据表的设计........................................................................................................................12
6.动态网站系统实现..................................................................................................14
6.1.系统编码原则........................................................................................................................14
6.1.1.编码实现原则................................................................................................................................................1416.1.2.代码编写规范................................................................................................................................................146.2.系统实现................................................................................................................................14
6.2.1.网站首页........................................................................................................................................................146.2.2.用户注册页....................................................................................................................................................156.2.3.信息发布页面................................................................................................................................................166.2.4.留言板页面....................................................................................................................................................176.2.5.后台管理页面................................................................................................................................................17结束语...........................................................................................................................17
引言最早互联网出现时，站点内容都是以HTML静态页面形式存放在服务器上，访问者浏览到的页面都是这些实际存在的静态页面。从此，国内外多年来一直是采用静态页面的模式，这种方式极为原始，客户端浏览的是固定非交互式页面，但随着业务的复杂度和用户需求的不断增加，静态页面带来许多困难，主要有：
(1)不易维护，为了不断更新网页内容，你必须不断地重复制作HTML文档。
(2)网站的内容(新闻、产品数据等)不能保存在数据库中成为永久信息资源，不能用于搜索、查询、分类、统计。
(3)无法自动更新、与用户交互，以及无法因时因访问者而变。
随着技术的发展，特别是数据库和脚木技术ASP，PHP和JSP等的发展，美国等发达国家，在越来越多站点上大量采取动态的页面发布手段。比如，在www．GOOGLE．COM上搜索一个内容，得到的搜索结果(页面文件“本身”)在GOOGLE服务器上并不存在，而是通过程序在我们输入搜索内容时调用后台数据库实时生成的，也就是说，这些结果页面是动态的。静态页面的站点只涉及文件的传输问题，而动态站点则复杂得多，用户和站点之间出现大量的交互，网站不再仅仅是内容的发布，而是成为了一种“软件应用”，是软件业向互联网上的扩张，从软件的角度看，动态站点是逻辑应用层和数据层的分离，数据库负责站点数据的存储管理，而ASP，PHP，JSP等负责处理站点的逻辑应用。这样做的好处除了增加很多交互功能外，更重要的是站点的维护、更新和升级都方便了许多。
在计算机技术和通信技术的推动下，“网络地球”迅速形成，并一下在深刻地影响着人类社会生活的方方面面。通过网络获取信息、通过网络展示自身已是个人和单位生存与发展的重要手段。如何建设一个信息更新准确快捷、网上运行流畅高速、界面美观引人入胜的高水平网站自然成为网站主人的追求，也网络技术人员的重要课题
21.开发工具及编程环境1.1.开发工具
本系统是在Windows7下开发的，使用MYSQL作为后台数据库,采用JSP技术编写服务器端应用程序，利用辅助开发工具、可视化网页编辑器Dreamweaver8来进行前台页面的开发。
Dreamweaver是Macromedia公司推出的一款专业网页开发软件，提供了高度可视化的集成编辑环境，强大的网页编辑功能和站点维护功能，具有强大便捷的数据库作支持，多种动态网页技术的支持，强大的操作功能和便捷直观的操作界面。
1.2.编程环境
Windows7操作系统，MicrosoftPersonalWebServer。利用IIS可以在个人电脑上发布自己的主页。在将站点上载到Internet提供商之前，可将PWS用做开发平台，并可以用浏览器预览站点，以查看外观和所提供的功能。
32.动态网站的工作原理2.1.WEB工作原理
WEB工作方式基于客户机和服务器。一个客户机可以向许多不同的服务器请求，一个服务器也可以向多个不同的客户机提供服务，一个客户机启动与某个服务器的对话，服务器通常是等待客户机请求的一个自动程序。协议是客户机请求服务器和服务器如何应答请求的各种方法的定义。如图2.1所示：
客户机
协议
服务器
图2.1客户机和服务器的关系
在这个结构中，充当服务器(有许多可用的WEB服务器，最常用的是Apache，IIS和Iplanet的Enterprise服务器)的就是WEB服务器软件，而计算机上运行的WEB浏览器(Netscape，MicrosoftInternetExplorer等)就是对服务器发出请求的客户机程序，当WEB服务器接收到WEB浏览器的请求后，将请求的数据发送到WEB浏览器，浏览器对接收到的数据进行解释并在屏幕上显示出来。这实际上是一个请求一应答的过程，这个过程遵循以下步骤：
(1)在计算机上运行一个WEB浏览器客户机程序，如Netscape或者MicrosoftExplorer。
(2)通过网络与Internet建立连接。
(3)向Internet上的服务器请求一个页面。为此，浏览器要发送以下消息：含传输协议的URL地址：例如：http：／／cdqf．xicp．net。
(4)服务器收到请求后，查找所请求的HTML到组成的页面文件。(5)服务器将所请求的页面传到客户机上。
(6)浏览器接收到服务器传来的HTML文件后，将对它解释并在屏幕上显示出来。根掘以上的步骤，要解WEB原理，除了知道它是客户机服务器结构外，还需了解在WWW中，WEB服务器做什么工作、客户机上的浏览器傲什么工作，客户机和服务器通讯时采用的协议。下面，我们对这些内容逐一解释。
4Internet
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(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。
63.JSP简介及JSP技术工作原理3.1.JSP简介
3．1．1.JSP页面的结构
JSP注释
<%--*****--%>是不输出到客户端的注释符。<%!--*****--%>是输出到客户端的注释符。指令元素
<%@pagecontentType=”text/html”%><%@include...%><%@taglib...%>行为元素
<%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以上的内存，尤其是开发数据库的项目，尤其需要大内存，不然调试程序的效率极其低下。 设置指定页面内容类型 在翻译阶段引入一个文件 声明一个页面使用的，包含自定义行为的标记库。 73.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的对象 88)PageContext对象：提供了对JSP页面内所有的对象及名字空间的访问，也就是说他可以访问到本页所在的SESSION，也可以取本页面所在的application的某一属性值，他相当于页面中所有功能的集大成者，它的本类名也叫pageContext。 9)Config对象：是在一个Servlet初始化时，JSP引擎向它传递信息用的，此信息包括Servlet初始化时所要用到的参数（通过属性名和属性值构成）以及服务器的有关信息（通过传递一个ServletContext对象） 3.2.JSP技术工作原理 JSP主要的功能是在Web环境下，由客户端浏览器传递一些信息给Web服务器，再由Web服务器去启动所指定的程式码来完成特定的工作，如图3．3所示。 客户浏览器①户请求⑥客户响应Web服务器JＳＰ⑤动态产生HTML程序②执行JSP程序③数据库操作④返回查询结果MySQL数据库图3.3ASP的工作原理 12用户通过Web客户端浏览器请求某个功能页面 Web服务器接受这个请求，根据系统的逻辑设计将这个请求对应的JSP文件读出，交给JSP处理程序 3456JSP处理程序解释这个文件，执行相应的处理过程，如数据库的访问与操作等。JSP从数据库中取得数据后，将按照文件的要求形成一个标准的HTML页面。将生成的HTML页面交给Web服务器。 Web客户端浏览器将该HTML文件解释执行并显示出来。 这样就完成了一次客户浏览器端提出来的某个JSP请求。从以上可以看出，由于脚本在服务器上，而不是在客户浏览器运行，传到浏览器上的Web页面是在服务器上生成的，所以服务器脚本不易被复制，用户看不到所要浏览页上的JSP的源代码，只能看到解释后的结果，这样就可以做到对源程序保密。 3.3.JSP访问数据库 三种常见的JSP通过JDBC访问数据库的方法 9①在JSP页面中直接访问数据库②在Servlet中访问数据库 ③通过JavaBean封装对数据库的访问 4.需求分析4.1.系统功能分析 本网站是一个关于中央民族大学博弈动态网页，包含会员的注册与登录、留言和信息发布、主要功能是作为中央民族大学计算机博弈小组的成果和荣誉进行宣传。 总之，要实现本网站的初衷经过分析必须要具备以下几个模块(1)会员注册与登录模块(2)留言模块(3)信息发布模块(4)数据库模块 10动态网站设计与实现注册申请用户登录信息发在线留言用户留言管理员登录编辑删除回复图4.1系统体系结构图示 4.2.各个模块具体功能 4.2.1.会员注册与登录模块 会员注册与登录是动态网页中的一个很重要的部分，只有通过注册成为会员，才能实现某些相关的操作和浏览相关的信息，在注册过程中还需要对会员所填的内容进行检测,不符合要求的情况会给出提示，在填写注册信息后，可以对所填信息进行确认。而且在个人信息修改页面可以进行修改。 会员登录需要验证帐号和密码，在登陆成功后，用户登录的信息会在系统session中保存，一直会保留到用户推出登陆或关闭浏览器，利用此对登录管理者，会员和浏览者的权限进行限制，加以区分。 4.2.2.留言模块 用户在浏览完中央民族大学计算机博弈小组的相关事迹过程中有什么感想或者说有什么更好的建议，可以通过留言板给管理员留言，管理员通过登陆后，可以对用户的相关留言进行回复、编辑或删除。 114.2.3.信息发布模块 为了方便维护和更新网站内容，设计了信息发布模块，可以更便利的发布最新信息，供网民参考，借鉴。 利用后台，通过对 5.数据库设计5.1.数据库需求分析 根据系统功能设计的要求以及功能模块的划分，需要建立以下数据表：用户注册数据表留言管理数据表管理员数据表文章管理数据表 5.2.数据表的设计 表是关系数据库中基本的数据逻辑存储块。它由一组数据列组成，根据不同关系数据库系统可以使用不同的术语来描述列、行以及表。列也叫字段，或属性，而行可以叫记录，表可以叫做关系。本网站的数据表主要包括以下3个： （1）用户注册数据表(user)：用于记录所有用户的注册信息 表1用户注册数据表 12字段名称IDUsernamePasswordQuestionEmail 数据类型自动编号文本文本文本文本 说明ID键值用户名密码密码问题电子邮件 （2）用户留言数据表（yonghu）:用于记录用户的留言信息 表2用户留言数据表 字段名称y_idy_namey_liuyany_timeg_huifu 数据类型自动编号文本备注日期/时间文本 说明ID键值用户名留言的内容留言时间管理员回复的内容 （3）管理员数据表（_guest）:管理员登录信息 表3管理员数据表 字段名称g_nameg_password 数据类型文本文本 说明管理员名称管理员登录密码 （4）管理员数据表（_article）:文章管理信息 （5）表2用户留言数据表 13字段名称a_ida_namea_articlea_timea_main 数据类型自动编号文本内容日期/时间文本 说明ID键值发表文章人文章的内容发表文章的时间文章关键字 6.动态网站系统实现6.1.系统编码原则 6.1.1.编码实现原则 因为在开发动态网站系统的过程中，考虑到该系统目前数据量不是非常庞大、但是会在短期内增长。 通过建立代码编写规范，提高程序的可靠性、可读性、可修改性、可维护性、可继承性和一致性，可以保证程序代码的质量，继承软件丌发成果，充分利用资源，使开发工作成果可以共享。 6.1.2.代码编写规范 为了提供程序的可靠性、可读性、可修改性、可维护性、可继承性和一致性，在系统实现中，有必要按照一定的原则编写程序代码。在整个网站建设过程中整体代码编写规范的前提下，从以下几个方面规范代码的编写：行间缩进使用TABLE键；变量命名采用首字母大写；查询出错处理中，必须有错误提示。 6.2.系统实现 6.2.1.网站首页 网站首页是整个系统的灵魂，它设计的好与坏直接影响到网站的访问数量。在首页当中应该包含和体现整个网站的所有功能和整体风格特点。本网站整体设计风格简洁明快，色调 14柔和，布局分成几个版块。首先是BANNER，然后是导航栏，接下来会员登录、网站统计、热门文章、博弈资讯等信息发布模块。发布的每一条信息都设有超级链接，要查看详细信息点击连接即可。信息标题以最近上载的日期排序，最新上载的信息排在最上面，符合人性化要求。同时，首页设计与实现后，其他具体功能子页要继承首页当中的风格、套用部分模版和重用部分代码。具体页面如图6.2.1所示： 图6.2.1 6.2.2.用户注册页 该页面主要用于会员第一次进入网站时输入帐号。注册会员时需要提供如下信息：新会员帐号、密码、密码确认、密码问题、e-mail等。 主要实现步骤: 1首先在Dreamweaver中设计出注册页面的风格。2添加如图的文本区域、按钮、单选框。 3单击提交按钮将注册信息发送给register1.jsp页面注册成功后返回主页，注册失败给出提示信息。 如图6.2.2所示： 15图6.2.2 6.2.3.信息发布页面 如下所示： 图6.2.3 166.2.4.留言板页面 访问者在线留言发表评论和意见，详见图6.2.4 图6.2.4 6.2.5.后台管理页面 后台登录页面，具体页如图6.2.5所示： 图6.2.5 结束语 17完成这次设计我的感触很深，要想完成一件事情你不但要有过硬的专业知识其中恒心毅力也是很重要的，而且好多知识以前都没有学过都得靠从实践中慢慢摸索，现学现用，其困难可想而知。在这里我要感谢耐心我的指导老师，和一起摸索前进的同学在这段时间给我的帮助。 为了完成这次设计我首先通过上网搜索和在图书馆查找与之有关的知识，使用什么开发工具会用到什么知识做到心中有数。然后看看什么是学过的什么还没有接触过，学过的加紧巩固，没有学过得赶快买资料进行自学。在这次设计中我真正感受到，有些知识你不会没关系，但在平时一定要加强自学能力的培养。我觉得这也是我们进入社会所必须具备的求生手段。 要设计出一个相对完美的网站没有总体规划是不行的，就像盖一座大楼你没有图纸是不行的，你不可以想到哪就盖哪。首先你得明白做这个网站的目的是什么，应该具有什么功能，要实现这些功能需要那些模块，这些模块之间又有什么联系。只有弄清楚了这些你才可以有条不紊的进行设计。当然前期素材收集也是很重要的，素材不充足你就得中途停工，这样就会大大的浪费时间，甚至打断你的思路。 为了尽快地完成这个设计，我将Dreamweaver8和jsp结合起来，用Dreamweaver8设计基本的页面，因为Dreamweaver8具有很好的视觉美化作用可以加入flash和音乐增加了网站的美感，使其更加吸引人的眼球。然后再在代码中加入jsp代码实现与数据库的交互，和网页的动态。而且在jsp中还可引用任何公共页，这样大大加快了开发速度。 由于技术知识有限，我知道我的网站免不了有很多的不足之处，而正因为这样才可以激起我高昂的斗志，继续学习，不断完善。 18 因篇幅问题不能全部显示，请点此查看更多更全内容