SSM开发书评网22：实现会员登录功能；（本篇博客的核心就是【熟悉登录这种业务的处理逻辑】）_var password=$(".password").val().trim()-CSDN博客

本文链接：https://blog.csdn.net/csucsgoat/article/details/122392295

说明：

（1）本篇博客主要内容：实现会员登录功能；（包括会员登录的前端和后端业务逻辑）

（2）本篇博客的几点说明：

● 在前面的【（12）慕课OA系统（Mybatis项目案例，比较重要！）】中，也实现过会员登录；可以快速参考下那儿的内容，与本节内容对比一下，能帮助理解【登录，这种业务逻辑】；（虽然，二者的复杂程度不一样，但看一下呗，花不了多长时间）

（3）本篇博客，登录功能开发流程：【先确定登录页的前端文件login.ftl，编写登录的前端文件】→【然后编写Controller方法，设置访问login.ftl登录页的入口方法，也就是设置访问login.ftl登录的url】→【然后，设置首页上的，登录超链接，让其指向我们在上一步设置的url】→【编写登录功能的Service，主要是编写登录的处理逻辑】→【编写登录功能的Controller方法，接收登录页的登录请求，调用Service逻辑，向login.ftl登录页返回登录结果】→【如果登录成功了，别忘了把当前登录用户的信息，存到Session会话对象中去；这样以后，登录成功后，在需要显示当前登录用户的地方，我们就能直接取数据了】；

（4）其实，本文最重要的就是熟悉【登录，这种业务逻辑】；包括在处理登录时，需要注意的点、习惯采取的操作等；

一：登录页前端文件login.ftl简介；

二：登录功能后台逻辑；

1.在MemberController类：开发【访问登录页的入口方法】；（也就是，开发login.ftl登录页的访问url）

2.在MemberService接口中，定义一个登录的方法：checkLogin()方法；

3.在MemberServiceImpl实现类中，去实现登录的方法：checkLogin()方法；

4.在MemberController中编写处理登录的方法checkLogin()，接收前端的请求，调用到Service中定义的逻辑；

启动Tomcat，观察效果；

补充1，登录成功后，把【Service层返回的Member用户对象】存到Session中；然后，我们就可以在需要的地方，获取当前登录用户的信息了；

补充2，用户登录成功后、跳转到默认首页后，在页面右上角显示“当前登录用户的会员名”；（其实就是获取补充1中存储的用户信息）（背后的与原理是，FreeMarker也可以去Session对象中的数据）

启动Tomcat，观察效果；

三：临时Summary：【后端返回JSON】，【数据放在了session对象中】，【数据放在了ModelAndView中】时：前端取值的分析；（暂时性总结，以后有了新认识，随时修正补充）

1.把数据放在了ModelAndView中时：其实，数据是放在HttpServletRequest对象中的；在前端，我们可以使用FreeMarker去取；

2.把数据放在了Session对象中时：其实，数据是放在HttpServletRequest域中的；在前端，我们也可以直接用FreeMarker去取；

3.后端返回JSON数据：这种情况，一般对应的是页面ajax请求（比如登录、注册、页面局部刷新），跨接口传值等不涉及页面跳转的情况；（即此时，我们的数据仅仅是JSON，其只是在响应中；数据并没有在三大作用域对象中；）

一：登录页前端文件login.ftl简介；

引入登录页login.ftl；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员登录-慕课书评网</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="http://cdn.itlaoqi.com./resources/bootstrap4/css/bootstrap.css">
    <link rel="stylesheet" href="./resources/raty/lib/jquery.raty.css">

    <script src="http://cdn.itlaoqi.com./resources/jquery.3.3.1.min.js"></script>
    <script src="http://cdn.itlaoqi.com./resources/bootstrap4/js/bootstrap.min.js"></script>
    <style>
        .container {
            padding: 0px;
            margin: 0px;
        }

        .row {
            padding: 0px;
            margin: 0px;
        }

        .col- * {
            padding: 0px;
        }

        .description p {
            text-indent: 2em;
        }

        .description img {
            width: 100%;
        }

    </style>

</head>
<body>
<!--<div style="width: 375px;margin-left: auto;margin-right: auto;">-->
<div class="container ">
    <nav class="navbar navbar-light bg-white shadow">
        <ul class="nav">
            <li class="nav-item">
                <a href="/">
                    <img src="https://m.imooc.com/static/wap/static/common/img/logo2.png" class="mt-1"
                         style="width: 100px">
                </a>
            </li>
        </ul>
    </nav>


    <div class="container mt-2 p-2 m-0">
        <form id="frmLogin">
            <div class="passport bg-white">
                <h4 class="float-left">会员登录</h4>
                <h6 class="float-right pt-2"><a href="/register.html">会员注册</a></h6>
                <div class="clearfix"></div>
                <div class="alert d-none mt-2" id="tips" role="alert">

                </div>

                <div class="input-group  mt-2 ">
                    <input type="text" id="username" name="username" class="form-control p-4" placeholder="请输入用户名"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="input-group  mt-4 ">
                    <input id="password" name="password" class="form-control p-4" placeholder="请输入密码" type="password"
                           aria-describedby="basic-addon1">
                </div>

                <div class="input-group mt-4 ">
                    <div class="col-5 p-0">
                        <input type="text" id="verifyCode" name="vc" class="form-control p-4" placeholder="验证码">
                    </div>
                    <div class="col-4 p-0 pl-2 pt-0">
                        <img id="imgVerifyCode" src="/verify_code"
                             style="width: 120px;height:50px;cursor: pointer">
                    </div>

                </div>

                <a id="btnSubmit" class="btn btn-success  btn-block mt-4 text-white pt-3 pb-3">登&nbsp;&nbsp;&nbsp;&nbsp;录</a>
            </div>
        </form>

    </div>
</div>

<script>
    function showTips(isShow, css, text) {
        if (isShow) {
            $("#tips").removeClass("d-none")
            $("#tips").hide();
            $("#tips").addClass(css);
            $("#tips").text(text);
            $("#tips").fadeIn(200);
        } else {
            $("#tips").text("");
            $("#tips").fadeOut(200);
            $("#tips").removeClass();
            $("#tips").addClass("alert")
        }
    }
    function reloadVerifyCode(){
        $("#imgVerifyCode").attr("src", "/verify_code?ts=" + new Date().getTime());
    }
    $("#imgVerifyCode").click(function () {
        reloadVerifyCode();
    });

    $("#btnSubmit").click(function () {
        var username = $.trim($("#username").val());
        var regex = /^.{1,10}$/;
        if (!regex.test(username)) {
            showTips(true, "alert-danger", "用户名请输入正确格式&#