Javaweb常用实用组.ppt

第9章Javaweb常用实用组件 在JSP中使用在线编辑器 一般在进行信息在线编辑时 需要插入图片 进行文字排版等 使显示的时候以固定排版格式显示 因此 需要在录入时 能够允许进行信息的在线样式编辑 如图9 1所示 在JSP中 可采用Ckeditor在线编辑器实现以上描述功能 实现过程 1 下载CKEditor 在CKEditor官方网站网址 CKEditor的配置与使用 Web在线编辑器简介 1 CKEditor免费 开源 用户量庞大的在线编辑器 有良好的社区支持 CKEditor创建于2003年 起初为FCKeditor 2009年更名为CKEditor 是目前市场使用非常广泛的一个在线编辑器 官方网站 2 TinyMCE这是免费 开源 轻量的在线编辑器 基于JavaScript 高度可定制 跨平台 3 YUIEditor这是Yahoo YUI的一部分 能输出纯净的Xhtml代码 4 eWebEditor这是国产商业化的编辑器 不免费 功能丰富 5 FreeRichTextEditor这是非常容易部署的在线编辑器 输出XHTML代码 功能丰富 CKEditor常用标签及属性1 标签该标签用于设置在线编辑器替换表单元素 其常用属性有 replace 需要用编辑器替换的表单元素 basePath 在线编辑器CKEditor的位置 config 设置编辑器对象的属性 如设置宽度 高度 2 标签该标签主要用来在表单页面创建在线编辑器 其常用属性有 basePath 在线编辑器CKEditor的位置 editor 编辑器表单元素的名字 value 表单元素的默认值 textareaAttributes 编辑器的属性 其用java util Map设置键值对 扩展1 修改信息时采用在线编辑器 在线信息修改时 需要将原有信息读取出来 显示在在线编辑器 再做调整 因此需要使用在线编辑器时使用默认值 采用标签时 只要将原表单元素设置默认值 则采用编辑器后 仍然保持默认值 如对程序9 1 其原表单元素为 设置默认值 编辑器默认值 采用标签替换后 运行效果如图9 3所示 扩展2 简洁的在线编辑器 收集信息时 表单文本框个别情况不需要做太多编辑 只需简单的编辑 因此 编辑器不需太复杂 所以采用简化的编辑器 CKEditor提供了的简化样式 对于前边9 1程序 用简化样式重新替换 效果如图9 4所示 代码见程序9 2所示 注册时自动发送欢迎邮件 在网站注册成功后 会发送邮件到注册者邮箱 提示注册成功 如图9 5所示 自动发送到编者注册信箱ljq816 2 实现过程 1 下载并加载JavaMailAPI收发邮件需要下载JavaMailAPI并加载到服务器后 才可以正常执行 JavaMailAPI目前的版本为JavaMailAPI1 4 3 可以从如下地址下载 3 编写发送邮件类发送邮件类代码见程序9 4 4 编写注册表单注册表单代码见程序9 5 效果如图9 6 5 编写注册Servlet 包括发邮件功能 注册程序代码见程序9 6 新知识点 JavaMail JavaMailAPI是一个用于阅读 编写和发送电子消息的可选包 标准扩展 可以用来建立标准的邮件客户端程序 它支持各种网络邮件协议 1 SMTP2 POP3 IMAP4 MIME 上传文件到服务器 使用commonsFileUpload组件上传文件实现一个简单的期末论文提交网页 要求论文提交页面有学号 姓名 论文题目的输入框 以及一个上传文件的表单域 当用户填写内容并选择文件进行提交之后 将用户所上传的文件重命名成 学号 姓名 论文题目 后缀名 的格式存储到服务器D盘的uploadPaper文件夹下 并在响应页面向用户提示他所上传的文件名 以及上传后的新文件名 实现 1 下载文件上传组件 到apache官网http commons apache org fileupload 和http commons apache org io 下载commonsFileUpload组件以及commonsio组件 本例使用这两个组件目前的最新版本 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所示 使用servlet3 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应用中都涉及到了文件的上传功能 commonsFileUpload组件FileUpload是Apachecommons项目的一个子项目 它实现了在JSP Servlet中高效的文件上传功能 而FileUpload还需要commons的另一个子项目IO进行支持 commonsIO组件提供了很多I O工具 所以 要运用FileUpload组件实现文件上传功能需要下载这两个组件 1 FileItem接口2 DiskFileItemFactory类3 ServletFileUpload类 Servlet3 0提供的上传文件接口Servlet3 0作为JavaEE6规范体系中一员 随着JavaEE6规范一起发布 在Servlet3 0版本之前 文件上传基本都是依赖第三方组件来实现的 而今 Servlet3 0提供了文件上传功能 其使用也较为简单 所以随着JavaEE6的普及 Servlet3 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类的静态方法BufferedImageread Fileinput 从磁盘文件中将图片读取到内存中 存储在一个java awt image BufferedImage对象中 2 构建一个仿射变换对象java awt geom AffineTransform 然后确定目标图片与原图片的宽度比例以及高度比例 依据这两维的缩放比例调用AffineTransform的setToScale float float 方法将此变换设置为缩放变换 3 根据上面的仿射变换对象构造出一个java awt image AffineTransformOp对象 该对象能够使用仿射转换来执行从源图像到目标图像的线性映射 具体使用的方法是filter BufferedImagesrc BufferedImagedst 此方法将转换源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所示 小结 本章介绍了几种在JavaWeb开发中常用的组件 包括使用CKEditor向JSP页面中添加在线编辑器 使用JavaMail发送邮件以及使用commonsFileUpload实现文件上传功能等 也介绍了使用Servlet3 0提供的接口来完成文件上传工作的方法 同时向读者展示了文件下载的实现以及使用Java的图形工具实现缩略图的生成 向图片添加水印等方法