天天看点

用户登录功能的简单实现用户登录功能的简单实现一、表单登录二、Ajax实现登陆

用户登录功能的简单实现

工具:eclipse、JQuery驱动:jquery-3.4.1.js、MySQL、MySQL连接驱动:mysql-connector-java-5.1.45.jar

1.eclipse创建Web项目

1)流程

File —>new —> Other… —>搜索Web —>Dynamic Web Project —>Next —>创建项目名称+2.5版本 —>Next —>Next —>修改站点名Content directory —>Finish —>如下示例图

2)图示

(1)选择创建File

File —>new —> Other…

用户登录功能的简单实现用户登录功能的简单实现一、表单登录二、Ajax实现登陆

(2)创建web项目

搜索Web —>Dynamic Web Project —>Next

用户登录功能的简单实现用户登录功能的简单实现一、表单登录二、Ajax实现登陆

(3)项目名称

创建项目名称+2.5版本 —>Next —>Next

用户登录功能的简单实现用户登录功能的简单实现一、表单登录二、Ajax实现登陆

(4)修改站点名

修改站点名Content directory —>Finish —>创建成功

用户登录功能的简单实现用户登录功能的简单实现一、表单登录二、Ajax实现登陆

3)表单登录与Ajax登录项目图

用户登录功能的简单实现用户登录功能的简单实现一、表单登录二、Ajax实现登陆

一、表单登录

1.前台

1)表单

设置:表单提交地址、表单类型、id属性值

2)表单元素

文本框 设置name和id属性值

密码框 设置name和id属性值

普通按钮 设置id属性值,绑定点击事件

3)表单校验

(1)获取表单元素的值

(2)判断表单元素的值是否为空

如果为空,显示提示信息;如果不为空,则提交表单。

2.后台

1)获取前台传递的姓名和密码

request.getParameter(“表单元素的name属性值”);

2)参数的非空校验

(姓名和密码)如果为空,请求转发跳转到登录页面,并return

3)查询用户对象

通过姓名和密码去数据库查询用户对象,返回用户对象(创建JavaBean User类)

JDBC的查询操作(创建DBUtil工具类)

(1)通过DBUtil工具类得到数据库连接

(2)定义sql语句

(3)预编译sql语句

(4)设置参数,下标从1开始

(5)执行查询,返回resultSet结果集

(6)判断并分析结果集,如果查询到数据,将数据填充到用户对象中

(7)关闭资源

(8)返回用户对象

注:需要**将mysql的jar包(驱动)拷贝到项目的WEB-INF的lib目录下 **

4)判断用户对象是否为空

​如果为空,表示账号密码不正确,登录失败,请求转发跳转到登录页面,并return

5)如果用户对象不为空

表示登录成功,重定向跳转到首页

3.前台代码 login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录</title>
</head>
<body>
	<!-- 表单登录  -->
	<form action="loginServlet" method="post" id="loginForm">
		姓名:<input type="text" name="uname" id="uname" /> <br/>
		密码:<input type="password" name="upwd" id="upwd" /> <br/>
		<button type="button" id="loginBtn">登录</button>
		&nbsp;<span id="msg" style="color:red;font-size:12px"></span>
	</form>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
	/**
		表单校验
			1、获取表单元素的值
			2、判断表单元素的值是否为空
				如果为空,显示提示信息
				如果不为空,则提交表单
	*/
	$("#loginBtn").click(function(){
		// 1、获取表单元素的值
		var uname = $("#uname").val();
		var upwd = $("#upwd").val();
		// 2、判断表单元素的值是否为空
		if (isEmpty(uname)) {
			// 如果为空,显示提示信息
			$("#msg").html("* 姓名不能为空!");
			return;
		}
		if (isEmpty(upwd)) {
			// 如果为空,显示提示信息
			$("#msg").html("* 密码不能为空!");
			return;
		}
		// 提交表单
		$("#loginForm").submit();
	});
	/**
	 *	判断字符串是否为空
	 		为空,返回true
	 		不为空,返回false
	 */
	function isEmpty(str) {
		if(str == null || str.trim() == "") {
			return true;
		}
		return false;
	}
</script>
</html>
           

4.后台代码

1)设置配置文件 db.properties

# 连接MYSQL数据库的配置文件 注:等号的前后不要写空格 
# 驱动名
jdbcName=com.mysql.jdbc.Driver
# 数据库连接 ( java是数据库的名称,可以任意设置)
dbUrl=jdbc:mysql://localhost:3306/Java?characterEncoding=utf-8
# 数据库的连接账号 (账号基本上都是root)
dbName=root
# 数据库的连接密码 (每个人的数据库密码可能不一致,需要修改)
dbPwd=root
           

