java 验证码登陆的原理 javaweb登录验证码

转载

mob6454cc6caa80 2023-09-06 15:45:58

文章标签 java 验证码登陆的原理 web html 验证码 css 文章分类 Java 后端开发

在javaWeb03中我们已经讲了页面的跳转方式和jdbc也就是与数据库（Oracle）的连接，所以下面看看03的知识在04中的运用叭

一、验证码和登录

代码展示：

login:

<%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>用户登录</title>
 <link href="images/login.css" rel="stylesheet" type="text/css" />
 <!-- 引入jQuery的类库 -->
 <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
 <!-- 另起script块 -->
 <script type="text/javascript">
     $(function(){
         myf();
         //给验证码添加点击事件
         $("#yzm").click(function(){
             myf();//刷新验证码
         });
     })
     //随机验证码=刷新验证码
     function myf(){
         //下标：0-33
         var arr = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符，当然也可以用中文的
         var str = "";//用来拼接
         for(var i=0;i<4;i++){
             //随机数  无限逼近0-33 四舍五入 
             var a=Math.round(Math.random()*33);//下标
             //console.info(arr[a]);//根据下标取元素
             str+=arr[a];
         }
         //给span赋值 
         $("#yzm").html(str);//innerHTML
     }
     
     //验证登录
     function yzLogin(){
         //依次获取用户名、密码、用户输入的验证码、随机产生的验证码  不能为空
         var name=$("#xx").val();
         //alert(name);
         var pwd=$("#yy").val();
         //alert(pwd);
         var yzm1=$("#zz").val();
         var yzm2=$("#yzm").html();
         if(name==""){
             alert("用户名不能为空");
             return false;
         }
         if(pwd==""){
             alert("密码不能为空");
             return false;
         }
         if(yzm1==""){
             alert("验证码不能为空");
             return false;
         }
         else{//当验证码不为空的情况下
             //作业1：要求验证码不区分大小写 
             if(yzm1!=yzm2){//不一致的时候 提示
                 alert("验证码有误");
                 myf();//刷新验证码
                 $("#zz").val("");//清空文本框
                 return false;
             }
         }
         return true;
     }
 </script>
 </head>
 <body>
     <form action="dologin.jsp" method="post" οnsubmit="return yzLogin()">
         <div id="login">
         
              <div id="top">
                   <div id="top_left"><img src="images/login_03.gif" /></div>
                   <div id="top_center"></div>
              </div>
              
              <div id="center">
                   <div id="center_left"></div>
                   <div id="center_middle">
                        <div id="user">用 户
                          <input type="text" name="aa" id="xx"/>
                        </div>
                        <div id="password">密   码
                          <input type="password" name="bb" id="yy" />
                        </div>
                        <div id="password">验证码
                          <input id="zz" style="width: 40px;" type="text" name="cc" />  
                          <span id="yzm" style="color:red;font-size:20px;cursor:pointer;">XXXX</span>
                        </div>
                        <div id="btn">
                                <!-- <a href="#">登录</a>
                                <a href="#">清空</a> -->
                                <input type="submit" value="登录"/>
                                <input type="reset" value="清空"/>
                        </div>
                   
                   </div>
                   <div id="center_right"></div>         
              </div>
              <div id="down">
                   <div id="down_left">
                       <div id="inf">
                            <span class="inf_text">版本信息</span>
                            <span class="copyright">管理信息系统 2008 v2.0</span>
                       </div>
                   </div>
                   <div id="down_center"></div>         
              </div>
     
         </div>
     </form>
 </body>
 </html>

dologin:

<%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <% 
     //设置编码方式
     request.setCharacterEncoding("utf-8");
     //接收表单提交过来的值：用户名 密码 根据name值取value值
     String name = request.getParameter("aa");
     String pwd = request.getParameter("bb");
     //jdbc连接Oracle做判断
     String URL = "jdbc:oracle:thin:@localhost:1521:orcl";
     String CNAME = "oracle.jdbc.driver.OracleDriver";
     //加载驱动
     Class.forName(CNAME);
     //创建连接
     Connection con = DriverManager.getConnection(URL,"scott","tiger");
     //定义SQL语句
     String sql = "select * from tb_0325 where sname=? and spwd=?";
     //获得执行对象
     PreparedStatement ps = con.prepareStatement(sql);
     //给占位符赋值
     ps.setString(1, name);
     ps.setInt(2, Integer.parseInt(pwd));
     //开始执行
     ResultSet rs = ps.executeQuery();
     //判断遍历
     if(rs.next()){
         //说明登录成功 跳转到新闻发布系统的管理员界面
         //重定向
         //response.sendRedirect("news/admin.jsp");
         
         //转发
         request.getRequestDispatcher("news/admin.jsp").forward(request, response);
     }
     else{
         //说明登录失败
         out.print("<script>alert('用户名或者密码错误');location.href='login.jsp';</script>");
     }    //关闭资源
     if(con!=null&&!con.isClosed()){
         con.close();
     }
     if(ps!=null){
         ps.close();
     }
     if(rs!=null){
         rs.close();
     }
 %>

二、新闻增加

代码展示：

add:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>添加主题--管理后台</title>
<link href="/web04/css/admin.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
  <div id="welcome">欢迎使用新闻管理系统！</div>
  <div id="nav">
    <div id="logo"><img src="/web04/images/logo.jpg" alt="新闻中国" /></div>
    <div id="a_b01"><img src="/web04/images/a_b01.gif" alt="" /></div>
  </div>
