Javaweb常用组件课件

1、javaweb常用组件1第第9章章 java web常用实用组件常用实用组件javaweb常用组件2在在jsp中使用在线编辑器中使用在线编辑器n一般在进行信息在线编辑时，需要插入图片，进行文字排版等，一般在进行信息在线编辑时，需要插入图片，进行文字排版等，使显示的时候以固定排版格式显示，因此，需要在录入时，能够使显示的时候以固定排版格式显示，因此，需要在录入时，能够允许进行信息的在线样式编辑，如图允许进行信息的在线样式编辑，如图9-1所示。所示。javaweb常用组件3javaweb常用组件4n在在jsp中，可采用中，可采用ckeditor在线编辑器实现以上描述功能。在线编辑器实现以上描述功能

2、。n实现过程：实现过程： n1下载下载ckeditor。在。在ckeditor官方网站网址下载官方网站网址下载ckeditor for java。n本例下载当前最新版本本例下载当前最新版本ckeditor for java 3.6.2.war。n2.将将ckeditor文件夹和文件夹和jar复制到指定位置。下载后解压，将复制到指定位置。下载后解压，将ckeditor的的ckeditor-java-core-3.5.3.jar复制到采用站点的复制到采用站点的web-inf/lib/目录下，目录下，ckeditor文件夹复制到站点文件夹下。文件夹复制到站点文件夹下。n3.编写调用表单文件。编写含有

3、在线编辑器的表单，即在原先表单制编写调用表单文件。编写含有在线编辑器的表单，即在原先表单制作的基础上，增加相应作的基础上，增加相应ckeditor的调用语句即可。程序的调用语句即可。程序9-1为实现了为实现了含有在线编辑器的一个表单页面。含有在线编辑器的一个表单页面。javaweb常用组件5ckeditor 的配置与使用nweb在线编辑器简介在线编辑器简介javaweb常用组件6n1ckeditor n免费、开源、用户量庞大的在线编辑器，有良好的社区支持。免费、开源、用户量庞大的在线编辑器，有良好的社区支持。nckeditor创建于创建于2003年，起初为年，起初为fckeditor，2009

4、年更名为年更名为ckeditor，是目前市场使用非常广泛的一个在线编辑器。官方网站：。是目前市场使用非常广泛的一个在线编辑器。官方网站：。n2tinymce n这是免费、开源、轻量的在线编辑器，基于这是免费、开源、轻量的在线编辑器，基于javascript，高度可定制、跨，高度可定制、跨平台。平台。n3yui editor n这是这是yahoo! yui 的一部分，能输出纯净的的一部分，能输出纯净的xhtml代码。代码。n4ewebeditor n这是国产商业化的编辑器，不免费，功能丰富。这是国产商业化的编辑器，不免费，功能丰富。n5free rich text editor n这是非常容易部

5、署的在线编辑器，输出这是非常容易部署的在线编辑器，输出xhtml代码，功能丰富。代码，功能丰富。javaweb常用组件7nckeditor常用标签及属性常用标签及属性n1. 标签标签n该标签用于设置在线编辑器替换表单元素，其常用属性有：该标签用于设置在线编辑器替换表单元素，其常用属性有： nreplace：需要用编辑器替换的表单元素。：需要用编辑器替换的表单元素。nbasepath：在线编辑器：在线编辑器ckeditor的位置。的位置。nconfig：设置编辑器对象的属性，如设置宽度，高度。：设置编辑器对象的属性，如设置宽度，高度。javaweb常用组件8n2. 标签标签n该标签主要用来在表单

6、页面创建在线编辑器，其常用属性有：该标签主要用来在表单页面创建在线编辑器，其常用属性有： nbasepath：在线编辑器：在线编辑器ckeditor的位置。的位置。neditor：编辑器表单元素的名字。：编辑器表单元素的名字。nvalue：表单元素的默认值。：表单元素的默认值。ntextareaattributes：编辑器的属性，其用：编辑器的属性，其用java.util.map设置设置键值对。键值对。javaweb常用组件9扩展扩展1修改信息时采用在线编辑器修改信息时采用在线编辑器n在线信息修改时，需要将原有信息读取出来，显示在在线编辑器，在线信息修改时，需要将原有信息读取出来，显示在在线编

