个人空间主页网页设计

1、JAVA 程序设计课程设计 题目 个人空间设计与制作个人空间设计与制作 专 业 名 称 学生姓名 学号 指导教师 完成时间 目录目录 目录目录.2 1. 绪论.3 1.1 项目开发背景:.3 1.2 项目简述.3 2. 开发环境.3 3. 需求分析.4 3.1用户类型分析：.4 3.2功能需求分析：.4 4. 系统设计.5 4.1 软件组织结构.5 4.2 软件系统结构 和 类之间的引用关系.6 4.3 系统文件组织.7 4.4 系统数据库设计.10 4.5界面设计.10 5.系统的开发环境平台.15 6. 总结.15 1. 绪论绪论 1.1 项目开发背景项目开发背景: 网络快速发展，个人微博

2、 博客 个人空间 系统也有机会得以茁壮成长和迅 速发展。我所开发的个人空间交友系统是在原有个人空间样式的基础之上，新 添加新的使用功能模块设计出来的。对用户具有更好的友好性和适用性。 1.2 项目简述项目简述 现在系统与传统系统比较具有的总体优势：可以实现动态刷新，在用户写 日志，上传图片，留言，好友管理时，必须要重新刷新当前页面，这样页面会 被再次加载，用户用很长的时间来等待他感兴趣的东西，而结果可能又不是他 想要的内容，这样对用户的体验就很差。我们的个人交友系统，在大多数方面 可以满足用户对局部页面动态请求，而不刷新整个页面。提高了系统与用户的 交互性，可以让用户很快浏览他感兴趣的内容的同

3、时，还可以关注当前页面中 的其他内容。 2. 开发环境开发环境 开发环境 MyEclipse 简介 MyEclipse 企业级工作平台（MyEclipse Enterprise Workbench ，简称 MyEclipse）是对 Eclipse IDE 的扩展，利用它我们可以在数据库和 J2EE 的开发、 发布，以及应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的 J2EE 集成开发环境，包括了完备的编码、调试、测试和发布功能，完整支持 JSP,Servlet,Structs2.0,AJAX 等全新技术。 在结构上，MyEclipse 的特征可以被分为 7 类： 1. J2EE 模

4、型 2. WEB 开发工具 3. EJB 开发工具 4. 应用程序服务器的连接器 5. J2EE 项目部署服务 6. 数据库服务 7. MyEclipse 整合帮助 对于以上每一种功能上的类别，在 Eclipse 中都有相应的功能部件，并通过 一系列的插件来实现它们。MyEclipse 结构上的这种模块化，可以让我们在不影 响其他模块的情况下，对任一模块进行单独的扩展和升级。 简单而言，MyEclipse 是 Eclipse 的插件，也是一款功能强大的 J2EE 集成 开发环境，支持代码编写、配置、测试以及除错。 3. 需求分析需求分析 3.1 用户类型分析：用户类型分析： 由于本系统是空间类

5、交友和展示系统，因此在本系统中，需要有以下三类 用户类型： 1空间管理员 2空间的普通用户 3空间好友 3.2 功能需求分析：功能需求分析： 1)管理员模块管理员模块 1、登录 当管理员打开管理员首页时，管理员输入用户名、密码、验证码 后单击登录按钮，通过 ajax 请求后台的管理员管理逻辑，经过 验证后向页面返回登录成功或密码不准确信息。完成管理员登 陆，无页面跳转。 2、查看用户留言 管理员登录成功后，单击查看留言管理空白链接在后，在当前页 面中显示所 有用户留言的内容，当单击删除空白链接后可以通过 ajax 删除该 留言项， 页 面无刷新。同时，当在线用户有留言时会动态的添加到当前留言表

6、 的最后。 2、查看用户许愿 管理员登录成功后，单击查看许愿管理空白链接在后，在当前页 面中显示所 有用户许愿的内容，当单击删除空白链接后可以通过 ajax 删除该 许愿项， 页 面无刷新。同时，当在线用户有许愿时会动态的添加到当前许愿列 表的最后。 2)用户模块用户模块 1已注册用户已注册用户 1.登录 当注册用户打开个人交友系统的首页时，输入用户名，密码，验证码。 验证码的生成和校验通过 ajax 来实现的。 2.日志管理 查看：用户在个人首页单击日志链接时可以看到所有日志列表，通过 ajax 请求 action 动态生成日志列表中的数据。 删除：用户点击日志列表后的删除空白链接，通过 a

7、jax 删除该日志， 页面无 跳转。 阅读：用户单击阅读链接可以跳转到该日志的页面进行阅读。 添加：用户单击添加日志按钮，可以跳转到写日志页面，在此写自己 的日志。 3.相册管理 链接：用户在个人首页单击图片链接时可以跳转到图片管理页面 查看：用户点击日志列表后的最新图片选项卡，通过 ajax 查看最新图片， 页面无跳转。 浏览：用户单击浏览图片选项卡可以动态的逐个浏览已上传的图片。 添加：用户单击添加图片选项卡可以跳转到写日志页面，在此写自己 的日志。 4.好友管理 查看：用户在个人首页中可以看到所有部分好友列表，通过 ajax 请 求 action 动态生成好友列表中的图片。 访问：用户单

8、击好有图片可以跳转到该好友的个人主页。 查找：用户单击查找按钮，可以跳转好友搜素结果页面，同过 ajax 产 生动态提示。 5.留言管理 查看：用户在个人首页单击留言链接时可以看到所有留言列表，通 过 ajax 请求 action 动态生成留言列表中的数据。 删除：用户点击留言列表后的删除空白链接，通过 ajax 删 v 除该留言， 页面无 跳转。 阅读：用户鼠标放在查看链接时可以动态提示该留言用户的信息。 添加：用户单击留言按钮，可以跳转到写日志页面，在日志后对其评 论（留言） 。 6.个人信息管理 查看和修改：用户单击个人主页的个人信息链接，跳转到用户个人信 息页面，其中的数据是通过 aj

