Javaweb常用实用组件.ppt

《Javaweb常用实用组件.ppt》由会员分享，可在线阅读，更多相关《Javaweb常用实用组件.ppt（41页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第9章章 Java web常用实用组件常用实用组件在在JSP中使用在线编辑器中使用在线编辑器n一般在进行信息在线编辑时，需要插入图片，进行文字排版等，一般在进行信息在线编辑时，需要插入图片，进行文字排版等，使显示的时候以固定排版格式显示，因此，需要在录入时，能够使显示的时候以固定排版格式显示，因此，需要在录入时，能够允许进行信息的在线样式编辑，如图允许进行信息的在线样式编辑，如图9-1所示。所示。n在在JSP中，可采用中，可采用Ckeditor在线编辑器实现以上描述功能。在线编辑器实现以上描述功能。n实现过程：实现过程：n1下载下载CKEditor。在。在CKEditor官方网站网址官方网站

2、网址http:/ for Java。n本例下载当前最新版本。本例下载当前最新版本。n2.将将ckeditor文件夹和文件夹和jar复制到指定位置。下载后解压，将复制到指定位置。下载后解压，将CKEditor的复制到采用站点的的复制到采用站点的WEB-INF/lib/目录下，目录下，ckeditor文件文件夹复制到站点文件夹下。夹复制到站点文件夹下。n3.编写调用表单文件。编写含有在线编辑器的表单，即在原先表单制编写调用表单文件。编写含有在线编辑器的表单，即在原先表单制作的基础上，增加相应作的基础上，增加相应CKEditor的调用语句即可。程序的调用语句即可。程序9-1为实现了为实现了含有在线编

3、辑器的一个表单页面。含有在线编辑器的一个表单页面。CKEditor 的配置与使用nWeb在线编辑器简介在线编辑器简介n1CKEditor n免费、开源、用户量庞大的在线编辑器，有良好的社区支持。免费、开源、用户量庞大的在线编辑器，有良好的社区支持。nCKEditor创建于创建于2003年，起初为年，起初为FCKeditor，2009年更名为年更名为CKEditor，是目前市场使用非常广泛的一个在线编辑器。官方网站：。是目前市场使用非常广泛的一个在线编辑器。官方网站：。n2TinyMCE n这是免费、开源、轻量的在线编辑器，基于这是免费、开源、轻量的在线编辑器，基于JavaScript，高度可定

4、制、跨平，高度可定制、跨平台。台。n3YUI Editor n这是这是Yahoo!YUI 的一部分，能输出纯净的的一部分，能输出纯净的Xhtml代码。代码。n4eWebEditor n这是国产商业化的编辑器，不免费，功能丰富。这是国产商业化的编辑器，不免费，功能丰富。n5Free Rich Text Editor n这是非常容易部署的在线编辑器，输出这是非常容易部署的在线编辑器，输出XHTML代码，功能丰富。代码，功能丰富。nCKEditor常用标签及属性常用标签及属性n1.标签标签n该标签用于设置在线编辑器替换表单元素，其常用属性有：该标签用于设置在线编辑器替换表单元素，其常用属性有：nre

5、place：需要用编辑器替换的表单元素。：需要用编辑器替换的表单元素。nbasePath：在线编辑器：在线编辑器CKEditor的位置。的位置。nconfig：设置编辑器对象的属性，如设置宽度，高度。：设置编辑器对象的属性，如设置宽度，高度。n2.标签标签n该标签主要用来在表单页面创建在线编辑器，其常用属性有：该标签主要用来在表单页面创建在线编辑器，其常用属性有：nbasePath：在线编辑器：在线编辑器CKEditor的位置。的位置。neditor：编辑器表单元素的名字。：编辑器表单元素的名字。nvalue：表单元素的默认值。：表单元素的默认值。ntextareaAttributes：编辑器

6、的属性，其用设置键值对。：编辑器的属性，其用设置键值对。扩展扩展1修改信息时采用在线编辑器修改信息时采用在线编辑器n在线信息修改时，需要将原有信息读取出来，显示在在线编辑器，在线信息修改时，需要将原有信息读取出来，显示在在线编辑器，再做调整，因此需要使用在线编辑器时使用默认值。再做调整，因此需要使用在线编辑器时使用默认值。n采用采用标签时，只要将原表单元素设置默认标签时，只要将原表单元素设置默认值，则采用编辑器后，仍然保持默认值，如对程序值，则采用编辑器后，仍然保持默认值，如对程序9-1，其原表，其原表单元素为：单元素为：n n设置默认值：设置默认值：n编辑器默认值编辑器默认值 n采用采用标签

