web开发 jsp页面5 用户登录

最新推荐文章于 2023-03-25 16:05:59 发布

Sermiscry

最新推荐文章于 2023-03-25 16:05:59 发布

阅读量858

点赞数

分类专栏： web 文章标签： jsp

本文链接：https://blog.csdn.net/Sermisry/article/details/122052475

版权

web 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

文章目录

思路
controller(Servlet)
service
login.jsp
welcome.jsp(登录成功重定向页面)

思路

用户登录
	1. 数据库创建对应的用户表  tb_user`(MySQL)
	2. 前台页面
		登录页面 login.jsp
		首页         index.jsp
			用户登录 JS校验
				登录表单验证
					1. 给登录按钮绑定事件
					2. 获取用户姓名密码的值
					3. 判断姓名是否为空
						如果姓名为空，提示用户(span标签赋值)，并且return
					4. 判断密码是否为空
						如果密码为空，提示用户...
					5. 如果都不为空，则手动提交表单
	3. 后台实现
		登录功能
			思想：
				1. 接受客户端的请求（接收参数：姓名、密码）
				2. 参数的非空判断
					如果参数为空
						通过消息模型对象返回结果（设置成功状态、设置提示信息、回显数据）
						将消息模型对象设置到request作用域中
						请求转发跳转到登陆页面
						return
				3. 通过用户姓名查询用户对象（通过用户名查询用户对象）
				4. 判断用户对象是否为空
					如果为空
						通过消息模型对象返回结果（设置成功状态、设置提示信息、回显数据）
						将消息模型对象设置到request作用域中
						请求转发跳转到登陆页面
						return
				5. 将数据库中查询到的用户密码与前台传递的密码作比较
					如果不相等
						通过消息模型对象返回结果（设置成功状态、设置提示信息、回显数据）
						将消息模型对象设置到request作用域中
						请求转发跳转到登陆页面
						return
					如果相等，表示登陆成功
						将用户信息设置到session作用域中
						重定向跳转到首页

controller层（用来接受请求响应结果）
1. 接受客户端的请求（接收参数：姓名、密码）
2. 调用service层的方法，返回消息模型对象
3. 判断消息模型的状态码
如果状态码是失败
将消息模型对象设置到request作用域中，请求转发跳转到login.jsp
如果状态码是成功
将消息模型中的用户信息设置到session作用域中，重定向跳转到index.jsp
service层（业务逻辑）
1. 参数的非空判断
如果参数为空
将状态码、提示信息、回显数据设置到消息模型对象中，返回消息对象
2. 调用dao层的查询方法，通过用户名查询用户对象
3. 判断用户对象是否为空
将状态码、提示信息、回显数据设置到消息模型对象中，返回消息对象
4. 判断数据库中查询到的用户密码与前台传递过来的密码做比较
如果不相等，将状态码、提示信息、回显数据设置到消息模型对象中，返回消息对象
5. 登陆成功。将成功状态、提示信息、用户对象设置消息模型对象，并return
mapper层（Dao层）
定义对应的接口

分层思想(解耦：高内聚低耦合)
1. controller层
接受请求
(调用service层，返回结果)
响应结果
2. service层
业务逻辑判断
3. dao(mapper)层
接口类
mapper.xml mybatis与数据库的相关操作
4. entity(po/model)类
JavaBean实体
5. util类
工具类(通用的方法/类)
6. test类
测试类/方法

mysql.properties里面
mysql5.7 com.mysql.jdbc.Driver
mysql7 com.mysql.cj.jdbc.Driver

url=jdbc:mysql://127.0.0.1:3306/java_test?serverTimezone=UTC&useSSL=false&characterEncoding=UTF-8
这里java_test部分是自己的数据库名字

controller(Servlet)

package com.tyut.edu.service;

import org.apache.ibatis.session.SqlSession;

import com.tyut.edu.entity.User;
import com.tyut.edu.entity.vo.MessageModel;
import com.tyut.edu.mapper.UserMapper;
import com.tyut.edu.util.GetSqlSession;
import com.tyut.edu.util.StringUtil;

/**
 * 
* <p>Title: UserService</p>
* <p>Description: 业务逻辑</p>
* @author Sermiscry
* @date 2021年12月20日
 */
public class UserService {
	/**
	 * 用户登录
	* <p>Title: userLogin</p>
	* <p>Description: </p>
	* @param uname
	* @param upwd
	* @return
	* `service`层（业务逻辑）
		1. 参数的非空判断
			如果参数为空
				将状态码、提示信息、回显数据设置到消息模型对象中，返回消息对象
		2. 调用dao层的查询方法，通过用户名查询用户对象
		3. 判断用户对象是否为空
			将状态码、提示信息、回显数据设置到消息模型对象中，返回消息对象
		4. 判断数据库中查询到的用户密码与前台传递过来的密码做比较
			如果不相等，将状态码、提示信息、回显数据设置到消息模型对象中，返回消息对象
		5. 登陆成功。将成功状态、提示信息、用户对象设置消息模型对象，并return
	 */
	public MessageModel userLogin(String uname, String upwd) {
		MessageModel messageModel = new MessageModel();
		
		//回显数据
		User u = new User();
		u.setUsername(uname);
		u.setUserPwd(upwd);
		messageModel.setObject(u);
		
		//1. 参数的非空判断
		if(StringUtil.isEmpty(uname) || StringUtil.isEmpty(upwd)) {
			//将状态码、提示信息、回显数据设置到消息模型对象中，返回消息对象
			messageModel.setCode(0);
			messageModel.setMsg("用户姓名和密码不能为空");
			return messageModel;
		}
		
		//2. 调用dao层的查询方法，通过用户名查询用户对象
		SqlSession session = GetSqlSession.createSqlSession();
		UserMapper userMapper = session.getMapper(UserMapper.class);
		User user = userMapper.queryUserByName(uname);
		
		//3. 判断用户对象是否为空
		if(user == null) {
			//将状态码、提示信息、回显数据设置到消息模型对象中，返回消息对象
			messageModel.setCode(0);
			messageModel.setMsg("用户不存在");
			return messageModel;
		}
		
		//4. 判断数据库中查询到的用户密码与前台传递过来的密码做比较
		if (!upwd.equals(user.getUserPwd())) {
			//如果不相等，将状态码、提示信息、回显数据设置到消息模型对象中，返回消息对象
			messageModel.setCode(0);
			messageModel.setMsg("用户密码不正确");
			return messageModel;
		}
		//5. 登陆成功。将用户信息设置到消息模型中
		messageModel.setObject(user);
		
		return messageModel;
	}

}

service

package com.tyut.edu.service;

import org.apache.ibatis.session.SqlSession;

import com.tyut.edu.entity.User;
import com.tyut.edu.entity.vo.MessageModel;
import com.tyut.edu.mapper.UserMapper;
import com.tyut.edu.util.GetSqlSession;
import com.tyut.edu.util.StringUtil;

/**
 * 
* <p>Title: UserService</p>
* <p>Description: 业务逻辑</p>
* @author Sermiscry
* @date 2021年12月20日
 */
public class UserService {
	/**
	 * 用户登录
	* <p>Title: userLogin</p>
	* <p>Description: </p>
	* @param uname
	* @param upwd
	* @return
	* `service`层（业务逻辑）
		1. 参数的非空判断
			如果参数为空
				将状态码、提示信息、回显数据设置到消息模型对象中，返回消息对象
		2. 调用dao层的查询方法，通过用户名查询用户对象
		3. 判断用户对象是否为空
			将状态码、提示信息、回显数据设置到消息模型对象中，返回消息对象
		4. 判断数据库中查询到的用户密码与前台传递过来的密码做比较
			如果不相等，将状态码、提示信息、回显数据设置到消息模型对象中，返回消息对象
		5. 登陆成功。将成功状态、提示信息、用户对象设置消息模型对象，并return
	 */
	public MessageModel userLogin(String uname, String upwd) {
		MessageModel messageModel = new MessageModel();
		
		//回显数据
		User u = new User();
		u.setUsername(uname);
		u.setUserPwd(upwd);
		messageModel.setObject(u);
		
		//1. 参数的非空判断
		if(StringUtil.isEmpty(uname) || StringUtil.isEmpty(upwd)) {
			//将状态码、提示信息、回显数据设置到消息模型对象中，返回消息对象
			messageModel.setCode(0);
			messageModel.setMsg("用户姓名和密码不能为空");
			return messageModel;
		}
		
		//2. 调用dao层的查询方法，通过用户名查询用户对象
		SqlSession session = GetSqlSession.createSqlSession();
		UserMapper userMapper = session.getMapper(UserMapper.class);
		User user = userMapper.queryUserByName(uname);
		
		//3. 判断用户对象是否为空
		if(user == null) {
			//将状态码、提示信息、回显数据设置到消息模型对象中，返回消息对象
			messageModel.setCode(0);
			messageModel.setMsg("用户不存在");
			return messageModel;
		}
		
		//4. 判断数据库中查询到的用户密码与前台传递过来的密码做比较
		if (!upwd.equals(user.getUserPwd())) {
			//如果不相等，将状态码、提示信息、回显数据设置到消息模型对象中，返回消息对象
			messageModel.setCode(0);
			messageModel.setMsg("用户密码不正确");
			return messageModel;
		}
		//5. 登陆成功。将用户信息设置到消息模型中
		messageModel.setObject(user);
		
		return messageModel;
	}

}

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>用户登录</title>
</head>
<body>
	<div style="text-align: center">
	<%--这里的login就直接去了UserServlet里面的WebServlet了，想了好久才想明白 --%>
		<form action="login" method="post" id="loginForm">
			姓名：<input type="text" name="uname" id="uname" value="${messageModel.object.userName}"><br>
			密码：<input type="password" name="upwd" id="upwd" value="${messageModel.object.userPwd}"><br>
			<span id="msg" style="font-size:12px; color:red">${messageModel.msg}</span><br>
			<button type="button" id="loginBtn">登录</button>
			<button type="button">注册</button>
		</form>
	</div>
	<%--引入Jquery的js文件 --%>
	<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
	<script type="text/javascript">
		/**
		登录表单验证
			1. 给登录按钮绑定事件(通过ID选择器绑定)
			2. 获取用户姓名密码的值
			3. 判断姓名是否为空
				如果姓名为空，提示用户(span标签赋值)，并且return
			4. 判断密码是否为空
				如果密码为空，提示用户...
			5. 如果都不为空，则手动提交表单
		*/
		$("#loginBtn").click(function() {
			//获取用户姓名密码的值
			var uname = $("#uname").val();
			var upwd = $("#upwd").val();
			//判断姓名是否为空
			if(isEmpty(uname)) {
				//如果姓名为空，提示用户(span标签赋值)，并且return
				$("#msg").html("用户姓名不能为空");
				return;
			}
			//判断密码是否为空
			if(isEmpty(upwd)) {
				//如果密码为空，提示用户(span标签赋值)，并且return
				$("#msg").html("用户密码不能为空");
				return;
			}

		//如果都不为空，则手动提交表单
		$("#loginForm").submit();
	});

		function isEmpty(str) {
			if(str == null || str.trim() == ""){
				return true;
			}
			return false;
		}
	</script>
</body>
</html>

welcome.jsp(登录成功重定向页面)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>登录界面</title>
</head>
<body>
	<h2>欢迎${user.userName}登录！</h2>
</body>
</html>