用户登录功能的简单实现
工具：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…
(2)创建web项目
搜索Web —>Dynamic Web Project —>Next
(3)项目名称
创建项目名称+2.5版本 —>Next —>Next
(4)修改站点名
修改站点名Content directory —>Finish —>创建成功
3)表单登录与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>
<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>
<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;
}
}
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