7、替换后，运行效果如图标签替换后，运行效果如图9-3所示。所示。扩展扩展2简洁的在线编辑器简洁的在线编辑器n收集信息时，表单文本框个别情况不需要做太多编辑，只需简单收集信息时，表单文本框个别情况不需要做太多编辑，只需简单的编辑，因此，编辑器不需太复杂，所以采用简化的编辑器，的编辑，因此，编辑器不需太复杂，所以采用简化的编辑器，CKEditor提供了的简化样式。提供了的简化样式。n对于前边对于前边9-1程序，用简化样式重新替换，效果如图程序，用简化样式重新替换，效果如图9-4所示。代所示。代码见程序码见程序9-2所示。所示。注册时自动发送欢迎邮件注册时自动发送欢迎邮件n在网站注册成功后，会发送邮件

8、到注册者邮箱，提示注册成功，在网站注册成功后，会发送邮件到注册者邮箱，提示注册成功，如图如图9-5所示，自动发送到编者注册信箱。所示，自动发送到编者注册信箱。n实现过程：实现过程：n1下载并加载下载并加载JavaMail API n收发邮件需要下载收发邮件需要下载JavaMail API并加载到服务器后，才可以正常并加载到服务器后，才可以正常执行。执行。JavaMail API目前的版本为。可以从如下地址下载：目前的版本为。可以从如下地址下载：n下载后，解压并找到下载后，解压并找到mail.jar文件，将其复制到项目的文件，将其复制到项目的WEB-INF/lib/文件夹下，如直接加载到文件夹下

9、，如直接加载到Web服务器，则复制到服务器，则复制到Tomcat安装目录下的安装目录下的lib文件夹中。文件夹中。n2编写邮件身份验证类编写邮件身份验证类n邮件身份验证类代码见程序邮件身份验证类代码见程序9-3。n3编写发送邮件类编写发送邮件类n发送邮件类代码见程序发送邮件类代码见程序9-4。n4编写注册表单编写注册表单n注册表单代码见程序注册表单代码见程序9-5，效果如图，效果如图9-6。n5编写注册编写注册Servlet，包括发邮件功能。，包括发邮件功能。n注册程序代码见程序注册程序代码见程序9-6。新知识点新知识点JavaMail nJavaMail API 是一个用于阅读、编写和发送电

10、子消息的可选包是一个用于阅读、编写和发送电子消息的可选包(标准扩展标准扩展)，可以用来建立标准的邮件客户端程序，它支持各种，可以用来建立标准的邮件客户端程序，它支持各种网络邮件协议。网络邮件协议。n1SMTP n2POP n3IMAP n4MIME 上传文件到服务器上传文件到服务器n使用使用commons FileUpload组件上传文件组件上传文件n 实现一个简单的期末论文提交网页，要求论文提交页面有学实现一个简单的期末论文提交网页，要求论文提交页面有学号、姓名、论文题目的输入框，以及一个上传文件的表单域，当号、姓名、论文题目的输入框，以及一个上传文件的表单域，当用户填写内容并选择文件进行提

11、交之后，将用户所上传的文件重用户填写内容并选择文件进行提交之后，将用户所上传的文件重命名成命名成“学号学号-姓名姓名-论文题目论文题目.后缀名后缀名”的格式存储到服务器的格式存储到服务器D盘盘的的uploadPaper文件夹下，并在响应页面向用户提示他所上传的文件夹下，并在响应页面向用户提示他所上传的文件名，以及上传后的新文件名。文件名，以及上传后的新文件名。n实现：实现：n1.下载文件上传组件。到下载文件上传组件。到apache官网和官网和http:/commons.apache.org/io/下载下载commons FileUpload组件以及组件以及commons io组件，本例使用这两

