基于JSP的个人网页设计毕业论文

1、 专 科 毕 业 论 文 基于JSP的个人网页设计JSP based personal webpage design学院名称： 宿迁职业技术学院 专业班级： 09计算机3班 学生姓名： 羊金洲 指导教师姓名： 陈勇 指导教师职称： 讲师 2012 年 5月基于JSP的个人网页设计专业班级：计算机应用技术（3）班 学生姓名：羊金洲指导老师：陈勇 职称：讲师摘要 本文就个人网站的规划与建设，以软件工程的方法对全过程进行了分析与研究。本文的主要工作集中在：（1）对Web页进行概述，主要是对Internet的历史和发展作了回顾，并对Web页的定义和特性进行阐述。并对网站开发过程中使用的开发工具和技术作

2、了简要的介绍。（2）对网站建设中提及到的术语进行了解释，并对个人网站的由来和发展进行了讨论。（3）对自己的个人网站从规划到建设进行了详细的分析。关键词 ：JSP based personal webpage designAbstract: The groundwork of this text is concentrated on: （1）Go on because it sum up, whose name is mainly act as and review at developments of history against Internets, for Web the definit

3、ions of pages go on and explain at characteristics. And has done brief introduction to the developing instrument and technology that are used in the course of developping of Web site. （2）The getting under more construction about Web site mention go on and explain for personal the origins of the Web

4、site go on and discuss at developments at term that get. （3）The getting Web site personal planning to building detailed more analysis about the one ones own.（4）Use ASP of + IIS + SQL technologies of it realize the various kinds of function in Web sites of me of,among them and join and use and for OD

5、BC technology at data bases .（5）From Web site build and propose ones own view and suggestions.Key words : Website access 目 录序 言1 TOC o 1-3 h z u HYPERLINK l _Toc229418593 第一章 开发背景2 HYPERLINK l _Toc229418594 Web页概述2 HYPERLINK l _Toc229418597 开发工具的选用及介绍3 HYPERLINK l _Toc229418599 第二章 个人网站设计分析5 HYPERLI

6、NK l _Toc229418600 相关术语及解释 5 HYPERLINK l _Toc229418601 我的个人网站设计与规划 6 HYPERLINK l _Toc229418602 数据库设计 7 HYPERLINK l _Toc229418603 可行性分析10 HYPERLINK l _Toc229418606 第三章 详细设计12 HYPERLINK l _Toc229418607 总体结构图12 HYPERLINK l _Toc229418608 页面的设计12 HYPERLINK l _Toc229418610 3.3站点建立14 HYPERLINK l _Toc229418

7、611 第四章 编码16 HYPERLINK l _Toc229418612 关键代码16 HYPERLINK l _Toc229418613 数据库用到的代码18 HYPERLINK l _Toc229418614 设计技巧和解决方法20 HYPERLINK l _Toc229418651 结 论21 HYPERLINK l _Toc229418652 致 谢22 HYPERLINK l _Toc229418653 参考文献23序 言在已跨入21世纪的今天，人类使用和学习信息的方式以及信息的包装方式正在进行着不可阻挡的革命，这次革命将比印刷术的出现所产生的影响以及对社会发展的推动远为复杂而巨

8、大。目前，我国上网的人口已近一个亿，成立世界上网民最多的国家，许多人在需要查询信息，首先想到的就是上网。网站的迷人之处在于综合使用文本、图象、声音、动画和视频的信息和内容，具有丰富的多媒体表现与互动特点，无可置疑， 网站已成为最吸引人的也最有效的信息传递手段和方式。随着网络技术的发展，各类网站纷纷出现。个人网站也成为了一种时尚。越来越多的人希望拥有自己的网站，开辟网络世界的一片天地，展示自己的才华和风格。第一章 开发背景1.1 Web页的概述 Web(World Wide Web，简称WWW，又称万维网)是目前Internet上应用最广泛也是最重要的信息服务类型，它的影响已经进入了Intern

9、et上的广告、新闻、电子商务和展示信息等各个服务领域。 Web采用浏览器/服务器（B/S）工作模式，其运作模式可以描述为：请求处理应答。Web以超文本标记语言HTML(Hyper Text Markup Language)与超文本传输协议 (Hyper Text Transfer Protocol)为基础，通过浏览器为用户提供方便友好的信息浏览界面。 Web将位于全世界互联网上不同网址的相关信息有机地编织在一起。在Web服务方式中，信息以页面（或称Web页）的形式存储在Web服务器中，这些页面采用超文本的方式对信息进行组织，通过链接将一页信息链接到另一页信息。这些相互链接的页面既可以放置在同一