</div>
<div id="admin_bar">
  <div id="status">管理员： 登录      <a href="#">退出</a></div>
  <div id="channel"> </div>
</div>
<div id="main">
  <div id="opt_list">
    <ul>
      <li><a href="../newspages/news_add.jsp">添加新闻</a></li>
      <li><a href="../admin.jsp">编辑新闻</a></li>
      <li><a href="#">查找新闻</a></li>
      <li><a href="../newspages/topic_add.jsp">添加主题</a></li>
      <li><a href="#">编辑主题</a></li>
    </ul>
  </div>
  <div id="opt_area">
    <h1 id="opt_type"> 添加新闻： </h1>
    <form action="doadd.jsp" method="post">
      <p>
        <label> 主题 </label>
        <select name="ntid">
          <option value="1">选择</option>
          <option value='1'> 国内 </option>
          <option value='2'> 国际 </option>
          <option value='3'> 军事 </option>
          <option value='4'> 体育 </option>
          <option value='5'> 娱乐 </option>
          <option value='6'> 社会 </option>
          <option value='7'> 财经 </option>
          <option value='8'> 科技 </option>
          <option value='9'> 健康 </option>
          <option value='10'> 汽车 </option>
          <option value='11'> 教育 </option>
          <option value='12'> 房产 </option>
          <option value='13'> 家居 </option>
          <option value='14'> 旅游 </option>
          <option value='15'> 文化 </option>
          <option value='16'> 其他 </option>
        </select>
      </p>
      <p>
        <label> 标题 </label>
        <input name="ntitle" type="text" class="opt_input" />
      </p>
      <p>
        <label> 作者 </label>
        <input name="nauthor" type="text" class="opt_input" />
      </p>
      <p>
        <label> 摘要 </label>
        <textarea name="nsummary" cols="40" rows="3"></textarea>
      </p>
      <p>
        <label> 内容 </label>
        <textarea name="ncontent" cols="70" rows="10"></textarea>
      </p>
      <p>
        <label> 上传图片 </label>
        <input name="file" type="file" class="opt_input" />
      </p>
      <input name="action" type="hidden" value="addnews">
      <input type="submit" value="提交" class="opt_sub" />
      <input type="reset" value="重置" class="opt_sub" />
    </form>
  </div>
</div>
<div id="site_link"> <a href="#">关于我们</a><span>|</span> <a href="#">Aboue Us</a><span>|</span> <a href="#">联系我们</a><span>|</span> <a href="#">广告服务</a><span>|</span> <a href="#">供稿服务</a><span>|</span> <a href="#">法律声明</a><span>|</span> <a href="#">招聘信息</a><span>|</span> <a href="#">网站地图</a><span>|</span> <a href="#">留言反馈</a> </div>
<div id="footer">
  <p class="">24小时客户服务热线：010-68988888       <a href="#">常见问题解答</a>       新闻热线：010-627488888<br />
    文明办网文明上网举报电话：010-627488888        举报邮箱：<a href="#">jubao@jb-aptech.com.cn</a></p>
  <p class="copyright">Copyright © 1999-2009 News China gov, All Right Reserver<br />
    新闻中国   版权所有</p>
</div>
</body>
</html>

doadd:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    //设置编码方式
    request.setCharacterEncoding("utf-8");
    //接收表单提交过来的值
    String ntid=request.getParameter("ntid");
    String ntitle=request.getParameter("ntitle");
    String nauthor=request.getParameter("nauthor");
    String nsummary=request.getParameter("nsummary");
    String ncontent=request.getParameter("ncontent");
    String naddtime=new Date().toLocaleString();//取系统当前时间 
    /*主键：唯一且不为空
        1.标识列：触发器+序列 交给你们 
        2.取表主键的最大序号+1 
    */
    String URL="jdbc:oracle:thin:@localhost:1521:orcl";
    String CNAME="oracle.jdbc.driver.OracleDriver";
    Class.forName(CNAME);
    Connection con=DriverManager.getConnection(URL, "scott", "tiger");
    String sql="select nvl(max(nid),0) from news280";
    PreparedStatement ps=con.prepareStatement(sql);
    ResultSet rs=ps.executeQuery();
    int nid = 0;//扩大作用域
    if(rs.next()){
        nid=rs.getInt(1)+1;//最大序号+1
    }
    //实现增加=插入操作
    sql="insert into news280(nid,tid,ntitle,nauthor,nsummary,ncontent,naddtime) values(?,?,?,?,?,?,?)";    
    //执行sql语句
    ps=con.prepareStatement(sql);
    //给占位符赋值
    ps.setInt(1, nid);
    ps.setInt(2, Integer.parseInt(ntid));
    ps.setString(3, ntitle);
    ps.setString(4, nauthor);
    ps.setString(5, nsummary);
    ps.setString(6, ncontent);
    ps.setString(7, naddtime);
    
    //获得影响行数
    int n=ps.executeUpdate();
    
    //关闭资源
    if(con!=null&&!con.isClosed()){
        con.close();
    }
    if(ps!=null){
        ps.close();
    }
    if(rs!=null){
        rs.close();
    }
    
    //做判断
    if(n>0){//说明发表成功
        //新闻主界面
        response.sendRedirect("/web04/news/admin.jsp");
    }
    else{//说明发表失败
        out.print("<script>alert('发表失败');location.href='add.jsp';</script>");
    }
%>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。