javaweb实现简单注册登录功能——（登录）

首页的图和代码在注册篇已经码上了，这里就不再赘述✌。

——登录页面：
在这里插入图片描述

❀相比注册页面，登录页面减少了反馈信息，增加了验证码验证功能。为了便于选择注册登录页面，我在登录页面也添加了返回首页的链接。

登录页面代码：

<%@ page contentType="text/html;charset=GB2312" %>
<%@page language="java" import="java.util.*" import="javax.servlet.http.*" import="myservlet.control.HandleCode"%>
<jsp:useBean id="loginBean" class="mybean.data.Login" scope="session"/>
<HTML>
<title>登录页面</title>
<HEAD>
</HEAD>
<BODY style="background:url(image/放风筝.jpg) ;background-size:cover; ">
<br>
<a href="shouye.jsp"><img src="image/箭头.png"/>回到首页</a>
<div align="center">
<br>
<br>
<br>
<FORM action="loginServlet" Method="post" name="loginForm">
登录名称:&nbsp<Input type=text name="logname" onInput="lognameChange()">
<span id="lognameText"></span><span id="loginInfo"></span><br><br>
输入密码:&nbsp<Input type=password name="password" onInput="passwordChange()">
<span id="passwordText"></span><br><br>
验证码：&nbsp&nbsp&nbsp<input type="text" name="code" size="10" onInput="validate()">
<img name="imgValidate" onclick="refresh()" border=0 src="code.jsp"></img>
<span id="codeText" name="codeText" style="color:green"></span><br><br>
<input type="submit" value="提交" style="background:url(imagepath) no-repeat">
<Input type=reset name="g" value="重置" style="background:url(imagepath) no-repeat">
</form>

</div >
<script type="text/javascript">
function lognameChange(){
	var str=loginForm.logname.value;
	var reg=/[a-zA-Z0-9]{4,16}/;
	if(reg.test(str)){
		lognameText.innerHTML="√";
		lognameText.style.color="green";
	}
	else{
		lognameText.innerHTML="账号为4位以上规定字符";
		lognameText.style.color="red";		
	}
}
function passwordChange(){
	var str=loginForm.password.value;
	var reg=/^[x00-x7f]+$/;
	if(reg.test(str)&&str.length>4&&str.length<17){
		passwordText.innerHTML="√";
		passwordText.style.color="green";
	}else{
		passwordText.innerHTML="密码是4位以上字符";
		passwordText.style.color="red";
	}
}

function refresh(){
	loginForm.imgValidate.src="code.jsp"+"?id"+Math.random();
}

//AJAX
function validate(){
	var code=loginForm.code.value;
	var xmlHttp=new XMLHttpRequest();
	var url="codeServlet?code="+ code;
	xmlHttp.open("POST", url,true);
	xmlHttp.onreadystatechange=function(){
		if(xmlHttp.readyState==4){
			codeText.innerHTML=xmlHttp.responseText;
		}else{
			codeText.innerHTML="正在验证......";
		}
	}
	xmlHttp.send();
}

</script>
</BODY>
</HTML>

——登录操作实现后端代码：
servlet：

package myservlet.control;
import mybean.data.*;
import java.sql.*;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.util.*;

public class HandleLogin extends HttpServlet{
	
   public void init(ServletConfig config) throws ServletException {
	   super.init(config);
	   try { 
		   Class.forName("com.mysql.jdbc.Driver");
		   }
	   catch(Exception e){} 
	   }
   
   public String handleString(String s){
	   try{ 
		   byte bb[]=s.getBytes("iso-8859-1");
		   s=new String(bb);
		   }
	   catch(Exception ee){} 
	   return s;  
	   }
   
   public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
	   Connection con; 
	   Statement sql; 
	   String logname=request.getParameter("logname").trim(),		//trim() 函数用于去除字符串两端的空白字符。
			   password=request.getParameter("password").trim();
	   logname=handleString(logname);
	   password=handleString(password);
	   String uri="jdbc:mysql://127.0.0.1/toy_db?"+ "user=root&password=123456&characterEncoding=gb2312";
	   boolean boo=(logname.length()>3)&&(password.length()>3);  
	   try{ 
		   con=DriverManager.getConnection(uri);
		   String condition="select * from client where logname = '"+logname+"' and password ='"+password+"'";
		   sql=con.createStatement();  
		   if(boo){
			   ResultSet rs=sql.executeQuery(condition);
			   boolean m=rs.next();
			   
			   
			   Code codeBean=null;
			   HttpSession session=request.getSession(true);
			   codeBean=(Code)session.getAttribute("codeBean");
			   String code=codeBean.getCode();
			   
			   if(!code.equals("√")){
				   String backNews="验证码错误！";
				   fail(request,response,logname,backNews);	   
			   }
			   else{
			   if(m==true){ 
				   //调用登录成功的方法:
				   success(request,response,logname,password); 
				   RequestDispatcher dispatcher=request.getRequestDispatcher("/login_sucess.jsp");//转发
				   dispatcher.forward(request,response);
				  
				   }
			   else{
				   String backNews="您输入的用户名不存在，或密码不般配";
				   //调用登录失败的方法:
				   fail(request,response,logname,backNews);				   
              }
			   
			   
			   }
			   
           }
		   else{
			   String backNews="请输入用户名和密码";
			   fail(request,response,logname,backNews);
			   }
		   con.close();
		   }
	   catch(SQLException exp){
		   String backNews=""+exp;
		   fail(request,response,logname,backNews);
		   }
	   }
   
   public  void  doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{
	   doPost(request,response); 
	   }
   
   public void success(HttpServletRequest request,HttpServletResponse response,String logname,String password) {
	   Login loginBean=null;
	   HttpSession session=request.getSession(true);
	   try{  loginBean=(Login)session.getAttribute("loginBean");
	   if(loginBean==null){
		   loginBean=new Login();  //创建新的数据模型 
		   session.setAttribute("loginBean",loginBean);
		   loginBean=(Login)session.getAttribute("loginBean");
		   }
	   String name =loginBean.getLogname();
	   if(name.equals(logname)) {
		   loginBean.setBackNews(logname+"已经登录了");
		   loginBean.setLogname(logname);
		   }
	   else {  //数据模型存储新的登录用户
		   loginBean.setBackNews(logname+"登录成功");
		   loginBean.setLogname(logname);
		 
		   }
	   }
	   catch(Exception ee){
		   loginBean=new Login();  
		   session.setAttribute("loginBean",loginBean);
		   loginBean.setBackNews(logname+"登录成功");
		   loginBean.setLogname(logname);
		   }
	  
	   }
   
    public void fail(HttpServletRequest request,HttpServletResponse response,String logname,String backNews) {
    	response.setContentType("text/html;charset=GB2312");
    	try {
    		PrintWriter out=response.getWriter();
    		out.println("<html><body>");
    		out.println("<h2>"+logname+"登录反馈结果<br>"+backNews+"</h2>") ;
    		out.println("返回登录页面或首页<br>");
    		out.println("<a href =login.jsp>登录页面</a>");
    		out.println("<br><a href =shouye.jsp>首页</a>");
    		out.println("</body></html>");
    		}
    	catch(IOException exp){}
    	}
    }