10、台主机上，也可以放置在不同的主机上。页面到页面的链接信息由统一资源定位器URL(Uniform Resource Locator)维持。用户通过客户端应用程序（即浏览器）向Web服务器发出请求，服务器根据客户端的请求将保存在服务器中的某个页面返回给客户端，浏览器接收到页面后对其进行解释，最终将信息以图、文、声并茂的形式呈现给用户。 Web服务的特点在于高度的集成性，它能够实现不同类型的信息（如文本、图像、声音、动画和视频等）和服务（如New、FTP、Telnet、Gopher及Mail等）的无缝链接，特别适合于广域网中信息的组织、检索与显示。 在信息技术领域中，Web技术几乎汇集了当前信息处理

11、的所有技术手段，以求最大限度地满足人性化的特点。Web界面五颜六色，既有文字、彩图、动画、声音、视频和一些相关信息或目录摘要，还可根据需要进入你想去的任何地方。只要你愿意或是你能想到的服务，Web几乎都能实现。Web技术涉及诸多技术领域：（1）网络硬件技术 从两台或多台机器组成的对等网，到主机控制的以太网，再到生动活泼的因特网，每一处都需要有特定的硬件支持。1968年，当“LOGIN”的“LO”从美国加州洛杉矶分校的电脑屏幕跳到斯坦福大学的电脑屏幕上时，标志着人类首次组网的成功！组网技术经过几十年的锤炼，而今已经相当成熟了。 网络硬件技术包括很多方面，其主要的作用就是把网络中的各种资源通过相关

12、网络连接设备连接起来，实施网络通信和达到共享网络资源的目的。（2）Web管理技术 网络管理技术是一个永久的话题。网络管理的难点是安全性问题，涉及到防止来自内部和外部的攻击，这对管理员自身的技术是一个严峻的考验。一个合格的网管人员，除了管好网络，还得和黑客做技术上的较量。网络管理涉及的方面可谓种类繁多，简单地说，网络管理就是为保证网络系统能够持续、稳定、安全、可靠和高效地运行，不受外界干扰，而维持网络系统设施所采取的一系列方式和措施。网络管理由网管员通过驾驭网络操作系统和网络管理软件来实现。 Web管理则是在网络管理的基础上，针对网络建设和维护所进行的一系列管理。诸如架设Web服务器、文件传输服

13、务器、邮件服务器、域名服务器、代理服务器以及用户管理和计费管理等等。1.2 开发工具的介绍及选择Dreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的RoundtripHTML技术允许用户随意导入HTML文档而无需重新设置代码格式。Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，

14、甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作区组件有以下若干种：（1）文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。（2）装载器中包含一些打开和关闭常用检查器和模板的按钮。（3）对象工具栏包含创建不同类型的对象（例如图象、表格和层等）的按钮。（4）属性检查器显示选定对象的属性。（5）快捷菜单可以使用户对当前选择或区域快速执行某些命令。（6）可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。Micr

15、omedia Flash 8.0用于web站点的交互式的矢量图形和动画的制作，它可制作出 用于浏览时的导航控制、制作动画图标、带同步声音的大段的动画，创建出生动的富于表现力的网页。Flash中的图形都是矢量的，占据存储空间较少，因而下载时间短，且能很好地适应浏览者不同尺寸的屏幕。Flash 的交互性的大部分设置就在 Action 和 Fs Command 里，通过对 Action 和 Fs Command 的设置，你可以随意的设置各事件发生的效果，还有对变量及函数的设置。1.2.3 JavaScriptJavaSript是一种基于对象(Object)和事件驱动(Event Driven)并具有

16、安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择。 第二章 个人网站设计分析2.1.1 InternetInternet(英特网)诞生于上世纪60年代，发展非常慢，到90年代才开始迅速发展。现在英特网已经是世界上最大的网络的，联在英特网上的电脑有数亿台。上面的资料、信息数不胜数，所以有人把英特网叫成是信息的海洋、知识的海洋。2.1.2 站点所

17、谓站点，就是将网页文件和素材文件，有条理地放置站点文件夹里，这些文件与文件夹就构成了网站的实质内容。站点文件夹里除了网页文件还有素材文件，所谓素材就是网页中所用到的图像、声音、视频等，这些内容是以单独文件的形式存在。2.1.3 超链接我们在浏览网页时，当鼠标指针指向某段文本或是某个图像，鼠标指针变成小手状，单击鼠标可以打开其他的网页或是跳转到其他的网站，这就是超链接。采用超链接技术可以将不同的网站、网站中的不同网页、网页中的不同位置彼此串在一起，实现相互间的跳转，方便信息的浏览和查找。人们通过超链接可以很方便很迅速地访问分布于全球计算机上的海量资源，实现在互联网中的漫游。超链接能使Web服务存

