1一乐

V1

2022/01/26阅读:81主题:默认主题

简单代码画红包和写祝福

1、看效果:



2、源码:

✿ 登录logon1.jsp代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <script type="text/javascript">
  function change(){
   //重新设置一下<img/> 标签的src属性【当心缓存-解决:每次请求携带不同的参数【就是一次新的请求】,通过new Date添加随机数(产生一个新的时间)】
   //解决浏览器缓存问题:若请求资源不变,不再发送新的请求
   document.getElementById("randomcode").src="/randomcode?"+new Date().getTime();
  }
 </script>
</head>
<body>
<%--注销登录太过于简单了,没必要为它单独书写一个servlet,写在jsp即可【就一行代码】 --%>
 <%
  //销毁session
  session.invalidate();
 %>
 <span style="color:red">${errorMsg}</span>
 
 <form action="/randomLogon" method="post">
  <br/>
  <%--添加点击事件【onclick】--javaScript --%>
   红包口令:<input type="text" name="randomcode" size="6" maxlength="6" required autocomplete="off"/>  
   <input type="submit" value="领红包"/><br/><br/>
  <img src="/randomcode" alt="验证码" title="换一张" style="cursor:pointer" id="randomcode" onclick="change()"/></br>
  
 </form>
</body>
</html>

✿ RandomCodeServlet .java代码:

package randomcode;

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 java.util.UUID;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 验证码
 * 验证码原理:【利用java.util.UUID 生成随机码【截取5位】】
 * 将一份验证码存储到session中【用于判断验证码是否输入正确】
 * 一份绘制到图片中【给用户看】
 * 
 *
 */
@WebServlet("/randomcode")
public class RandomCodeServlet extends HttpServlet{
  
 @Override
 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  //生成随机数的红包口令
  String randomCode = UUID.randomUUID().toString().substring(0, 6);
  //将验证码存储到session中
  req.getSession().setAttribute("RANDDOMCODE_IN_SESSION", randomCode);
  //将验证码存储到图片
  
  //1、创建图片对象
  int width = 420;
  int height = 700;
  int imageType = BufferedImage.TYPE_INT_RGB;
  BufferedImage image = new BufferedImage(width, height, imageType);
  //2、画板【背景对象--设置画笔背景颜色、形状(矩形)】
  Graphics g = image.getGraphics();//画笔
  g.setColor(Color.RED);
  g.fillRect(0, 0, 420, height);//画板(红包的画板)
  //3、将随机数画入图片中
  g.setColor(Color.BLACK);
  Font font = new Font("宋体", Font.BOLD + Font.ITALIC, 50);
  g.setFont(font);
  g.drawString(randomCode, 130, 330);//画上字符串(红包口令)
  //4、干扰点(作为点缀)
  g.setColor(Color.GRAY);
  Random r = new Random();
  for(int i = 0; i < 100; i++) {
   g.fillRect(r.nextInt(width), r.nextInt(height), 2, 2);
  }
  
  //5、销毁画笔
  g.dispose();
  //6、将图片对象以流的方式保存到页面
  ImageIO.write(image, "jpg", resp.getOutputStream());
    
 }
}

✿ RandomLogonServlet.java代码:

package randomcode;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 随机码验证登录servlet
 * 
 */
@WebServlet("/randomLogon")
public class RandomLogonServlet extends HttpServlet {
 @Override
 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  req.setCharacterEncoding("UTF-8");
  //接收
//  String name = req.getParameter("name");
//  String password = req.getParameter("password");
  
  String randomcode = req.getParameter("randomcode");
  //session中的randomcode
  String randomcode_in_session = (String) req.getSession().getAttribute("RANDDOMCODE_IN_SESSION");
 
  //处理
  if(!randomcode.equalsIgnoreCase(randomcode_in_session)) {
//   req.setAttribute("errorMsg""亲,验证码错误或过期!");
   req.setAttribute("errorMsg""亲,红包口令错误或过期!");
//   req.getRequestDispatcher("/randomcode/logon.jsp").forward(req, resp);
   req.getRequestDispatcher("/logon1.jsp").forward(req, resp);
   return;
  }
  //删除验证过的验证码,避免表单重复提交
   req.getSession().removeAttribute("RANDDOMCODE_IN_SESSION");
   req.setAttribute("rightMsg""恭喜发财!");
   req.getRequestDispatcher("/newyear.jsp").forward(req, resp);
  System.out.println("验证码正确");

  

 }
}

✿ RandomImgServlet.java代码:

package randomcode;

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 java.util.UUID;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 验证码
 * 验证码原理:【利用java.util.UUID 生成随机码【截取5位】】
 * 将一份验证码存储到session中【用于判断验证码是否输入正确】
 * 一份绘制到图片中【给用户看】
 * @author Huangyujun
 *
 */
@WebServlet("/randomimg")
public class RandomImgServlet extends HttpServlet{
 @Override
 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  //生成随机数的红包口令
  String[] randomCode = {"新年快乐""万事如意","欢天喜地""恭贺新禧"
    "吉祥如意""喜气洋洋""步步高升","龙凤呈祥"
    "一帆风顺""万事大吉""财源滚滚""年年有余"};
  
  //将验证码存储到图片
  
  //1、创建图片对象
  int width = 1600;
  int height = 800;
  int imageType = BufferedImage.TYPE_INT_RGB;
  BufferedImage image = new BufferedImage(width, height, imageType);
  //2、画板【背景对象--设置画笔背景颜色、形状(矩形)】
  Graphics g = image.getGraphics();//画笔
  g.setColor(Color.BLACK);
  g.fillRect(0, 0, width, height);//画板(红包的画板)
  //3、将随机数画入图片中
  g.setColor(Color.RED);
  Font font = new Font("宋体", Font.BOLD + Font.ITALIC, 100);
  g.setFont(font);
  int x = (int) (Math.random() * 12);
  g.drawString(randomCode[x], width/2 - 250, 330);//画上祝福语
  //4、干扰点(作为点缀)
  g.setColor(Color.WHITE);
  Random r = new Random();
  for(int i = 0; i < 100; i++) {
   g.fillRect(r.nextInt(width), r.nextInt(height), 4, 4);
  }
  
  //5、销毁画笔
  g.dispose();
  //6、将图片对象以流的方式保存到页面
  ImageIO.write(image, "jpg", resp.getOutputStream());
    
 }
}

✿ newyear.jsp 代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
 <span style="color: red">${rightMsg}</span>
 
 <img src="/randomimg" alt="验证码" id="randomimg" onclick="change()"/></br>
 
 <script>
  function change(){
   document.getElementById("randomimg").src="/randomimg?"+new Date().getTime();
  }
  setInterval(() => {change()}, 100);
 
 </script>
</body>
</html>

分类:

后端

标签:

后端

作者介绍

1一乐
V1