Import the json jar package
Create a class VerifyCode to generate verification code tool class
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;
import javax.imageio.ImageIO;
public class VerifyCode {
private int w = 70;
private int h = 35;
private Random r = new Random();
// {"宋体", "华文楷体", "黑体", "华文新魏", "华文隶书", "微软雅黑", "楷体_GB2312"}
private String[] fontNames = {
"宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312"};
// 可选字符
private String codes = "0123456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";
// 背景色
private Color bgColor = new Color(255, 255, 255);
// 验证码上的文本
private String text ;
// 生成随机的颜色
private Color randomColor () {
int red = r.nextInt(150);
int green = r.nextInt(150);
int blue = r.nextInt(150);
return new Color(red, green, blue);
}
// 生成随机的字体
private Font randomFont () {
int index = r.nextInt(fontNames.length);
String fontName = fontNames[index];//生成随机的字体名称
int style = r.nextInt(4);//生成随机的样式, 0(无样式), 1(粗体), 2(斜体), 3(粗体+斜体)
int size = r.nextInt(5) + 24; //生成随机字号, 24 ~ 28
return new Font(fontName, style, size);
}
// 画干扰线
private void drawLine (BufferedImage image) {
int num = 3;//一共画3条
Graphics2D g2 = (Graphics2D)image.getGraphics();
for(int i = 0; i < num; i++) {
//生成两个点的坐标，即4个值
int x1 = r.nextInt(w);
int y1 = r.nextInt(h);
int x2 = r.nextInt(w);
int y2 = r.nextInt(h);
g2.setStroke(new BasicStroke(1.5F));
g2.setColor(Color.BLUE); //干扰线是蓝色
g2.drawLine(x1, y1, x2, y2);//画线
}
}
// 随机生成一个字符
private char randomChar () {
int index = r.nextInt(codes.length());
return codes.charAt(index);
}
// 创建BufferedImage
private BufferedImage createImage () {
BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
Graphics2D g2 = (Graphics2D)image.getGraphics();
g2.setColor(this.bgColor);
g2.fillRect(0, 0, w, h);
return image;
}
// 调用这个方法得到验证码
public BufferedImage getImage () {
BufferedImage image = createImage();//创建图片缓冲区
Graphics2D g2 = (Graphics2D)image.getGraphics();//得到绘制环境
StringBuilder sb = new StringBuilder();//用来装载生成的验证码文本
// 向图片中画4个字符
for(int i = 0; i < 4; i++) {
//循环四次，每次生成一个字符
String s = randomChar() + "";//随机生成一个字母
sb.append(s); //把字母添加到sb中
float x = i * 1.0F * w / 4; //设置当前字符的x轴坐标
g2.setFont(randomFont()); //设置随机字体
g2.setColor(randomColor()); //设置随机颜色
g2.drawString(s, x, h-5); //画图
}
this.text = sb.toString(); //把生成的字符串赋给了this.text
drawLine(image); //添加干扰线
return image;
}
// 返回验证码图片上的文本
public String getText () {
return text;
}
// 保存图片到指定的输出流
public static void output (BufferedImage image, OutputStream out)
throws IOException {
ImageIO.write(image, "JPEG", out);
}
}
The jsp page uses jquery and needs to introduce jquery
data: "The variable name in the bean class=" + $('#input control id').val()
<script type="text/javascript">
$().ready(function () {
$('#log').click(function () {
if ($('#uname').val() == "" || $('#upsw').val() == "") {
alert("用户名或密码不能为空！");
}
else {
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath }/rest/user/logUser",
data: "uname=" + $('#uname').val() + "&upsw=" + $('#upsw').val(),
success: function (object) {
//接收后台json数据 并解析
var json= JSON.stringify(object);
var v = eval("("+json+")");
var msg = v.i;
var myName = v.text;
if (msg == "1") {
if($('#image').val() == "" || $('#image').val() == ""){
alert("请输入验证码！");
return false;
}
if(myName == $('#image').val()){
//想要跳转的页面
window.location.href="${pageContext.request.contextPath }/rest/user/goUser_list";
}else {
alert("验证码输入错误!");
}
}
if (msg == "0") {
alert("用户名或密码错误！");
}
},
error: function (XMLHttpRequest, textStatus, thrownError) {
}
});
}
});
//验证码点击刷新
document.getElementById("btn").onclick = function () {
document.getElementById("yzm").src =
"${pageContext.request.contextPath }/rest/user/VerifyCodeServlet?time=" + new Date().getTime();
};
});
</script>
<title>Insert title here</title>
</head>
<body>
<div margin-bottom: 236px;">
<div id="logina">
<div id="login_con">
<label>
用户账号:<input id="uname" type="text" name="uname" />
</label><br />
<label>
登录密码:<input id="upsw" type="text" name="upsw"/>
</label>
<label>
验证码: <input type="text" name="image" id="image"> <img src="${pageContext.request.contextPath }/rest/user/VerifyCodeServlet" id="yzm">
<input type="button" value="看不清?" id="btn" style="width: 100px;"><br>
</label><br>
<label>
<input id="log" type="submit" value="登录" />
</label>
</div>
</div>
</div>
controller page
@Controller
@RequestMapping("/user")
public class UserAction {
@Resource
private UserService userService;
/**
* 登录
* @param model
* @param user
* @param request 将获取到的验证码存入session域中
* @return
* @throws ServletException
* @throws IOException
*/
@ResponseBody
@RequestMapping("/logUser")
public JSONObject logUser(Model model,User user,HttpServletRequest request) throws ServletException, IOException{
//数据库查询几条数据
int i = userService.logUser(user);
String text = (String) request.getSession().getAttribute("text");
//将生成的验证码 与 查询出来的 i 存入object中 并返回到jsp页面
JSONObject object = new JSONObject();
object.put("i", i);
object.put("text", text);
return object;
}
@ResponseBody
@RequestMapping("/VerifyCodeServlet")
public void VerifyCodeServlet(Model model,HttpServletRequest request,HttpServletResponse response) throws IOException{
//创建对象
VerifyCode vc = new VerifyCode();
//获取图片对象
BufferedImage bi = vc.getImage();
//获得图片的文本内容
String text = vc.getText();
System.out.println(text);
// 将系统生成的文本内容保存到session中
request.getSession().setAttribute("text", text);
//向浏览器输出图片
vc.output(bi, response.getOutputStream());
}
mapper.xml statement
<select id="logUser" parameterType="user" resultType="int">
SELECT COUNT(*) FROM easybuy_user WHERE uname= #{
uname} AND upsw = #{
upsw}
</select>