18、在广泛和持久的生命力，超链接可以说是Web的灵魂。 个人网站的由来和发展互联网在中国的出现只有短短七年时间，1994年中国科学院高能物理研究所设立了国内第一个Web服务器，推出一个叫做“中国之窗”的网页，这可能是国内Internet上出现的第一个Web网页，1995年开始，中国教育科研网，中国科技网，中国公用计算机互联网以及中国金桥网这构成中国数字神经系统的四大互联网络相继建成，使互联网在中国开始真正进入社会生活之中。这时期，个人网站出现的条件还很不成熟，国内上网的人数很少，也缺乏支持个人建站的环境，用户很难找到理想的个人主页存放地。个人网站发展的第二阶段是从1997年初到1998年，这段时间

19、，中国网民数量飞速增长，个人网站日渐繁荣，个人主页的数量急剧增加。同时，越来越多的商业网站开始免费提供个人主页空间，这些良好的外部极大地促进了个人网站的发展，涌现了一批很著名的个人网页，从1998年下半年开始，随着互联网应用 的深入的普及，随着众多主页制作工具的出现，使得建站成为一件非常容易的事,创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。2通常情况下，架设个人网站主要是为了通过互联网表达个人在商业、科技、交际、生活等方面的信息需求或者进行信息的交流，具有较强的目的性，我的个人网站一般体现在：为了展示自己的风采，让大家和我一起分享我的心得与经验，让和我有共同爱好的朋友

20、有一个倾诉的地方。因为是个人网站，所以只是选择了自己擅长和喜爱的内容，在突出自己的风格和特点的同时，还应用了现在流行的网站设计技术和数据库技术。因此将网站设计分为前台页面展示平台和后台在线管理平台。网站设计有新闻更新，浏览者可以在首页浏览自己喜欢的新闻，并且可以在留言板和大家交流，在后台管理页面中，通过身份认证，管理员我，可以对网站信息进行管理。站内的其它页面均是我自己的精心收藏，与大家一起分享。(1)首页点击首页可以让别人看见制作的动画影视。(2)我的资料是对自己的一个简单的介绍，可以让他人对我多一些了解。(3)我的文章里面包括了爱情文章. 亲情文章.友情文章及生活随笔。(4)我的照片在其中

21、展示我喜爱的东西，让一些美好的东西我们大家共同来欣赏。 (6)音乐在其中展示个人喜欢的歌曲，朋友们可以在里面点播自己喜欢的歌。 （7）留言板 让朋友可以与自己交流。2.3 数据库设计 数据库是计算机应用系统中的一种专门管理数据资源的系统。数据有多种形式，如文字、数码、符号、图形、图像以及声音等。数据是所有计算机系统所要处理的对象。人们所熟知的一种处理办法是制作文件，即将处理过程编成程序文件，将所涉及的数据按程序要求组织成数据文件，用程序文件来调用。数据文件与程序文件保持着一定的对应关系。在计算机应用迅速发展的情况下，这种文件式方法便显出不足。比如，它使得数据通用性差，不便于移植，在不同文件中存

22、储大量重复信息、浪费存储空间、更新不便等。数据库系统便能解决上述问题。数据库系统不从具体的应用程序出发，而是立足于数据本身的管理，它将所有数据保存在数据库中，进行科学的组织，并借助于数据库管理系统，以它为中介，与各种应用程序或应用系统接口，使之能方便地使用数据库中的数据。 这段说明介绍的确非常详细，不过你可能看得头晕眼花了，其实简单地说数据库就是一组经过计算机整理后的数据，存储在一个或多个文件中，而管理这个数据库的软件就称之为数据库管理系统。一般一个数据库系统（Database System）可分为数据库（Database）与数据管理系统（Database Management System，

23、DBMS）两个部分。 数据库解决方案分为两个基本类别：数据库服务(DBaaS)和数据服务(DaaS)。这两者间的主要区别在于数据是怎样管理的。DaaS使你可以定义你的数据，然后你可以从世界任何地方通过Internet连接对这些数据进行查询。不同于传统的数据库解决方案，DaaS不执行典型RDBMS接口，例如SQL。而是通过一套通用的API访问数据。此外，DaaS是最适合于基础数据的查询和操纵等管理。DBaaS是一个更为强大的数据解决方案，它提供全面的数据库功能。在DBaaS中，管理层负责连续监测和配置数据库，以实现优化缩放、高可用性、多租户、并在云中有效的分配资源。因此，开发者可以免去许多繁琐乏

