javaweb电子相册报告

1、javaweb 电子相册报告信息科学与工程学院实训报告学生姓名：王伟学号： 08L0705219专业班级：软件工程L082实训地点：信息楼 A303实训时间：2011.12.5 -2012.01.13指导教师：张晓明2012年1月实训成绩评定表学生姓名王伟学 号08L0705219 成绩专业班级软件 L082起止时间2011.12.05-2012.01.13实训地点信息楼 A303指导教师评语指导教师：年月日目录44452Java Web62.162.263153.1 JDBC153.2163.3Statement163.4SQL173.5JavaBeanDAO173

2、.6174182021一、实训目的本实训课程是在学生具备了Java 程序设计知识与面向对象技术的基础上，为进一步提高项目实践能力、开拓创新能力而设置的实践性环节课程。目的掌握使用JSP应用程序设计的基本技能，熟练使用MyEclipse 进行 Web应用程序的编写、调试，详细说明Java Web软件项目的整个开发过程，在项目开发过程中逐步熟悉知识点，掌握Java B/S 结构程序的运行原理和应用技能，最后完成一个完整的软件开发项目二、实训任务与要求掌握 Java 集成开发环境（ IDE） Eclipse的使用和调试方法，利用JSP+Servlet+JavaBean实现 Web应用开发，掌握分层体

3、系结构开发的技巧，完成教师指定的开发任务，本实训课程是围绕一个完整的Java 项目而展开的， 虽然每部分内容相对独立，但通过几次迭代开发后， 最后形成一个完整的软件系统。任务：通过实训课程结合实际案例独立完成web电子相册前台、后台的设计制作，并编码实现。三、实训过程与内容1、需求分析1.1总体需求该设计系统要具有实用性，功能完善，界面良好。设计该系统的流程如图1所示。流程设计：程序设计：功能需要开始程序初始化页面设计条件数据库设计代码操作代码设计图1程序设计流程图1.2功能需求本系统应该具有登录验证、修改密码、创建相册、浏览相片、上传相片、删除相册或相片、发表留言等功能，详见图2。电子相册系

4、统登修创查添删添退录改建看加除加出验密相图图相评登证码册片片册论录相片图2电子相册系统功能结构图1.3系统用例图1.3.1用户用例普通用户登录系统后， 可以点击缩略图的图片名称或者图片进而浏览大图， 并在此基础上为此大图添加评论，同样，用户也可以在查看大图的同时，查看其他用户对该图片的评论，如图 3 所示图 3.普通用户用例图1.3.2管理员用例管理员需要验证登录密码登录后台， 当然可以修改管理员密码， 然后，管理员可以创建、删除、修改图片分类，进而可以在每个分类目录下上传自己喜欢的图片，其中，管理员还有权删除游客对所上传照片的负面评论，如图 4 所示。图 4 管理员用例图2、Java Web

5、应用程序工程制作流程2.1 开发环境搭建在 MyEclipse 中配置好 Tomcat 服务器，配置好 MySQL数据库在 MyEclipse 中利用 jdbc 驱动访问 MySQL数据库，利用 MyEclipse 部署 Web应用程序，在 MySQL创建用户表。 MySQL的数据库编码设置为 UTF-8，这样有利于 Web项目开发时，中文编码的一致性。 MyEclipse 中 Tomcat服务器的设置时， 要将 JVM设置为本机的 JDK安装路径，而非 JRE的路径，使用 navicate lite 创建用户表。2.2系统设计该项目页面设计上，采用了“障眼法” ，在用户点击导航栏上的相应链接

6、时，页面会跳转到各个相应模块，但是用户感觉只是其中一部分变化而已，实则不然，在页面布局设计上，应用jsp 的 include 功能，预先做出页面头，导航，以及尾部的jsp 文件，并 include 进所有的 jsp 文件，在用户点击导航条时，其实各个页面的头，导航，尾部也被该页面内include 的头，导航，尾部所替代，只是在用户感官上没有差异而已。2.2.1登录验证登录页面是电子相册的首页，这是对浏览该电子相册的用户的筛选一个步骤，用户只有提供正确的密码才能进入相册主页进行其他操作。流程描述在 URL栏里输入 http ：/localhost/ephoto/login.html便可进入 “登

