用户登录页面以及后台方法、拦截器

1. 登录页面的jsp

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//D HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>登录页面</title>
    <base href="<%=basePath %>">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.1/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.1/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <script type="text/javascript" src="js/jquery3.4.1/jquery3.4.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="commons/validate.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
</head>

<body>
<div id="login_frame">
    <img src="images/logo.png" class="logo">
    <form method="post" action="/login/login" onsubmit="return check()">
        <p><label class="label_input">用户名</label><input type="text" id="username" name="username" class="text_field"/>
        </p>
        <p><label class="label_input">密码</label><input type="password" id="password" name="password"
                                                       class="text_field"/></p>

        <div id="login_control">
            <input type="submit" id="btn_login" value="登录"/>
            <%--  <a id="forget_pwd" href="forget_pwd.html">忘记密码?</a>--%>
        </div>
    </form>
</div>

</body>
</html>
<script>
    function check() {
        var username = $("#username").val();
        var password = $("#password").val();
        if (username === "" || username === null) {
            alert("请输入用户名");
            return false;
        } else if (password === "" || password === null) {
            alert("请输入密码");
            return false;
        } else {
            return true;
        }
    }
</script>
<style>

    body {
        background-size: 100%;
        background-repeat: no-repeat;
    }

    #login_frame {
        width: 400px;
        height: 260px;
        padding: 13px;

        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -200px;

        background-color: #bed2c7;

        border-radius: 10px;
        text-align: center;
    }

    form p > * {
        display: inline-block;
        vertical-align: middle;
    }

    #image_logo {
        margin-top: 22px;
    }

    .label_input {
        font-size: 14px;
        font-family: 宋体;

        width: 65px;
        height: 28px;
        line-height: 28px;
        text-align: center;

        color: white;
        background-color: #00303E;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    .text_field {
        width: 278px;
        height: 28px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border: 0;
    }

    #btn_login {
        font-size: 14px;
        font-family: 宋体;

        width: 120px;
        height: 28px;
        line-height: 28px;
        text-align: center;

        color: white;
        background-color: #00303E;
        border-radius: 6px;
        border: 0;

        float: left;
    }

    #forget_pwd {
        font-size: 12px;
        color: white;
        text-decoration: none;
        position: relative;
        float: right;
        top: 5px;

    }

    #forget_pwd:hover {
        color: blue;
        text-decoration: underline;
    }

    #login_control {
        padding: 0 28px;
    }

    .logo {
        width: 40px;
        height: 35px;
        margin-top: -10px;
    }
</style>

2. 登录的拦截器

public class LoginInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object o) throws Exception {
        // 获取请求的uri
        String uri = request.getRequestURI();
        // 除了login.jsp是可以公开访问的,其它的URL都没拦截
        if (uri.indexOf("/login") >= 0) {
            return true;
        } else {
            // 获取session
            HttpSession session = request.getSession();
            UserPojo user = (UserPojo) session.getAttribute("USER_SESSION");
            // 判断session中是否有用户数据,如果有数据,则返回true。否则重定向到登录页面
            if (user != null) {
                return true;
            } else {
                response.sendRedirect("/login/login");
                return false;
            }
        }
    }

    @Override
    public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o,
                           ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse,
                                Object o, Exception e) throws Exception {

    }
}

3. 登录的 Controller

@RestController
@RequestMapping("/login")
public class LoginController {
    //获取日志记录器Logger
    private static Logger log = Logger.getLogger(LoginController.class);
   
    /**
     * 返回登录页面
     *
     * @return
     */
    @RequestMapping("/login")
    public ModelAndView login() {
        ModelAndView mv = new ModelAndView("login/login");
        log.info("返回登录页面");
        return mv;
    }

    /**
     * 登录方法
     *
     * @return
     */
    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public ModelAndView doLogin(UserPojo user, HttpSession session) {
        ModelAndView mv;
        // 获取前台传过来的用户名和密码
        String username = user.getUsername();
        String password = user.getPassword();
        // 根据用户名查询用户
        UserPojo userPojo = userService.getUserByUsername(username);
        // 从数据库中获取用户信息对用户名和密码进行判断
        if (password != null && password.equals(userPojo.getPassword())) {
            // 将用户对象添加到session中
            session.setAttribute("USER_SESSION", userPojo);
            // 重定向首页
            mv = new ModelAndView("redirect:/index/index");
        } else {
            mv = new ModelAndView("/login/login");
            mv.addObject("message", "用户名或密码错误,请重新登录!");
        }
        return mv;
    }

    /**
     * 退出方法
     *
     * @return
     */
    @RequestMapping(value = "/logout", method = RequestMethod.POST)
    public ModelAndView logout(HttpSession session) {
        // 退出前清除session 信息
        session.invalidate();
        ModelAndView mv = new ModelAndView("redirect:/login/login");
        return mv;
    }
}

发布了91 篇原创文章 · 获赞 2359 · 访问量 35万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览