1、大家的Jsp设计1绪论（3-5页为宜）之所以选择个人空间系统，基于两点原因。一、在上学期做了作业提交系统之后就一直想做一个交友系统，学校里不仅要有好的学习风气，也要有好的交友平台。二、想做一些不同的尝试，提高自己的能力。1.1 课题背景及意义鉴于网络的快速发展，个人微博 博客 个人空间 系统也有机会得以茁壮成长和发展。上学期我们学习了JSP课程，在本学期，JSP实训项目老师要求学生进行7-8人的团队合作，进行项目开发，大家经过商讨，最终决定用JSP技术，MVC架构开发“个人空间系统”我们小组开发的个人空间交友系统参照“QQ空间”的样式设计和基本功能，立足于用所学的知识进行项目的开发。努力实现“
2、个人空间系统”的相关功能，并提供有好的用户界面。本系统运用一系列的基于Web的新应用包括日志、说说、留言板、相册以及视频等模块，是个包含多个子系统共同应用的个人空间。空间包括个人用户前台和管理员后台两部分。其中管理员后台分为：对日志、说说、留言板、相册管理的普通管理员；对视频及会员用户管理的特殊管理员。空间网页有登录和注册入口以及后台管理员入口，同时显示已注册用户的空间链接，便于他人访问。用户注册登录后，浏览空间的各个模块，对自己的空间进行个性化设置。登录后的用户，满足他人空间的权限设定，可以对他人空间，进行信息浏览、留言等。普通管理员可以浏览用户的空间信息，及对信息进行管理操作。特殊管理员后
3、台主要有视频目录管理、视频数据管理、会员数据管理三部分组成。1.2 课程设计的主要工作1.课程设计任务安排任务名称任务内容预期完成时间需求分析1. 功能需求用例分析参见图表1-12. 查找相关书籍，根据上述分析对页面设计量做好整体规划710天概要设计1. 功能设计层次结构图，参见图表2-1，2-22. 数据库设计根据1-1图表，得出用例关系，创建数据表2-3,2-4,2-5,2-6，以及标间关系2-71015天功能详细设计与实现1. 前台功能模块框架Model设计，View设计3-1，Controller设计2. 主要功能设计与实现图表3-23. 后台功能模块设计框架Model设计，View设
4、计3-3，Controller设计4. 主要功能设计与实现图表3-41520天测试1. 错误调试与处理57天2.完成的主要成果。进入个人空间首页，显示更新的空间动态，并提供不同身份的登录入口，包括用户、会员、普通管理员、影视管理员。非注册游客点击用户注册或会员注册，进入注册页面填写信息，注册成功，即可登录空间系统。空间系统分五个模块，导航栏点击不同模块进入相应的管理页面，日志模块：实现了发表图片、插图等日志，我的日志里可以分页显示发表的日志，点击日志连接进入编辑页面，进行编辑，鼠标滑过“编辑”的下拉菜单，对日志进行删除等操作。可以对日志进行评论。说说模块：分页显示不用用户发表的说说以及评论，对
5、说说和评论可以进行删除。对说说可以点击评论按钮，弹出评论输入页面，输入评论内容，评论后关闭页面。留言板模块：用户留言与回复，显示分页，编辑删除功能与说说类似。相册模块：实现对图片的的批量上传与显示。影视模块：在空间系统中相对独立的模块，必须注册会员才能观看、下载、浏览影视。有自己的管理员对视频、视频目录、会员数据进行管理。具体功能会在下面详细说明。1.3 应用的开发技术1.3.1 MVC模式1.阐述MVC模式各部分构成及其作用。MVC开发模式，即是“Model-View-Controller”模式。在这种模式中，通过JSP技术表现页面，充当视图（View即“V”）的角色，通过Servlet技术
6、完成大量的事务处理工作，负责响应客户的请求，实现控制器（Controller即“C”）的身份，JavaBean则负责数据的处理，即模型（Model的“M”）。 MVC有两种模式，一、严格按照JavaBean+JSP+Servlet，参见图表2-1。二、JSP+JavaBean，参见图表2-2。本系统由于分派问题主要采用的是第二种，较为方便但不利于控制的开发模型。2.在所选设计中MVC应用情况。编写JavaBean，个人空间系统使用的JavaBean参见表 1表1 作业提交系统使用的JavaBeanJavaBean说明com.bwm.db.Conn数据库连接com.bwm.db.Data数据表操
7、作com.bwm.string.Str处理字符串com.bwm.time.Time处理时间com.bwm.time.Mydate处理日期com.bwm.show.Show显示提示信息com.log.JavaBean. articles处理日志表com.log.JavaBean. Comment处理评论表com.log.JavaBean. Message处理留言表com.log.JavaBean. Reply处理回复表com.log.JavaBean. Union处理说说表com.log.JavaBean. users处理用户表1.3.2 JSP技术1.技术简介。JSP技术是一种动态页面设计技术
8、，页面由HTML代码和嵌入其中的Java代码组成。客户端的请求消息，传到服务器页面经过其中的Java代码处理，在生成新的HTML页面反馈给客户。是一种大型Web应用程序开发的工具。2.在系统完成中JSP的作用。本系统主要用JSP完成页面设计，接收数据，显示数据，同时为了写起来方便，而加入的一些Java代码对数据库的连接操作，样式表的引用，以及使用JavaScript对一些错误的处理等等。本次用到的JSP见详细设计图表1.3.3 Servlet技术1.技术简介。Servlet是用Java语言编写的，运行与服务器端的应用程序。通用的开发Servlet的办法就是使用javax.servlet.htt
9、p.HttpServlet类。HttpServlet类通过扩展方法支持标准HTTP/1.1，用于处理HTTP请求和相应。一般和JavaBean配合使用，前者接收数据，后者数据处理，然后将信息在传递到JSP，这就是MVC层设计。2.在系统完成中Servlet的作用。本系统的实现主要依赖的是JSP+JavaBean，没有涉及到Servlet。1.4 开发工具Web服务器负责JSP文件的执行，目前支持JSP的应用服务器较多，如Tomcat、Resin、Weblogic、Jboss等，本次开发用的是Tomcat。Tomcat是Apache公司组织开发的一种JSP引擎，由于自身具有Web服务器，可以作为
10、独立的Web服务器使用。开发环境MyEclipse，是基于Java的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，通过各类插件构建开发环境，众多插件的支持使得MyEclipse拥有其他功能相对固定的IDE软件很难具有的灵活性。在这里，主要是为了调试JSP页面，和发布器Tomcat及Java编程软件JDK关联，简化设计的多集成软件。1.5 小结本章主要是对整个开发系统做系统分析，得出要完成的功能与界面安排。是对系统的概要描述，相当于一篇文章的导语，用来引导读者，进一步去看具体的设计思想。2 需求分析（2-4页为宜）一、 系统目标运用一系列的基于Web的新应用包括日志、说说、留言板、相册
11、以及视频等模块，开发实现多个子系统共同应用的个人空间。空间包括个人用户前台和管理员后台两部分。其中管理员后台分为：对日志、说说、留言板、相册管理的普通管理员；对视频及会员用户管理的特殊管理员。空间网页有登录和注册入口以及后台管理员入口，同时显示已注册用户的空间链接，便于他人访问。用户注册登录后，浏览空间的各个模块，对自己的空间进行个性化设置。登录后的用户，满足他人空间的权限设定，可以对他人空间，进行信息浏览、留言等。普通管理员可以浏览用户的空间信息，及对信息进行管理操作。特殊管理员后台主要有视频目录管理、视频数据管理、会员数据管理三部分组成。二、 可行性分析根据软件工程的思想，要想合格的完成一
12、个项目，首先研究个人空间系统的可行性，从三个方面来考虑。（一）经济可行性个人空间系统旨在构建一个良好的学院交流环境，好的出发点，对于学院，从人才和经济上都能够大力支持，必定可行。（二）技术可行性系统是基于Jsp网页设计开发的，主要实现各个模块的M层、V层、C层，需要后台数据库的支持。本质上是利用现存的子系统模块，进行融合，只需改变数据库的设计架构以及读取操作，从技术上是可行的。（三）管理可行性系统后台管理员分工明确，有对简单文本信息的管理，和对视频用户的管理。管理相对独立，对数据的更改也通过对视图的更改，而不直接对数据库操作，维护起来比较方便，在管理方面也是可行的。三、 功能需求分析在网站系统
13、中的用户分为两类：一类是普通用户，此类用户拥有一般的个人空间管理及他人空间浏览的权限；另一类是会员用户，主要针对视频模块，包括影视信息浏览、在线观看、视频上传和下载等功能。（一）用户前台功能登录进入空间后，点击各个模块连接，进入相应的管理页面，如日志、说说、留言板、相册和视频管理。同时，可以访问他人空间，对其空间信息浏览、评论，也可以在留言板上留言。(1)日志点击导航栏日志链接，进入日志模块。文本区域显示所发表的日志的标题、时间、浏览次数及评论次数，点击编辑按钮，对日志进行删除、分类、转为私密日志等。点击写日志按钮，可以发表日志。(2)留言板点击导航栏留言板链接，进入留言板模块。浏览自己的留言
14、信息及留言回复内容。点击编辑，可以对留言进行删除或访问权限设置。(3)说说点击导航栏说说链接，进入说说模块。用户可以在发表说说框内写入信息直接发表（添加图片），可以浏览好友说说及评论等信息，也可以点击我的说说按钮，对自己的说说浏览、删除等。(4)相册点击导航栏相册链接，进入相册模块。点击创建相册，跳到相册创建界面，提示输入相册名称，相册描述，访问权限等。创建完成后，可以上传照片。在创建相册按钮下方，可以浏览已经创建的相册信息，并对相册进行编辑。点击相册，查看相册内的照片，并对照片编辑等。相册下方显示访问的用户。右侧显示用户对照片的评论信息。(5)影视点击导航栏影视链接，进入影视模块。左侧提供会
15、员登录窗口、影视搜索、下载排行。右侧导航栏，点击链接进入不同的影视查看信息窗口。（二）后台管理员功能（1）普通用户管理管理界面的信息导航部分，点击进入相应的模块后台管理，对日志、留言浏览和删除，对用户信息等进行添加删除的更改。（2）会员用户管理视频目录管理：添加、删除视频目录类别。视频数据管理：对视频信息进行添加、删除处理。会员数据管理：有注册用户权限冻结、会员级别变更、删除会员信息的功能。四、 系统用例分析使用UML用例图描述作业管理系统需求1.用例图简洁用例图用来描述系统参与者之间的相互作用，也可以说是从用户的角度出发对如何使用系统的描述，首先要理清下面几个概念：（1）角色角色代表了某一事
16、件发生的参与者，它用一个小人表示，如图1-1所示在通常的网络项目中，角色常被用来代表使用网站的用户（管理员、用户等），但角色的作用并不局限于此，它也可以用来代表系统交互的其他实体。（2）用例用力代表系统可以实现的功能，通常一个用例代表一组功能，实质上规定了系统实现功能的范围。在实际项目开发中，一个项目往往涉及多个用例，此时需要将其分成若干个子系统实现，以便理解。在UML中，用例用一个椭圆表示，如图1-2（3）用例图当角色与用例发生某种关系，就可以将他们连起来，这就是用例图1-3。箭头方向表示使用与被使用的关系。2.用例分析本系统用力的分析可以简单记为：五个模块，两种用户，两种管理员。他们的用例
17、设计如下（一）留言板 1-4（二）日志 1-5记录功能：浏览量，浏览用户名，浏览时间。添加附件：写日志时，可添加文档、图片、音乐。（三）说说 1-6（四）相册 1-7（五）影视 1-8（六）前台普通用户功能 1-9（七）后台管理员功能 1-102.1 实际业务操作流程本系统是以QQ空间作为模板进行设计实现的，会有用户注册，登录进入空间，或可以点击其他人的空间链接访问他人空间。进入空间后，对日志、说说、留言、相册、影视等模块浏览并执行相应操作，每一个模块，由于信息量大，都会有分页显示功能。对于相册有批量上传功能。2.2 功能需求前台包括普通用户登录与影视会员注册、登录，验证成功后进入相应的主管理
18、页面。后台分为普通空间管理员、影视管理员，点击链接入口进入后台管理。2.3 小结本章在系统分析的基础上对功能需求进一步细化设计，为以后的系统开发明确大概方向，也让用户直观认识到系统的功能，以方便使用。本章主要是框架图，层次结构图对已描述一个系统的功能很是方便，清晰简洁。在以后的开发中，还会用到。3 概要设计（2-4页为宜）一个网站在各项需求确定、系统分析和数据库设计都完成后，下一步就可以根据这个网站的特点确定网站的开发模式，继而编写代码。本系统主要实现数据库访问，以及下载和上传，属于小型系统，功能不太复杂，所以为了节省时间，以JSP+JavaBean为辅助开发模式，在主要功能实现上，采取MVC
19、框架，相对而言，虽然MVC在页面架构方面更简洁，层次条理更清楚，重用度更高，但由于没法使用JSP页面很多内置对象，相对对于功能的实现，不够简单。两种开发模式比较如下图2-1、2-23.1系统总体设计3.1.1 框架设计上述两种模式图，并用。以MVC为主，考虑到JSP显示方便，也有第二种。3.1.2 功能设计系统功能结构。由需求分析可知，系统可划分为两大块，即前台与后台管理。前台主要为教师和学生服务，参见图表2-3，后台为管理员专用，参见图表2-4图表2-3 前台功能结构图图表2-4 后台功能结构图3.2 数据库设计（下划线表示关系的主键）管理员关系：tb_Manager (ID ,Name,P
20、assword,RealName,Type,Whether)图表2-5日志关系：tb_Article (articleId, title, content1, userId, createTime, boardId, fatherId, readCount, recount, picName, picUrl, quanxian, type)图表2-6说说关系：UnionRecord (UnionID, Content1, ReadCount, CommentCount,ScannerID, CreateTime, Permisson, PicUrl, PicName, FatherId)图表2
21、-7留言板关系：messageboard (messageboard_id, content1, pubdate, user_id,reply_id, Permisson, PicUrl, PicName)图表2-8相册关系：Album (AlbumID, AlbumName, AlbumDescripe, AlbumType,PNo, SmallPhotosUrl, OrderNO, CreateTime, UpdateTime, UserID, ReadCount, ReadUserID)图表2-9图片关系：Album _Photos (PhotoID, AlbumID, PhotosNa
22、me, PhotosDescripe,PhotosTags, OrderNO, CreateTime, PhotosUrl, SmallPhotosUrl, Comments,RaiseCount)图表2-10相册权限关系：Album_Permissions (PNo, PName, Descripe)图表2-11回复关系：reply (reply_id, content1, replydate, user_id,father_id)图表2-12会员关系：tb_Account (ID, Name, Password, RealName, Sex, Age, Number, Email, Add
23、ress, Phone, Count, Grade, Whether)图表2-13影视关系：tb_Audio (ID, Name, Picture, Size, Grade Publisher PublishTimeActor, Director, Maker, Languages, Style, Froms, Type，Remark，Address,UserName, IssueDate, DownTime, Whether, Bool)图表2-14目录关系：tb_AudioList (ID, Name, Grade, Father, UserName, IssueDate)图表2-15等级
24、关系：tb_Grade (ID, Name, Price)图表2-16用户关系：tb_user (UserID, UserName, UserPassword, RealName, Sex,Brthday, Zonename, Zonedetaile)图表2-17评论关系：UserComments (CommentID, UserID, Content1, CommentTime,FatherId)图表2-18影视关系数据库 2-19：空间关系数据库 2-20：3.3 小结本章主要完成的是数据表的创建，功能结构图的建立，对系统的内部进行整体的剖析，是在需求分析的基础上，对开发方向的再一次定位。
25、当然，数据库的创建，也为以后，数据处理提供平台。4 功能详细设计与实现（8-10页为宜）基于前面的分析，接下来就是各层次的具体实现。因为个人空间牵扯内容较多，系统较大，分为五个模块，两种用户，两种管理员，故想对于功能的各部分描述，在这里只挑选几个代表性的描述。下面将对本次开发的各个层面详细说明。4.1系统框架各层次实现4.1.1 Model设计My Eclipse中JavaBean见图表3-1图表3-1具体说明参见前面的图表4.1.2 View设计列出所有页面。图表3-2表3-2 个人空间系统使用的JSP页面日志界面设计（rizhi）JSP说明Log.jsp日志主界面MyLog/ Delete
26、_log.jsp删除日志处理界面MyLog/ Edit_log.jsp编辑日志界面MyLog/ Log_Publish.jsp日志发表处理界面MyLog/ Pattern_log.jsp好友日志界面MyLog/ Publish_success.jsp日志发表成功显示界面MyLog/ view_log.jsp日志链接处理界面MyLog/ Write_log.jsp写日志界面LifeRecord/ LifeRecord.jsp生活记录界面Secretlog/ Write_Secret_log.jsp私密日志界面说说界面设计（shuoshuo）JSP说明Union.jsp说说主页面MyUnion/C
27、omment_pub.jsp评论处理界面MyUnion/ Comment_publish.jsp评论发表界面MyUnion/ Delete_comment.jsp评论删除处理界面MyUnion/ Delete_union.jsp说说删除处理界面MyUnion/ Union_publish.jsp说说发表处理界面留言板界面设计（liuyanban）JSP说明Message.jsp留言版主界面MyMessage/ Delete_message.jsp留言删除处理界面MyMessage/ Delete_reply.jsp恢复删除处理界面MyMessage/ Message_publish.jsp留言
28、发表处理MyMessage/ Reply_pub.jsp回复处理MyMessage/ Reply_publish.jsp回复页面相册界面设计（xiangce）JSP说明Album.jsp相册主界面影视界面设计（yingshi）JSP说明index.jsp影视主界面Top.jsp上框架Bottom.jsp下框架Left.jsp左框架Right.jsp右框架Navigation.jsp导航条Audio.jsp影视专区界面Turn.jsp影视前台界面Audio/ Default.jsp影视查看Audio/ Navigation.jsp影视导航条Audio/ Type.jsp某一影视展示Login/
29、Change.jsp会员资料修改Login/ Online.jsp会员已登录Login/ Unonline.jsp会员未登录Manage/ Left.jsp管理员左框架Manage/ Login.jsp管理员登录界面Manage/ Manager.jsp管理员主界面Manage/ view.jsp管理员中间的时钟界面Manage/ Audio/addlist.jsp视频目录名称添加Manage/ Audio/ Data.jsp视频数据管理Manage/ Audio/ DataAdd.jsp视频数据添加Manage/ Audio/ Datadel.jsp视频数据删除Manage/ Audio/
30、delete.jsp视频目录删除Manage/ Audio/ List.jsp视频目录管理Manage/ Member/ delete.jsp会员信息删除Manage/ Member/ List.jsp会员数据管理News/ Audio.jsp影片信息展示Play/ look.jsp视频在线观看Ranklist/ Audio.jsp下载排行Reg/ Reg.jsp会员注册Search/ index.jsp影视搜索Search/ Search.jsp搜索显示Turn/ Audio.jsp影视上传Turn/ News.jsp最新上传Turn/ update.jsp上传处理主页界面设计（zhuye）JSP说明index.htm空间系统欢迎界面index.jsp空间系统入口login.jsp会员或用户登录处理main.html空间主页面top.html主页上框架bottom.html主页下框架Admin/ admin.jsp空间管理
