基于WEB的交友博客网站的设计与实现_第1页
基于WEB的交友博客网站的设计与实现_第2页
基于WEB的交友博客网站的设计与实现_第3页
基于WEB的交友博客网站的设计与实现_第4页
基于WEB的交友博客网站的设计与实现_第5页
已阅读5页,还剩55页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

毕业设计(论文)报告学生毕业设计(论文)报告系别:专业: 班级:学生姓名:学生学号:基于WEB的交友博客网站的设计与实现指导教师:设计地点:起迄日期:毕业设计(论文)任务书专业班级姓名一、课题名称:基于WEB的交友博客网站的设计与实现二、主要技术指标(或基本要求):1.开发环境:Eclipse,数据库mysql。 2.技术要求:系统为B/S架构,基于Struts2、Hibernate框架,JQuery技术的应用,运用于前后台之间的操作;配置数据库连接池进行对数据库进行访问、操作。 工作内容和要求:.1、设计需求分析,系统结构功能,设计需求的业务流程;系统设计,制定计划,数据库架构,详细设计。 2、文章模块:文章的增加,删除,修改,以及文章的转载。 3、好友信息管理:显示好友,增加好友,删除好友。 4、文章管理:发表文章,删除文章,修改文章等功能。 5、图片专辑管理:图片的显示,添加,删除。 四、主要参考文献:[1]Hibernate、Struts2官方文档 [2]《Java编程思想》[M].

第5版.