24、味的数据库管理操作的麻烦，因为这些会被自动处理。有三种基本的基于云数据库的服务，它们的不同在于用户定制环境的灵活性。对于扩展性，云计算是用户访问一个只有操作系统的准机器，而对于这个操作系统用户有充分的灵活性安装和配置选定的RDBMS软件。这种安装被认为云服务基础设施(IaaS)。Amazon Elasti Computing Cloud(EC2)就是这种服务的一个很好的例子。对于想对其托管的数据库具有完全控制权的人来说，这个平台是一个很好的选择。另一个在云中部署RDBMS通用模型的是虚拟设备模型。虚拟设备是一个预装载并预配置设备的虚拟机。Amazon还在其EC2云中部署预配置了MySQL、Or

25、acle和Microsoft SQL Server的虚拟设备。最后，本地云数据服务，例如Xerounds MySQL云数据库使用NoSQL数据库，通过Web界面进行管理。本地云数据库往往得到更好的设备以便能够更好地使用云资源，并且与非云RDBMS使用的软件相比提供更好的可用性与稳定性。正如现在云计算一样棘手，让陌生人访问您的数据要考虑清楚，不能掉以轻心。低价格：这可能是使企业进入云行列的第一个原因。使用基于云数据库解决方案，可以从硬件、软件许可以及服务实施等方面大幅降低运营成本和支出，因为你只需要对所使用的部分买单。扩展性与灵活性：数据库托管公司往往处于有利位置，为了得到更高的效率并减少未使用

26、的空间而使资源得到最大化。他们根据你不断变化的业务需求而对服务进行增加或缩减。高效率：云计算提供了硬件共享、流程自动化和技术熟练的好处。你和你的员工可以从任何地方、使用任何电脑、移动设备或浏览器访问数据库。它还能从整体上降低资源的使用。缺点： 安全问题：云计算中一个值得关注的事情是你的数据是通过网络访问的。这就产生了一系列问题，你会给某人提供机会攻击你的数据库服务商并且窃取你宝贵的资料吗？这样安全漏洞事件是谁的责任呢？当第三方丢失客户信息时，你不能也不应该只躲在云供应商后面。除了网页接入问题，怎样才能使供应商的物理位置安全呢？他们经常进行备份么？有异地数据存储么？这些实在没有办法百分之百的确定

27、。你只能相信你的供应商能照顾好您的数据。互联网连接风险的损失：由于你的数据通过网络进行交互，你应该考虑失去数据库连接将会对你的企业生产带来怎样的影响。这种风险你能忍受么？这里有个叫做五个九的高可用性标准。在99.999%的时间正常运行，每年停机时间约为五分钟。你能期望它保证具有这种可靠性么？定制的局限性：当处理如此多的业务时，要求数据库服务商要很灵活。如果需要深度定制并且与现有系统集成来为日常业务服务，那么云计算能够适应你的需求吗。 1.新建数据库 (1) (2)3.超链接(3)2.4.1 经济可行性分析网页开发费用低，开发周期短。2.4.2 技术可行性分析计算机硬件和软件技术的飞速发展，为网

28、页的建设提供了技术条件。2.4.3 社会可行性分析 在当前信息技术飞速发展的大环境下，计算机技术和软件技术的更新是网页，完全有可能也有能力采用这样先进的技术。 第三章 详细设计 功能模块图首页首页资料文章照片留言板图3-1-13.2 页面设计是一个个人相片和精彩图片展示的地方，在相册中，我们可以了解到站长的个人风采和自己喜欢的图片。3.2.2 功能利用ASP对象语句显示图片，让大家可以看见所有图片的缩略图，同时每个图片都有快照功能，可以浏览图片的全图。3.2.3、组成构造相册结果显示页面 dreamweaver：用来显示所有图片。3.2.4相册页面浏览效果图，如图： 图3-2-43.2.5图片

29、效果浏览图，如图： 图3-2-5是一个音乐收藏和音乐欣赏的地方。（1）功能添加了自己喜欢的本地音乐，每次打开网页的时候都可以自动播放。（2）音乐页面浏览效果图，如下图： 图3-2-6（3）留言板效果图： 图3-2-6 图3-2-63.3 站点的建立（1）打开：“窗口”下的“新建站点”（2）按“下一步（3）单击“下一步”（4）单击“下一步”（出现“你如何连接到远程服务器”时选择“无”）（5）单击完成 如下图 图3-3-1 图3-3-2 图3-3-3 图3-3-4 图3-3-5 第四章 编 码4.1关键代码设计 添加背景音乐羊金州的个人空间 /空间标题 欢迎光临我的个人空间 首页 我的资料 我的文