12、个组件目前的最新版本：和。组件，本例使用这两个组件目前的最新版本：和。n2.将上述将上述jar包添加到项目的包添加到项目的WebContent/WEB-INF/lib文件夹中。文件夹中。n3.创建论文提交页面。在创建论文提交页面。在WebContent chapter9文件夹中创建一文件夹中创建一个名为个名为exam9_3_uploadPaper.jsp的的JSP页面，该页面为文件上页面，该页面为文件上传表单页面，具体代码如程序传表单页面，具体代码如程序9-7所示，其中链接了一个外部所示，其中链接了一个外部css文文件来简单调整页面布局，具体内容请参见随书光盘。件来简单调整页面布局，具体内容请

13、参见随书光盘。n4.编写编写servlet，完成文件上传功能。在源文件夹下的，完成文件上传功能。在源文件夹下的chapter9包中创建一个包中创建一个servlet类类PaperUpload_do，该类中的文件上传，该类中的文件上传处理思路为：首先获取处理思路为：首先获取stuNum、stuName、title（分别表示学（分别表示学号、姓名、标题）这三个普通表单域的值，然后在将用户上传的号、姓名、标题）这三个普通表单域的值，然后在将用户上传的文件存储到服务器磁盘上时使用上述三个表单域的值组合成文件文件存储到服务器磁盘上时使用上述三个表单域的值组合成文件的名字。具体代码如程序的名字。具体代码如

14、程序9-8所示。所示。n5.在在web.xml中配置上述中配置上述servlet。相关代码如程序。相关代码如程序9-9所示。所示。n6.测试。将项目部署到测试。将项目部署到tomcat服务器上，然后访问文件上传页服务器上，然后访问文件上传页面，在该页填写相关信息并单击面，在该页填写相关信息并单击“Browse”按钮选择要上传的文按钮选择要上传的文件，如图件，如图9-9所示。所示。n使用使用servlet 3.0接口上传文件接口上传文件n任务：要求不使用任何外部组件，使用任务：要求不使用任何外部组件，使用servlet3.0提供的文件上提供的文件上传接口完成与节相同的论文提交功能。传接口完成与节

15、相同的论文提交功能。n实现：实现：n1.创建论文提交页面。在创建论文提交页面。在WebContent chapter9文件夹中创建一文件夹中创建一个名为个名为exam9_3_uploadPaper2.jsp的的JSP页面，该页面与页面，该页面与exam9_3_uploadPaper.jsp内容基本一致，区别仅是内容基本一致，区别仅是exam9_3_uploadPaper2.jsp中中form的属性的属性action=/JavaWebExample/servlet/doPaperUploadwithS3。此处不再给出详细代码，具体请参考随书光盘。此处不再给出详细代码，具体请参考随书光盘。n2.编

16、写编写servlet，完成文件上传功能。在源文件夹下的，完成文件上传功能。在源文件夹下的chapter9包中包中创建一个创建一个servlet类类PaperUploadwithS3_do，该类中的文件上传处，该类中的文件上传处理思路与上一节一致：首先获取理思路与上一节一致：首先获取stuNum、stuName、title n（分别表示学号、姓名、标题）这三个普通表单域的值，然后在将用（分别表示学号、姓名、标题）这三个普通表单域的值，然后在将用户上传的文件存储到服务器磁盘上时使用上述三个表单域的值组合成户上传的文件存储到服务器磁盘上时使用上述三个表单域的值组合成文件的名字。具体代码如程序文件的名

17、字。具体代码如程序9-10所示所示。所示所示。n3.在在web.xml中配置上述中配置上述servlet。相关代码如程序。相关代码如程序9-11所示。所示。n4.测试。将项目部署到测试。将项目部署到tomcat服务器上，然后访问文件上传页服务器上，然后访问文件上传页面，在该页填写相关信息并单击面，在该页填写相关信息并单击“Browse”按钮选择要上传的文按钮选择要上传的文件，如图件，如图9-12所示。所示。新知识点新知识点上传组件及方法上传组件及方法n目前，如邮箱附件、个性头像等等，绝大多数的目前，如邮箱附件、个性头像等等，绝大多数的Web应用中都涉应用中都涉及到了文件的上传功能。及到了文件的