7、辑器，再做调整，因此需要使用在线编辑器时使用默认值。再做调整，因此需要使用在线编辑器时使用默认值。n采用采用标签时，只要将原表单元素设置默认标签时，只要将原表单元素设置默认值，则采用编辑器后，仍然保持默认值，如对程序值，则采用编辑器后，仍然保持默认值，如对程序9-1，其原表，其原表单元素为：单元素为： n n设置默认值：设置默认值： n编辑器默认值编辑器默认值 javaweb常用组件10n采用采用标签替换后，运行效果如图标签替换后，运行效果如图9-3所示。所示。javaweb常用组件11扩展扩展2简洁的在线编辑器简洁的在线编辑器n收集信息时，表单文本框个别情况不需要做太多编辑，只需简单收集信息

8、时，表单文本框个别情况不需要做太多编辑，只需简单的编辑，因此，编辑器不需太复杂，所以采用简化的编辑器，的编辑，因此，编辑器不需太复杂，所以采用简化的编辑器，ckeditor提供了的简化样式。提供了的简化样式。n对于前边对于前边9-1程序，用简化样式重新替换，效果如图程序，用简化样式重新替换，效果如图9-4所示。所示。代码见程序代码见程序9-2所示。所示。 javaweb常用组件12javaweb常用组件13注册时自动发送欢迎邮件注册时自动发送欢迎邮件n在网站注册成功后，会发送邮件到注册者邮箱，提示注册成功，在网站注册成功后，会发送邮件到注册者邮箱，提示注册成功，如图如图9-5所示，自动发送到编

9、者注册信箱所示，自动发送到编者注册信箱ljq816-。javaweb常用组件14javaweb常用组件15n实现过程：实现过程： n1下载并加载下载并加载javamail api n收发邮件需要下载收发邮件需要下载javamail api并加载到服务器后，才可以正并加载到服务器后，才可以正常执行。常执行。javamail api目前的版本为目前的版本为javamail api 1.4.3。可。可以从如下地址下载：以从如下地址下载： n n下载后，解压并找到下载后，解压并找到mail.jar文件，将其复制到项目的文件，将其复制到项目的web-inf/lib/文件夹下，如直接加载到文件夹下，如直接

10、加载到web服务器，则复制到服务器，则复制到tomcat安装目录下的安装目录下的lib文件夹中。文件夹中。n2编写邮件身份验证类编写邮件身份验证类n邮件身份验证类代码见程序邮件身份验证类代码见程序9-3。javaweb常用组件16n3编写发送邮件类编写发送邮件类n发送邮件类代码见程序发送邮件类代码见程序9-4。n4编写注册表单编写注册表单n注册表单代码见程序注册表单代码见程序9-5，效果如图，效果如图9-6。n5编写注册编写注册servlet，包括发邮件功能。，包括发邮件功能。n注册程序代码见程序注册程序代码见程序9-6。 javaweb常用组件17新知识点新知识点javamail njava

11、mail api 是一个用于阅读、编写和发送电子消息的可选包是一个用于阅读、编写和发送电子消息的可选包(标准扩展标准扩展)，可以用来建立标准的邮件客户端程序，它支持各种，可以用来建立标准的邮件客户端程序，它支持各种网络邮件协议。网络邮件协议。javaweb常用组件18n1smtp n2pop n3imap n4mime javaweb常用组件19上传文件到服务器上传文件到服务器n使用使用commons 组件上传文件组件上传文件n 实现一个简单的期末论文提交网页，要求论文提交页面有学实现一个简单的期末论文提交网页，要求论文提交页面有学号、姓名、论文题目的输入框，以及一个上传文件的表单域，当号、姓

