基于javaweb的web资源库项目——登录功能demo
Posted stormzhuo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于javaweb的web资源库项目——登录功能demo相关的知识，希望对你有一定的参考价值。
在上一篇注册功能中已经搭建了整个项目的架构，下面在此架构上快速添加登录功能。
后端登录功能实现
控制层（controller)实现
在user包下创建处理登录servlet，代码如下
LoginServlet.java
package com.zhuo.controller.user;
import com.zhuo.entity.User;
import com.zhuo.service.impl.UserServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/* 设置字符编码，解决中文乱码问题 */
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
/* 接收客户端信息 */
String userId = request.getParameter("userId");
String userPassword = request.getParameter("userPassword");
// 创建用户service层接口的实现类
UserServiceImpl userServiceImpl = new UserServiceImpl();
/* 调用业务逻辑方法登录用户 */
User user = null;
try {
user = userServiceImpl.login(userId, userPassword);
} catch (SQLException e) {
e.printStackTrace();
}
/* 如果user等于null即（登录失败),则跳转到登录页面，否则登录成功 */
if (user == null) {
PrintWriter out = response.getWriter();
out.write("<script>");
out.write("alert('用户登录失败！');");
out.write("location.href='views/before/login.jsp'");
out.write("</script>");
out.close();
} else {
/* 把用户实体类存入session */
HttpSession session = request.getSession();
session.setAttribute("name", user);
/* 通过level的值重定向到前台页面还是后台页面 */
if (user != null && user.getUserLevel().equals("管理员")) {
response.sendRedirect("views/after/manage/admin_index.jsp");
} else {
response.sendRedirect("views/before/index.jsp");
}
}
}
}
业务逻辑层（service）实现
在UserService接口中添加处理登录业务功能的抽象方法，代码如下
// 登录用户
public User login(String userId, String userPassword) throws SQLException;
在UserServiceImpl实现类中重写接口的login方法,代码如下
@Override
public User login(String userId, String userPassword) throws SQLException {
// 检索账号及密码
User user = userDao.selectByIdPassword(userId, userPassword);
return user;
}
数据访问层(dao)实现
在UserDao接口中添加一个检查账号是否存在，密码是否正确的抽象方法，代码如下
// 检索账号及密码
public User selectByIdPassword(String userId, String userPassword) throws SQLException;
在UserDaoImpl实现类中重写接口的selectByIdPassword方法，代码如下
@Override
public User selectByIdPassword(String userId, String userPassword) throws SQLException {
//用户实体类
User user = null;
// sql检索语句
String sql = "select * from user where user_id=? and user_password=?";
// 调用jdbc工具类执行sql语句
resultSet = JDBCUtil.executeQuery(sql, userId, userPassword);
if (resultSet.next()) {
String id = resultSet.getString("user_id");
String password = resultSet.getString("user_password");
String name = resultSet.getString("user_name");
String sex = resultSet.getString("user_sex");
String birthday = resultSet.getString("user_birthday");
String userClass = resultSet.getString("user_class");
String level = resultSet.getString("user_level");
user = new User(id, password, name, sex, birthday, userClass, level);
}
return user;
}
前端登录功能实现
前端注册页面结构
登录页面结构基本和注册是一样的，所以就不再说明了
在before文件夹下创建login.jsp，代码如下
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<link
href="${pageContext.request.contextPath}/views/css/bootstrap.min.css"
rel="stylesheet">
<link href="${pageContext.request.contextPath}/views/css/style.css"
rel="stylesheet">
<script
src="${pageContext.request.contextPath}/views/js/jquery-2.1.1.js"></script>
<style>
.form-group p .error {
display: inline-block;
border: 1px solid #ff855a;
background-color: #ffe8e0;
height: 25px;
line-height: 25px;
padding: 0px 20px;
margin-left: 20px;
}
</style>
</head>
<body class="gray-bg">
<div class="middle-box text-center loginscreen animated fadeInDown">
<div>
<div>
<h1 class="logo-name">RL+</h1>
</div>
<h3>欢迎登录Resource library+</h3>
<form class="m-t" role="form"
action="${pageContext.request.contextPath}/login" method="post"
onsubmit="return checkLoginForm(this);">
<div class="form-group">
<input type="text" class="form-control" name="userId"
placeholder="账号" required>
</div>
<div class="form-group">
<input type="password" class="form-control" name="userPassword"
placeholder="密码" required>
</div>
<div class="form-group">
<p>
<input class="form-control" type="text" id="code" name="veryCode"
value="" onfocus="focusItem(this)"
onblur="checkblurLoginItem(this)" placeholder="验证码" /><img
height="25" src="${pageContext.request.contextPath}/getcode"
alt="看不清，换一张" onclick="change(this)"><span></span>
</p>
</div>
<button type="submit" class="btn btn-primary block full-width m-b">登录</button>
<a href="#"><small>忘记密码?</small></a>
<p class="text-muted text-center">
<small>没有账户?</small>
</p>
<a class="btn btn-sm btn-white btn-block" href="register.jsp">创建账户</a>
</form>
</div>
</div>
<script src="${pageContext.request.contextPath}/views/js/function.js"></script>
</body>
</html>
前端注册页面表单验证
登录的表单验证不需要和注册的那么复杂，只需使用ajax检查验证码即可
检查验证码是否正确的js代码如下
// 标记位，只有有一个为false，则阻止表单提交
var flag = false;
function checkblurLoginItem(obj) {
// 获取显示提示信息的span元素
var numshow = $(obj).next().next();
/*若验证码为空，则给span元素添加值并设置类属性，方便添加样式
* 否则检查验证码是否正确*/
if (obj.value == "") {
numshow.html('验证码不能为空');
numshow.addClass('error');
flag = false;
} else {
var url = getWebRootPath() + "/check_user_code?num=" + encodeURI($(obj).val()) + "&" + new Date().getTime();
$.get(url, function(data) {
if (data == "false") {
numshow.html('验证码输入有误');
numshow.addClass('error');
flag = false;
} else {
flag = true;
}
});
}
}
表单提交时验证码还需在检测一次，js代码如下
function checkLoginForm(form) {
// 获取所有input组件
var elements = form.getElementsByTagName('input');
/*遍历input对象元素，若含有onblur属性，则调用checkblurLoginItem函数
判断验证是否为空或是否正确*/
for (var i = 0; i < elements.length; i++) {
if (elements[i] != null) {
if (elements[i].getAttribute("onblur")) {
checkblurLoginItem(elements[i]);
}
}
}
return flag;
}
以上是关于基于javaweb的web资源库项目——登录功能demo的主要内容，如果未能解决你的问题，请参考以下文章
基于javaweb的web资源库项目——后台用户管理demo
基于javaweb的web资源库项目——后台用户管理demo