18、上传功能。ncommons FileUpload组件组件 nFileUpload是是Apache commons项目的一个子项目，它实现了项目的一个子项目，它实现了在在JSP/Servlet中高效的文件上传功能；而中高效的文件上传功能；而FileUpload还需要还需要commons的另一个子项目的另一个子项目IO进行支持，进行支持，commons IO组件提供组件提供了很多了很多I/O工具。所以，要运用工具。所以，要运用FileUpload组件实现文件上传功组件实现文件上传功能需要下载这两个组件。能需要下载这两个组件。n1.FileItem接口接口n2.DiskFileItemFactory

19、类类n3.ServletFileUpload类类nServlet 3.0提供的上传文件接口提供的上传文件接口nServlet 3.0 作为作为 Java EE 6 规范体系中一员，随着规范体系中一员，随着 Java EE 6 规范一起发布。在规范一起发布。在Servlet 3.0版本之前，文件上传基本都是依赖版本之前，文件上传基本都是依赖第三方组件来实现的，而今，第三方组件来实现的，而今，Servlet 3.0提供了文件上传功能，提供了文件上传功能，其使用也较为简单，所以随着其使用也较为简单，所以随着Java EE 6的普及，的普及，Servlet 3.0的的文件上传功能应该会取代大部分文件上

20、传组件。文件上传功能应该会取代大部分文件上传组件。扩展扩展下载下载n任务：实现文件下载功能。当用户点击下载页面的文件下载按钮任务：实现文件下载功能。当用户点击下载页面的文件下载按钮或链接时，能弹出文件下载对话框，用户能够将服务器上的相关或链接时，能弹出文件下载对话框，用户能够将服务器上的相关文件下载到客户机上。文件下载到客户机上。n实现：实现：n1.创建文件下载页面创建文件下载页面exam9_3_downloadFile.jsp，该页面提，该页面提供供“2011010201-张三张三-浅谈浅谈Spring的的IoC机制机制.docx”这个文件的这个文件的下载按钮。当点击该按钮提交表单时，下载任

21、务交由下载按钮。当点击该按钮提交表单时，下载任务交由“/JavaWebExample/servlet/downloadFile”这个这个Servlet来处来处理。具体代码如程序理。具体代码如程序9-12所示。所示。n2.在源文件夹的在源文件夹的chapter9包内创建一个包内创建一个Servlet类类DownLoad_do，由于下载页面的表单提交方式为，由于下载页面的表单提交方式为“post”，所，所以实现该以实现该Servlet的的doPost方法来处理文件下载任务，具体代码方法来处理文件下载任务，具体代码如程序如程序9-13所示。所示。n3.在在web.xml中配置上述中配置上述servl

22、et。相关代码如程序。相关代码如程序9-14所示。所示。n4.测试。将项目部署到测试。将项目部署到tomcat服务器上，然后访问文件下载页服务器上，然后访问文件下载页面，如图面，如图9-16所示。所示。上传图片自动生成缩略图上传图片自动生成缩略图n任务：完成一个上传图片并自动生成缩略图的功能。当用户在图任务：完成一个上传图片并自动生成缩略图的功能。当用户在图片上传页面上传片上传页面上传JPG/JPEG格式的图片时，能够正确将用户上传格式的图片时，能够正确将用户上传的图片以的图片以“当前时间的毫秒数当前时间的毫秒数_100以内随机数以内随机数”重命名后存储到重命名后存储到服务器服务器“D:upl

23、oadImg”目录下，并生成该图片的缩略图存储到目录下，并生成该图片的缩略图存储到“D:uploadImgsmall”目录下，然后在响应页面打印出用户所目录下，然后在响应页面打印出用户所上传的图片的名称、大小、缩略图以及原始图。上传的图片的名称、大小、缩略图以及原始图。n实现步骤：实现步骤：n1.实现生成缩略图的工具类。具体代码如程序实现生成缩略图的工具类。具体代码如程序9-15所示。所示。n2.定义异常类定义异常类JpegToolException，具体代码如程序，具体代码如程序9-16所示。所示。n3.创建图片上传页面创建图片上传页面exam9_4_uploadImage.jsp，具体代码