2)封装数据库工具类 DBUtil.java

import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.Properties;
/*
 * 数据库的工具类
 * 	1、得到数据库连接
 * 	2、关闭资源
 */
public class DBUtil {
	// 定义配置对象
	private static Properties properties = new Properties();
	static {
		try {
			// 加载配置文件(输入流)
			InputStream in = DBUtil.class.getClassLoader().getResourceAsStream("db.properties");
			// 通过load()方法将输入流加载到配置文件对象中
			properties.load(in);
			// 通过配置对象的getProperty()方法得到驱动名,加载驱动
			Class.forName(properties.getProperty("jdbcName"));
		} catch (Exception e) {
			e.printStackTrace(); // 打印异常
		}
	}
	//得到数据库连接
	public static Connection getConnection() {
		Connection connection = null;
		try {
			// 得到数据库连接信息
			String dbUrl = properties.getProperty("dbUrl");
			String dbName  = properties.getProperty("dbName");
			String dbPwd  = properties.getProperty("dbPwd");
			// 得到数据库连接
			connection = DriverManager.getConnection(dbUrl,dbName,dbPwd);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return connection;
	}
	//关闭资源:当资源对象不为空时,关闭资源
	public static void close(ResultSet resultSet, PreparedStatement preparedStatement, Connection connection) {
		try {
			if (resultSet != null) {
				resultSet.close(); // 关闭资源
			}
			if (preparedStatement != null) {
				preparedStatement.close(); // 关闭资源
			}
			if (connection != null) {
				connection.close(); // 关闭资源
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}	
}
           

3)封装字符串非空判断工具类 StringUtil.java

//字符串工具类
public class StringUtil {
	/**
	 * 判断字符串是否为空
	 * 	为空,返回true
	 * 	不为空,返回false
	 */
	public static boolean isEmpty(String str) {
		if (str == null || "".equals(str.trim())) {
			return true;
		}
		return false;
	}
}
           

4)封装用户类 User.java

// 用户类
public class User {	
	private Integer userId; // 用户编号
	private String userName; // 用户姓名
	private String userPwd; // 用户密码
	//私有的属性提供公共的访问方式
	public Integer getUserId() {
		return userId;
	}
	public void setUserId(Integer userId) {
		this.userId = userId;
	}
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getUserPwd() {
		return userPwd;
	}
	public void setUserPwd(String userPwd) {
		this.userPwd = userPwd;
	}
}
           

5)登陆成功首页 index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆成功</title>
</head>
<body>
	<h2 style="color:red">欢迎登陆!</h2>
</body>
</html>
           

6)用户登陆 LoginServlet.java

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.shsxt.po.User;
import com.shsxt.util.DBUtil;
import com.shsxt.util.StringUtil;
/**
 * 用户登录
 */
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 设置请求编码
		request.setCharacterEncoding("UTF-8");
		// 1、获取前台传递的姓名和密码  	request.getParameter("表单元素的name属性值");
		String uname = request.getParameter("uname");
		String upwd = request.getParameter("upwd");
		// 2、参数的非空校验(姓名和密码)
		if (StringUtil.isEmpty(uname) || StringUtil.isEmpty(upwd)) {
			// 如果为空,请求转发跳转到登录页面,并return
			request.getRequestDispatcher("login.html").forward(request, response);
			return;
		}
		// 3、通过姓名和密码去数据库查询用户对象,返回用户对象(创建JavaBean User类)
		User user= findUserByNameAndPwd(uname,upwd);
		// 4、判断用户对象是否为空
		if (user == null) {
			// 如果为空,表示账号密码不正确,登录失败,请求转发跳转到登录页面,并return
			request.getRequestDispatcher("login.html").forward(request, response);
			return;
		}
		// 5、如果用户对象不为空  表示登录成功,重定向跳转到首页
		response.sendRedirect("index.html");
	}
	/*
	 * JDBC的查询操作(创建DBUtil工具类) 
			1、通过DBUtil工具类得到数据库连接
			2、定义sql语句
			3、预编译sql语句
			4、设置参数,下标从1开始
			5、执行查询,返回resultSet结果集
			6、判断并分析结果集
				如果查询到数据,将数据填充到用户对象中
			7、关闭资源
			8、返回用户对象
	 */
	private User findUserByNameAndPwd(String uname, String upwd) {
		User user = null;
		Connection connection = null;
		PreparedStatement preparedStatement = null;
		ResultSet resultSet = null;
		try {
			// 1、通过DBUtil工具类得到数据库连接
			connection = DBUtil.getConnection();
			// 2、定义sql语句
			String sql = "select * from t_user where userName = ? and userPwd = ?";
			// 3、预编译sql语句
			preparedStatement = connection.prepareStatement(sql);
			// 4、设置参数,下标从1开始
			preparedStatement.setString(1, uname);
			preparedStatement.setString(2, upwd);
			// 5、执行查询,返回resultSet结果集
			resultSet = preparedStatement.executeQuery();
			// 6、判断并分析结果集
			if (resultSet.next()) {
				// 如果查询到数据,将数据填充到用户对象中
				user = new User();
				user.setUserId(resultSet.getInt("userId"));
				user.setUserName(resultSet.getString("userName"));
				user.setUserPwd(resultSet.getString("userPwd"));
			}	
		} catch (Exception e) {
			e.printStackTrace(); //打印异常
		} finally {
			// 7、关闭资源
			DBUtil.close(resultSet, preparedStatement, connection);
		}
		// 8、返回用户对象
		return user;
	}
}
           

