| jsp连接mysql数据库，实现含验证码的用户登录 | 您所在的位置：网站首页 › js实现用户名密码验证的方法有 › jsp连接mysql数据库，实现含验证码的用户登录 |
jsp连接mysql数据库，实现含验证码的用户登录
|
功能简介
捣腾了几天，总算实现这个小小的登录功能，在此记录一下。 功能：输入框中输入用户名和密码和验证码，提交到服务器进行处理，如果验证码正确，就连接数据库查看用户名和密码是否存在，存在则进入主界面，否则重定向到登录界面。如果勾选了十天内免登录，则Cookie会记录用户名和密码，下次进入登录界面，就会自动填充上去。 所需的所有文件如下： 下面一步一步讲解如何实现的。 数据库相关准备因为要连接mysql数据库，所以首先创建一个数据库login，再创建一张表users来保存用户名和密码。 //创建数据库 create database login; //创建数据表 create table users (username char(50) primary key, pwd char(50) not null ); //插入用户信息 insert into users values('admin','123');接着就是下载连接mysql的驱动程序，并导入到MyEclipse中，详细步骤参考：http://blog.csdn.net/yanhui_wei/article/details/36011107 数据库的相关准备弄好之后，接下来就看看各个jsp程序。 登录界面login.jsp 登录 /* 点击图片改变验证码 */ function reloadCode() { checkcode.src = "servlet/validateCode?id=" + (new Date()).getTime(); } 用户名： 密码： 验证码： 十天内记住我的登录状态 ——————第三方登录————— Copyright 2017@Paranoidyang页面效果： 因为对这些页面进行了css设置，所以还有个 styles.css @CHARSET "UTF-8"; * { margin: 0; padding: 0; } .wrapper { width: 354px; margin: 0 auto; } .form{ height: 300px;/*元素的高度*/ position: absolute; top: 50%;/*元素的顶部边界离父元素的的位置是父元素高度的一半*/ margin-top: -150px;/*设置元素顶边负边距，大小为元素高度的一半*/。 } .input { border: 1px solid #B8B8B8; width: 280px; height: 45px; padding: 0 10px; border-radius: 5px; /*将输入框变为圆角的，5px为圆角半径*/ } .captcha_input { border: 1px solid #B8B8B8; width: 184px; height: 45px; padding: 0 10px; /* border-radius: 5px;将输入框变为圆角的，5px为圆角半径 */ border-top-left-radius: 5px; border-bottom-left-radius: 5px; } input, img{vertical-align:middle;}/* 让输入框和验证码图片水平局中对齐，默认情况下，图片会高出文本框一些，很难看 */ img{ height:45px; width:90px; } .login { width: 350px; color: #fff; background-color: #4798F6; border: none; margin-top: 10px; } /*分隔线样式*/ .divider { letter-spacing: -1px; color: #ddd; text-align:center; } .divider span { letter-spacing: 0; color: #B8B8B8; margin: 0 20px; } footer p { text-align: center; font-size: 14px; color: #B8B8B8; } 生成验证码从登录页面中，可以看到有个输入验证码的功能，这是现在很多网站登录验证的一种方式。它的工作机制是这样的：当你用户名或密码输入错误时，就会弹出让输入验证码的页面，如果你一次性就输正确了，它是不会出现的，这样下来，就可以防止不法分子利用特定程序对网站进行恶意的注册和攻击。在这里，我简化这个步骤，直接就显示出让你输入验证码的界面（注意：其他网站登录中是只在输错时才会让你输入验证码的喔）。 工作原理：首先，服务端随机产生几个随机数或者随机算式，然后通过session对象将数据传输到客户端，客户端输入验证码，通过表单将数据提交到服务器，服务器提取数据之后和产生的随机数字或者算式的结果对比，以此进行验证。 下面的代码就是服务器端用于生成验证码的： validateCode.java package util; import java.awt.*; import java.awt.geom.*; import java.awt.image.*; import java.io.*; import java.util.*; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import javax.imageio.ImageIO; /* * 生成验证码 */ public class validateCode extends HttpServlet { private static final long serialVersionUID = 1L; public validateCode() { super(); } public void destroy() { super.destroy(); } public void init() throws ServletException { super.init(); } /*该方法主要作用是获得随机生成的颜色*/ public Color getRandColor(int s,int e){ Random random=new Random (); if(s>255) s=255; if(e>255) e=255; int r,g,b; r=s+random.nextInt(e-s); //随机生成RGB颜色中的r值 g=s+random.nextInt(e-s); //随机生成RGB颜色中的g值 b=s+random.nextInt(e-s); //随机生成RGB颜色中的b值 return new Color(r,g,b); } @Override public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置不缓存图片 response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "No-cache"); response.setDateHeader("Expires", 0); //指定生成的响应图片,一定不能缺少这句话,否则错误. response.setContentType("image/jpeg"); int width=85,height=25; //指定生成验证码的宽度和高度 BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); //创建BufferedImage对象,其作用相当于一图片 Graphics g=image.getGraphics(); //创建Graphics对象,其作用相当于画笔 Graphics2D g2d=(Graphics2D)g; //创建Grapchics2D对象 Random random=new Random(); Font mfont=new Font("楷体",Font.BOLD,16); //定义字体样式 g.setColor(getRandColor(200,250)); g.fillRect(0, 0, width, height); //绘制背景 g.setFont(mfont); //设置字体 g.setColor(getRandColor(180,200)); //绘制100条颜色和位置全部为随机产生的线条,该线条为2f for(int i=0;i public dologin() { super(); } public void destroy() { super.destroy(); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Connection ct; PreparedStatement ps; ResultSet rs; // 驱动程序名 String driver = "com.mysql.jdbc.Driver"; // URL指向要访问的数据库名library String url = "jdbc:mysql://localhost:3306/login"; // MySQL配置时的用户名 String user = "root"; // MySQL配置时的密码 String password = "642765"; // 输入的用户名和密码 String txtUsername; String txtPassword; // 数据库中存储的用户名和密码 String myuserword; String mypwd; // 接收数据 txtUsername = request.getParameter("txtUsername"); txtPassword = request.getParameter("txtPassword"); // 验证码检测 String txtCheckCode = request.getParameter("txtCheckCode");// 获取输入框中输入的验证码 String CheckCode = request.getSession().getAttribute("randCheckCode") .toString();// 获取验证码真实的值 boolean judgeCheckCode = txtCheckCode.equals(CheckCode);// 比对输入的验证码与真实验证码是否一致 // 如果验证码正确，就连接数据库，对比用户名和密码 if (judgeCheckCode) { System.out.println("验证码正确"); System.out.println("正在连接数据库..."); try { // 加载驱动程序 Class.forName(driver); // getConnection()方法，连接MySQL数据库！！ ct = (Connection) DriverManager.getConnection(url, user, password); if (ct != null) { System.out.println("数据库连接成功!"); } ps = (PreparedStatement) ct .prepareStatement("select * from users where username=? and pwd=? "); ps.setString(1, txtUsername); // 将第一个？设置为参数txtUsername ps.setString(2, txtPassword); // 将第二个?设置为参数txtPassword // rs是一个ResultSet结果集,可以把rs理解成返回一张表行的结果集 rs = ps.executeQuery(); // 执行查找看是否存在，有的话rs.next()返回true,反之为 // false // 如果存在此用户，则跳转到主界面 if (rs.next()) { myuserword = rs.getString(1);// 获得表格的第一列，此处为用户名 mypwd = rs.getString(2); // 获得表格的第二列，此处为密码 System.out.println("成功从login数据库的users表中获取到用户名和密码："); System.out.println(myuserword + "\t" + mypwd + "\t");// “\t”为“转义字符”,代表的是一个tab，也就是8个空格。 response.sendRedirect("main.jsp"); } else { System.out.println("没有该用户，请重新输入"); response.sendRedirect("login.jsp"); } ct.close(); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } // 如果验证码错误，就跳转回登录界面 } else { System.out.println("验证码错误"); response.sendRedirect("login.jsp"); } // 判断是否勾选十天免登录 boolean isRememberUser = (request.getParameter("isUseCookie") != null); if (isRememberUser) {// 要记住用户 // 把用户名和密码保存在Cookie对象里面 String username = URLEncoder.encode(txtUsername, "utf-8"); // 使用URLEncoder解决无法在Cookie当中保存中文字符串问题， String pwd = URLEncoder.encode(txtPassword, "utf-8"); Cookie usernameCookie = new Cookie("UserName", username); Cookie passwordCookie = new Cookie("PassWord", pwd); usernameCookie.setMaxAge(60*60*24*10); passwordCookie.setMaxAge(60*60*24*10);// 设置最大生存期限为10天 response.addCookie(usernameCookie); response.addCookie(passwordCookie); } else { Cookie[] cookies = request.getCookies(); if (cookies != null && cookies.length > 0) { for (Cookie c : cookies) { if (c.getName().equals("UserName") || c.getName().equals("PassWord")) { c.setMaxAge(0); // 设置Cookie失效 response.addCookie(c); // 重新保存。 } } } } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } public void init() throws ServletException { } } 主界面当用户名、密码、验证码都正确时，就会跳转到main.jsp，程序如下： main.jsp 主界面 主界面页面显示如下： 还有一步，不要漏掉了，在web.xml中还有做相关的配置，配置文件内容如下： This is the description of my J2EE component //验证码相关配置 validateCode util.validateCode validateCode /servlet/validateCode //服务器处理程序相关配置 dologin dologin dologin /dologin //设置默认界面 login.jsp 总结到此，这个简易的登录验证就实现了，还有很多需要修改完善的，接下来几天再慢慢都写下来，敬请关注。 |
【本文地址】
公司简介
联系我们