【WEB开发技术】一个简单的WEB项目验证码校验（如何从前端到后台一步一步的搭建、配置、发布整个Web项目？）
来源：互联网 发布：南通大学网络教学平台 编辑：程序博客网 时间：2024/06/08 14:01
（一）验证码如何生成？
（1）实现验证码所需要的类：
（1）、java.awt.image.BufferedImage：BufferedImage 子类描述具有可访问图像数据缓冲区的 Image。（2）、java.awt.Graphics：Graphics 类是所有图形上下文的抽象基类，允许应用程序在组件（已经在各种设备上实现）以及闭屏图像上进行绘制。（3）、java.awt.Graphics2D：Graphics2D 类扩展 Graphics 类，以提供对几何形状、坐标转换、颜色管理和文本布局更为复杂的控制。（4）、javax.imageio.ImageWriter：用来编码和写入图像的抽象超类。此类必须由在 Java Image I/O 框架的上下文中写出图像的类为其创建子类。（2）实现一个验证码的方式：
（1）演示: 把字符串”Hello”变成图片写到一个jpg文件中
@Testpublic void demo1() throws IOException{ //定义图片的宽和高 int w=60; int h=30; //声明一个RGB格式的内存中的图片 BufferedImage img = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB); Graphics g = img.getGraphics(); //最左侧字符的基线位于此图形上下文坐标系的 (x, y) 位置处。 (此时位于左下角的位置) g.drawString("Hello", 0, 30); g.dispose();//类似于IO中的flush(),把图形数据刷到img中 //把内存图片img对象保存到一个jpg文件 ImageIO.write(img, "JPEG", new FileOutputStream("a.jpg")); System.out.println("Over....");}验证码效果：
（2）演示: 把验证码(4个随机数字)变成图片写到一个jpg文件中
@Testpublic void demo2() throws IOException{ //定义图片的宽和高 int w=60; int h=30; //声明一个RGB格式的内存中的图片 BufferedImage img = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB); Graphics g = img.getGraphics(); //把背景变白色 g.setColor(Color.white); g.fillRect(0, 0, w, h); //设置字体 g.setFont(new Font("aa",Font.BOLD,18)); //产生并draw出4个随机数字 Random r = new Random(); for(int i=0;i<4;i++){ int a = r.nextInt(10);//生成0~9之间的随机整数 int y = 15+r.nextInt(20);//产生随机的垂直位置 //产生随机颜色 Color c = new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)); g.setColor(c); g.drawString(""+a, i*15, y); } //画几条干扰线 for(int i=0;i<10;i++){ //产生随机颜色 Color c = new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)); g.setColor(c); g.drawLine(r.nextInt(60), r.nextInt(30), r.nextInt(60), r.nextInt(30)); } g.dispose();//类似于IO中的flush(),把图形数据刷到img中 //把内存图片img对象保存到一个jpg文件 ImageIO.write(img, "JPEG", new FileOutputStream("a.jpg")); System.out.println("Over....");}验证码效果：
（3）演示: 生成可以缩放和旋转的验证码 —用Graphics2D类代替Graphics：
@Testpublic void demo3() throws IOException{ int w = 90; int h = 30; BufferedImage img = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB); Graphics2D g2d = (Graphics2D) img.getGraphics(); g2d.setFont(new Font("黑体",Font.BOLD,18)); Random r = new Random(); for(int i=0;i<4;i++){ String s = "" +r.nextInt(10); //旋转矩阵 AffineTransform aff = new AffineTransform(); aff.rotate(Math.random(),i*18,h-5);//旋转 aff.scale(0.6+Math.random(), 0.6+Math.random());//放缩 g2d.setTransform(aff); g2d.drawString(s, i*15, h-5); } g2d.dispose(); ImageIO.write(img, "JPEG", new FileOutputStream("a2.jpg")); System.out.println("Over....");}验证码效果：
（二）如何写一个WebProject项目？
（1）进入MyEclipse->New->WebProject进行创建：
（2）进入New Web Project配置项目名及路径：
（3）项目初步创建完成如图：
（4）首先进入index.jsp修改成所需的jsp页面：
（1）：显示注册表单：
<body> <form action="" > 姓名：<input type="text" name="name"><br/> 密码：<input type="password" name="pwd"><br/> 验证码：<input type="text" name="code"> <img id="codeImage" src=""><a href="">看不清</a><br/> <input type="submit" value="注册"><br/> </form> </body>1）我们知道表单注册，都是从前端(网页)收集数据然后提交给后台(数据库)进行校验。
2）前端数据如何收集？比如此处的姓名密码可以通过输入获得，而验证码也是通过后台发送的填入，同时如果验证码看不清，则需要页面与用户交互。
3）这里涉及如何显示“验证码”，如何“更换”验证码？
【解决上面提到的两个问题】：
4）前边我们已经生成了验证码，这里直接读取图片img的src即可；5）通过点击超链接更换图片。
6）src路径是变得，用变量code作为其路径；超链接由javaScript函数实现。
（2）显示、更改、验证码：
1）设置<img>标签的id="codeImage"，src变量名src="code"；<img id="codeImage" src="code"> 2）设置<a>标签的href为js函数：changeImage()；<a href="javascript:changeImage();">看不清</a> 3）<head>标签中写js代码，实现function函数 changeImage()。 i：code后边的"?"代表的是此code变量带有参数：new Date().getTime(); 【注意：浏览器服务器相互通信，每次浏览器请求服务器会有一个session，有一段时间session是不变的。由于上次服务器对浏览器做了响应，下次访问服务器可能不会成功，这时只要我们改变了session，就可以第二次请求服务器了。所以我们让code带时间参数每次都变，这样就可以一直请求 变化的验证码了！】ii：code如何访问？通过配置web.xml中的servlet，来调用java后台，接下来我们要写CodeImgServlet。 <script type="text/javascript"> function changeImage(){ var img = document.getElementById("codeImage"); img.src="code?"+new Date().getTime(); }</script>index.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>注册界面</title> <script type="text/javascript"> function changeImage(){ var img = document.getElementById("codeImage"); img.src="code?"+new Date().getTime(); } </script> </head> <body> <form action="LoginServlet" method="get"> 姓名：<input type="text" name="name"><br/> 密码：<input type="password" name="pwd"><br/> 验证码：<input type="text" name="code"> <img id="codeImage" src="code"><a href="javascript:changeImage();">看不清</a><br/> <input type="submit" value="注册"><br/> </form> </body></html>（5）在后台（src）编写CodeImgServlet.java程序：
（1）建立一个servlets包，再建立一个Servlet类：
当我们创建CodeImgServlet类即将成功的时候，还会弹出最后一个页面，这个页面中的内容信息都是为配置web.xml做准备的，上边已经提到过web.xml配置，配置信息如图：
这时Web.xml配置文件自动修改了：
（2）CodeImgServlet类创建好以后，开始编写此类：
（1）直接覆盖父类的方法：service(req,resp)：
CodeImgServlet.java类：
package servlets;import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.image.BufferedImage;import java.io.IOException;import java.util.Random;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class CodeImgServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // ☆1☆--相比纯java方式有变化的地方 // 设置http响应头---告诉浏览器我现在发的是这个图片格式的数据，你用相应的方式来解析 resp.setContentType("image/jpeg"); // 定义图片的宽和高 int w = 60; int h = 30; // 声明一个RGB格式的内存中的图片 BufferedImage img = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB); Graphics g = img.getGraphics(); // 把背景变白色 g.setColor(Color.white); g.fillRect(0, 0, w, h); // 设置字体 g.setFont(new Font("aa", Font.BOLD, 18)); // 产生并draw出4个随机数字 Random r = new Random(); for (int i = 0; i < 4; i++) { int a = r.nextInt(10);// 生成0~9之间的随机整数 int y = 15 + r.nextInt(20);// 产生随机的垂直位置 // 产生随机颜色 Color c = new Color(r.nextInt(256), r.nextInt(256), r.nextInt(256)); g.setColor(c); g.drawString("" + a, i * 15, y); } // 画几条干扰线 for (int i = 0; i < 10; i++) { // 产生随机颜色 Color c = new Color(r.nextInt(256), r.nextInt(256), r.nextInt(256)); g.setColor(c); g.drawLine(r.nextInt(60), r.nextInt(30), r.nextInt(60), r.nextInt(30)); } g.dispose();// 类似于IO中的flush(),把图形数据刷到img中 // 把内存图片img对象保存到一个jpg文件 ImageIO.write(img, "JPEG", resp.getOutputStream());// ☆2☆ }}但是注意以下两处是编写此类的关键语句：
//(1)设置http响应头---告诉浏览器我现在发的是这个图片格式的数据，你用相应的方式来解析resp.setContentType("image/jpeg");//(2)servlet将响应信息发送到浏览器上。ImageIO.write(img, "JPEG", resp.getOutputStream());// ☆2☆此时我们一个最基本的前端和后台的所需的基本内容都已完成，记下来，我们可以在网页上实现用户交互，点击“看不清”验证码就会变化！
验证码的创建交互都已近实现，接下来就是如何实现表单的提交？如何把我们注册的信息全部提交到后台去？
（6）在后台（src）编写LoginServlet.java程序实现表单提交：
（1）首先要设置index.jsp中表单的action和提交方式：
//此处的LoginServlet和code类似，设置提交方式为get也可以，但是一般表单提交都用post，get_post详细说明见后边演示：<form action="LoginServlet" method="get">LoginServlet.java类：
package servlets;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class LoginServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String name=req.getParameter("name"); String pwd=req.getParameter("pwd"); String code=req.getParameter("code"); resp.getWriter().print(name+","+pwd+","+code); }}此时servlet类创建完毕，可以看到web.xml所有配置信息：
Web.xml：
<?xml version="1.0" encoding="UTF-8"?><web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> <display-name></display-name> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>CodeImgServlet</servlet-name> <servlet-class>servlets.CodeImgServlet</servlet-class> </servlet> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>LoginServlet</servlet-name> <servlet-class>servlets.LoginServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>CodeImgServlet</servlet-name> <url-pattern>/code</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>LoginServlet</servlet-name> <url-pattern>/LoginServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list></web-app>（7）此时验证表单提交：
【注意】：此时我们将表单信息只是显示到页面即可，具体的向后台提交后边再学。
注册信息：
表单提交成功！
（三）总结：
至此，一个简单的WEB项目就完成了，其中还有很多详细的细节没有说明，或许还有很多的知识错误，这些都放到后边的学习中去补 。这里主要介绍了，验证码如何用java代码生成；网页如何显示验证码；如何通过servlet来实现验证码变化；如何通过servlet来实现表单数据提交！
阅读全文
1 0
- 【WEB开发技术】一个简单的WEB项目验证码校验（如何从前端到后台一步一步的搭建、配置、发布整个Web项目？）
- Web前端项目发布到iis服务器
- 如何搭建一个Web项目
- <java EE 项目：Attendance> 从一个简单项目看java web 开发的整体布局
- 从安装操作系统开始，一步一步详细的基于spring web项目创建与发布
- 【WEB开发技术】apache-tomcat-7.0.30的安装、配置、发布项目、教程说明
- Mondrian用于web项目的一个简单搭建实验
- 一个简单的Java Web项目搭建流程
- 使用IntelliJ IDEA来搭建一个简单的Web项目
- 发布一个web项目
- Java Web 项目配置 环境搭建 从零到HelloWorld
- 我们如何搭建一个maven 的web项目
- 如何自己成功搭建一个SSM框架的WEB项目
- 如何自己成功搭建一个SSM框架的WEB项目
- <java EE 项目：petstore> 从一个简单项目看 java web 如何在本jsp页面上对用户输入的格式进行限制与验证
- 发布一个web项目到Internet?
- 发布一个web项目到Internet?
- 如何发布Web项目到互联网
- 保留两位小数（四舍五入/不四舍五入）
- cublas vs nervana
- LeetCode: 3 Sum
- js-闭包
- template might not exist or might not be accessible by any of the configured Template Resolvers
- 【WEB开发技术】一个简单的WEB项目验证码校验（如何从前端到后台一步一步的搭建、配置、发布整个Web项目？）
- Error:(2, 0) Plugin with id 'com.github.dcendents.android-maven' not found在Studio里导入moudle时报错解决方案
- c语言经典面试题
- android 7.0 兼容多语言切换总结
- Linux内核中__setup的用途
- strlen()和sizeof()区别
- oracle创建用户、授权、建表空间
- FZU 2207 以撒的结合(LCA+记录路径）
- 本地项目上传到GitHub中