5.JAVA连接MySQL数据库

1)JDBC流程

JDBC的查询操作(创建DBUtil工具类)

1、通过DBUtil工具类得到数据库连接

2、定义sql语句

3、预编译sql语句

4、设置参数,下标从1开始

5、执行查询,返回resultSet结果集

6、判断并分析结果集,如果查询到数据,将数据填充到用户对象中

7、关闭资源

8、返回用户对象

2)代码

private User findUserByNameAndPwd(String uname, String upwd) {
		User user = null;
		Connection connection = null;
		PreparedStatement preparedStatement = null;
		ResultSet resultSet = null;
		try {
			// 1、通过DBUtil工具类得到数据库连接
			connection = DBUtil.getConnection();
			// 2、定义sql语句
			String sql = "select * from t_user where userName = ? and userPwd = ?";
			// 3、预编译sql语句
			preparedStatement = connection.prepareStatement(sql);
			// 4、设置参数,下标从1开始
			preparedStatement.setString(1, uname);
			preparedStatement.setString(2, upwd);
			// 5、执行查询,返回resultSet结果集
			resultSet = preparedStatement.executeQuery();
			// 6、判断并分析结果集
			if (resultSet.next()) {
				// 如果查询到数据,将数据填充到用户对象中
				user = new User();
				user.setUserId(resultSet.getInt("userId"));
				user.setUserName(resultSet.getString("userName"));
				user.setUserPwd(resultSet.getString("userPwd"));
			}	
		} catch (Exception e) {
			e.printStackTrace(); //打印异常
		} finally {
			// 7、关闭资源
			DBUtil.close(resultSet, preparedStatement, connection);
		}
		// 8、返回用户对象
		return user;
}
           

二、Ajax实现登陆

1.前台

1)表单元素

文本框 设置id属性值

密码框 设置id属性值

普通按钮 设置id属性值,绑定点击事件

2)非空校验

(1)获取表单元素的值

(2)判断表单元素的值是否为空

如果为空,显示提示信息;如果不为空,则发送ajax请求

2.后台

1)获取前台传递的参数

2)参数的非空校验

(姓名和密码)如果为空,需要通过输出流将结果响应给ajax的回调函数,并return

3)查询用户对象

通过姓名和密码去数据库查询用户对象,返回用户对象(创建JavaBean User类)

JDBC的查询操作(创建DBUtil工具类)

(1)通过DBUtil工具类得到数据库连接

(2)定义sql语句

(3)预编译sql语句

(4)设置参数,下标从1开始

(5)执行查询,返回resultSet结果集

(6)判断并分析结果集,如果查询到数据,将数据填充到用户对象中

(7)关闭资源

(8)返回用户对象

注:需要**将mysql的jar包(驱动)拷贝到项目的WEB-INF的lib目录下 **

4)判断用户对象是否为空

​ 如果为空,需要通过输出流将结果响应给ajax的回调函数,并return

5)如果用户对象不为空

​ 表示登录成功,需要通过输出流将结果响应给ajax的回调函数

3.前台代码 login2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录</title>
</head>
<body>
	<!-- Ajax实现登录  -->
	姓名:<input type="text"  id="uname" /> <br/>
	密码:<input type="password" id="upwd" /> <br/>
	<button type="button" id="loginBtn">登录</button>
	&nbsp;<span id="msg" style="color:red;font-size:12px"></span>
