SSM整合之企業級後臺管理系統(9) - 登錄頁面和登錄跳轉實現

上一篇教程和大家一起整合了Spring+SpringMVC+MyBatis+Shiro+Log4j框架，我們在學習java web編程道路上都會遇到幾個坎，邁過去了就一路歡暢，很多沒邁過去的同學就放棄了。第一個坎是安裝集成開發環境，第二個坎就是各個框架的整合。同學們如果能解決整合過程中遇到的各種各樣的問題並完成整合，那基本上可以說已經入了門，向web編程邁進了一大步！

本篇教程呢，和大家開始實現後臺管理系統頁面和相關功能，第一個要實現的功能就是登錄。在這裏，爲了能讓大家更加深刻地體會工作中的實際開發流程，我們來模擬實際開發中以需求驅動的形式來完成這篇教程的講解。

一、登錄功能的需求

首先我們來理清一下完整的登錄功能有哪些需要實現的功能點，一個完整的登錄功能應該包括：

登錄頁面實現（login.jsp）：包含用戶名和密碼輸入框，一個“登錄”按鈕
賬號信息驗證成功後，跳轉到系統首頁（index.jsp）
當登錄失敗時，提示失敗信息，如“用戶名或密碼錯誤”、“用戶已鎖定”等

二、登錄頁面實現

1. login.jsp。頁面中兩個輸入框，一個登錄按鈕。並且，用戶名輸入框上方有個默認隱藏的span，用於展示錯誤信息。點擊【登錄】按鈕調用login()方法向後臺發起Ajax請求，當登錄不成功時，提示後臺返回的錯誤信息；登錄成功時，跳轉到"/index"頁面。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>歡迎登錄OMS</title>
    <link rel="stylesheet" href="<%=basePath%>/css/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=basePath%>/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="<%=basePath%>/css/login.css">
    <script type="text/javascript" src="<%=basePath%>/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>/css/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>
        #login_logo {
            background-image: url(<%=basePath%>/image/login/login_logo.png);
            background-repeat: no-repeat;
            background-position: center
        }
        #login_page_img {
            background-image: url("<%=basePath%>/image/login/login-img.png");
            width: 500px;
            height: 440px;
        }
        #username, #password, #vcode {
            width: 100%;
            height: 38px;
            align-items: self-end;
        }
    </style>
    <script type="text/javascript">
        function login() {
            console.log('login ------> start');
            var username = $('#username').val();
            var password = $('#password').val();
            //判斷輸入是否爲空
            if (username == '' || password == '') {
                alert('賬號信息不能爲空！');
                return;
            }
            $.ajax({
                type: 'post',
                url: '<%=basePath%>/user/checkLogin',
                cache: false,
                dataType: 'json',
                data: {username: username, password: password},
                success: function (data) {
                    if (data.code == '0') {
                        window.location.href = '<%=basePath%>/index';
                    } else {
                        console.log(data.msg);
                        $("#tips").css("visibility", "visible");
                        $('#tips').text(data.msg);
                    }
                },
                error: function (data) {
                    alert('登錄失敗，請聯繫系統管理員');
                }
            })
        }
    </script>
</head>
<body>
<div class="login_box">
    <div class="login_l_img" id="login_page_img"></div>
    <div class="login">
        <div class="login_logo" id="login_logo"></div>
        <div class="login_name">
            <p style="margin: 0px">歡迎登錄</p>
        </div>
        <table style="width: 100%; vertical-align: middle">
            <tr>
                <td colspan="2"><span id="tips" style="color: red; visibility: hidden">&nbsp;</span></td>
            </tr>
            <tr style="width: 100%">
                <td colspan="2">
                    <div class="input-group" style="margin-bottom: 15px;width: 100%">
                        <span class="input-group-addon" id="basic-addon1">
                            <i class="glyphicon glyphicon-user"></i>
                        </span>
                        <input class="form-control" name="username" id="username" type="text" placeholder="請輸入用戶名" oninput="value=value.replace(/[^a-zA-Z0-9]+$/,'');if(value.length>20)value=value.slice(0,20)">
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="input-group" style="margin-bottom: 15px;width: 100%">
                        <span class="input-group-addon" id="basic-addon-pwd">
                            <i class="glyphicon glyphicon-lock"></i>
                        </span>
                        <input class="form-control" name="password" id="password" type="password" placeholder="請輸入密碼" oninput="value=value.replace(/[^a-zA-Z0-9~!@#$%^&*()_+.?]+$/,'');if(value.length>20)value=value.slice(0,20)">
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2"><a class="btn btn-info" style="width:100%;" onclick="login()">登錄</a></td>
            </tr>
        </table>
    </div>
    <div class="copyright">小云科技有限公司 版權所有©2016-2019 技術支持電話：000-00000000</div>