在这里插入图片描述
这里是为了判断用户是否已经登录，如果已经登录，loginbean中会有用户的相关信息（loginbean是Login的对象），如果没有则创建新的数据模型。

bean：

package mybean.data;
import java.util.*;
import java.util.Date;

public class Login {
   private String logname="",
          backNews="",
          password;
   public void setLogname(String logname){  
      this.logname = logname;
   }
   public String getLogname(){
      return logname;
   }
   public void setPassword(String password){  
	      this.password = password;
	   }
	   public String getPassword(){
	      return password;
	   }
   public void setBackNews(String s) {
      backNews = s;
   } 
   public String getBackNews(){
      return backNews;
   }
   
}

❀bean基本都是数据库中相关属性的set、 get方法，可以右键直接生成哦✌，方便好多。

——验证码代码实现：

<%@ page language="java" import="java.util.*" contentType="text/html;charset=GB2312" %>
<%@ page import="java.awt.*" import="java.awt.image.BufferedImage" import="javax.imageio.ImageIO" %>
<html>
<body>
<%
	response.setHeader("Cache-Control", "no-cache");
	//在内存中创建图像
	int width = 60,height = 20;
	BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
	//获取画笔
	Graphics g = image.getGraphics();
	//设置背景色
	g.setColor(new Color(200,200,200));
	g.fillRect(0,0,width,height);
	//随机产生验证码
	Random rnd = new Random();
	int randNum = rnd.nextInt(8999) + 1000;
	String randStr = String.valueOf(randNum);
	//将验证码存入session
	session.setAttribute("randStr",randStr);
	//将验证码显示在图像中
	g.setColor(Color.black);
	g.setFont(new Font("",Font.PLAIN,20));
	g.drawString(randStr,10,17);
	//随机产生100个随机点
	for(int i=0;i<100;i++){
		int x = rnd.nextInt(width);
		int y = rnd.nextInt(height);
		g.drawOval(x,y,1,1);
	}
	//输出图像到页面
	ImageIO.write(image,"JPEG", response.getOutputStream());
	out.clear();
	out = pageContext.pushBody();
%>
</body>
</html>

package myservlet.control;
import mybean.data.Code;
import mybean.data.Login;

import java.io.IOException;
import java.io.PrintWriter;
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;
 
public class HandleCode extends HttpServlet {
	//对验证码验证
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//得到提交的验证码
		String code = request.getParameter("code");
		//获取session中的验证码
		HttpSession session = request.getSession();
		String randStr = (String)session.getAttribute("randStr");
		response.setContentType("text/html;charset=GB2312");
		PrintWriter out = response.getWriter();
		
		Code codeBean=new Code();
		session.setAttribute("codeBean",codeBean);
		codeBean=(Code)session.getAttribute("codeBean");
		
		if(!code.equals(randStr)){
			out.println(" ");
			codeBean.setCode(" ");
		}
		else{
			out.print("√");
			codeBean.setCode("√");
		}
	}
}

package mybean.data;

public class Code {
	String code="";
	
	 public void setCode(String code){  
	      this.code=code;
	   }
	   public String getCode(){  
	      return code;
	   }
}

xml配置：
在xml文件中加入以下代码：

<servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>loginServlet</servlet-name>
    <servlet-class>myservlet.control.HandleLogin</servlet-class>
  </servlet>

 <servlet-mapping>
    <servlet-name>loginServlet</servlet-name>
    <url-pattern>/loginServlet</url-pattern>
  </servlet-mapping>

在这里插入图片描述

❀登录成功之后设置直接跳转到个人中心

在这里插入图片描述

❀登录失败跳出反馈结果页面，这是在servlet中设置的。除了密码不正确之外还有验证码不正确等造成登录不成功的信息反馈。

在这里说一下，因为是第一次写web，有些代码是重复书写了的，比如数据库连接的代码不一定要在每一个servlet中写上，可以写在一个单独的文件中，用到时再调用他。

❀代码虽然过于粗糙，但是学过基础知识的还是能够理解的✌。希望能对新手入门有所帮助✌。

霓裳cc

发布了30 篇原创文章 · 获赞 12 · 访问量 1277

私信关注

javaweb实现简单注册登录功能——（登录）

猜你喜欢