</body>
<script type="text/javascript" src="js/jquery-3'.4.1.js"></script>
<script type="text/javascript">
	/**
		非空校验
			1、获取表单元素的值
			2、判断表单元素的值是否为空
				如果为空,显示提示信息;如果不为空,则发送ajax请求
	*/
	$("#loginBtn").click(function(){
		// 1、获取表单元素的值
		var uname = $("#uname").val();
		var upwd = $("#upwd").val();
		// 2、判断表单元素的值是否为空
		if (isEmpty(uname)) {
			// 如果为空,显示提示信息
			$("#msg").html("* 姓名不能为空!");
			return;
		}
		if (isEmpty(upwd)) {
			// 如果为空,显示提示信息
			$("#msg").html("* 密码不能为空!");
			return;
		}
		// 发送ajax请求
		$.ajax({
			type:"post", // 请求类型 GET|POST
			url:"loginServlet02", // 请求路径
			data:{ // 需要传递给后台的参数
				"uname":uname,
				"upwd":upwd
			},
			success:function(result){ // 回调函数:用来接收后台返回的结果
				/*
					需要得到数据:
						成功或失败	 1=成功,0=失败
						为什么失败	   字符串:错误原因
						{
							code:0,
							msg:"xxx失败"
						}
			 	 */
			 	 // 判断是否登录成功
			 	 if (result.code == 1) { // 登录成功
			 		 // 通过js跳转页面
			 		 window.location.href = "index.html";
			 	 } else {
			 		 // 登录失败
			 		 // 设置提示信息
			 		 $("#msg").html(result.msg);
			 	 }
			}
		});
	});
	/**
	 *	判断字符串是否为空
	 		为空,返回true
	 		不为空,返回false
	 */
	function isEmpty(str) {
		if(str == null || str.trim() == "") {
			return true;
		}
		return false;
	}
</script>
</html>
           

4.后台代码

工具类代码 是共用之前封装好的代码,实现java面向对象编程思想

1)用户登录 LoginServlet2.java

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.shsxt.po.User;
import com.shsxt.util.DBUtil;
import com.shsxt.util.StringUtil;
/*
* Ajax实现登陆
*/
public class LoginServlet02 extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("用户登录...");
		// 设置请求编码
		request.setCharacterEncoding("UTF-8");
		// 1、获取前台传递的姓名和密码  	request.getParameter("ajax的data对象的键");
		String uname = request.getParameter("uname");
		String upwd = request.getParameter("upwd");
		// 设置响应类型(json格式:application/json)及编码格式
		response.setContentType("application/json;charset=UTF-8");
		// 2、参数的非空校验(姓名和密码)
		if (StringUtil.isEmpty(uname) || StringUtil.isEmpty(upwd)) {
			// 输出结果给ajax的回调函数
			response.getWriter().write("{\"code\":0,\"msg\":\"用户姓名和密码不能为空!\"}");
			return;
		}
		// 3、通过姓名和密码去数据库查询用户对象,返回用户对象(创建JavaBean User类)
		User user= findUserByNameAndPwd(uname,upwd);
		// 4、判断用户对象是否为空
		if (user == null) {
			// 输出结果给ajax的回调函数
			response.getWriter().write("{\"code\":0,\"msg\":\"用户姓名或密码不正确!\"}");
			return;
		}
		// 5、如果用户对象不为空  表示登录成功
		// 输出结果给ajax的回调函数
		response.getWriter().write("{\"code\":1,\"msg\":\"登录成功!\"}");
	}
	/*
	 * JDBC的查询操作(创建DBUtil工具类) 
			1、通过DBUtil工具类得到数据库连接
			2、定义sql语句
			3、预编译sql语句
			4、设置参数,下标从1开始
			5、执行查询,返回resultSet结果集
			6、判断并分析结果集
				如果查询到数据,将数据填充到用户对象中
			7、关闭资源
			8、返回用户对象
	 */
	private User findUserByNameAndPwd(String uname, String upwd) {
		User user = null;
		Connection connection = null;
		PreparedStatement preparedStatement = null;
		ResultSet resultSet = null;		
		try {
			// 1、通过DBUtil工具类得到数据库连接
			connection = DBUtil.getConnection();
			// 2、定义sql语句
			String sql = "select * from t_user where userName = ? and userPwd = ?";
			// 3、预编译sql语句
			preparedStatement = connection.prepareStatement(sql);
			// 4、设置参数,下标从1开始
			preparedStatement.setString(1, uname);
			preparedStatement.setString(2, upwd);
			// 5、执行查询,返回resultSet结果集
			resultSet = preparedStatement.executeQuery();
			// 6、判断并分析结果集
			if (resultSet.next()) {
				// 如果查询到数据,将数据填充到用户对象中
				user = new User();
				user.setUserId(resultSet.getInt("userId"));
				user.setUserName(resultSet.getString("userName"));
				user.setUserPwd(resultSet.getString("userPwd"));
			}		
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			// 7、关闭资源
			DBUtil.close(resultSet, preparedStatement, connection);
		}
		// 8、返回用户对象
		return user;
	}
}