</div>
<div style="text-align:center;display:none">
    <input id="code" type="hidden" value="${code}">
    <input id="msg" type="hidden" value="${msg}">
</div>
<script>
    $(function () {
        //按回車觸發登錄
        $(".login").keypress(function (e) {
            var code = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
            if (13 == code) {
                //回車鍵
                login();
            }
        });
    });
</script>
</body>
</html>

2. index.jsp。index頁面沒加什麼內容，只展示後臺返回的${current_user}和${page}變量。

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<html>
<body>
<h2>index.jsp</h2>
<h3>當前登錄用戶：${current_user}</h3>
<h3>當前頁面：${page}</h3>
</body>
</html>

三、後臺請求處理和控制跳轉

1. MainPageController.java。用於處理"/login"和"/index"請求，相當於指定頁面進行跳轉。

package com.ssm.controller;

import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Controller
public class MainPageController {
    private static final String LOGIN_PAGE = "login";
    private static final String INDEX_PAGE = "index";
    private static Logger logger = Logger.getLogger(MainPageController.class);

    @RequestMapping("/login")
    public ModelAndView login() {
        ModelAndView model = new ModelAndView(LOGIN_PAGE);
        model.addObject("page", "login.jsp page's value");
        return model;
    }

    @RequestMapping("/index")
    public ModelAndView index(HttpServletRequest request, HttpServletResponse response) {
        ModelAndView model = new ModelAndView(INDEX_PAGE);
        String username = request.getSession().getAttribute("username").toString();
        model.addObject("page", "index.jsp page");
        model.addObject("current_user", username);
        return model;
    }
}

2. UserControlller.java。處理login.jsp中login()方法中的"/checkLogin"請求，進行登錄校驗，並返回校驗結果和提示信息。

package com.ssm.controller;

import com.ssm.model.ResultObj;
import com.ssm.model.User;
import com.ssm.service.IUserService;
import org.apache.log4j.Logger;
import org.apache.shiro.SecurityUtils;
import org.apache.shiro.authc.*;
import org.apache.shiro.subject.Subject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Controller
@RequestMapping("/user")
public class UserController {
    private static Logger logger = Logger.getLogger(UserController.class);
    @Resource
    private IUserService userService;

    @RequestMapping(value = "/getUserByUsername/{username}", method = RequestMethod.GET)
    public ModelAndView getUserByUsername(@PathVariable("username") String username, HttpServletRequest request, HttpServletResponse response) {
        User user = userService.getUserByUsername(username);
        logger.info("userId: " + user.getId() + ", username: " + user.getUsername() + ", cname: " + user.getCname());
        ModelAndView model = new ModelAndView("user");
        model.addObject("user", user);
        return model;
    }

    @ResponseBody
    @RequestMapping(value = "/checkLogin", method = RequestMethod.POST)
    public ResultObj checkLogin(HttpServletRequest request, HttpServletResponse response) {
        logger.info("/user/checkLogin ---> start");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        //驗證登錄信息
        UsernamePasswordToken token = new UsernamePasswordToken(username, password);
        Subject currentUser = SecurityUtils.getSubject();
        ResultObj result = new ResultObj();
        try {
            currentUser.login(token);
            result.setCode("0");
            result.setMsg("登錄成功");
            logger.info("登錄成功");
            request.getSession().setAttribute("username", username);
        } catch (UnknownAccountException uae) {
            logger.error("用戶名錯誤" + uae.getMessage());
            result.setCode("1");
            result.setMsg("用戶名錯誤");
        } catch (IncorrectCredentialsException ice) {
            logger.error("密碼錯誤" + ice.getMessage());
            result.setCode("2");
            result.setMsg("密碼錯誤");
        } catch (LockedAccountException lae) {
            logger.error("賬號鎖定" + lae.getMessage());
            result.setCode("3");
            result.setMsg("賬號已鎖定，請聯繫系統管理員解鎖");
        } 
        logger.info("/user/checkLogin ---> end");
        return result;
    }
}

SSM整合之企業級後臺管理系統(9) - 登錄頁面和登錄跳轉實現

一、登錄功能的需求

二、登錄頁面實現

三、後臺請求處理和控制跳轉

四、本篇結束語

10分鐘搞定Mysql主從部署配置

如何使用 JS 判斷用戶是否處於活躍狀態

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

[轉帖]

python列出centos7內存使用前50的進程信息

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

一鍵自動化博客發佈工具,用過的人都說好(掘金篇)

lightdb數據庫超時相關控制參數

lightdb秒級增加列和刪除列（not null帶默認值）

Java ThreadPoolShutdown

Java下載安裝和配置環境變量

SSM整合之企業級後臺管理系統(9) - 登錄頁面和登錄跳轉實現

Navicat Premium下載與安裝

SSM整合之企業級後臺管理系統(17) - 上傳頭像後端部分

SSM整合之企業級後臺管理系統(15) - 用戶權限設計

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結