12、名、论文题目的输入框，以及一个上传文件的表单域，当用户填写内容并选择文件进行提交之后，将用户所上传的文件重用户填写内容并选择文件进行提交之后，将用户所上传的文件重命名成命名成“学号学号-姓名姓名-论文题目论文题目.后缀名后缀名”的格式存储到服务器的格式存储到服务器d盘盘的的uploadpaper文件夹下，并在响应页面向用户提示他所上传的文件夹下，并在响应页面向用户提示他所上传的文件名，以及上传后的新文件名。文件名，以及上传后的新文件名。javaweb常用组件20n实现：实现： n1. 下载文件上传组件。到下载文件上传组件。到apache官网和官网和. /io/下载下载com

13、mons 组件以及组件以及commons io组件，本例使用这两个组件目前组件，本例使用这两个组件目前的最新版本：的最新版本：commons-和和commons-io-2.3.jar。 n2. 将上述将上述jar包添加到项目的包添加到项目的webcontent/web-inf/lib文件夹文件夹中。中。 n3. 创建论文提交页面。在创建论文提交页面。在webcontent chapter9文件夹中创建文件夹中创建一个名为一个名为exam9_3_uploadpaper. jsp的的jsp页面，该页面为文件页面，该页面为文件上传表单页面，具体代码如程序上传表单页面，具体代码如程序9-7所示，其中链

14、接了一个外部所示，其中链接了一个外部css文件来简单调整页面布局，具体内容请参见随书光盘。文件来简单调整页面布局，具体内容请参见随书光盘。javaweb常用组件21n4. 编写编写servlet，完成文件上传功能。在源文件夹下的，完成文件上传功能。在源文件夹下的chapter9包中创建一个包中创建一个servlet类类paperupload_do，该类中的文件上传，该类中的文件上传处理思路为：首先获取处理思路为：首先获取stunum、stuname、title（分别表示（分别表示学号、姓名、标题）这三个普通表单域的值，然后在将用户上传学号、姓名、标题）这三个普通表单域的值，然后在将用户上传的文

15、件存储到服务器磁盘上时使用上述三个表单域的值组合成文的文件存储到服务器磁盘上时使用上述三个表单域的值组合成文件的名字。具体代码如程序件的名字。具体代码如程序9-8所示。所示。n5. 在在web.xml中配置上述中配置上述servlet。相关代码如程序。相关代码如程序9-9所示。所示。javaweb常用组件22n6. 测试。将项目部署到测试。将项目部署到tomcat服务器上，然后访问文件上传页服务器上，然后访问文件上传页面，在该页填写相关信息并单击面，在该页填写相关信息并单击“browse”按钮选择要上传的文按钮选择要上传的文件，如图件，如图9-9所示。所示。 javaweb常用组件23n使用使

16、用servlet 3.0接口上传文件接口上传文件n任务：要求不使用任何外部组件，使用任务：要求不使用任何外部组件，使用servlet3.0提供的文件上提供的文件上传接口完成与传接口完成与节相同的论文提交功能。节相同的论文提交功能。javaweb常用组件24n实现：实现： n1. 创建论文提交页面。在创建论文提交页面。在webcontent chapter9文件夹中创建一文件夹中创建一个名为个名为exam9_3_uploadpaper2. jsp的的jsp页面，该页面与页面，该页面与exam9_3_uploadpaper. jsp内容基本一致，区别仅是内容基本一致，区别仅是exam

17、9_3_uploadpaper2. jsp中中form的属性的属性action=/javawebexample/servlet/dopaperuploadwiths3。此处不再给出详细代码，具体请参考随书光盘。此处不再给出详细代码，具体请参考随书光盘。 n2. 编写编写servlet，完成文件上传功能。在源文件夹下的，完成文件上传功能。在源文件夹下的chapter9包中包中创建一个创建一个servlet类类paperuploadwiths3_do，该类中的文件上传处，该类中的文件上传处理思路与上一节一致：首先获取理思路与上一节一致：首先获取stunum、stuname、title n（分别表示