7、录页面”，如果在密码框内输入密码，系统会把其与之前给密码赋的值进行比对，相匹配则登录成功，跳转至相册主页；否则返回登录页面。流程、代码及运行结果详见图5、图 6、图 7所示。开始登录登录页面输入密码NO输入正确YES进入相册主页登录结束图 5登录验证图图 6验证登录用户名密码代码图 7电子相册登录页面2.2.2相册主页相册主页是用户展示相片的页面，对该系统的相册和相片一览无余。同时它也是电子相册的“导航”，可以链接到上传照片、创建相册、修改密码、发表留言、返回主页、退出登录等功能。在“登录页面”输入正确的密码后方可进入“相册主页”，如图 8所示。用户可直接或用打开相册的方式浏览主页上的照片和相

8、册里的照片，如图 9所示。点击主页左方的各种链接可以进入相应的操作，进入其他功能界面。图8 管理员进入相册主页图 9用户（游客）进入相册主页2.2.3修改密码用户可以根据自己的需要来修改自己的登录密码。通过“相册主页”左侧的链接点击“修改密码”进入到“修改密码页面” ，根据提示输入修改后的密码，选择提交，则显示“密码修改成功！ ”。修改密码完成后，可选择界面上方的“返回主页”和“退出登录”执行相关的操作。操作代码及运行结果如图10、图 11所示。图 10 管理员修改密码代码图 11 修改密码页面2.2.4 创建相册用户可以根据自己的需要来创建新的相册，把照片分类。通过“相册主页”左侧的链接点击

9、“创建相册”进入到“创建目录页面”，根据提示输入新创建的相册名称，选择创建，则新建相册成功，转到新建的相册里。创建相册完成后，可选择界面上方的“返回主页”和“退出登录”执行相关的操作。操作代码及运行结果如图12、图 13所示。图12 添加分类代码图13添加分类页面2.2.5上传照片用户可以根据自己的需要上传照片。通过“相册主页”左侧的链接点击“上传照片”进入到“上传照片页面”，根据提示输入选择上传方式。如果从本地上传，选择“浏览”在本地打开一张照片，点击“上传”则上传照片成功，否则提示“上传文件出错” 。上传照片完成后，返回到相册主页或某相册。如果使用URL方式上传，输入网址选择“传送”则上传

10、照片成功，否则提示“文件出错”。创建相册完成后，可选择界面上方的“返回主页”和“退出登录”执行相关的操作。操作代码及运行结果如图14、图15所示。图 14 上传图片代码图 15 添加图片页面2.2.6删除相册、照片用户可以根据自己的需要删除相册或照片。每个相册和每张照片后面都有“删除”的字样，点击后会出现提示“是否删除”，选择确认则删除成功，返回相册主页；选择取消则无变化，返回相册主页。图片操作代码及运行界面如图16、图 17所示。图 16 删除图片代码图 17 图片操作页面2.2.7退出登录用户可以根据自己的需要退出登录。用户只要点击“退出登录” ，就返回到“登入页面” 。2.2.8数据库设

11、计本系统的数据库 MySQL是链接到留言板的功能，创建表、编写代码、链接数据库是 DAO类实现的。只要输入正确的口令、进入“相册主页”，就可通过“相册主页”左侧的链接点击“发表留言”进入到“我的留言板”，根据界面上的提示， 可选择“发表留言”、“浏览留言”、“返回主页”、“退出登录”中的任一项进行相应的操作。选择界面上方的“发表留言”后会出现用户、标题、内容提示框，填写内容后提交留言，成功则出现“浏览留言页面” ，否则则提示错误。选择“浏览留言”，直接转至“浏览留言页面” ，可浏览所有的留言，点击“下一页”则跳转至第二页的留言内容，同样还可选择“上一页” 、“首页”、“尾页”，执行相应的操作。

12、选择“返回主页”和“退出登录”也分别对应着相关的操作。数据库表如下表所示表 1类别表表2图片表表3 用户表表4 评论表3、实现过程3.1 JDBC 连接数据库创建一个以 JDBC连接数据库的程序，包含之前，首先要加载想要连接的数据库的驱动到7 个步骤：加载 JDBC驱动程序：在连接数据库JVM（Java 虚拟机） , 这通过java.lang.Class类的静态方法forName(String className)实现。例如：try/ 加载MySql 的驱动类Class.forName("com.mysql.jdbc.Driver");catch(ClassNotFound

13、Exceptione)System.out.println("找不到驱动程序类，加载驱动失败！ ");e.printStackTrace();成功加载后，会将Driver类的实例注册到DriverManager 类中。提供 JDBC连接的 URL连接 URL定义了连接数据库时的协议、子协议、数据源标识。书写形式：协议：子协议：数据源标识 。协议：在 JDBC中总是以 jdbc 开始 。子协议：是桥连接的驱动程序或是数据库管理系统名称。数据源标识：标记找到数据库来源的地址与连接端口。例如：（MySql 的连接 URL）jdbc:mysql:/localhost:3306/te

