登录功能图片验证码的实现

    首先从网上下载一个生成验证码的Servlet:

package com.train.controller;import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.BufferedReader;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;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;@WebServlet("/CodeServlet")
public class CodeServlet extends HttpServlet {private static final long serialVersionUID = 1L;// 集合中保存所有成语private List<String> words = new ArrayList<String>();public CodeServlet() {super();}@Overridepublic void init() throws ServletException {// 初始化阶段,读取new_words.txt// web工程中读取 文件,必须使用绝对磁盘路径String path = getServletContext().getRealPath("/WEB-INF/new_words.txt");try {BufferedReader reader = new BufferedReader(new InputStreamReader(new FileInputStream(path), "utf-8"));String line;while ((line = reader.readLine()) != null) {words.add(line);}reader.close();} catch (IOException e) {e.printStackTrace();}}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse*      response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {int width = 120;int height = 36;// 步骤一 绘制一张内存中图片BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);// 步骤二 图片绘制背景颜色 ---通过绘图对象Graphics graphics = bufferedImage.getGraphics();// 得到画图对象 --- 画笔// 绘制任何图形之前 都必须指定一个颜色graphics.setColor(getRandColor(200, 250));graphics.fillRect(0, 0, width, height);// 步骤三 绘制边框graphics.setColor(Color.WHITE);graphics.drawRect(0, 0, width - 1, height - 1);// 步骤四 四个随机数字Graphics2D graphics2d = (Graphics2D) graphics;// 设置输出字体graphics2d.setFont(new Font("宋体", Font.BOLD, 18));Random random = new Random();// 生成随机数int index = random.nextInt(words.size());String word = words.get(index);// 获得成语// 定义x坐标int x = 10;for (int i = 0; i < word.length(); i++) {// 随机颜色graphics2d.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));// 旋转 -30 --- 30度int jiaodu = random.nextInt(60) - 30;// 换算弧度double theta = jiaodu * Math.PI / 180;// 获得字母数字char c = word.charAt(i);// 将c 输出到图片graphics2d.rotate(theta, x, 20);graphics2d.drawString(String.valueOf(c), x, 20);graphics2d.rotate(-theta, x, 20);x += 30;}// 将验证码内容保存session作用域request.getSession().setAttribute("checkcode_session", word);// 步骤五 绘制干扰线graphics.setColor(getRandColor(160, 200));int x1;int x2;int y1;int y2;for (int i = 0; i < 30; i++) {x1 = random.nextInt(width);x2 = random.nextInt(12);y1 = random.nextInt(height);y2 = random.nextInt(12);graphics.drawLine(x1, y1, x1 + x2, x2 + y2);}// 将上面图片输出到浏览器 ImageIOgraphics.dispose();// 释放资源ImageIO.write(bufferedImage, "jpg", response.getOutputStream());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse*      response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}private Color getRandColor(int fc, int bc) {// 取其随机颜色Random random = new Random();if (fc > 255) {fc = 255;}if (bc > 255) {bc = 255;}int r = fc + random.nextInt(bc - fc);int g = fc + random.nextInt(bc - fc);int b = fc + random.nextInt(bc - fc);return new Color(r, g, b);}}

如代码里写的,我们需要一个new_words.txt用来生成图片验证码:


在登录页面添加验证码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body><div class="register"><form action="/Train1/loginServlet" method="post"><div class="login-box"><table width="350" height="200"><tr align="center"><td><div>用户名:</div></td><td colspan="2"><input type="text" name="userName" /></td></tr><tr align="center"><td><div>密  码:</div></td><td colspan="2"><input type="password" name="passWord" /></td></tr><tr><td>验证码:<input type="text" id="checkCode" name="checkCode" /></td><td><img id="imageCode" οnclick="changeImage()"src="CodeServlet"></td></tr><tr align="center"><td colspan="3"><input type="submit"style="width: 50px; background-color: red;" value="登录" /></td></tr><tr><td><%=request.getAttribute("msg")%></td></tr></table></div></form></div><script type="text/javascript">function changeImage() {document.getElementById("imageCode").src="CodeServlet?"+new Date().getTime();}</script>
</body>
</html> 

changeImage()方法里的+new Date().getTime()是为了让用户点击一下就能换图片。

在Servlet里验证用户输入的验证码是否正确,如果不正确就给出提示,拒绝登录:

protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");String userName = request.getParameter("userName");String passWord = MD5Utils.md5(request.getParameter("passWord"));userModel model = new userModel();model.setUserName(userName);model.setPassWord(passWord);userService service = new userService();if (request.getSession().getAttribute("checkcode_session").equals(request.getParameter("checkCode"))) {try {userModel md = service.selectByNameAndPass(model);if (md != null) {// 找到记录,登录成功request.getSession().setAttribute("userName", md.getUserName());request.getRequestDispatcher("welcome.jsp").forward(request, response);} else {request.setAttribute("msg", "登录失败!请重试!");request.getRequestDispatcher("login.jsp").forward(request, response);}} catch (Exception e) {e.printStackTrace();}} else {request.setAttribute("msg", "验证码输入有误!请重试!");request.getRequestDispatcher("login.jsp").forward(request, response);}} 

即可实现登录图片验证码功能,点击一次换一次图片。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/56467.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

带验证码的登录页面

带验证码的登录页面 HTML页面中用表单标签的post方式提交到相应的php后台文件 <html lang"en"> <head><meta charset"UTF-8"><title>登录页面</title> </head> <body> <form method"post" actio…

GPT之父谈未来五年的AI:模型规模见顶,下个突破点在用好AI涌现特质

夕小瑶科技说 分享来源 | Web3 天空之城作者| 城主 划重点 ①尽管 AI 模型性能惊人&#xff0c;但它们的学习能力仍远远落后于人类。它们需要大量数据来学习&#xff0c;而人类可以从很少的数据中学习很多。所以&#xff0c;要达到人类的学习速度&#xff0c;这些模型还需要做大…

超好用万能提示词框架,ChatGPT效率翻三倍!

前几天写了几篇自己的AI实践&#xff1a; 《程序员&#xff0c;如何借力ChatGPT&#xff1f;》 《普通人&#xff0c;如何借力ChatGPT&#xff1f;》 《我认为&#xff0c;最好用的AI工具是它》 《如何借力AI工具做PPT》 很多朋友在后台留言&#xff0c;问我应该如何写高质量的…

Html5浪漫结婚请柬婚礼网站模板❤_爱她就给她最美的H5婚礼请柬_(婚庆电子邀请函)含背景音乐...

❉ Html5浪漫结婚请柬婚礼网站模板❤_爱她就给她最美的H5婚礼请柬_(婚庆电子邀请函)含背景音乐 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,这个是一个简单得html得结婚请柬效果图&#xff0c;是动态得&#xff0c;上面得文字可以更改&#xff0c;图片都可…

微信小程序电子签名及图片生成

基于微信小程序的电子签名及图片生成 前言:随着无纸化的推广,线上办公流程逐渐大众化,在线签字、等功能极大的缩短了异地签署周期,减少项目成本。 目录 一、功能介绍1.1、简介1.2、使用领域及原则1.3、相关技术1.4、小程序效果图1.5、基本功能二、代码块2.1、view2.2、wxss…

谁说程序员不懂浪漫——我的C语言结婚请柬(附源码)

前言&#xff1a;但行好事&#xff0c;莫问前程——《增广贤文》 从上学起开始学C,后面也做过H5&#xff0c;现在做Android。无论是学习用的&#xff0c;还是工作用的&#xff0c;上百个软件不止。但最另我骄傲的是&#xff0c;我用程序烂漫了一把。 用C语言&#xff0c;利用W…

计算机制作请柬,婚礼纪能用电脑制作电子请柬吗?电子请柬有哪些注意事项?...

不知道大家有没有发现&#xff0c;不知道从什么时候开始&#xff0c;结婚请柬已经从传统的纸质请柬变成了电子请柬的形式&#xff0c;这种不花成本去买、不费时间去派发的方式也是得到了越来越多新人的追捧。当然&#xff0c;纸质请柬有纸质请柬的制作方法&#xff0c;电子请柬…

HTML5结婚请柬响应式婚礼网站模板

简介&#xff1a; HTML5结婚请柬响应式婚礼网站模板是一款大气浪漫的结婚婚纱网站模板下载。aspku提示&#xff1a;本模板调用到谷歌字体库&#xff0c;可能会出现页面打开比较缓慢。 下载地址&#xff1a; http://www.bytepan.com/QwOAHHQ2pep

婚礼邀请函微信小程序

7.2.1任务分析 一、任务功能分析 本项目是一个婚礼邀请函小程序&#xff0c;通过小程序向亲朋好友发送婚礼到场邀请&#xff0c;相对于传 统方式的请柬&#xff0c;给人们带来不一样的便捷体验&#xff0c;也更容易受到广大年轻群体的喜爱。通过电 子版的邀请函&#xff0c;邀请…

婚礼请帖_第一次在线婚礼发生在1876年

婚礼请帖 重点(Top highlight) As the Covid-19 pandemic wears on, more and more of life has moved online — school, playdates, conferences, civic events, court proceedings, and even weddings. According to Wired, more than 450,000 couples were married between…

婚礼邀请函首页

一、 首页分析 1.1 邀请函页面的需求 背景音乐播放&#xff1a;页面的右上角有一个背景音乐播放按钮&#xff0c;用于控制音乐播放状态&#xff0c;单击按钮播放音乐&#xff0c;再次单击按钮暂停音乐。新人信息&#xff1a;页面中展示新娘和新郎的头像、姓名信息。婚礼信息&…

婚礼邀请函页面实现

邀请函实现步骤 主体页面以及导航栏样式布置一、项目初始化1、导航栏及标签部分代码 二、页面结构和样式1.邀请函页面主体页面包含了头顶部分的GIF图&#xff0c;标题&#xff0c;头像&#xff0c;及地点的等部分首页代码我们将在index.wxml文件中实现&#xff1a;首先&#xf…

微信小程序-婚礼邀请函页面

微信小程序-婚礼邀请函页面 &#xff08;1&#xff09;pages文件中的文件创建&#xff1a; 1.在app.json中进行创建文件&#xff0c;保存即可在pages中生成文件&#xff1b; &#xff08;2&#xff09;完成下导航&#xff1a; 1.在app.json中新增tabBar方法&#xff0c;并t在ab…

婚礼邀请函小程序项目

文章目录 一、学习目标1.掌握小程序常用组件的使用2.掌握腾讯视频插件的使用3.掌握背景音乐API、地图API的使用4.掌握订阅消息的发送 二、开发前准备1.项目展示 三、代码实现1 项目搭建2 功能实现2.1 背景音乐功能2.2 照片页面功能2.3 美好时光页面2.4 婚礼地点页面2.5 宾客信息…

微信小程序 - 婚礼邀请函

marry 微信小程序端 服务端 扫码体验 免费制作流程点我查看 主页面展示 项目说明 服务端架构&#xff1a;SpringMvc 服务器&#xff1a;阿里云服务 域名&#xff1a;pengmaster.com 数据库&#xff1a;在服务器上装的mysql 地址&#xff1a;47.104.198.222:3306 后台地址&am…

html5怎么做电子请帖,如何制作H5婚礼邀请函?

H5是HTML5的简称。HTML5是HTML最新的修订版本&#xff0c;是一种超文本标记语言。H5有两大特点&#xff1a;首先&#xff0c;强化了 Web 网页的表现性能。其次&#xff0c;追加了本地数据库等 Web 应用的功能。 H5页面就是利用html5制作出来的页面&#xff0c;尤其在微信中发展…

一生一世一双人!爱她就给她最美的H5婚礼请柬~

结婚在传统观念中是一生一次的大事情&#xff0c;婚礼请柬就是其中之一。现在&#xff0c;电子请柬大行其道&#xff0c;艺术性的排版&#xff0c;配上出彩的动画和音乐&#xff0c;可以永久完整保存的特性让电子请柬倍受欢迎。今天主页妞给大家收集了一些唯美的H5婚礼请柬&…

动态婚礼请帖PPT模板

模板介绍 一份高质量的PPT模板&#xff0c;可以让你在日常的工作中展示自我、脱颖而出、去赢得更多机会&#xff0c;今天小编分享一份精美的动态婚礼请帖PPT模板 PPT模板名称&#xff1a;动态婚礼请帖PPT模板&#xff0c;模板编号&#xff1a;P27732&#xff0c;大小10MB&…

婚礼请帖_20个精美的婚礼请柬网站设计

对于许多人来说&#xff0c;婚姻仍然是他们一生中最重要的事件之一。 因此&#xff0c;毫不奇怪的是&#xff0c;许多夫妇将大量的时间&#xff0c;精力和创造力投入到婚礼计划中&#xff0c;以及如何邀请他们的朋友参加婚礼。 我们以前曾展示过传统的印刷喜帖以及极富创意的喜…

简约婚礼请柬PPT模板

模板介绍 一份高质量的PPT模板&#xff0c;可以让你在日常的工作中展示自我、脱颖而出、去赢得更多机会&#xff0c;今天小编分享一份精美的简约婚礼请柬PPT模板 PPT模板名称&#xff1a;简约婚礼请柬PPT模板&#xff0c;模板编号&#xff1a;P93226&#xff0c;大小10MB&…