JavaWeb 04(验证码&登录&新闻增加)

雨沐笙

已于 2022-03-30 00:19:10 修改

阅读量839

点赞数 1

文章标签： java 前端 jquery javascript

于 2022-03-29 23:59:24 首次发布

本文链接：https://blog.csdn.net/m0_62604616/article/details/123833827

版权

前言：

嗨咯，又见面了，今天给大家带来是有关于验证码、登录、还有新闻增加的示例，由于没有准备好思维导图，所以今天就先不带大家看了我们直接进入主题

以下内容中的示例可以供参考

1、验证码：

界面：

界面代码：

<body>
    <form action="dologin.jsp" method="post" onsubmit="return yzLogin()">
        <div id="login">
            <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" />&nbsp;&nbsp;
					     <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>
</body>

要求：验证码每一次输入错误，都会刷新验证码、不区分大小写、用户名和密码框、验证码不能为空

思路：设置一个随机数，在拿到文本框里的内容，转为全大写，再进行和验证码对比，最后递归调用自己

代码块：

<!-- 引入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();
		var pwd=$("#yy").val();
		var yzm1=$("#zz").val();
		var as=yzm1.toUpperCase();//转为大写
		var yzm2=$("#yzm").html();
		if(name==""){
			alert("用户名不能为空");
			return false;
		}
		if(pwd==""){
			alert("密码不能为空");
			return false;
		}
		if(yzm1==""){
			alert("验证码不能为空");
			return false;
		}
		else{//当验证码不为空的情况下
			//作业1：要求验证码不区分大小写 
			if(as!=yzm2){//不一致的时候 提示
				alert("验证码有误");
				myf();//刷新验证码
				$("#zz").val("");//清空文本框
				return false;
			}
		}
		return true;
	}
</script>

效果：

2、登录

登录这边我们就需要连接数据库了，从数据库中拿值然后对比用户输入的用户和密码是否一致

数据库用户表中已有数据

代码块：

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="oracle.jdbc.driver.OracleDriver"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
		
	//设置编码方式
	request.setCharacterEncoding("utf-8");
	//接收表单提交过来的值
	String name=request.getParameter("iname");
	String pwd=request.getParameter("ipwd");

	//两个常量
	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_yh where yname=? and ypwd=? ";
	
	//获得执行对象
	PreparedStatement ps=con.prepareStatement(sql);
	
	//给占位符赋值
	ps.setString(1, name);
	ps.setString(2,pwd);
	
	ResultSet rs=ps.executeQuery();
	
	//判断
	if(rs.next()){
		request.getRequestDispatcher("zhujiem.jsp").forward(request, response);
	}
	else{
		out.print("<script>alert('用户名或者密码有误');location.href='dengl.jsp';</script>");
	}
	//关闭资源
	if(con!=null&&!con.isClosed()){//不为空且没有关
		con.close();
	}
	if(ps!=null){
		ps.close();
	}
	if(rs!=null){
		rs.close();
	}
%>

效果：

三、增加新闻

增加的新闻要再数据库中也可以看见，以下图是数据库表中原有的数据

界面图片：

代码块：

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="oracle.jdbc.driver.OracleDriver"%>
<%@page import="java.util.Date"%>
<%@ 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();//取系统当前时间 

	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="insert into tb_fb(tid,ntitle,nauthor,nsummary,ncontent,naddtime) values(?,?,?,?,?,?)";	
	PreparedStatement ps=con.prepareStatement(sql);
	ps.setInt(1, Integer.parseInt(ntid));
	ps.setString(2, ntitle);
	ps.setString(3, nauthor);
	ps.setString(4, nsummary);
	ps.setString(5, ncontent);
	ps.setString(6, naddtime);
	
	//获得影响行数
	int n=ps.executeUpdate();
	
	//关闭资源
	if(con!=null&&!con.isClosed()){
		con.close();
	}
	if(ps!=null){
		ps.close();
	}
	
	if(n>0){
		//新闻主界面
		response.sendRedirect("/s4/zjm.jsp");
	}
	else{//说明发表失败
		out.print("<script>alert('发表失败');location.href='fb.jsp';</script>");
	}
		
%>

效果：