14、st?useUnicode=true&characterEncoding=gbk;useUnicode=true ：表示使用 Unicode 字符集。如果 characterEncoding设置为 gb2312 或 GBK，本参数必须设置为 true。characterEncoding=gbk ：字符编码方式。3.2创建数据库的连接要连接数据库， 需要向代表一个数据库的连接。使用 DriverManager 的java.sql.DriverManager getConnectin(String请求并获得 Connection 对象， 该对象就url,Stringusername,Str

15、ingpassword) 方法传入指定的欲连接的数据库的路径、数据库的用户名和密码来获得。例如：/ 连接 MySql 数据库，用户名和密码都是 rootStringurl= "jdbc:mysql:/localhost:3306/test"Stringusername="root"Stringpassword="root"tryConnectioncon=DriverManager.getConnection(url, username , password ) ;catch(SQLExceptionse)System.out.pri

16、ntln("数据库连接失败！ ");se.printStackTrace();3.3 创建一个 Statement要执行 SQL语句，必须获得 java.sql.Statement实例，Statement 实例分为以下 3 种类型：（ 1）、执行静态 SQL语句。通常通过 Statement 实例实现。（ 2）、执行动态 SQL语句。通常通过 PreparedStatement 实例实现。（ 3）、执行数据库存储过程。通常通过 CallableStatement 实例实现。具体的实现方式：Statementstmt=con.createStatement();Prepare

17、dStatementpstmt=con.prepareStatement(sql);CallableStatementcstmt=con.prepareCall("CALLdemoSp(?,?)")3.4执行 SQL语句Statement接口提供了三种执行SQL 语句的方法： executeQuery、 executeUpdate和execute（1）、ResultSetexecuteQuery(StringsqlString)：执行查询数据库的SQL语句 ，返回一个结果集（ ResultSet ）对象。（2）、intexecuteUpdate(StringsqlStrin

18、g)：用于执行 INSERT、UPDATE或 DELETE语句以及 SQL DDL语句，如： CREATE TABLE和 DROP TABLE等 。（3）、 execute(sqlString):用于执行返回多个结果集、多个更新计数或二者组合的语句。3.5JavaBean 与 DAO模式JavaBean 是数据的承载体， 负责把一组有逻辑的数据从一个层传到另一个层。DAO的出现是对持久层的变动的一个解决方案。对于不同的持久介质(RDBMS、 XML、ODBMS等) 、不同的提供厂商 (Oracle 、 Mysql 等 ) 提供的产品，进行持久化操作时，对于业务逻辑层应该是统一的，于是 DAO模

19、式就出现了。对于同一个业务操作，例如添加一个用户，请求到达业务层，只需调用 DAO层的 addUser() 即可。而到底是怎么添加的、以及添加到哪里，是业务层不用关心的，也是不要关心的。于是，持久层将利用业务层传递来的请求数据，即封装了要添加的用户信息JavaBean，添加到持久层： Oracle 就要取序列， Mysql 会自动增长， XML就要手动控制了。这些实现细节对业务逻辑层是一样的效果。但是 DAO模式中也会有一些数据承载体，不过它们承载的不是业务数据，而是持久化操作的相关对象，例如 DAO对象， DAO工厂，连接对象等。表面上看，这些也承载数据， 但它实际是包含了内在的逻辑和操作。