机械工业出版社北京2010年5月[3]《Eclipse从入门到精通》[M].北京:清华大学出版社2005年4月[4]《Java编程思想》[M].第4版.机械工业出版社北京2005年5月学生(签名)年月日指导教师(签名)年月日教研室主任(签名)年月日系主任(签名)年月日毕业设计(论文)开题报告设计(论文)题目基于WEB的交友博客网站的设计与实现一、选题的背景和意义:随着信息技术的发展和计算机的普及,计算机越来越深入到我们的生活领域中。由于人们生活水平的提高,生活质量的增加,人们不满足面对面的交流。另外随着计算机网络的持续发展,无论是工作、学习还是生活的节奏将会不断加快,因此我们需要快捷的信息来源。而21世纪,电脑已经普及了,但是实际利用率不高,如果建立一个基于网站的交友的交流平台,必将大大的提高人与人之间的交流,对人们的生活起到积极的作用,所以无论从目前的现状还是面向未来,一个完备的交流平台的开发是非常必要的。二、主要研究(设计)方法论述:首先,通过调查文献来获得资料,以及从互联网上查询系统中使用到的相关材料,从而全面地、正确地了解掌握所要研究和分析交友系统中可能用到的开发技术,结构框架以及使用方法,并完成课题前期调研工作。其次,对交友系统的可行性进行的分析,然后确定系统设计目标,并明确整个系统结构规划,并完成系统各个模块的设计与开发,但是系统的功能要切合实际情况。最后,对系统主要页面、数据库、应用程序的设计与实现作详细讲解。三、工作内容和要求:.1、设计需求分析,系统结构功能,设计需求的业务流程;系统设计,制定计划,数据库架构,详细设计。2、文章模块:文章的增加,删除,修改,以及文章的转载。3、好友信息管理:显示好友,增加好友,删除好友。4、文章管理:发表文章,删除文章,修改文章等功能。5、图片专辑管理:图片的显示,添加,删除。四、设计(论文)进度安排:时间(迄止日期)工作内容2015.06.20~2015.06.24联系指导老师、确定选题2015.06.25~2015.06.26提交开题报告,任务书由指导老师进行审核并修改2015.06.28~2015.07.03收集资料,分析项目,书写项目需求说明书2015.07.03~2015.07.08搭建项目开发环境,根据项目需求完成相关页面设计2015.07.09~2015.07.25毕业设计论文、全部编码以及项目测试2015.07.26~2015.07.30毕业设计答辩指导教师意见:指导教师签名:年月日六、系部意见:系主任签名:年月日毕业设计(论文)成绩评定表一、指导教师评分表(总分为70分)序号考核项目满分评分1工作态度与纪律102调研论证103外文翻译54设计(论文)报告文字质量105技术水平与实际能力156基础理论、专业知识与成果价值157思想与方法创新5合计70指导教师综合评语:指导教师签名:年月日二、答辩小组评分表(总分为30分)序号考核项目满分评分1技术水平与实际能力52基础理论、专业知识与成果价值53设计思想与实验方法创新54设计(论文)报告内容的讲述55回答问题的正确性10合计30答辩小组评价意见(建议等第):答辩小组组长教师签名:年月日审定意见2.审定成绩(等第)__________系主任签字:年月日审定意见2.审定成绩(等第)__________系主任签字:年月日Ⅰ Ⅰ目录TOC\o"1-3"\h\u摘要 第一章绪论1.1选题背景博客这几年是很流行的,如CSDN博客,51CTO,QQ空间等,每个人都拥有一个独立的空间,人们可以在这里展示自己的个性,非常方便与他人进行互动交流,在这里每个人都是独立的。博客也让数据的传输变得更便利,每天都有大量的文档中在这里被发表,这里也渐渐成为了人们的技术平台。博客正在逐渐地形成一种新文化,有游戏博客,影视博客,等等各种博客,这些博客都是以一种交友,谈论的形式,让人与人之间的关系更加密切,博客传播着人们的情绪,传播这人们的智慧,传播着人们的经验。随着博客的出现,网络的价值才变得更加突出,也标志这互联网发展进入了一个新时期。博客秉承这自由的精神,也激发了互联网的活力,让互联网更具有建设性及开放性。1.2提出问题互联网的高速发展是博客产生的条件,博客是互联网发展的产物。正是因为博客促进了人与人间的交流,促进了技术的发展,所以很有必要设计一个博客系统去验证自己的技术与能力,在这里不同的人都可以在自己的空间里,记录生活的点点滴滴,分享生活中的经验,在这里志同道合的人相聚了,知识在这里分享,知识在这里传播,人们的生活必定会变得更加丰富多彩。完成一个完整的博客系统同样是对我们技术的一个重大的考验。1.3开发目标利用这一个月的时间,利用这几个月学习的javase及javaee的技术,使用Struts2、Spring、Hibernate三大开源框架技术开发一个小型博客的开发。博客需要简单实用,界面优良。用户通过注册之后,可以通过账号和密码登录自己的独立空间,就可以发表文章,显示图片,上传图片,删除图片,添加好友,删除好友,给好友发送消息等功能,用户也可以访问别人的文章,当点击别的用户之后,就可以查看对方信息,添加对方为好友,或者是给对方留言。第二章相关技术介绍2.1Struts2技术1.Struts2的定义Struts2是一个轻量级的MVC框架,解决的是一个请求分发,重心在控制层和表现层,轻量级;简单讲Struts2相当于一个大的Servlet,实现了页面的跳转操作。2.Struts2的原理Struts2框架的运行流程非常相似于WebWork框架的流程,Struts2其实就是WebWork2.2的升级版,因此,Struts2的运行流程与WebWork运行流程完全相同,如下图所示为WebWork的运行流程:图2-1WebWork的运行流程总的来讲Struts2的运行原理有如下几个步骤:第一步:把Struts2的配置所需要用到的jar包加入的项目中;第二步:将拦截器相关的配置在web.xml文件中加入进去;第三步:在项目src的目录下新建一个空struts.xml配置文件;

