javaWeb验证码&登录&新闻增加

最新推荐文章于 2022-03-30 21:49:55 发布

糖心何包蛋·

最新推荐文章于 2022-03-30 21:49:55 发布

阅读量188

点赞数

分类专栏：前端文章标签： web

本文链接：https://blog.csdn.net/hmjcxy/article/details/123835115

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

今天简单的说一下验证码&登录&新闻增加，我分为了这三点

1、完成简易验证码的制作
2、完成登录
3、完成新闻的增加

先来完成一下简易的验证码制作，给大家看看代码，先给他定义一个容器，然后把样式出来

			 <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>

现在验证码是非常实用的，比如我们要登录某些账号是都会让你填写验证码，所以我们先设置一个简单的验证码，接下来看看验证码的方法

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(){
		myf();
		//给验证码添加点击事件
		$("#yzm").click(function(){
			myf();//刷新验证码
		});
	})

这串代码写上去之后呢，你的图片就可以进行点击切换了，若小伙伴想换种方式点击刷新，可以自己添加，然后添加事件后就可以进行刷新了

现在说登录，登录大家应该都比较常见，基本上什么app都有登录账户这个，首先呢我们得弄个样式出来，代码如下

<body>
	<form action="dologin.jsp" method="post" onsubmit="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" />&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 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>

这代码就是这样的

做的比较简单现在就是要拿到值，代码如下，还是和之前一样的

//设置编码方式
	request.setCharacterEncoding("utf-8");
	//接收表单提交过来的值:用户名 密码  根据name值取value值 
	String name=request.getParameter("aa");
	String pwd=request.getParameter("bb");

那么接下来就是连接oracle了，上篇文章有和大家说过连接的，那我就把代码放上去了

//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 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()){
		//说明登录成功 跳转到新闻发布系统的管理员界面 
		//重定向
		//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();
	}

新闻增加简单的和大家说一下，因为我们的图片，类，name，有很多不一致，那我简单的发一下增加的代码（仅供参考）

<%
	//设置编码方式
	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();//取系统当前时间 

    //连接jdbc
	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("/javaWeb04/news/admin.jsp");
	}
	else{//说明发表失败
		out.print("<script>alert('发表失败');location.href='add.jsp';</script>");
	}
	
	
	
	 
%>

好的今天的分享到此为止