9、ax 自动填充的。 2普通用户普通用户 注册 当普通用户打开个人交友系统首页时，可以单击注册按钮弹出注册面 板，用户可以填写注册信息，页面无刷新。 许愿 用户单击许愿链接，跳转到许愿页面，通过 ajax 动态加载数据库中已 有的所有许愿信息。 许愿：用户填完许愿信息后单击许愿按钮，通过 ajax 可也将许愿内容 添加到数据库，同时在页面中展现出来。 留言 当普通用户打开个人交友系统首页时，可以单击留言链接跳转到留言 页面，用户可以填写留言信息，提交到数据库。 4. 系统设计系统设计 4.1 软件组织结构软件组织结构 个人空间交友系统 用户管理管理员管理 注册 登陆 日志管理 图片管理 好友管理

10、 个人资料 管理 登陆 留言管理 许愿墙管 理 注册用户 管理 许愿留 言 无 普通用 户 注册用户 4.2 软件系统结构软件系统结构 和和 类之间的引用关系类之间的引用关系 本系统是基于 MVC 模式的系统结构主要应用 jsp,ajax/struts/Hibernate 框架 结构。其中 jsp，ajax 用于前台页面的设计，struts 用于业务逻辑的控制， Hibernate 主要用于持久化层的控制，ajax 用于页面的局部刷新。 user log leaveword wishes admin prompt userActionDi spatch PictureActionD ispat

11、ch FriendActionDi spatch logActionDisp atch promptAction WishActionDi spatch UserIndexActi on logDAO friendDAO pictureDAO registDAO wishDAO userDao logDAOipm FriendDAOipm PictureDAOipm RegistDAOipm WishDAOipm UserDAOipm picture promptDAO promptDAOipm leavewordAction Dispatch leaveword DAO leavewordD

12、A Oipm 4.3 系统文件组织系统文件组织 1)包包 及及 包的说明包的说明 说明： com.lzl.Hibernate 包中放的是：HibernateSessionFactory 类，是 hibernate 连 接数据库的基础类 com.lzl.Hibernate.bean 包中放的是：数据库表对应的对象模型类 com.lzl.Hibernate.DAO 包中放的是：对数据库中的各种表的增，删，改， 查方法实现类。 com.lzl.Hibernate.ORM 包中放的是：对象模型和数据库中关系模型的映射 文件。 com.lzl.struts 包中放的是:个人交友系统中用到的各种资源文件。

13、 com.lzl.struts.Action 包中放的是:对业务逻辑的控制，主要处理页面的请求。 如浏览图片，查找好友等功能。 com.lzl.struts.form 包中放的是：页面表单中对应字段的对象。 admin 文件夹：存放的是管理员管理的 jsp 页面 product 文件夹：存放的是用户的 jsp 页面 2)jsp 页面设计页面设计 页面名称功能说明 Index.jsp个人交友系统首页 lm.jsp用户个人首页 Registuser.sp注册用户 Picture.jsp相册管理页面，包括上传图片，显示图片（分页显示） ，删 除图片 a_leaveWord,jsp普通用户给管理员留言

14、的页面 Logs.jsp日志管理页面包括显示日志（分页显示） ，删除日志 addlog.jsp添加日志页面 userdata.jsp用户信息管理页面，修改用户资料 friend.jsp用户朋友管理页面，包括朋友列表，删除朋友 addFriend.jsp查找后添加好友页面 fndex朋友个人首页 wishe.jsp用户许愿页面 Admin.jsp管理员删除不合法的许愿,用户，登录页面 u_leaveword.jsp用户留言的页面 Browserlog.jsp查看具体的留言信息 Linkus.jsp联系我们静态页面 Products.jsp对本系统的总体说明的静态页面 Aboutus.jsp关于我

15、们信息的静态页面 3)各种类功能的说明各种类功能的说明 Vo 类：用户（包括好友信息）:user 图片:picture 日志: log 留言: leaveWord 许愿:wishes 管理员:admin 提示类: friends_prompt,log_prompt,picture_prompt Dao 类： 日志模块：logDAO logDAOipm 好友模块：friendDAO FriendDAOipm 图片模块：pictureDAO PictureDAOipm 注册模块：registDAO RegistDAOipm 许愿模块：wishDAO WishDAOipm 查询模块：searchDA

16、O searchDAOipm 个人资料管理模块：userDao UserDAOipm Control（控制类）：userActionDispatch PictureActionDispatch FriendActionDispatch logActionDispatch WishActionDispatch UserIndexAction SearchActionDispatch 4.4 系统数据库设计系统数据库设计 uer_pic u_log admin_P admin_log admin_leaveword user_leaveword friends_user user_wishes u

17、ser_user user id fri_id use_id name password country city address phone zip email Variable characters (10) Variable characters (10) Variable characters (10) Variable characters (20) Variable characters (20) Variable characters (10) Variable characters (10) Variable characters (50) Variable character

18、s (11) Variable characters (6) Variable characters (20) id log id adm_id title content time Variable characters (20) Variable characters (10) Variable characters (10) Text Timestamp picture id adm_id title show url Variable characters (10) Variable characters (10) Variable characters (10) Text Variable characters (20) leaveWord id adm_id use_id content time Variable characters (10) Variable characters (10) Variable characters (10) Text Date Json, ml 作为数据回传格式。在这些技术结合中，我们深刻的体会到在相同 环境下，用 hibernate 对数据库进行操作效率较慢，而用 sql 则用户响应较快。 可以深刻的体会到，HTML 静态页面