电子教案 10__ch6.5_verifyCode（验证码图片）.docxVIP

PAGE1/NUMPAGES2

《动态网页设计（JSP）》教案

章节

第6章Servlet应用

6.5案例ch6.5_verifyCode（验证码图片）

学时

约3学时

知识

技能

掌握应用Servlet类生成验证码图片

掌握对验证码图片中的文字内容、干扰线条数量、图片大小进行调整

掌握在网页中调用JavaScript方法更新验证码图片

重点

对验证码图片中的文字内容、干扰线条数量、图片大小进行调整

在网页中调用JavaScript方法更新验证码图片

难点

在网页中调用JavaScript方法更新验证码图片

生成数字加字母的验证码

教学过程：

下发案例素材、课件，展示网页效果图。

演示案例。创建Web项目ch6.5_verifyCode，将网页素材复制到WebRoot文件夹；创建包com，将类文件复制到包com。

讲解理论：打开Servlet类VerifyCode，简单介绍代码中的逻辑。直接预览，输出图片。另存为VerifyCode2之后，尝试更改文字内容、干扰线条数量、图片大小，输出图片。

修改登录页indexEL.jsp：文本框、图片。注意设置img的样式style=vertical-align:middle;，使得文字和图片的中线能一致。

图6-19登录页图6-20登录时未输入验证码

修改登录验证JavaBean类Check：获取输入的验证码和session中的随机数，验证通过后更改session的时长。

修改indexEL.jsp：实现验证码刷新功能，生成链接，调用JavaScript方法，添加时间戳参数，实现验证码刷新。

将VerifyCode另存为Servlet类VerifyCodeNumChar：验证码包含数字和字母，创建数组，随机获取数组中的元素。

创建登录页indexNumChar.jsp：由indexEL.jsp另存为，更改表单的action、图片的src。

引导学生完成练习案例ch6.4ex_calculate（加法口算）-的应用数字图片部分：创建2个Servlet分别生成2个数字图片，但不需要刷新图片的功能。需在Servlet中改图片的宽度。

留意之处：

反复强调：类中的代码更改了，保存后要重启服务器才能生效。而网页保存了就能生效。

如果调用JavaScript方法刷新验证码，则在img标签中，建议不设置src属性。

课后作业：

完成练习案例ch6.4ex_calculate（加法口算）-的应用数字图片部分。

部分完成第6章的章末练习题。

预习第6章后面的内容。

图6-26计算错误图6-27计算正确