您的浏览器Javascript被禁用,需开启后体验完整功能, 请单击此处查询如何开启
网页 资讯 视频 图片 知道 贴吧 采购 地图 文库 |

第9章 Java web常用实用组件_理学_高等教育_教育专区

12406人阅读|210次下载

标签:
  • 组件|
  • web|

第9章 Java web常用实用组件_理学_高等教育_教育专区。第9章 Java web常用实用组件 在JSP中使用在线编辑器 ? 一般在进行信息在线编辑时,需要插入图片,进行文字排版等, 使显示的时候以固定排版格式显示,因此,需要在录入时,能够 允许进行信


第9章 Java web常用实用组件 在JSP中使用在线编辑器 ? 一般在进行信息在线编辑时,需要插入图片,进行文字排版等, 使显示的时候以固定排版格式显示,因此,需要在录入时,能够 允许进行信息的在线样式编辑,如图9-1所示。 ? ? ? ? ? ? 在JSP中,可采用Ckeditor在线编辑器实现以上描述功能。 实现过程: 1.下载CKEditor。在CKEditor官方网站网址 http://ckeditor.com/download下载CKEditor for Java。 本例下载当前最新版本CKEditor for Java 3.6.2.war。 2.将ckeditor文件夹和jar复制到指定位置。下载后解压,将 CKEditor的ckeditor-java-core-3.5.3.jar复制到采用站点的WEBINF/lib/目录下,ckeditor文件夹复制到站点文件夹下。 3.编写调用表单文件。编写含有在线编辑器的表单,即在原先表单制 作的基础上,增加相应CKEditor的调用语句即可。程序9-1为实现了 含有在线编辑器的一个表单页面。 CKEditor 的配置与使用 ? Web在线编辑器简介 ? ? ? ? ? ? ? ? ? ? ? 1.CKEditor 免费、开源、用户量庞大的在线编辑器,有良好的社区支持。 CKEditor创建于2003年,起初为FCKeditor,2009年更名为CKEditor, 是目前市场使用非常广泛的一个在线编辑器。官方网站: http://ckeditor.com。 2.TinyMCE 这是免费、开源、轻量的在线编辑器,基于JavaScript,高度可定制、跨 平台。 3.YUI Editor 这是Yahoo! YUI 的一部分,能输出纯净的Xhtml代码。 4.eWebEditor 这是国产商业化的编辑器,不免费,功能丰富。 5.Free Rich Text Editor 这是非常容易部署的在线编辑器,输出XHTML代码,功能丰富。 ? ? ? ? ? ? CKEditor常用标签及属性 1. <ckeditor:replace>标签 该标签用于设置在线编辑器替换表单元素,其常用属性有: replace:需要用编辑器替换的表单元素。 basePath:在线编辑器CKEditor的位置。 config:设置编辑器对象的属性,如设置宽度,高度。 ? ? ? ? ? ? 2. <ckeditor:editor>标签 该标签主要用来在表单页面创建在线编辑器,其常用属性有: basePath:在线编辑器CKEditor的位置。 editor:编辑器表单元素的名字。 value:表单元素的默认值。 textareaAttributes:编辑器的属性,其用java.util.Map设置 键值对。 扩展1——修改信息时采用在线编辑器 ? ? ? ? ? 在线信息修改时,需要将原有信息读取出来,显示在在线编辑器, 再做调整,因此需要使用在线编辑器时使用默认值。 采用<ckeditor:replace>标签时,只要将原表单元素设置默认 值,则采用编辑器后,仍然保持默认值,如对程序9-1,其原表 单元素为: <textarea cols="80" id="ArtContent" name="ArtContent" rows="3"></textarea> 设置默认值: <textarea cols="80" id="ArtContent" name="ArtContent" rows="3">编辑器默认值 </textarea> ? 采用<ckeditor:replace>标签替换后,运行效果如图9-3所示。 扩展2——简洁的在线编辑器 ? ? 收集信息时,表单文本框个别情况不需要做太多编辑,只需简单 的编辑,因此,编辑器不需太复杂,所以采用简化的编辑器, CKEditor提供了的简化样式。 对于前边9-1程序,用简化样式重新替换,效果如图9-4所示。 代码见程序9-2所示。 注册时自动发送欢迎邮件 ? 在网站注册成功后,会发送邮件到注册者邮箱,提示注册成功, 如图9-5所示,自动发送到编者注册信箱ljq816-2@yahoo.cn。 ? ? ? ? ? ? ? 实现过程: 1.下载并加载JavaMail API 收发邮件需要下载JavaMail API并加载到服务器后,才可以正 常执行。JavaMail API目前的版本为JavaMail API 1.4.3。可 以从如下地址下载: http://java.sun.com/products/javamail/downloads/ind ex.html 下载后,解压并找到mail.jar文件,将其复制到项目的WEBINF/lib/文件夹下,如直接加载到Web服务器,则复制到 Tomcat安装目录下的lib文件夹中。 2.编写邮件身份验证类 邮件身份验证类代码见程序9-3。 ? ? ? ? ? ? 3.编写发送邮件类 发送邮件类代码见程序9-4。 4.编写注册表单 注册表单代码见程序9-5,效果如图9-6。 5.编写注册Servlet,包括发邮件功能。 注册程序代码见程序9-6。 新知识点——JavaMail ? JavaMail API 是一个用于阅读、编写和发送电子消息的可选包 (标准扩展),可以用来建立标准的邮件客户端程序,它支持各种 网络邮件协议。 ? ? ? ? 1.SMTP 2.POP 3.IMAP 4.MIME 上传文件到服务器 ? ? 使用commons FileUpload组件上传文件 实现一个简单的期末论文提交网页,要求论文提交页面有学 号、姓名、论文题目的输入框,以及一个上传文件的表单域,当 用户填写内容并选择文件进行提交之后,将用户所上传的文件重 命名成“学号-姓名-论文题目.后缀名”的格式存储到服务器D盘 的uploadPaper文件夹下,并在响应页面向用户提示他所上传的 文件名,以及上传后的新文件名。 ? ? ? ? 实现: 1. 下载文件上传组件。到apache官网 http://commons.apache.org/fileupload/和 http://commons. apache.org/io/下载commons FileUpload 组件以及commons io组件,本例使用这两个组件目前的最新版本: commons-fileupload-1.2.2.jar和commons-io-2.3.jar。 2. 将上述jar包添加到项目的WebContent/WEB-INF/lib文件夹 中。 3. 创建论文提交页面。在WebContent\ chapter9文件夹中创建 一个名为exam9_3_uploadPaper. jsp的JSP页面,该页面为文件 上传表单页面,具体代码如程序9-7所示,其中链接了一个外部css 文件来简单调整页面布局,具体内容请参见随书光盘。 ? ? 4. 编写servlet,完成文件上传功能。在源文件夹下的chapter9 包中创建一个servlet类PaperUpload_do,该类中的文件上传 处理思路为:首先获取stuNum、stuName、title(分别表示 学号、姓名、标题)这三个普通表单域的值,然后在将用户上传 的文件存储到服务器磁盘上时使用上述三个表单域的值组合成文 件的名字。具体代码如程序9-8所示。 5. 在web.xml中配置上述servlet。相关代码如程序9-9所示。 ? 6. 测试。将项目部署到tomcat服务器上,然后访问文件上传页 面,在该页填写相关信息并单击“Browse”按钮选择要上传的文 件,如图9-9所示。 ? ? 使用servlet 3.0接口上传文件 任务:要求不使用任何外部组件,使用servlet3.0提供的文件上 传接口完成与9.3.1.1节相同的论文提交功能。 ? ? ? ? 实现: 1. 创建论文提交页面。在WebContent\ chapter9文件夹中创建一 个名为exam9_3_uploadPaper2. jsp的JSP页面,该页面与 exam9_3_uploadPaper. jsp内容基本一致,区别仅是 exam9_3_uploadPaper2. jsp中form的属性 action="/JavaWebExample/servlet/doPaperUploadwithS3"。 此处不再给出详细代码,具体请参考随书光盘。 2. 编写servlet,完成文件上传功能。在源文件夹下的chapter9包中 创建一个servlet类PaperUploadwithS3_do,该类中的文件上传处 理思路与上一节一致:首先获取stuNum、stuName、title (分别表示学号、姓名、标题)这三个普通表单域的值,然后在将用 户上传的文件存储到服务器磁盘上时使用上述三个表单域的值组合成 文件的名字。具体代码如程序9-10所示所示。 ? ? 3. 在web.xml中配置上述servlet。相关代码如程序9-11所示。 4. 测试。将项目部署到tomcat服务器上,然后访问文件上传页 面,在该页填写相关信息并单击“Browse”按钮选择要上传的文 件,如图9-12所示。 新知识点——上传组件及方法 ? 目前,如邮箱附件、个性头像等等,绝大多数的Web应用中都涉 及到了文件的上传功能。 ? ? commons FileUpload组件 FileUpload是Apache commons项目的一个子项目,它实现了 在JSP/Servlet中高效的文件上传功能;而FileUpload还需要 commons的另一个子项目IO进行支持,commons IO组件提 供了很多I/O工具。所以,要运用FileUpload组件实现文件上传 功能需要下载这两个组件。 ? ? ? 1. FileItem接口 2. DiskFileItemFactory类 3. ServletFileUpload类 ? ? Servlet 3.0提供的上传文件接口 Servlet 3.0 作为 Java EE 6 规范体系中一员,随着 Java EE 6 规范一起发布。在Servlet 3.0版本之前,文件上传基本都是依 赖第三方组件来实现的,而今,Servlet 3.0提供了文件上传功 能,其使用也较为简单,所以随着Java EE 6的普及,Servlet 3.0的文件上传功能应该会取代大部分文件上传组件。 扩展——下载 ? 任务:实现文件下载功能。当用户点击下载页面的文件下载按钮 或链接时,能弹出文件下载对话框,用户能够将服务器上的相关 文件下载到客户机上。 ? ? ? 实现: 1. 创建文件下载页面exam9_3_downloadFile.jsp,该页面提 供“2011010201-张三-浅谈Spring的IoC机制.docx”这个文 件的下载按钮。当点击该按钮提交表单时,下载任务交由 “/JavaWebExample/ servlet/downloadFile”这个Servlet 来处理。具体代码如程序9-12所示。 2. 在源文件夹的chapter9包内创建一个Servlet类 DownLoad_do,由于下载页面的表单提交方式为“post”,所 以实现该Servlet的doPost方法来处理文件下载任务,具体代码 如程序9-13所示。 ? ? 3. 在web.xml中配置上述servlet。相关代码如程序9-14所示。 4. 测试。将项目部署到tomcat服务器上,然后访问文件下载页 面,如图9-16所示。 上传图片自动生成缩略图 ? 任务:完成一个上传图片并自动生成缩略图的功能。当用户在图 片上传页面上传JPG/JPEG格式的图片时,能够正确将用户上传 的图片以“当前时间的毫秒数_100以内随机数”重命名后存储 到服务器“D:\uploadImg”目录下,并生成该图片的缩略图存 储到“D:\uploadImg\small” 目录下,然后在响应页面打印出 用户所上传的图片的名称、大小、缩略图以及原始图。 ? ? ? ? 实现步骤: 1. 实现生成缩略图的工具类。具体代码如程序9-15所示。 2. 定义异常类JpegToolException,具体代码如程序9-16所示。 3. 创建图片上传页面exam9_4_uploadImage.jsp,具体代码 如程序9-17所示。 ? ? ? 4. 编写Servlet类ImageUpload_do,该类的doPost方法用来 处理图片上传、生成缩略图以及向用户返回响应的工作。具体代 码如程序9-18所示。 5. 在web.xml中配置上述Servlet。 6. 测试。将项目部署到tomcat服务器上,然后访问图片上传页 面,如图9-18所示。 新知识点——缩略图原理 ? ? ? 生成缩略图的方式有许多种,可以按如下思路使用Java 提供的 强大的图形处理类来生成一个图片的缩略图: 1. 使用javax.imageio.ImageIO类的静态方法 BufferedImage read(File input)从磁盘文件中将图片读取到 内存中,存储在一个java.awt.image. BufferedImage对象中; 2. 构建一个仿射变换对象java.awt.geom.AffineTransform。 然后确定目标图片与原图片的宽度比例以及高度比例,依据这两 维的缩放比例调用AffineTransform的setToScale(float,float) 方法将此变换设置为缩放变换。 ? ? 3. 根据上面的仿射变换对象构造出一个 java.awt.image.AffineTransformOp对象,该对象能够使用 仿射转换来执行从源图像到目标图像的线性映射。具体使用的方 法是filter(BufferedImage src, BufferedImage dst),此方 法将转换源 BufferedImage 并将结果存储在目标 BufferedImage 中。 4. 使用ImageIO类的write方法将转换好的目标 BufferedImage以一定的图片类型写到磁盘文件上。 扩展——图片增加水印 ? 扩展——图片增加水印任务:给用户上传的图片添加水印。当用 户在图片上传页面填写用户名并从客户端选择文件提交上传请求 后,服务器能够将用户上传的图片存储到服务器的特定路径下, 并能够将用户名以水印的形式标记到图片上,存储该水印图片并 打印到响应页面。 ? ? ? ? ? ? 实现步骤: 1. 编写为图片添加水印标记的工具类。代码如程序9-20所示。 2. 创建图片上传页面exam9_4_uploadImage2.jsp,具体代 码如程序9-21所示。 3. 编写Servlet类ImageUploadAndMark_do,该类的doPost 方法用来处理图片上传、为图片添加水印标记以及向用户返回响 应的工作。具体代码如程序9-22所示。 4. 在web.xml中配置上述Servlet。 5. 测试。将项目部署到tomcat服务器上,然后访问图片上传页 面,如图9-21所示。 小结 ? 本章介绍了几种在Java Web开发中常用的组件,包括使用 CKEditor向JSP页面中添加在线编辑器、使用JavaMail发送邮 件以及使用commons FileUpload实现文件上传功能等,也介绍 了使用Servlet 3.0提供的接口来完成文件上传工作的方法,同 时向读者展示了文件下载的实现以及使用Java的图形工具实现缩 略图的生成、向图片添加水印等方法。

您的评论

发布评论

用户评价

  • 不错,作者还有其他关于web的文档吗? 2018-06-20 22:58:17
  • 很实用,作者还有其他关于web的文档吗? 2018-06-20 06:48:52
  • 这是我最近看到的关于组件最好的文章 2018-06-20 02:11:14
+申请认证

文档贡献者

王坤

技术总监,高级网络工程师

129 463859 4.1
文档数 浏览总量 总评分

喜欢此文档的还喜欢