30、章 我的照片2012年5月23日 星期三 11:33 首页显示当前时间 首页flash文件 4.2 数据库用到的代码 /引用数据库 /连接路径 0) String queryString = request.getQueryString(); String tempStr = ; for (int i=0; i queryString.length(); i+) if (queryString.charAt(i) = ) tempStr = tempStr + ) tempStr = tempStr + ; else if (queryString.charAt(i) = ) tempStr

31、= tempStr + ; else tempStr = tempStr + queryString.charAt(i); MM_editAction += ? + tempStr;/ connection information /主要连接对象String MM_editDriver=null,MM_editConnection=null,MM_editUserName=null, MM_editPassword=null;/ redirectinformationString MM_editRedirectUrl=null;/ query string to executeStringBu

32、ffer MM_editQuery = null;/ boolean to abort record editboolean MM_abortEdit = false;/ table informationString MM_editTable = null, MM_editColumn = null, MM_recordId = null;/ form field informationString MM_fields = null, MM_columns = null;/ * Delete Record: construct a sql delete statement and execu

33、te it /删除数据内容if (request.getParameter(MM_delete) != null & request.getParameter(MM_delete).toString().equals(form1) & request.getParameter(MM_recordId) != null) MM_editDriver = MM_conn_DRIVER; MM_editConnection = MM_conn_STRING; MM_editUserName = MM_conn_USERNAME; MM_editPassword = MM_conn_PASSWORD;

34、 MM_editTable = lyb; MM_editColumn = id; MM_recordId = + request.getParameter(MM_recordId) + ; MM_editRedirectUrl = xs.jsp;/ append the query string to the redirect URL /添加指定路径 if(MM_editRedirectUrl.length()!=0&request.getQueryString()!=null) MM_editRedirectUrl+=(MM_editRedirectUrl.indexOf(?)=-1)?:&

35、) +request.getQueryString();/ * Delete Record: construct a sql delete statement and execute it /删除记录if (request.getParameter(MM_delete) != null & request.getParameter(MM_recordId) != null) / create the delete sql statement /创建数据库删除记录 MM_editQuery = new StringBuffer(delete from ).append(MM_editTable)

36、; MM_editQuery.append( where ).append(MM_editColumn).append( = ).append(MM_recordId); if (!MM_abortEdit) /创建MM_edit驱动/finish the sql and execute it 完成数据库连接并退出Driver MM_driver =(Driver)Class.forName(MM_editDriver).newInstance();Connection (MM_editConnection,MM_editUserName,MM_editPassword);PreparedSt

37、atement M_editStatement=MM_connection.prepareStatement(MM_editQuery.toString(); MM_editStatement.executeUpdate(); MM_connection.close();/redirect with URL parameters/重定向url参数 if (MM_editRedirectUrl.length() != 0) response.sendRedirect(response.encodeRedirectURL(MM_editRedirectUrl);return;/返回/定义删除的fo

38、rminput type=hidden name=MM_recordId value= 我们在制作网页的时候，经常有这种体会，那就是制作好的网页在本地计算机上浏览时很正常，但在另外一台计算机上浏览时发现原本漂亮的网页变得歪歪扭扭了，这是为什么呢?原来各个计算机的分辨率要使你的主页在不同的分辨率下都能正常显示，在 Dreamweaver中得到了较好的解决。在文档窗口的右下角，Dreamweaver 显示当前文档被设计成的分辨率大小。单击哪个数字，在弹出式菜单中可以为当前的页面指定显示分辨率，通过修改可以使你的主页更具灵活性。使不同分辨率的显示器都能较好地显示。 有时我们为了要达到一种逼真的效果，

39、希望鼠标移动到某个链接上时能有动感产生。使用Dreamweaver可以很容易实现这种效果。设计时，我们首先需要准备两幅图象，第一幅是原始图象，第二幅是鼠标移动上去后的图象。接着用鼠标单击第一幅图，在属性面板中的链接栏中填上要链接的文件，然后单击键盘上的F8键，在弹出的Behaviors窗口中单击“+”号，随后选择“swap image”，在接着出现的窗口中选择第二幅图象，最后单击确定就可以了。 总 结经过老师耐心细致的指导，及同学之间的相互交流，同时翻阅了大量的资料(包括网上资料，书本及学校的一些相关资料)经过近一段时间的努力，个人网站的设计制作告一段落。总结这次“个人网站”开发制作过程，我们综合使用了目前因特网上比较流行的各种静态制作方法，并对