20、 例如连接对象的打开和关闭，事务的回滚和提交等。所以，严格意义上来说，它们不是纯粹的 JavaBean。纯粹的 JavaBean 是只包含属性和这些属性对应的 getter 和 setter 。3.6 文件上传这部分比较不容易实现， 需要非常的有耐心和毅力， 计算用户上传的原图和缩放后的小图，并把图片改成 jpeg 的编码。现在将关键代码附上：new_w = Math.round(old_w / tempdouble);new_h = Math.round(old_h / tempdouble);/ 计算新图长宽 BufferedImage tag = new BufferedImage(ne

21、w_w, new_h, BufferedImage.TYPE_INT_RGB);tag.getGraphics().drawImage(src, 0, 0, new_w, new_h, null); / 绘制缩小后的图FileOutputStream newimage = new FileOutputStream(saveurl+newfilename_min ); JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(newimage);encoder.encode(tag); /近 JPEG编码下面代码是将取得的文件重新以上传时间命名

22、，并用原图的扩展名加载取得的时间后面形成新文件的名称，同时在文件夹内生成缩略图，String filedName=item.getFieldName();String fileName=item.getName();File f=new File(fileName);String ext =fileName.substring(fileName.lastIndexOf("."); String contentType=item.getContentType(); boolean isInMemory=item.isInMemory();long sizeInBytes=it

23、em.getSize();PhotoDAO photoDAO=new PhotoDAO();Stringsaveurl=request.getSession().getServletContext().getRealPath("/")+"uploadimage" String newfilenamewithext=newphotoname + ext;4、关键问题与实现结果在 servlet中，一般跳转都发生在doGet, doPost等方法里面。redirect方式：response.sendRedirect("/a.jsp")，页

24、面的路径是相对路径。sendRedirect可以将页面跳转到任何页面，不一定局限于本web应用中跳转后浏览器地址栏变化。这种方式要传值出去的话，只能在url中带parameter或者放在session中，无法使用request.setAttribute来传递。Forward方式，RequestDispatcherdispatcher=request.getRequestDispatcher(“ a.jsp”);dispatcher .forward(request, response)，页面的路径是相对路径。forward方式只能跳转到本 web应用中的页面上。跳转后浏览器地址栏不会变化。使用

25、这种方式跳转，传值可以使用三种方法： url中带 parameter ， session ， request.setAttribute。本次项目的关键问题在于图片上传以及通过图片管理显示图片的缩略图，图片上传后会在对应文件夹内生成两张一上传时间为名称的图片，其中一张是后缀有_min 的，这就是缩略图，另外一张则是管理员上传的大图，通过点击缩略图或其名称打开，用户可以查看大图，并针对相应的图片添加评论，其次，在分类管理中，管理员可以对分类的名称和分类的说明进行修改删除等操作，特别需要注意的是，在用户点击删除分类时，程序会将该分类下所有图片一并删除，这也是该程序的缺点所在。该程序所实现的结果是管理

26、员通过管理员登录，成功登录系统后，添加分类、说明，并在该分类中成功添加、删除图片，并可进入相应的分类内管理图片，可对图片进行编辑，删除评论等操作。游客进入系统，可以查看自己喜欢的图片，并可点击查看大图，在大图中添加自己的评论，同时游客也可注册用户名，进而登录系统，创建自己的分类，上传自己的图片等完成管理员的所有操作。实现结果如图18、图 19 所示。图 18 实现用户浏览图片图 19 用户评论图片页面四、实训总结与心得体会通过这一个月的实训， 虽然倍感纠结， 但是却收获颇丰， 我不仅有了学习上的成果的喜悦，而且自己也日渐成熟，较之参加实训之前，有种说不出的成就感。当我正式准备接受 java w

27、eb 的实训课程时，让我倍感兴奋，虽然平时也学 java 编程，但是那些都是学的皮毛而已，没有真正应用到实际例子中，也很难发现自己的不足，这次实训，老师先教我们配置 JAVA的编程工具和运行环境， 然后教我们学 JSP，在此期间，我们自学了 JAVA，又学了 Tomcat 的使用及 MySql 和 HTML语言，当我们 JSP 入门后，教我们学会了 Javaweb的使用。老师的细心辅导下，我们有了很大的进步，知识得到了扩充，认识得到了加深，也使得我们的自学能力得到了很大的提高，在此，我向老师表示由衷地感谢。开始的学习让我感到任务的艰巨，遇到了平时学习未遇到过的困难，有时冥思苦想也无济于事，通过请教老师和其他同学，我顺利攻破一道道难关。特别是对于文件上传的代码，由于老师给的参考文件与自己所做的项目文件差别很大，所以在上传文件时，错误总是层出不穷，让我深受打击，好在在老师的帮助下，终于发现原来是图片的扩展名不匹配造成。这次学习让我对java we