18、学号、姓名、标题）这三个普通表单域的值，然后在将用（分别表示学号、姓名、标题）这三个普通表单域的值，然后在将用户上传的文件存储到服务器磁盘上时使用上述三个表单域的值组合成户上传的文件存储到服务器磁盘上时使用上述三个表单域的值组合成文件的名字。具体代码如程序文件的名字。具体代码如程序9-10所示所示。所示所示。javaweb常用组件25n3. 在在web.xml中配置上述中配置上述servlet。相关代码如程序。相关代码如程序9-11所示。所示。n4. 测试。将项目部署到测试。将项目部署到tomcat服务器上，然后访问文件上传页服务器上，然后访问文件上传页面，在该页填写相关信息并单击面，在该页填

19、写相关信息并单击“browse”按钮选择要上传的文按钮选择要上传的文件，如图件，如图9-12所示。所示。 javaweb常用组件26新知识点新知识点上传组件及方法上传组件及方法n目前，如邮箱附件、个性头像等等，绝大多数的目前，如邮箱附件、个性头像等等，绝大多数的web应用中都涉应用中都涉及到了文件的上传功能。及到了文件的上传功能。javaweb常用组件27ncommons 组件组件 n是是apache commons项目的一个子项目，它实现了在项目的一个子项目，它实现了在jsp/servlet中高效的文件上传功能；而还需要中高效的文件上传功能；而还需要commons的另的另一个子项目一个子项目

20、io进行支持，进行支持，commons io组件提供了很多组件提供了很多i/o工工具。所以，要运用组件实现文件上传功能需要下载这两个组件。具。所以，要运用组件实现文件上传功能需要下载这两个组件。javaweb常用组件28n1. 接口接口n2. disk类类n3. servlet类类javaweb常用组件29nservlet 3.0提供的上传文件接口提供的上传文件接口nservlet 3.0 作为作为 java ee 6 规范体系中一员，随着规范体系中一员，随着 java ee 6 规范一起发布。在规范一起发布。在servlet 3.0版本之前，文件上传基本都是依版本之前，文件上传基本都是依赖第

21、三方组件来实现的，而今，赖第三方组件来实现的，而今，servlet 3.0提供了文件上传功提供了文件上传功能，其使用也较为简单，所以随着能，其使用也较为简单，所以随着java ee 6的普及，的普及，servlet 3.0的文件上传功能应该会取代大部分文件上传组件。的文件上传功能应该会取代大部分文件上传组件。javaweb常用组件30扩展扩展下载下载n任务：实现文件下载功能。当用户点击下载页面的文件下载按钮任务：实现文件下载功能。当用户点击下载页面的文件下载按钮或链接时，能弹出文件下载对话框，用户能够将服务器上的相关或链接时，能弹出文件下载对话框，用户能够将服务器上的相关文件下载到客户机上。文

22、件下载到客户机上。javaweb常用组件31n实现：实现： n1. 创建文件下载页面创建文件下载页面exam9_3_download，该页面提供，该页面提供“2011010201-张三张三-浅谈浅谈spring的的ioc机制机制.docx”这个文件的这个文件的下载按钮。当点击该按钮提交表单时，下载任务交由下载按钮。当点击该按钮提交表单时，下载任务交由“/javawebexample/ servlet/downloadfile”这个这个servlet来处理。具体代码如程序来处理。具体代码如程序9-12所示。所示。n2. 在源文件夹的在源文件夹的chapter9包内创建一个包内创建一个servle

23、t类类download_do，由于下载页面的表单提交方式为，由于下载页面的表单提交方式为“post”，所，所以实现该以实现该servlet的的dopost方法来处理文件下载任务，具体代码方法来处理文件下载任务，具体代码如程序如程序9-13所示。所示。javaweb常用组件32n3. 在在web.xml中配置上述中配置上述servlet。相关代码如程序。相关代码如程序9-14所示。所示。n4. 测试。将项目部署到测试。将项目部署到tomcat服务器上，然后访问文件下载页服务器上，然后访问文件下载页面，如图面，如图9-16所示。所示。javaweb常用组件33上传图片自动生成缩略图上传图片自动生成

