获取项目源文件，学习交流联系Q:1225467431
摘要 III
Abstract. IV
1 引言 1
1.1 系统开发的背景 1
1.2 开发的目的和意义 1
1.3 开发环境及工具和技术的选用 2
1.3.1 开发环境 2
1.3.2 开发工具及技术介绍 2
2 系统分析 5
2.1 任务概述 5
2.2 功能需求分析 5
2.2.1 前台 5
2.2.2 后台 6
2.3 性能需求分析 6
2.4 系统数据需求 7
2.4.1 系统的数据需求 7
2.4.2 系统的数据字典 8
3 系统概要设计 9
3.1 系统体系结构 9
3.2 主要功能设计 9
3.2.1 主要功能模块 9
3.2.2 系统流程图 10
4 数据库设计 12
4.1 数据库概念设计 12
4.2 数据库逻辑结构设计 15
4.2.1 数据库详细设计 15
4.2.2 数据表关系设计 18
5 系统详细设计 19
5.1 登陆和注册界面设计 19
5.2 前台页面设计 21
5.2.1 前台首页概述 21
5.2.2 前台首页技术分析 22
5.2.3 前台首页的面局 23
5.3 后台界面设计 24
5.3.1 后台首页概述 24
5.3.2 后台首页技术分析 25
5.3.3 后台首页的布局 25
5.4 系统重难点代码分析 25
5.4.1 系统配置 25
5.4.2 分类显示文章信息 27
5.4.3 相册上传的实现 29
6 系统测试 32
6.1 测试方法 32
6.2 测试内容 33
6.2.1 登录测试 33
6.2.2 发表文章测试 34
7 结论与展望 37
致 谢 38
参 考 文 献 39
基于JSP的个人博客系统
计算机科学与技术(职教师资) 李姜伟
指导教师 陈梁
摘要：博客，是一种互联网平台上的个人信息交流中心。看上去平淡无奇，毫无可炫耀之处，但它可以让每个人零成本、零维护地创建自己的网络媒体，每个人都可以随时把自己的思想火花和灵感更新到博客站点上。
本系统页面采用Html语言和Css样式以及JavaScript脚本来设计，系统的相关功能由Java语句来实现，使用Sql2000 数据库作为后台，采用Jsp+Servlet+JavaBean模式来完成系统的相关功能。主要分为游客和博主两种角色。游客可以注册、查看日志、照片、博主的资料和发表评论。博主则完成写日志、修改日志、上传照片、管理照片、更改个人信息、添加公告、退出系统等功能。
关键词：博客；个人博客；JSP；Sql2000
Personal blog system based on JSP
Computer Science and Technology Vocational Education faculty Undergraduate Class one
Author:Li Jiangwei Supervisor: Chen Liang
Abstract:Blog is a kind of Internet platform of information exchange center. Look boring, are in no way to show off, but it allows everyone to zero cost, zero maintenance to create your own network media, everyone can update their ideas spark and inspiration to the blog site.
The system page using Html and Css, and JavaScript script design, system related function is implemented by Java statements, using Sql2000 database as the background, using the Jsp + Servlet + JavaBean model to complete the related functions of the system. Mainly divided into two roles tourists and blogger. Visitors can register and view the log information, photos, blogger and comment. Bloggers are writing log, modify logs, upload photos, photo, change the personal information management, add announcements, exit systems, etc.
Key words：Blog； Personal blog； JSP； Sql2000；
1 引言
1.1 系统开发的背景
信息时代的今天，网络已经成为人们工作、学习的一部分，不断充实和改变着人们的生活。在网络中，构建一个个性化的个人博客，可以充分地表达自己的思想，通过发表文章展示个人才能，抒发个人情感。网友则可以根据主题发表个人意见，表达自己的想法，与博主进行思想交流，乐在其中。
博客之所以以用户的欢迎，首先在于它具有无与伦比的越分享越多”的魅力精髓。对于博文本人，对于阅读博客的人；对于自己，对于他人，对于社会；对于工作，对于生活，越分享越多”的博客精髓注定了博客的发展势不可挡。博客可以美化一个人的生活！而所谓的新媒体革命，所谓的人际交往和知识传播的革命，都是第二层次的。通过分享，美化每一个博客，美化每一个人的生活，自然美化整个社会。分享可以是沟通，可以是人际关系，可以是文章，可以是音乐和声音，可以是图片和视频，可以是阅读和推荐……博客网，让你随心所欲”，这个随心所欲主要就是在超越时空的虚拟世界中，可以随心所欲地分享你愿意分享的一切。
1.2 开发的目的和意义
目的：许多博客专注在特定的课题上提供评论或新闻，其他则被作为比较个人的日记。一个典型的博客结合了文字、图像、其他博客或网站的链接、及其它与主题相关的媒体。能够让读者以互动的方式留下意见，是许多博客的重要要素。大部分的博客内容以文字为主，仍有一些博客专注在艺术、摄影、视频、音乐、播客等各种主题。
博客的功能主要有以下四点：（1）个人自由表达和出版，用户可以自由发表文章，但是是有前提的，例如谣言、色情等不合法的内容是不允许发表的；（2）知识过滤和积累，用户可以将自己生活、工作中的一些心得记录下来与他人分享；（3）深度交流沟通，博客可以促进交流可以与他人交流自己记录下的一些心得或者国内外新闻等，但是用户应该以辩证的方式去评论；（4）博客营销。作用还有很多，总之博客在现如今这个飞速发展的网络时代已经成为人们不可或缺的一部分。所以我选择了这个课题作为我的毕业设计。
意义：在网络技术逐渐渗入社会生活各个层面的今天，传统的交流方式也面临着变革，而网络博客则是一个很重要的方向。博客是以网络为载体，简易迅速便捷地发布自己的心得，及时有效轻松地与他人分享，再集丰富多彩的个性化展示于一体的统合性平台。基于Web技术的博客系统可以借助于遍布全球的Internet进行，因此交流既可以是本地进行，也可以是异地进行，大大拓展了沟通与交流的灵活性。记录个人生活点滴：如同日记一般，可将自己每日生活中发生的事情记录下来，并且跟朋友或网友们分享。
1.3 开发环境及工具和技术的选用
1.3.1 开发环境
（1）硬件平台
CPU：AMD 3200+ 1.81GHz
内存：2G
显示器：18.5英寸 LCD
（2）软件平台
操作系统：Windows XP
数据库：SQL Server 2000
开发工具：Macromedia Dreamweave, MyEclipse,
开发语言：Java语言
服务器：Tomcat
浏览器：IE6.0
分辨率：1366*768
1.3.2 开发工具及技术介绍
（1）JSP技术
JSP（全称Java Server Pages）是由Sun Microsystems公司倡导和许多公司参与共同创建的一种使软件开发者可以响应客户端请求，而动态生成HTML、XML或其他格式文档的Web网页的技术标准。JSP技术是以Java语言作为脚本语言的，JSP网页为整个服务器端的Java库单元提供了一个接口来服务于HTTP的应用程序。
当客户端请求一个JSP网页时，JSP Engine会检查所请求的JSP网页是否已经处于被载入执行的状态，如果没有，它会先读取JSP程序文件，将它换成Servlet程序代码编译载入，然后才执行请求的服务。也是就说，只有当客户端第一次请求JSP网页时，才需要被转换、编译和载入，做到了一次执行，处处执行。JSP的Servlet Class是JSP Engine自动帮我们编译产生的，不像Servlet需要手动编译，另外，在JSP程序中建立新的对象和Java Bean非常方便容易。
（2）JSP的基础——Servlet 技术
Java Servlet是JSP技术的基础，JSP本身就是预先被编译成Servlet，然后再运行的，而且大型的Web应用程序的开发需要Java Servlet和JSP配合才能完成，Servlet这个名称大概源于Applet，现在国内的翻译方式很多，本文为了避免误会，本文直接采用Servlet这个名称而不做任何翻译，读者如果愿意，可以称之为小服务程序”。Servlet是使用Java Servlet应用程序设计接口及相关类和方法的Java程序。它在Web服务器上或应用服务器上运行并扩展了该服务器的能力。Java Servlet对于Web服务器就好像Java Applet对于Web浏览器。Applet装入Web浏览器并在Web浏览器内执行，而Servlet则是装入Web服务器并在Web服务器内执行。Java Servlet API 定义了Servlet和服务器之间的一个标准接口，这使得Servlet具有跨服务器平台的特性。
Servlet通过创建一个框架扩展服务器的能力，采用请求-响应模式提供Web服务。当客户机发送请求至服务器时，服务器将请求信息发送给Servlet，Servlet生成响应内容并将其传给Server，然后再由Server将响应返回给客户端。
（3）JavaBean
JavaBean是一种JAVA语言写成的可重用组件。为写成JavaBean，类必须是具体的和公共的，并且具有无参数的构造器。JavaBean通过提供符合一致性设计模式的公共方法将内部域暴露成员属性。众所周知，属性名称符合这种模式，其他Java类可以通过自身机制发现和操作这些JavaBean 属性。
（4）开发平台：MyEclipse+dreamweaver
MyEclipse 是一个十分优秀的用于开发Java, J2EE的 Eclipse 插件集合，MyEclipse的功能非常强大，支持也十分广泛，尤其是对各种开源产品的支持十分不错。MyEclipse目前支持Java Servlet,AJAX, JSP, JSF, Struts,Spring, Hibernate,EJB3,JDBC数据库链接工具等多项功能。可以说MyEclipse几乎囊括了目前所有主流开源产品的专属eclipse开发工具。
Dreamweaver是美国Macromedia公司开发的集网页制作和网站管理于一身的所见即所得式网页编辑器，是针对专业网页设计师而设计的视觉化网页开发工具，它可以让设计师轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver与Flash、Fireworks一度被称为网页三剑客。[6]
（5）数据库：SQL Server 2000
SQL Server 2000作为Microsoft家庭的重要成员，是基于客户机/服务器的大型关系数据库系统。SQL Server 2000这种关系型数据库系统能够满足各种类型的企业客户和独立软件供应商构建商业应用程序的需求，根据客户的反映和需求，是大规模联机事务处理（OLTP）、数据仓库和电子商务应用程序的优秀数据库平台。SQL Server 2000 具有以下特点：
1．强大可伸缩性；
2．支持大型Web站点或企业信息处理系统；
3．客户机/服务器体系结构；
而数据源包含了数据库位置和数据库类型等信息，实际上是一种数据连接的抽象。各部件之间的关系如图1.1所示：
图1.1 数据关系图
（6）Tomcat 服务器
Tomcat服务器是一个免费的开放源代码的Web 应用服务器。它是Apache基金会的Jakarta项目中的一个核心项目，由Apache，Sun和其它一些公司及个人共同开发而成。
2 系统分析
2.1 任务概述
博客网站系统的总目标是：在计算机网络，数据库和先进的开发平台上，利用现有的软件，配置一定的硬件，开发一个具有开放体系结构的、易扩充的、易维护的、具有良好人机交互界面的个人博客网站，为网络用户提供进行在线交流的网络平台。通过个人博客网站可以结交更多的朋友，表达更多的想法，它随时可以发布文章。
具体的要求如下：
（1）博主可以简单的添加和删除文章；
（2）独立于具体的数据库平台。对于与数据库交互的部分充分考虑兼容性；
（3）容易在原先基础上进行二次开发；
（4）中间基础平台的无型性。尽量采用开放的标准技术，达到跨平台运行的效果；
为了达到以上的开发目的，个人博客网站应遵循一定的设计和开发与原则；
（5）模块接口定义清晰；
（6）基础类库和接口设计合理，尽量建立叮扩展的接口和抽象类；
（7）数据库操作使用标准SQL语句，如果一定要使用有差别的SQL语句，则尽量集中在一起，以减少将来维护和移植的难度；
（8）采用开放的标准和工具等。
2.2 功能需求分析
博客系统通常提供三类服务:
（1）信息服务，它可分为：文章显示，热点文章推荐，博主风采；
（2）查询服务：可以根据文章内容，文章标题，留言内容，留言标题等进行模糊查询；
本系统采用Browser/Server结构，将个人博客网站划分为两个子系统：前台，后台。下面分析各个子系统的功能需求。
2.2.1 前台
在前台的功能实现上，可以分为以下几个部分：
（1）用户登录：
网站用户用个人注册的帐号和密码登录到博客系统。系统检测用户的帐号和密码是否错误和判断用户是博主还是普通用户并给予其相应的权限对系统进行操作。
（2）用户注册：
由于只有注册用户才能进入系统，所以游客必须先注册，将个人的信息存储到博客网站的数据库中，以成为本博客的正式用户。
（3）用户修改个人信息：
在一个单独的页面显示注册用户的信息，用户可以修改个人的基本信息。
（4）文章查询和评论：
用户可以浏览博客中的文章同时评论感兴趣的文章，也可以查看其他评论。
（5）公告信息查询：
用户可以浏览博客网站中发布的公告信息，了解博客的一些情况。
（6）相片查询：
用户可以浏览博主上传的相片。
2.2.2 后台
系统后台只有博主才能进入，博主可以对博客系统中的数据信息进行更新，主要有以下模块。
（1）文章管理：
管理员对网站中已有的文章进行删除，更新等操作。
（2）公告管理：
发布，删除，更改公告。
（3）投票管理：
发起投票，统计投票等。
（4）个人相册管理：
对博客相册中的图片进行删除，更新等操作。
（5）用户设置：
更新普通用户对博客的操作的权限。
（6）博主设置：
对博主的信息等进行操作。
2.3 性能需求分析
博客网站系统需要具备以下几个主要特性：
（1）多样性: 博客网站在设计时必须遵循的一个重要原则，就是以用户为系统设计的中心。网络的发展大大降低了信息咨询的成本，用户面临更多的选择，所以，博客网站除了降低成本以外，还必须在皮肤，功能的多样性上下工夫，才能够得到用户的认可。具体来说，应用系统应能实现用户特定的需求，操作界面友好、方便，功能设置符合用户的习惯和要求。
（2）易维护:管理员能够简单方便地管理系统，定义新的应用，并对系统进行日常维护;随着博客网站信息的变更或增加、数据规模的增大，系统升级、维护应易于操作;各子系统、功能模块的设计应具有良好的灵活性，保证在博客网站系统建设过程中后期系统功能的实现不影响前期已投入使用的系统功能。
（3）安全性:系统应充分考虑信息、设备、运行和管理的安全性，建立完善的多层次的安全保障体系，保证用户的个人信息等资料的数据安全。
（4）可扩展: 博客网站的用户从事着各种行业，他们的需求各不相同，系统在设计时应充分考虑到用户需求不断变化的需要，降低系统在扩展新的业务功能时的复杂度。
2.4 系统数据需求
2.4.1 系统的数据需求
（1）数据录入和处理的准确性和实时性
数据的输入是否准确是数据处理的前提，错误的输入会导致系统输出的不正确和不可用，从而使系统的工作失去意义。数据的输入来源是用户的手工输入。手工输入要通过系统界面上的安排系统具有容错性，并且对用户操作进行实时的跟踪和错误提示。
在系统中，数据的输入往往是大量的，因此系统要有一定的处理能力，以保证迅速的处理数据。
（2）数据的一致性与完整性
由于网站的数据是共享的，所以如何保证这些数据的一致性，是网站必须解决的问题。要解决这一问题，要有一定的人员维护数据的一致性，在数据录入处控制数据的去向，并且要求对数据库的数据完整性进行严格的约束。
对于输入的数据，要为其定义完整性规则，如果不能符合完整性约束，网站应该拒绝该数据。
（3）数据的共享与独立性
整个博客网站的数据是共享的。然而，从网站开发的角度上看，共享会给设计和调试带来困。因此，应该提供灵活的配置，使各个分系统能够独立运行，而通过人工干预的手段进行系统数据的交换。这样，也能提供系统的强壮性。
2.4.2 系统的数据字典
网站中的数据元素：
3 系统设计
博客网站系统的总目标是：在计算机网络，数据库和先进的开发平台上，利用现有的软件，配置一定的硬件，开发一个具有开放体系结构的、易扩充的、易维护的、具有良好人机交互界面的博客网站，以达到个人推荐、展现自我的一个平台，为交流提供综合的网络环境，同时也为个人的宣传，发展，提供了一个平台。
3.1 系统体系结构
基于B/S结构的个人博客网站系统，应由终端（用户主机/浏览器）、WEB服务器、数据服务器构成。个人博客网站的核心是中间的接入服务器和应用服务器部分。个人博客网站的总体结构图如图3.1所示：
图3.1 博客网站总体结构
3.2 主要功能设计
3.2.1 主要功能模块
博客网站分为前台和后台。其中，根据博客前台的特点，可以将其分为博主信息、网络日历、文章查询、公告查询及相册查询等13个部分，其中各个部分及其包括的具体功能模块如图3.2所示。
图3.2 博客系统前台功能结构
根据博客网后台的特点，可以将其分为用户设置、公告管理、个人相册管理、博客文章管理、投票管理、朋友信息管理及博主信息修改7部分，其中各个部分及其包括的具体功能模块如图3.3如示。
图3.3 博客网站后台功能结构
3.2.2 系统流程图
为了更加清晰地表达系统的业务功能模块，下面给出博客网的系统流程图。对于不同的角色，其所承担的任务也各自不同，流程图也不一样，包括面向用户的客户端流程图和面向系统管理员的流程图，如图3.4和图3.5所示。
图3.4 面向用户（前台）的客户端流程图
图3.5 面向系统管理员（后台）的流程图
4 数据库设计
一个设计良好的数据库，可以使系统的实现变得非常的简单。同时，也可以使系统的执行速度变得很快。反之，一个设计混乱的数据库，不仅增加了吸引的管理实现过程，同时在系统的执行过程中，使得检索变得很慢，降低效率。所以数据库的设计是一个系统设计很重要的步骤。
数据库的设计通常是以一个已经存在的数据库管理系统为基础的，常用的数据库管理系统有Access、SQL Server、Oracle、My SQL等。根据用户需求和系统分析，本系统采用SQL Server2000数据库管理系统。在SQL Server2000数据库管理系统中建立名称为博客的数据库。
4.1 数据库概念设计
根据以上对系统所做的需求分析和系统设计，规划出本系统中使用的数据库实体分别为用户信息实体、公告信息实体、个人相册信息实体、朋友信息实体、投票信息实体、博客文章信息实体及文章回复实体。系统各实体关系E-R图如图4.1所示。
图4.1 实体关系E-R图
下面介绍各实体的E-R图。
（1）用户信息实体
用户信息实体包括用户名、密码、姓名、性别、QQ号码、主页、兴趣、E-mail地址、管理级别属性。用户信息实体的E-R图如图4.2所示：
图4.2 用户信息实体属性E-R图
（2）博客文章信息实体
博客文章信息实体包括文章题目、文章内容、文章发布时间及文章访问次数属性。博客文章信息实体的E-R图如图4.3所示：
图4.3 博客文章信息实体属性E-R图
（3）文章类型信息实体
文章类型信息实体包括类型名和类型描述属性。文章类型信息实体的E-R图如图4.4所示：
图4.4 文章类型信息实体属性E-R图
（4）公告信息实体
公告信息实体包括公告标题、公告内容和公告时间属性。公告信息实体的E-R图如图4.5所示：
图4.5 公告信息实体属性E-R图
（5）朋友信息实体
朋友信息实体包括朋友名、朋友QQ号码和朋友描述属性。朋友信息实体的E-R图如图4.6所示：
图4.6 朋友信息实体属性E-R图
（6）照片信息实体
照片信息实体包括照片路径、照片描述和照片上传时间属性。照片信息实体的E-R图如图4.7所示：
图4.7 照片信息实体属性E-R图
（7）文章评论信息实体
文章评论信息实体包括文章ID号、回复号、回复主题和回复内容属性。文章评论信息实体的E-R图如图4.8所示：
图4.8 文章评论信息实体属性E-R图
（8）投票信息实体
投票信息实体包括投票信息名称和票数属性。投票信息实体的E-R图如图4.9所示：
图4.9 投票信息实体属性E-R图
4.2 数据库逻辑结构设计
4.2.1 数据库详细设计
本系统包含8个数据库。
tb_consumer（用户信息表），主要用来保存用户基本信息。表结构如表4.1所示：
表4.1 表tb_consumer的结构
字段名称 数据类型 字段长度 是否为空
id int 4 No
account varchar 10 Yes
password varchar 10 Yes
name varchar 50 Yes
sex Char 5 Yes
QQNumber Int 4 Yes
mainPage varchar 50 Yes
interest varchar 50 Yes
eMail varchar 50 Yes
manageLevel varchar 10 Yes
tb_article（文章信息表），主要用来保存文章信息。表结构如表4.2所示。
表4.2 表tb_article的结构
字段名称 数据类型 字段长度 是否为空
id int 4 No
typeID int 4 No
title varchar 30 Yes
content varchar 2000 Yes
phTime varchar 30 Yes
number int 4 Yes
tb_articleType（文章类型信息表），用来保存文章类型名和文章类型描述。表结构如表4.3所示。
表4.3 表tb_articleType的结构
字段名称 数据类型 字段长度 是否为空
id int 4 No
typeName varchar 50 Yes
description varchar 50 Yes
tb_discuss（公告信息表），用来保存博主发表的公告信息。表结构如表4.4所示。
表4.4 表tb_discuss的结构
字段名称 数据类型 字段长度 是否为空
id discussTitle int No
discussTitle varchar 30 Yes
disscussContent varchar 1000 Yes
discussTime varchar 50 Yes
tb_friend（朋友信息表），主要用来保存博主的朋友的基本信息。表结构如表4.5所示。
表4.5 表tb_friend的结构
字段名称 数据类型 字段长度 是否为空
id int 4 No
name varchar 20 Yes
QQNumber varchar 20 Yes
description varchar 50 Yes
tb_photo（照片信息表），用来保存博主上传的照片的基本信息。表结构如表4.6所示。
表4.6 表tb_photo的结构
字段名称 数据类型 字段长度 是否为空
id int 4 No
photoAddress varchar 50 Yes
photoDescription varchar 50 Yes
photoTime varchar 30 Yes
tb_restore（文章评论信息表），用来保存访客对博文发表的文章评论的基本信息。表结构如表4.7所示。
表4.7 表tb_restore的结构
字段名称 数据类型 字段长度 是否为空
id int 4 No
articleId int 4 Yes
reAccount varchar 50 Yes
reTitle varchar 50 Yes
reContent ntext 16 Yes
tb_vote（投票信息表），用来保存投票项的名称和票数。表结构如表4.8所示。
表4.8 表tb_vote的结构
字段名称 数据类型 字段长度 是否为空
id int 4 No
voteName varchar 20 Yes
voteNumber int 4 Yes
4.2.2 数据表关系设计
数据库表之间的关系设计，如图4.9所示。
图4.9 数据表之间的关系
5 系统详细设计
整个系统设计主要分为用户登陆和注册模块设计、前台设计和后台设计。用户通过注册访问博客系统的前台首页，前台首页提供博主信息、博主发表的日志、系统说明、公告、相册、网络日历等展示。后台管理系统只有管理才能访问，主要是对博客文章、博客公告、投票内容、个人相册和博主朋友信息等进行管理。由于本系统是个人博客系统，通过注册模块注册的用户都是游客身份而非管理员身份，如果想要设置多个管理员，就需要到数据表里面手动添加管理员帐户。
5.1 登陆和注册界面设计
（1）用户登录模块具有用户登录功能。博客网运行的第一个页面便是用户登录页面，用户登录后，可以查看博主所发表的文章。在用户登录页面中，在用户名”和密码”文本框中输入用户名和密码后，单击登录”按钮，系统验证成功后，用户将以会员的身份进入博客网首页，之后在网站中可以随意查看博主发布的文章。如果登录的用户就是博主本人，在博主信息显示区域中，则出现进入后台”超链接，博主可以直接单击此超链接，进入博客网的后台进行管理。用户登录模块的框架如图5.1所示，用户登录界面如图5.2所示。
图5.1 用户登录模块的框架图
图5.2 登录界面
（2）用户注册模块实现新用户注册功能。用户注册的时候对用户输入的信息进行有效性验证，包括基本数据格式的有效性，以及逻辑有效性，例如：给出提示、QQ号码必须为数字、E-mail地址的正确格式等。用户注册成功后，以游客的身份自动登录到博客网前台首页面，由于是游客身份，所以在首页面上不显示进入后台”超链接，即只能访问博客。用户注册模块的框架如图5.3所示，用户注册界面如图5.4所示。
图5.3 用户注册模块的框架图
图5.4 用户注册界面
5.2 前台页面设计
5.2.1 前台首页概述
在博客网的前台首页设计中，首先将管理员发布的最新文章展现给用户，然后提供文章的分类、显示博客的信息、显示最新公告及博客网导航区功能等功能。博客网前台首页的运行结果如图5.5所示。
图5.5 博客系统前台首页的运行结果
5.2.2 前台首页技术分析
在如图5.5所示首页中的显示博主的基本信息、显示登录用户信息、显示博客的主要功能、显示博主的朋友圈及版权信息等功能，并不是仅存在于首页中，其他功能模块的子页面也需要包括这些部分。因此，可以将这几个部分分别保存在单独的文件中，这样在需要放置相应功能时只需包含这些文件即可，如图5.6所示。
head_top.jsp
head_right.jsp head_Consumer.jsp
head_main.jsp
head_down.jsp
图5.6 前台首页的布局
在JSP页面中包含文件有两种方法：一种是应用<%@ include %>指令实现，另一种是应用动作元素实现。本系统使用的是动作元素，该动作元素用于向当前页面中包含其他的文件，这个文件可以是动态文件也可以是静态文件。
5.2.3 前台首页的面局
应用动作元素包含文件的方法进行前台首页布局的部分代码如下：
<%@ page contentType=text/html; charset=gb2312 language=java import=java.sql.* errorPage= %>
//应用动作元素包含head_top.jsp文件，该文件用于显示博主的基本信息。
//应用动作元素包含head_right.jsp文件，该文件用于显示博客的主要功能。
……
//应用动作元素包含head_Consumer.jsp文件，该文件用于显示登录用户信息（如果登录用户为博主，则不显示用户信息）
……
//应用动作元素包含head_down.jsp文件，该文件用于显示版权信息及博主的朋友圈。
5.3 后台界面设计
5.3.1 后台首页概述
在博客网的后台首页设计中，首先将管理员常用的功能显示在网页的操作区域中，然后将后台的主要功能显示在网站的左侧区域。博客网后台首页的运行如图5.7所示。
图5.7 博客网后台首页的运行效果
5.3.2 后台首页技术分析
如图5.7所示的后台首页中的显示后台页面旗帜、左侧功能区及版权信息等功能，并不是仅存在于首页中，其他功能模块的了页面中也需要包括这些部分。因此可以将这几个部分分别保存在单独的文件中，这样在需要放置相应功能时只需包含这些文件即可，如图5.8所示。
back_top.jsp
back_left.jsp backMainPage.jsp
back_down.jsp
图5.8 后台首页的布局
5.3.3 后台首页的布局
应用动作元素包含文件的方法进行后台首页布局的代码如下：
<%@ page contentType=text/html; charset=gb2312 language=java import=java.sql.* errorPage= %>
//应用动作元素包含back_Top.jsp文件，该文件用于显示网站的旗帜。
//应用动作元素包含back_Left.jsp文件，该文件用于显示后台全部功能。
…… |
//应用动作元素包含back_Down.jsp文件，该文件用于显示网站的版权信息。
5.4 系统重难点代码分析
5.4.1 系统配置
本网站是采用Servlet和JavaBean结合技术开发的。JavaBean技术实现对数据库的操作不需要在XML文件中进行任何的配置，而正常运行Servlet程序还需要进行适当的配置，配置文件为web.xml。关键代码如下：
xmlns=http://java.sun.com/xml/ns/j2ee
xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance
xsi:schemaLocation=http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd>
This is the description of my J2EE component
This is the display name of my J2EE component
ConsumerServlet
com.wy.webiter.ConsumerServlet
This is the description of my J2EE component
This is the display name of my J2EE component
FriendServlet
com.wy.webiter.FriendServlet
… -->
ConsumerServlet
/ConsumerServlet
FriendServlet
/FriendServlet
… -->
index.jsp
5.4.2 分类显示文章信息
当用户登录后，在博客网的首页左侧操作区中单击文章”超链接，网页会自动弹出一个URL，即head_ArticleList.jsp，将分类显示文章的信息，如图5.9所示。
图5.9 前台分类显示文章信息
在该页面中，首先通过JavaBean定义分类操作的类（MyPagination），之后调用ArticleDao类中的queryArticle()方法查询所有的文章信息，最后将查询的结果显示在页面中。分类显示文章信息的关键代码如下：
<%
Integer typeId=null; //设置文章类型ID对象
if(request.getParameter(typeId)!=null){
typeId=Integer.valueOf(request.getParameter(typeId));//如果获取的文章类型ID对象不为null，则赋值
}
String str=(String)request.getParameter(Page); //获取当前页码
int Page=1; //初始化Page对象
List articleList=null; //设置List集合对象
if(str==null){
articleList=articleDao.queryArticle(typeId); //根据文章类型ID去查询所有文章信息
int pagesize=5; //指定每页显示的记录数
articleList=pagination.getInitPage(articleList,Page,pagesize);
//初始化分页信息
}else{
Page=pagination.getPage(str); //将获取的当前页码数进行赋值
articleList=pagination.getAppointPage(Page); //获取指定页的数据
}
%>
for(int articleI=0;articleI //循环文章集合对象中的数据
ArticleForm articleForm=(ArticleForm)articleList.get(articleI);
String articleContent=articleForm.getContent(); //获取文章的内容
if(articleContent.length()>150){ //当文章内容的文字控制在100个字符以内
articleContent=articleContent.substring(0,150)+......;
}
%>
| <%=articleForm.getTitle()%> |
| <%=articleContent%> |
| class=head-02>阅读全文>> |
|
|
|---|
<%} %>
<%=pagination.printCtrl(Page) %> < !—传递分页Bean的参数-->
5.4.3 相册上传的实现
博主进入后台管理页面中，单击左侧功能区中的相册添加”超链接，将进入相册上传页面，如图5.10所示。
图5.10 相片上传页面
如图5.10所示，单击保存”按钮，实现的URL地址为PhotoSerlvet?method=0，当method=0时，执行的是addPhoto()方法，该方法实现上传相片的功能。代码如下：
public void addPhoto(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
photoDao = new PhotoDao(); //实例化PhotoDao类型的对象
PhotoForm photoForm = new PhotoForm(); //实例化PhotoForm类型的对象
com.jspsmart.upload.SmartUpload su = new com.jspsmart.upload.SmartUpload(); //实例化上传组件
Integer maxID = 0; //设置Integer类型的对象
if (photoDao.MaxQueryID() != null) {
maxID = photoDao.MaxQueryID(); //将设置maxID对象的编号
}
String result = 上传的照片格式和大小有问题,上传照片失败!;
//设置上传相片的提示信息
String type = null;
String imageType[] = { JPG, jpg, gif, bmp, BMP };
//设置可以上传文件扩展名的数组
String filedir = file/; //设置服务器端的相对地址
long maxsize = 2 * 1024 * 1024; // 设置每个上传文件的大小，为2MB
try {
su.initialize(this.getServletConfig(), request, response);
su.setMaxFileSize(maxsize); //限制上传文件的大小
su.upload(); //上传文件
Files files = su.getFiles(); //获取所有的上传文件
for (int i = 0; i < files.getCount(); i++){ //逐个获取上传的文件
File singlefile = files.getFile(i);
type = singlefile.getFileExt();
for (int ii = 0; ii < imageType.length; ii++) {
if (imageType[ii].equals(type)) {
if (!singlefile.isMissing()) { //如果选择了文件
String photoTime = su.getRequest().getParameter(
phtoTime); //获取发布相册的系统时间
String photoDescription = su.getRequest()
.getParameter(photoDescription);
//获取相册的描述信息
photoForm.setPhtoTime(photoTime);
//设置相册发布时间 photoForm.setPhotoDescription(photoDescription);
//设置相册描述信息
filedir = filedir + maxID + .
+ singlefile.getFileExt();
//获取相册服务器端地址
photoForm.setPhotoAddress(filedir);
//设置相册服务器端地址
if (photoDao.operationPhoto(添加, photoForm)) {
singlefile.saveAs(filedir, File.SAVEAS_VIRTUAL);
//设置相册上传功能
result = 上传照片成功!;
//设置上传图片成功信息
}
}
}
}
}
} catch (Exception e) {
e.printStackTrace();
}
request.setAttribute(result, result);
//将相册的上传结果通过setAttribute()方法传递给result
RequestDispatcher requestDispatcher = request
.getRequestDispatcher(back_PhotoInsert.jsp);
requestDispatcher.forward(request, response);
}
6 系统测试
6.1 测试方法
软件测试是软件的质量管理核心技术是软件测试用例软件测试是有组织性、步骤性、计划性的。测试的形态分构建性测试、系统化测试、专项测试。软件测试的方式分为白盒技术和黑盒技术。白盒测试又称结构性测试是内部人员进行的测试黑盒测试测试着重于软件的功能的测试测试人员必须使用测试用例。黑盒测试的技术分为等价划分、边界值分析、错误推测。[5]
测试流程如图6.1。登录系统时，用户则要输入用户名(admin)和密码(111)，用户名和密码都输入正确时才可以进入系统主界面，进入主界面后就可以对系统的所有功能模块进行操作（博主和普通用户具有不一样的权限）。
图6.1 测试流程图
6.2 测试内容
通过上述步骤的测试工作，系统能在Windows XP环境下，MYSQL版本上，IE6.0以上正常运行。
6.2.1 登录测试
进入登录界面，输入用户名admin123，密码为123，单击登录”按钮时，则提示您输入的用户名不存在，请重新输入！”,如图6.2所示。
图6.2 登录测试1
返回登录页再一次输入用户名为admin，密码为111，则提示您输入的登录密码有误，请重新输入”，如图6.3所示。
图6.3 登录测试2
进入登录界面，输入正确的用户名admin，密码为123，单击登录”按钮，则可以进入前台首页面如图6.4所示。
图6.4 登录成功提示
由于admin是博主帐户，所以在前台首页面显示进入后台”超链接，如图6.5所示。
图6.5 显示进入后台”链接
单击进入后台”，博主可以进入博客系统后台管理页面，可以对里面的各个模块进行操作，如图6.6所示。
图6.6 后台管理系统top页面
如果登录用户名user，密码123，由于是普通用户，所以在前台首页没有显示进入后台”超链接，如图6.7所示。
图6.7 博主信息
6.2.2 发表文章测试
系统有几个重要的模块，文章发表与查看、相册添加与查看、公告添加与查看、投票内容添加与查看及投票操作等等，这里仅对发表文章模块作测试。
由于文章内容的最大字符长度为2000字符，所以如果输入的文章长度大于2000字符，则不会添加成功。下面对文章发表模块进行测试。
（1）文章主题为烟花易冷，文章类别选择为个人日记，文章内容长度在2000字符内，点击保存按钮，则显示文章添加成功。如图6.8和6.9所示。
图6.8 添加2000字符以内文章
图6.9 文章添加成功提示
（2）文章主题为烟花易冷，文章类别选择为个人日记，文章内容长度大于2000字符，点击保存按钮，则显示文章添加失败。如图6.10和6.11所示。
图6.10 添加长度大于2000字符文章
图6.11 文章添加失败提示
8 结论与展望
本次设计的系统是个人博客系统，也就是单用户博客，在这几个月的开发过程中，我学到了很多书本上学不到的知识，明白了要开发一个系统应该注意的一些细节，以前没有多少实践机会，现在通过这个系统将理论与实践相结合，才能够更深地巩固自己学到的知识。既加深了对管理信息系统的认识，又进一步巩固了以前所学的计算机软件开发方面的知识，提高了软件开发的水平，从而为今后在实际工作中更好的应用计算机进行信息管理打下了坚实的基础。
作为一个完整的个人博客系统，本系统的主要角色有博主和游客（普通用户）：里面的所有内容都是由博主发表，由博主管理，而游客只能够访问与相关的操作。博主分享自己的生活、思想与游客交流，互动。在详细设计和编码中，运用JSP最基本的开发技术，代码简单易懂，系统里间跳转比较清晰。完成了普通用户和系统管理员两者的功能分离，而且各自的功能操作都能得到正确数据并存入数据库中保存。另外系统利用MVC模式极大地提高了系统的灵活性、复用性、开发效率、适应性和可维护性。系统的开发以及论文的研究由于时间的关系，有一些地方做的还不是很完美。对MVC设计模式的研究时间不长，所以在写代码的时候还没有做到真正的得心应手，是在查询一些帮助文档资料的情况下才完成的。但是，通过这次设计我意识到将旧知识和新知识结合的必要性，学会了如何思考和解决问题的方法。
通过对博客系统的测试，发现了博客存在的一些不足之处：（1）网络上的博客大多是多用户博客，每个人都可以拥有自己的博客空间，发表自己的文章与心情，即时与他人互动，交流。所以个人博客系统要放到网络上使用是不现实的，但由于个人的知识储备有限，所以我会在今后努力地完善自己的博客系统功能，希望能够朝多用户功能发展。（2）博客系统的界面过于单调，缺乏动态图形显示效果，自己美术功底缺乏，所以配色方面也存在很多问题。腾讯的网页风格是我最喜欢的，我希望以后会多多了解一些美术方面的知识，使自己做出的页面更加美观。（3）还有就是整个系统采用JSP+JavaBean+Servlet的网页构建技术，能很好地把逻辑处理和界面显示分开来，也便于网页的维护，但如果使用当前经典的框架结构Struts框架结构，将能更好地实现逻辑代码与数据之间的分离。
致 谢
时光匆匆如流水，转眼便是大学毕业时节，离校日期已日趋临近，毕业论文的完成也随之进入了尾声，在陈梁老师的精心指导下我终于完成了本次毕业设计，他丰富的专业知识、谦逊的品质和严谨细致、一丝不苟的作风是我工作、学习中的榜样；他循循善诱的教导和不拘一格的思路给予我无尽的启迪。通过这短短几个月的毕业设计环节，我对自己大学几年的学习有了一个总结和检验，我积累的知识有了用武之地，而且我的动手能力也大大提高了。无论在基础理论知识、软件操作技能、还是独立思考问题能力方面都有了长足的进步，从开始的在做网站方面没有一点能力的我，到现在能做出一点点成绩的我，真的很感谢陈老师的教导。
本系统从选题、编程设计到毕业论文整个过程都倾注了陈老师的心血，再一次向他表示衷心的感谢和诚挚的敬意！同时，感谢所有任课老师和所有同学在这四年来给自己的指导和帮助，是他们教会了我专业知识，教会了我如何学习，教会了我如何做人。正是由于他们，我才能在各方面取得显著的进步，在此向他们表示我由衷的谢意，并祝所有的老师培养出越来越多的优秀人才，桃李满天下！还要再次感谢老师对我的关心和照顾，在此表示最诚挚的谢意。在这我也非常感谢我的同学，他们在我无助的时候鼓励我帮助我，让我在成长的路上不是孤身一人，与他们同行我无比的快乐和自豪！写作毕业论文是一次再系统学习的过程，毕业论文的完成，同样也意味着新的学习生活的开始。
随着这篇本科毕业论文的最后落笔，我四年的大学生活也即将划上一个圆满的句号。回忆这四年生活的点点滴滴，从入学时对大学生活的无限憧憬到课堂上对各位老师学术学识的深沉沉湎，从奔波于教室图书馆的来去匆匆到业余生活的五彩缤纷，一切的一切都历历在目，让人倍感留恋，倍感珍惜。
参 考 文 献
[1] 明日科技.JSP项目开发案例全程实录(第2版)[M].清华大学出版社,2011
[2] 聂哲,范新灿.JSP动态WEB 技术实例教程[M].高等教育出版社,2009.1
[3] 王国辉,王毅等.JSP程序开发宝典[M].人民邮电出版社,2007
[4] 刘彬.JSP数据库高级教程[M].清华大学出版社,2006
[5] 张海藩.软件工程导论[M].清华大学出版社,2008
[6] 王君学,田明.网页设计与制作—Dreamweaver8.0[M].机械工业出版社,2006
[7] 孙鑫.Java web开发详解[M].电子工业出版社,2006
[8] (美）格罗夫著,章小莉等译.SQL完全手册(第二版)[M].北京：电子工业出版社，2006
[9] Patrick Chan.The Java Developers Almanac 1.4[M].New York：AddisonWesley，2002．
[10] Joshua Bloch.Effective Java：Programming Language Guide[M].New York：Addison Wesley，2001．
[11] 谭浩强.网页制作技术[M].人民邮电出版社.2002
[12] 蒋海昌.Java Web设计模式之道[M].清华大学出版社, 2012
[13] AbrahamSilberchatz. DatabaseSystemComcepts,FourthEdition[M].北京：机械工业出版社.2003
[14] 刘彬彬,马文强.Eclipse应用开发完全手册[M].人民邮电出版社，2007
[15] 陈冈.Eclipse RCP应用系统开发方法与实战[M].电子工业出版社
附1： 论文独创性声明及论文使用授权声明
论文独创性声明
我的论文《 办公用品管理系统设计与实现 》是我个人在导师指导下进行的研究工作及取得的研究成果。论文中除了特别加以标注和致谢的地方外，不包含其他人或其他机构已经发表或撰写过的研究成果。其他同志对本研究的启发和所做的贡献均已在论文中作了明确的声明并表示了谢意。
作者签名： 日期：
论文使用授权声明
本人完全了解xxxxxx计算机学院有关保留、使用毕业论文的规定，即：计算机学院有权保留送交论文的复印件，允许论文被查阅和借阅；计算机学院可以公布论文的全部或部分内容，可以采取影印、缩印或其他复制手段保存论文。保密的论文在解密后遵守此规定。
作者签名：__________ 日期：___________
作者QQ：463622660
应用程序
ODBC管理器
ODBC API sql
驱动程序管理器
数据源名（DSN）
ODBC驱动程序
数据源
ODBC层
数据层
应用层
名字：用户信息
描述：用户的个人信息，用于对用户的确认和更新。
定义：用户信息=帐号+密码+姓名+性别+工作单位+QQ号码+邮箱号码
位置：输入到用户浏览器（前台）
名字：管理员信息
描述：管理员的个人信息，用于对管理员的确认和更新。
定义：管理员信息=帐号+密码
位置：输入到管理员浏览器（后台）
名字：评论信息
描述：对已有文章进行评论。
定义：评论信息=评论题目+评论内容+评论日期
位置：输入到用户浏览器（前台）
名字：朋友圈信息
描述：用户的个人信息，用于对用户的确认和更新。
定义：朋友信息=姓名+QQ号码+说明
位置：输入到用户浏览器（前台）
名字：文章类型信息
描述：用于对文章进行分类。
定义：用户信息=类型名称+分类说明
位置：输入到用户浏览器（前台）
名字：用户信息
描述：用户的个人信息，用于对用户的确认和更新。
定义：用户信息=帐号+密码+姓名+性别+工作单位+QQ号码+邮箱号码
位置：输入到用户浏览器（前台）
名字：照片信息
描述：用户上传的照片，图片等。
定义：照片信息=照片位置+照片说明+日期
位置：输入到用户浏览器（前台）
名字：投票信息
描述：博主添加的投票信息与每一项的票数。
定义：投票信息=投票分类+投票数量
位置：输入到用户浏览器（前台）
WEB服务器(web Server)
数据用 服 务 器
PC
查看博主信息
查看网站说明
网络日历
邮箱联系
朋友查询
友情链接
相册查询
用户投票
文章查询
文章详细查询
公告详细查询
公告查询
文章留言
博客网前台
博客网后台
公告管理
个人相册管理
博客文章管理
朋友信息管理
投票管理
用户设置
公告添加
公告设置
相册添加
相册设置
发表博客文章
博客文章设置
文章分类
设置内容添加
投票内容设置
朋友信息添加
朋友信息设置
博主信息修改
用户注册
开始
用户登录
用户登录判断
博客网站首页
投票结果查看
朋友查看
邮件联系
博客说明查看
相册查看
投票
文章分类
文章查看
文章详细查看
文章回复
公告信息详细查看
公告信息查看
博主信息查看
用户登录
用户登录判断（是否为系统管理员）
博客网后台页面
博客网前台页面
博客文章管理
公告管理
个人相册管理
投票管理
朋友信息管理
博主个人信息修改
用户管理
开始
注册用户
博主
朋友
投票
文章
公告
文章类型
照片
文章评论
添加
阅读
发表
上传
查看
发表
从属
管理
发表
阅读
参与
参与
查看
查看
用户信息
用户名
管理级别
QQ号码
性别
兴趣
密码
主页
E-mail地址
姓名
文章信息
文章题目
文章内容
文章访问次数
文章发布时间
文章类型信息
类型名
类型描述
公告信息
公告标题
公告内容
公告属性
朋友信息
朋友名
朋友描述
朋友QQ号码
照片信息
照片路径
上传时间
照片描述
文章评论信息
文章ID
回复主题
回复内容
回复号
投票属性
投票信息名
票数
开始
用户登录
是否通过验证
显示进入后台”超链接及其他相关信息
不显示进入后台”超链接及其他相关信息
开始
用户注册
验证用户输入数据的有效性
以游客身份自动登录博客系统，不显示进入后台”超链接和其他相关信息
启动系统
管理员密码
博主登录
普通用户登录
密码
进入前台首页面，显示进入后台”链接
进入前台首页面，不显示进入后台”链接
首页模块
博客文章管理
说明信息模块
文章信息模块
公告信息模块
相册信息模块
公告管理
投票管理
个人相册管理
朋友信息管理
用户设置
博主设置
获取项目源文件，联系Q:1225467431,可指导其它毕设,课设();articlei++){>