24、，具体代码如程序如程序9-17所示。所示。n4.编写编写Servlet类类ImageUpload_do，该类的，该类的doPost方法用来方法用来处理图片上传、生成缩略图以及向用户返回响应的工作。具体代处理图片上传、生成缩略图以及向用户返回响应的工作。具体代码如程序码如程序9-18所示。所示。n5.在在web.xml中配置上述中配置上述Servlet。n6.测试。将项目部署到测试。将项目部署到tomcat服务器上，然后访问图片上传页服务器上，然后访问图片上传页面，如图面，如图9-18所示。所示。新知识点新知识点缩略图原理缩略图原理n生成缩略图的方式有许多种，可以按如下思路使用生成缩略图的方式有

25、许多种，可以按如下思路使用Java 提供的提供的强大的图形处理类来生成一个图片的缩略图：强大的图形处理类来生成一个图片的缩略图：n1.使用类的静态方法使用类的静态方法BufferedImage read(File input)从磁盘从磁盘文件中将图片读取到内存中，存储在一个文件中将图片读取到内存中，存储在一个java.awt.image.BufferedImage对象中；对象中；n2.构建一个仿射变换对象。然后确定目标图片与原图片的宽度比构建一个仿射变换对象。然后确定目标图片与原图片的宽度比例以及高度比例，依据这两维的缩放比例调用例以及高度比例，依据这两维的缩放比例调用AffineTransf

26、orm的的setToScale(float,float)方法将此变换设置为缩放变换。方法将此变换设置为缩放变换。n3.根据上面的仿射变换对象构造出一个对象，该对象能够使用仿根据上面的仿射变换对象构造出一个对象，该对象能够使用仿射转换来执行从源图像到目标图像的线性映射。具体使用的方法射转换来执行从源图像到目标图像的线性映射。具体使用的方法是是filter(BufferedImage src,BufferedImage dst)，此方法，此方法将转换源将转换源 BufferedImage 并将结果存储在目标并将结果存储在目标 BufferedImage 中。中。n4.使用使用ImageIO类的类的

27、write方法将转换好的目标方法将转换好的目标BufferedImage以一定的图片类型写到磁盘文件上。以一定的图片类型写到磁盘文件上。扩展扩展图片增加水印图片增加水印n扩展扩展图片增加水印任务：给用户上传的图片添加水印。当用图片增加水印任务：给用户上传的图片添加水印。当用户在图片上传页面填写用户名并从客户端选择文件提交上传请求户在图片上传页面填写用户名并从客户端选择文件提交上传请求后，服务器能够将用户上传的图片存储到服务器的特定路径下，后，服务器能够将用户上传的图片存储到服务器的特定路径下，并能够将用户名以水印的形式标记到图片上，存储该水印图片并并能够将用户名以水印的形式标记到图片上，存储该

28、水印图片并打印到响应页面。打印到响应页面。n实现步骤：实现步骤：n1.编写为图片添加水印标记的工具类。代码如程序编写为图片添加水印标记的工具类。代码如程序9-20所示。所示。n2.创建图片上传页面创建图片上传页面exam9_4_uploadImage2.jsp，具体代，具体代码如程序码如程序9-21所示。所示。n3.编写编写Servlet类类ImageUploadAndMark_do，该类的，该类的doPost方法用来处理图片上传、为图片添加水印标记以及向用户返回响方法用来处理图片上传、为图片添加水印标记以及向用户返回响应的工作。具体代码如程序应的工作。具体代码如程序9-22所示。所示。n4.

29、在在web.xml中配置上述中配置上述Servlet。n5.测试。将项目部署到测试。将项目部署到tomcat服务器上，然后访问图片上传页服务器上，然后访问图片上传页面，如图面，如图9-21所示。所示。小结小结n本章介绍了几种在本章介绍了几种在Java Web开发中常用的组件，包括使用开发中常用的组件，包括使用CKEditor向向JSP页面中添加在线编辑器、使用页面中添加在线编辑器、使用JavaMail发送邮件发送邮件以及使用以及使用commons FileUpload实现文件上传功能等，也介绍了实现文件上传功能等，也介绍了使用使用Servlet 3.0提供的接口来完成文件上传工作的方法，同时向提供的接口来完成文件上传工作的方法，同时向读者展示了文件下载的实现以及使用读者展示了文件下载的实现以及使用Java的图形工具实现缩略图的图形工具实现缩略图的生成、向图片添加水印等方法。的生成、向图片添加水印等方法。