第四部:新建一个java文件编写的action类;第五步:相关数据配置在struts.xml文件中;第六步:编写具体的jsp文件;第七步:部署tomcat,启动tomcat,通过浏览器访问。2.2Spring技术为什么要使用SpringSpring是一种轻量级框架,轻量级是指该框架是非入侵式的,用Spring开发的系统不需要依赖Spring中类,它不需要容器支持。Spring技术Ioc:控制反转AOP:面向切面编程Spring模块图:图2-2Spring模块图Spring开发环境的搭建添加Spring的jar包:spring-core.jar,spring-beans.jar,spring-aop.jar,spring-context.jar,spring-expression.jar,commos-logging.jar编写一个类配置这个类新建[beans].xml,添加头文件信息添加bean节点ConfigurationMetadata、YoursBusinessObjects(POJOS)、TheSpringContainer图2-3Spring注入POJOs2.3Hibernate技术1.Hibernate的定义Hibernate是三大框架中用来操作数据库的框架,可以把数据库中的表,转换成java实体类,然后通过hibernate.cfg.xml主配置文件实现了实体类与数据库表之间的相关映射关系。这样的好处在于间接访问数据库,大大简化数据访问层的代码开发。2.Hibernate的工作原理将类对应的配置文件和Hibernate的配置文件配置好了后,启动tomcat服务器,服务器将实例化Configeration对象,读取到hibernate.cfg.xml主配置文件中的相关配置信息,根据相关的配置中的数据建好映射关系,通过实例化的Configeration对象建立sessionFactory实例,再通过sessionFactory实例就可以创建session对象,在session获得了以后,对数据库数据的增删改查操作就很容易操作了。3.Hibernate的使用步骤(1)导如jar包;(2)引入主要的配置文件hibernate.cfg.xml;(3)创建Model的实体类;(4)创建映射关系文件.hbm.xml;(5)调用相应API实现增删改查。2.4JQuery技术1.如何定义JQueryJQuery是当前非常流行JavaScript库之一,实质是由js编写的一个框架。他是轻量级的js库,并且JQuery兼容大多数的浏览器(IE6.0以上,FF1.5以上,Safari2.0以上,Opera9.0以上),但是包括JQuery2.0在内以及JQuery后续的所有的版本将不再支持IE6s和IE7以及IE8浏览器。2.JQuery的优势JQuery的优势有以下几点:(1)轻量级:所谓的轻量级就是JQuery是非常轻巧的,压缩后将变得很小。(2)选择器:JQuery拥有独创的选择器,使用起来极其方便。(3)DOM操作的封装:JQuery封装的DOM操作,让开发者编写的程序变得更快捷。(4)事件处理机制:JQuery设计了有许多事件处理的函数,使得在处理事件上是非常可靠的。(5)完善了Ajax:Ajax所有的操作都被JQuery封装到函数中,让开发者开发时不用考虑浏览器的兼容问题等等。

第三章需求分析本章主要对博客系统的需求说明进行了详细的描述,对业务流程,系统的结构框架以及各个模块的功能进行了详细的分析,对非功能需求的一个说明。3.1需求说明博客系统主要内容包括:博客用户的登录以及注册;文章管理:注册用户的的文章展示,文章修改,文章删除,转载用户的文章等;用户个人信息管理:修改个性签名,修改邮箱,忘记密码时可修改密码;好友的管理:添加好友,删除好友,给别的用户留言,管理消息,删除消息;图片管理:图片显示,上传图片,图片删除等功能。评论管理:显示文章评论列表,博主可删除文章的评论,游客和一般的用户都有权限添加评论。3.2业务流程用户注册成为用户之后,用户就可以登录博客系统,然后用户可以发表文章,然后可以对这篇文章增删改查,可以查看别人给文章的评论,也可以给别人的文章评论,上传图片,图片的删除,当用户点击别的用户后还可以,给别的用户留言打招呼,也可以添加对方为好友。添加为好友后在你的好友列表里就可以看到对方了,可以给该用户发消息,也可以删除该用户。下面是博客系统的功能展示: 图3-1博客功能展示一般的访客具有这样的权限:访客访客权限阅读博文访问博客空间给用户留言图3-2一般访客权限如果没有在本博客系统注册只能查看别人写的文章,而不能自己写文章,但是也可以使用匿名身份给用户留言,这样可以让不想注册的人也可以拥有一定的权限,更符合人们所想,因为很多时候我们访问一个网站的时候并不希望注册,就可以给别人留言的。这样做就可以将范围缩小。首页向注册的用户提供了登陆的模块,注册用户在博客网站首页跟上网网友一样可以查看博客和博文推荐。上网网友可以注册用户,然后成为博客用户,就可以拥有自己独立的空间。注册用户有这样的权限:注册用户注册用户发布博文添加好友上传图片发送消息个人空间访客权限图3-3注册用户权限在博客主界面中用户发表博文时可以选择博文类型,这样就可以更好管理自己的博文了。然后查看、删除网友对自己的博文的一些见解、评论、查看以及删除网友留下的一些留言,提供了与其他网友交流的空间。更好的交流,在这个信息的时代里,人们就通过个人空间沟通也用来但不能在自己的博客主页面中提交评论和留言。。这样在本系统中就可以为博友提供了非常多的个人色彩。在管理页面中可以添加和删除友情连接。这样博友可以在自己空间中快速的定位让自己的关心的网站。这样还可以让网友看到与自己有关的一些信息。友情链接和网页访问量统计可以显示:在博客的个人页面中我们还提供了推荐给普通网络用户的相关友情链接,此外,对个人页面的访问量也在时时刻刻进行着统计,并可以在个人页面中很容易就能看到。