24、缩略图n任务：完成一个上传图片并自动生成缩略图的功能。当用户在图任务：完成一个上传图片并自动生成缩略图的功能。当用户在图片上传页面上传片上传页面上传jpg/jpeg格式的图片时，能够正确将用户上传格式的图片时，能够正确将用户上传的图片以的图片以“当前时间的毫秒数当前时间的毫秒数_100以内随机数以内随机数”重命名后存储重命名后存储到服务器到服务器“d:uploadimg”目录下，并生成该图片的缩略图存目录下，并生成该图片的缩略图存储到储到“d:uploadimgsmall” 目录下，然后在响应页面打印出目录下，然后在响应页面打印出用户所上传的图片的名称、大小、缩略图以及原始图。用户所上传的图片

25、的名称、大小、缩略图以及原始图。javaweb常用组件34n实现步骤：实现步骤： n1. 实现生成缩略图的工具类。具体代码如程序实现生成缩略图的工具类。具体代码如程序9-15所示。所示。n2. 定义异常类定义异常类jpegtoolexception，具体代码如程序，具体代码如程序9-16所示。所示。n3. 创建图片上传页面创建图片上传页面exam9_4_uploadimage.jsp，具体代码，具体代码如程序如程序9-17所示。所示。javaweb常用组件35n4. 编写编写servlet类类imageupload_do，该类的，该类的dopost方法用来方法用来处理图片上传、生成缩略图以及向

26、用户返回响应的工作。具体代处理图片上传、生成缩略图以及向用户返回响应的工作。具体代码如程序码如程序9-18所示。所示。n5. 在在web.xml中配置上述中配置上述servlet。n6. 测试。将项目部署到测试。将项目部署到tomcat服务器上，然后访问图片上传页服务器上，然后访问图片上传页面，如图面，如图9-18所示。所示。javaweb常用组件36javaweb常用组件37新知识点新知识点缩略图原理缩略图原理n生成缩略图的方式有许多种，可以按如下思路使用生成缩略图的方式有许多种，可以按如下思路使用java 提供的提供的强大的图形处理类来生成一个图片的缩略图：强大的图形处理类来生成一个图片的

27、缩略图： n1. 使用使用javax.imageio.imageio类的静态方法类的静态方法bufferedimage read()从磁盘文件中将图片读取到内存中，存从磁盘文件中将图片读取到内存中，存储在一个储在一个java.awt.image. bufferedimage对象中；对象中； n2. 构建一个仿射变换对象构建一个仿射变换对象java.awt.geom.affinetransform。然后确定目标图片与原图片的宽度比例以及高度比例，依据这两然后确定目标图片与原图片的宽度比例以及高度比例，依据这两维的缩放比例调用维的缩放比例调用affinetransform的的settoscale(

28、float,float)方法将此变换设置为缩放变换。方法将此变换设置为缩放变换。 javaweb常用组件38n3. 根据上面的仿射变换对象构造出一个根据上面的仿射变换对象构造出一个java.awt.image.affinetransformop对象，该对象能够使用对象，该对象能够使用仿射转换来执行从源图像到目标图像的线性映射。具体使用的方仿射转换来执行从源图像到目标图像的线性映射。具体使用的方法是法是filter(bufferedimage src, bufferedimage dst)，此方，此方法将转换源法将转换源 bufferedimage 并将结果存储在目标并将结果存储在目标 bufferedimage 中。中。 n4. 使用使用imageio类的类的write方法将转换好的目标方法将转换好的目标bufferedimage以一定的图片类型写到磁盘文件上。以一定的图片类型写到磁盘文件上。javaweb常用组件39扩展扩展图片增加水印图片增加水