登陆界面如何生成动态验证码

在设计登录界面时验证码是必不可少,本实例将简单的生成动态验证码。
根据个人需求将生成验证码代码放到不同的的地方,可以放到前段控制器中通过请求方式生成验证码,也可已将代码放到一个JSP页面通过应用JSP页面生成验证码
工具:J2EE

通过jsp生成验证码

源代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="java.awt.image.BufferedImage"%>  
<%@page import="java.awt.Graphics2D"%>  
<%@page import="java.awt.Color"%>  
<%@page import="java.awt.Font"%>  
<%@page import="javax.imageio.ImageIO"%>  
<%@page import="java.util.Random"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>验证码</title>
</head>
<body>
<%  
    int width = 60;//定义图片的宽度  
    int height = 20;//定义图片的高度  
    // 创建具有可访问图像数据缓冲区的Image  
    BufferedImage buffImg = new BufferedImage(width, height,  
            BufferedImage.TYPE_INT_RGB);  
    Graphics2D g = buffImg.createGraphics();  

    // 创建一个随机数生成器  
    Random random = new Random();  
    //将图像填充为 白色  
    g.setColor(Color.WHITE);  
    g.fillRect(0, 0, width, height);  

    // 创建字体,字体的大小应该根据图片的高度来定  
    Font font = new Font("Times New Roman", Font.PLAIN, 18);  
    // 设置字体  
    g.setFont(font);  

    // 画边框  
    g.setColor(Color.BLACK);  
    g.drawRect(0, 0, width - 1, height - 1);  

    // 随机产生160条干扰线 ,使图像中的验证码不易被其它程序探测到
    g.setColor(Color.LIGHT_GRAY);  
    for (int i = 0; i < 160; i+&#
  • 6
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue前端登陆界面验证码可以通过以下步骤实现: 1. 在后端实现生成验证码的接口,并返回验证码图片的base64编码。 2. 在前端利用Vue组件的方式,使用canvas绘制验证码图片。 3. 在用户输入验证码的输入框中添加校验逻辑,通过与后端返回的验证码进行比对来进行校验。 以下是一个基本的实现示例: ```vue <template> <div> <canvas ref="canvas" width="100" height="40" @click="refreshCode"></canvas> <input type="text" v-model="codeInput" placeholder="请输入验证码"> <button @click="submit">提交</button> </div> </template> <script> import axios from 'axios' export default { data() { return { codeInput: '', codeImg: '' } }, mounted() { this.refreshCode() }, methods: { refreshCode() { axios.get('/api/getCode').then(res => { this.codeImg = res.data.codeImg this.drawCode() }) }, drawCode() { let canvas = this.$refs.canvas let ctx = canvas.getContext('2d') let img = new Image() img.onload = () => { ctx.drawImage(img, 0, 0) } img.src = this.codeImg }, submit() { axios.post('/api/login', { codeInput: this.codeInput }).then(res => { if (res.data.success) { // 登陆成功 } else { this.refreshCode() } }) } } } </script> ``` 在上述代码中,refreshCode方法会向后端发送请求获取验证码图片的base64编码,并将其赋值给codeImg变量。drawCode方法则通过canvas绘制出验证码图片。 当用户输入验证码后,点击提交按钮,会向后端发送login请求,携带验证码输入框中的值。后端可以根据验证码的值进行校验,如果校验成功则返回success=true,否则返回success=false,同时返回新的验证码图片的base64编码,供前端更新验证码图片。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值