第四章系统设计4.1系统结构设计在项目的开发之前,一定要有一个明确的构思,这样才可以设计出最优的方案,还要考虑选择使用不同系统之间的不同兼容,及不同的运行环境.当前比较流行的网页技术是jsp和php,相比较而言,php功能要简单些,不适合做大型程序。由于j2ee的开源框架中提供了mvc框架struts,对象关系模型hibernate,依赖注入的spring,所以开发系统就要简单多了。本blog系统采用了jsp技术作为开发技术,b/s架构,使用的mvc的分层结构给项目布局,为了不让自己去处理数据库的创建,以及事务的管理,本系统使用hibernate技术,管理数据库操作,同时,对于多数层对象的创建,使用了spring注入技术。使用稳定的SSH框架技术,从简单性、可测试性和松耦合的角度而言,能够构建一个健壮、高效、易于扩展和可维护的业务应用系统。图4-1基于SSH框架的系统分层架构图本系统使用如下配置:1). 服务器端操作系统:win8.1操作系统2). Web服务器:Tomcat7.0;3).客户端:google浏览器4).开发工具:eclipse编译器,notepad++编辑器本系统技术方案:伴随着Internet的迅速发展,计算机技术正在由基于C/S(client/Server)模式的应用系统转变为基于B/S模式的应用系统。过去,网络软件的开发都采用C/S(client)模式,导致了系统安装、调试、维护和升级困难,而B/S模式就可以避免这些问题,所以系统使用了B/S模式。本网站以win8.1为Web平台,JSP+Ajax+Struts2+Spring+Hibernate为网站实现技术,建立基于MySQL数据库系统的动态网页,实现博客的前台和博客的个人数据管理等功能性模块。系统设计关注的一些问题:系统处理问题有准确性、及时性,系统处理的准确和即使是系统的必要性能。系统的开发要考虑可扩充性:在系统开发的过程中要充分的考虑以后系统的可扩充能力,尽可能的让后期的维护工作变得轻松。也可以让系统今后的升级提供了方便。系统易用性以及易维护性:让系统应该尽量使用用户都熟悉的术语和中文界面;针对用户可能出现的问题,要提供足够的帮助,让用户更快的熟悉系统。4.2数据库的设计本系统的数据库是MySQL数据库,版本号是5.5.36-win32。总体的结构如下:图4-2所有表之间的联系以下是每个表的结构:表4-1用户表UserId:主键,自增字段Email:保存emailPassword保存密码Username:保存用户名表4-2文章表ArticleId:主键,自增字段Caption:保存标题Content:保存内容Time:保存时间User:外键,关联用户,写这篇文章的人表4-3好友表FriendId:主键,自增字段Me:外键,保存着我自己Other:外键,保存着好友表4-4用户表UserId:主键,自增字段Content:消息内容Time:消息的时间Receiver:外键,接受人Sender:外键,发送人第五章技术实现与测试5.1项目结构图5-1项目总结构本项目的名字是blog,前台目录是WebContent,index.jsp是首页面,src是后台根目录,struts.xml,applicationContext.xml,perties,perties这几个文件分别是struts2、spring、hibernate、数据库、调试日志的配置文件。后台结构是这样的:图5-2后台代码结构整体结构还是很清晰的,base包里是封装的基本功能,mx.blog包下是项目的主要结构,有action、dao、entity、service以及测试的test包。5.2系统实现当第一次来到博客Blog时,看到的是这样的样子:图5-3博客首页可以看用户写的文章,但是没有写文章的权限这时候你需要注册一个用户:图5-4注册注册成功之后你就可以点击右上角的管理进入后台发表文章了。图5-5注册成功这个是文章列表:图5-6文章列表点击写一篇文章,就发表文章了,在这里你可以写入文字,上传一张图片,也可以截一张图,直接ctrl+v截到编辑器里面,然后提交就可以发表一篇文章了。5.2.1注册模块在action包中实现UserAction,该action名字是userAction,实现register方法://注册一个用户 publicvoidregister(){ Jsonjson=newJson(userService.register(user)); writeJson(json); }在service包中实现UserService,该service名字是userService,实现register方法://注册一个用户 @Override publicStringregister(Useruser){ ObjAttr.Object_ToString(user,"user"); user=(User)userDao.saveOrUpdate(user); if(user!=null){ setSession("u",user); return"success"; } return"error"; }在前台页面使用ajax操作://使用ajax完成用户的注册 functionregister(){ $.ajax({ type:"post", url:"userAction!register", data:$('#registerform').serialize(), //表单的序列化 dataType:"json", success:function(data,msg){ if(data.msg=="success") window.location="index.jsp"; //注册成功就重定向 }, beforeSend:function(){ } }); }页面发起userAction!register请求,并把把form表单序列化的值传到后台,后台执行hql语句把数据插入到数据库然后就注册成功了,就可以插入一条记录到数据库,同时还会设置一个session,于是一个用户产生了,页面又重定向到index.jsp首页,这样你就可以使用本博客系统了。登录模块用户登录的时候操作先登录,然后再回到index.jsp:图5-7登录技术实现的细节:在UserAction中实现login方法://用户的登录 publicvoidlogin(){ Jsonjson=newJson(userService.login(user)); writeJson(json); }在UserService中实现login方法://用户的登录 @Override publicStringlogin(Useruser){ ObjAttr.Object_ToString(user,"从页面传入的user"); Stringhql="fromUserwhereusername='"+user.getUsername()+"'"; List<Object>users=userDao.queryFind(hql); if(users.size()>0){ user=(User)users.get(0); if(user.getPassword().equals(user.getPassword())){ ObjAttr.Object_ToString(user,"从数据库加载后的user"); setSession("u",user); return"success"; }else return"password_error"; } else return"username_error"; }在页面中://使用ajax完成了用户的登录 functionlogin(){ $.ajax({ type:"post", url:"userAction!login", data:$('#loginform').serialize(), dataType:"json", success:function(data,msg){ if(data.msg=="success") window.location="index.jsp"; } }); }页面使用一个ajax操作,把form表单的数据序列化,然后发起userAction请求,把序列化数据发送到服务端,执行userAction中的login方法,然后后台执行一个hql语句查询要登录的用户,如果这个用户存在的话,就设置一个session,OK,你就登陆成功了。否则就弹出登录失败!5.2.3发表文章模块图5-8发表文章当点击提交的时候,就是这样:图5-9后台的文章列表然后点击“我的博客”,进入博客首页,就可以看到发表的文章了:图5-10首页显示文章技术实现细节:编写ArticleAction,名字是articleAction,使用Spring通过名字注入,在ArticleAction中实现save方法,在articleService中实现save具体操作://文章的保存 publicvoidsave(){ article.setCaption(caption); Jsonjson=newJson(articleService.save(article)); writeJson(json); }在articleService中://保存一篇文章 publicStringsave(Articlearticle){ article.setUser((User)getSession("u")); article.setTime(newDate(System.currentTimeMillis())); if(articleDao.saveOrUpdate(article)!=null) return"success"; return"error"; }Save方法从页面中获取值,然后从session中获取当前的用户,设置article对象,使用hibernate方法保存article对象,然后就成功添加了一篇文章。在添加文章的过程需要处理两个问题:图片是如何插入的?我还使用了截图放入编辑器的功能,类似于qq的ctrl+alt+a的截图完成之后,ctrl+v就可以取到图片,这是怎么做的?图片插入实现的过程(我解决的过程):有文字有图片开始我实在不知道怎么处理,但是在我询问了qq群的网友之后,有人给我提了个注意,一张图片一个链接,就这么一句话,我就想到了怎么处理我的这个问题:在点击图片上传的按钮,当选择了图片,点击了确定之后,就会有一个change事件,这个事件触发了就马上执行一次ajax事件:把这个图片发送到服务端,然后服务端返回一个链接地址(服务器的上该图片的地址),img标签的src有一个特点,只要有了有效地址,图片会立马加载,因此,这个问题就基本有了解决方法,然后就是实现了了。//上传文件至path目录 publicvoidupload(Stringpath){ System.out.println("\n\n\nupload:测试的路径是:"+path); Filedirectory=newFile(path); if(!directory.exists()){ //判断是否存在upload文件夹 directory.mkdirs(); } //文件名过长,就重命名 if(fileFileName.length()>64){ String[]arr=fileFileName.split("\\."); fileFileName=this.getRandom(32)+"."+arr[arr.length-1]; } FiledistFile=null; //目标文件 FileInputStreamfilein=null; FileOutputStreamfileout=null; try{ distFile=newFile(directory,fileFileName); //判断文件是否存在 if(!distFile.exists()){ //如果不存在,就生成一个新文件 String[]arr=fileFileName.split("\\."); fileFileName=this.getRandom(32)+"."+arr[arr.length-1]; distFile=newFile(directory,fileFileName); distFile.createNewFile(); filein=newFileInputStream(file); fileout=newFileOutputStream(distFile); byte[]b=newbyte[1024]; intlen=0; while((len=filein.read(b,0,b.length))!=-1){ fileout.write(b,0,len); } System.out.println("文件上传成功!"); status="upload-success"; }else{ System.out.println("文件已存在!"); status="upload-exist"; } }catch(Exceptione){ status="upload-error"; e.printStackTrace(); } finally{ try{ if(filein!=null) filein.close(); if(fileout!=null) fileout.close(); }catch(IOExceptione){ e.printStackTrace(); } } }从请求中获取File,然后获取FileInputStream,从FileInputStream中获得二进制数据,再把二进制数据写入FileOutputStream,然后文件就保存到了服务端了,不过有一个问题要解决,就是文件要保存到哪个地方浏览器才可以正确访问呢,//获取根路径 publicStringgetRootPath(){ request=this.getRequest(); returnrequest.getScheme()+"://"+request.getServerName()+":" +request.getServerPort()+request.getContextPath()+"/"; } //获取上传的根路径 publicStringgetPath(){ returnServletActionContext.getRequest().getSession().getServletContext().getRealPath("/"); }getRootPath方法可以获取网络地址的根目录(带有ip的地址),这个地址可以被浏览器访问的地址(通过request获得协议、端口、ip以及upload文件夹和文件名,拼出一个地址)。getPath方法获取的是服务器的物理地址(比如:D:/web这样的地址,d:web/upload/1.png),这个地址是项目保存在服务器中的物理路径,它保证了上传的文件是否可以被用户访问到,这个两个方法可以很好的实现文件路径的获取。如何实现从剪贴板获取图片呢?这是我的当时解决问题的记录:编辑器支持剪切板复制图片,这是编辑器的功能,但是我需要找到内部的上传路径,修改成我的服务器地址。所幸,在几千行代码中还是让我找到了。但是我不高兴,因为又报错了,是编码的问题。我使用剪贴板粘贴的图片是一个庞大的字符串,开头是data:image/png;base64,有上万个字符,我把代码截图给网友,得知是base64编码的东西,于是我又简单的学习了一下base64与图片之间的转码,转码之后,还要操作输入流输出流才可以将图片保存到起来,然后将链接地址发送给浏览器,中间也是不太容易,不过总算是解决了5.2.4文章删除模块当显示文件列表时,可以删除一个文件:图5-11删除文章在ArticleAction中删除的实现://删除一篇文章 publicvoiddelete(){ articleService.delete(article); Jsonjson=newJson("已删除!"); writeJson(json); }在ArticleService中删除的实现细节://删除一篇文章 publicvoiddelete(Articlearticle){ articleDao.delete(article); }直接使用hibernate的delete方法就可以删除文章了!5.2.5文章修改模块图5-12修改文章当点击了修改之后,你的文章数据会被加载到一个新的form表单,当你修改了文章之后,数据会被发送到ArticleAction中进行保存,执行了action中的save方法。//文章的保存 publicvoidsave(){ article.setCaption(caption); Jsonjson=newJson(articleService.save(article)); writeJson(json); }然后执行Service中的save方法://保存一篇文章 publicStringsave(Articlearticle){ article.setUser((User)getSession("u")); article.setTime(newDate(System.currentTimeMillis())); if(articleDao.saveOrUpdate(article)!=null) return"success"; return"error"; }当点击文章标题的时候,会直接显示这篇文章的:图5-13后台显示文章5.2.6图片管理模块当上传图片时是这样子的,这个进度条很简洁,挺漂亮的。图5-14上传图片图片上传时效果还是挺好看,上传图片的操作:先获取文件流,然后获取FileInputStream,从FileInputStream中获得二进制数据,再把二进制数据写入FileOutputStream,使用getRootPath()和getPath()这个方法获取相关的路径,然后上传就很容易解决了!不过上传图片会遇到一个问题:你的图片只能你可以看到,别人是看不到的,我在做项目时是这样却解决问题的:文件的路径实在是难以捉摸,老是出错,一切ok的时候,我才想起来,如果有不同的用户,那么该怎么处理,然后我又重新设置路径,新的路径是这样的:每一个用户都会在跟路径的image目录下有一个使用用户名命名的文件夹,保存着自己的图片,文章内的图片保存在公共upload文件夹下,这样登录了之后查看自己的图片就是使用session中的username去访问自己的文件夹,实现起来还是比较简单的,还是重新修改了昨天的代码,对于文件的命名是这样的:长度是32位,要循环32次,每一次产生一个范围在0-1A-Za-z的随机字母,产生相同的字符串的概率是62的32次方分之一,这个重复的几率可以忽略,但还是会判断一次,如果再产生已存在的字符串就不会再判断,因为几率太小,所以直接就可以跳过了。当鼠标在图片上时,右击鼠标,会有删除选项:图5-15删除图片这里是用了jquery,完成了右键菜单的制作,关键代码://右键菜单 $('#container').WinContextMenu({ cancel:'.cancel', items:[ { id:'delete', text:'删除', icon:'util/Contextmenu/skins/default/contextmenu/icons/Calendar.png', action:function(e){ vararray=$(e.srcElement)[0].src.split("/"); varfileFileName=array[array.length-1]; $.ajax({type:"post",url:"file!delete",dataType:"json", data:"fileFileName="+fileFileName, success:function(data,msg){ //删除操作 if(data=="success"){ $(e.srcElement).parent().remove(); alert("删除成功!"); } else alert("删除失败!") }}); }//按照项添加 }] });<divid="container"></div>这个代码相当于容易一个容器,菜单会在容器里显示。删除功能的关键代码:publicvoiddelete(){ Stringpath=this.getPath()+"image/" +((User)getSession("u")).getUsername()+"/"+fileFileName; System.out.println("\n\n\n\n"+path); file=newFile(path); if(file.exists()&&file.delete()) writeJson("success"); else writeJson("error"); }首先获取图片在服务器的绝对路径,然后判断图片是否存在,存在的话就删除!不存在的话,就向浏览器发送一个“error”的提示。5.2.7好友模块在博客的首页里,当点击用户名时,显示用户的个人信息:图5-16个人信息在这个页面上你可以给博主留言,也可以在登录以后添加,博主为好友。关键代码如下://添加一个好友 @Override publicStringadd(Userother){ Friendfriend=newFriend(); friend.setOther(userDao.load(other.getId())); friend.setMe((User)this.getSession("u")); if(userDao.saveOrUpdate(friend)!=null) return"success"; return"error"; }创建一个Friend对象,然后设置数据,然后保存。图5-17好友列表如果你遇到比较好的文章,你可以用户名,添加该用户为好友,这样你就可以和该用户交流了,相互学习,相互提高。添加、删除好友、显示好友列表的代码实现:在UserAction中实现://获取好友列表 publicStringlist(){ friends=userService.getFriends(); return"list"; } //删除一个好友 publicvoiddelete(){ writeJson(userService.delete(user)); } //添加一个好朋友 publicvoidadd(){ writeJson(userService.add(user)); }在UserService中的细节实现://显示好友列表 @Override publicSet<User>getFriends(){ Useru=(User)getSession("u"); Set<User>friends=newHashSet<User>(); //获取所有的Friend数据 List<Object>objs=userDao.queryFind("fromFriendfwheref.me.id=" +u.getId()+"orderbyf.iddesc"); //便利获取每一个User对象 for(inti=0;i<objs.size();i++){ Friendf=(Friend)objs.get(i); friends.add(f.getOther()); } returnfriends; }//删除一个好友 publicStringdelete(Useruser){ List<Object>list=userDao.queryFind("fromFriendfwheref.other.id=" +user.getId()); for(Objectobj:list){ Friendfriend=(Friend)obj; friend.setOther(null); friend.setMe(null); userDao.saveOrUpdate(friend); userDao.delete(friend); } return"success"; }通过hibernate的hql语句执行好友的增删显示功能。在删除好友的时候要注意外键关联的问题:for(Objectobj:list){ Friendfriend=(Friend)obj; //对于级联的外键,要先设置成null,才可以删除该条信息 friend.setOther(null); friend.setMe(null); userDao.saveOrUpdate(friend); userDao.delete(friend); }你是不能不能直接删除一个friend的,你必须先把friend中的两个外键设置成null,也就是必须先解除关系,才可以删除一天好友记录。如果没有这样的操作就会出现下面这样的错误:不能删除或更新有外键关联的列。先设置外键成空值就可以轻松解决这样的问题了。5.2.8文件处理的核心代码//发送来自浏览器ajax的请求,发送json数据 privatevoidwriteJson(Objectobject){ try{ response=this.getResponse(); PrintWriterwriter=response.getWriter(); Stringjson=JSON.toJSONStringWithDateFormat(object,"yyyy-MM-ddHH:mm:ss"); response.setContentType("text/json;charset=utf-8"); System.out.println("\nBaseAction.writeJson():"); System.out.println(json); writer.write(json); writer.flush(); writer.close(); }catch(IOExceptione){ e.printStackTrace(); } }将数据发送到浏览器端很多时候都是使用writeJson(Objectobject)方法,要使用这个方法需要导入一个jar包,使用了这个方法可以将Object对象转化成json格式的字符串(比如:“key1=value1&key2&value2”),然后把这个json格式的字符串使用writer对象发送到浏览器,这样的数据在浏览器上很容易就读取成json对象,可以直接使用,非常方便。 //上传文件至path目录 publicvoidupload(Stringpath){ System.out.println("\n\n\nupload:测试的路径是:"+path); Filedirectory=newFile(path); if(!directory.exists()){ //判断是否存在upload文件夹 directory.mkdirs(); } //文件名过长,就重命名 if(fileFileName.length()>64){ String[]arr=fileFileName.split("\\."); fileFileName=this.getRandom(32)+"."+arr[arr.length-1]; } FiledistFile=null; //目标文件 FileInputStreamfilein=null; FileOutputStreamfileout=null; try{ distFile=newFile(directory,fileFileName); //判断文件是否存在 if(!distFile.exists()){ //如果不存在,就生成一个新文件 String[]arr=fileFileName.split("\\.");//分割字符串,为了获取后缀名 fileFileName=this.getRandom(32)+"."+arr[arr.length-1];//文件名等于随机数加上后缀名 distFile=newFile(directory,fileFileName); distFile.createNewFile(); filein=newFileInputStream(file); fileout=newFileOutputStream(distFile); byte[]b=newbyte[1024]; intlen=0; while((len=filein.read(b,0,b.length))!=-1){ fileout.write(b,0,len); } System.out.println("文件上传成功!"); status="upload-success"; }else{ System.out.println("文件已存在!"); status="upload-exist"; } }catch(Exceptione){ status="upload-error"; e.printStackTrace(); } finally{ try{ if(filein!=null) filein.close(); if(fileout!=null) fileout.close(); }catch(IOExceptione){ e.printStackTrace(); } } }服务器上的文件操作多半都是依赖着upload(Stringpath)方法去解决的:给upload方法一个路径,就可以将文件保存到指定路径下。在BaseDao中封装了基本的查询、修改、增加、删除的功能,我们自己写的Dao方法只要继承了这个BaseDao类就拥有了一些基本的查询、修改、增加、删除的功能,然后复杂的方法需要在service中实现,其底层还是利用了BaseDao中查询、修改、增加、删除的功能。//根据长度获取一个随机的数字字符串,可以用来生成随机文件名。publicStringgetRandom(intlength){ char[]charArray=newchar[length]; for(inti=0;i<length;i++){ Randomr=newRandom(); intn=r.nextInt(123); while(n<48||(n>57&&n<65)||(n>90&&n<97)||n>122){//(!((n>=48&&n<=57)||(n>=65&&n<=90)&&(n>=97&&n<=122))){ n=r.nextInt(123); } charArray[i]=(char)n; } returnString.valueOf(charArray); }每次文件操作的时候基本都有重新命名的可能,这个方法使用了for循环,一次生成一个随机数,在n次执行之后就可以获取n个随机数,n的值越大,文件名重复的概率越小,我在项目中使用的是32,那么重复一次的概率是52的32次方分之一,这个概率小到可以忽略不计,不过我在重命名时还是进行了第二次的判断文件是否存在,然后程序就直接走起!5.3系统测试5.3.1配置测试环境(1)安装jdk1.7和Eclipse,Tomcat7.0,mysql;(2)启动eclipse,运行项目,将项目配置到tomcat7.0的工作目录上;(3)启动tomcat,在登录:8080/blog后可进入项目第六章总结与展望6.1总结历时将近一个月的时间终于将论文和项目写完,由于时间很仓促,一些技术和设备有限,该系统存在一些不足之处,有很多功能还是需要改善的,但总算完成了基于web的博客的全部

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论