登录模块的后端代码段

代码目录结构：

在这里使用了thymeleaf模板引擎

引入依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
 <dependency>
            <groupId>org.springframework.session</groupId>
            <artifactId>spring-session-core</artifactId>
 </dependency>

@Controller
public class Login {

    @GetMapping({"/","/index"})
    public String index(HttpSession session){
        if (session.getAttribute("userName")==null){
            System.out.println("session为空");
            return "login";
        }
        System.out.println("session中：----"+session.getAttribute("userName"));
        return "loginpage";
    }
    @PostMapping("/login")
    @ResponseBody
    public String loginMe(HttpSession session, String userName, String password) {

        System.out.println("userName :" + userName + " , password :" + password);
        if (userName.equals("abc")){
            session.setAttribute("userName", userName);
            session.setAttribute("password", password);
            return ResMesUtil.build().success();
        }
        return ResMesUtil.build().resMesFail("请输入正确的账号密码！");
    }

}

2.ResMesUtil类

public class ResMesUtil extends HashMap<Object, Object> {
    private static final long serialVersionUID = 1L;

    private static final String MES_SUCC = "success";
    private static final String MES_FAIL = "fail";

    private static final int CODE_FAIL = 400;
    private static final int CODE_SUCC = 200;

    public String success() {
        return resMes(MES_SUCC, CODE_SUCC);
    }

    public String fail() {
        return resMes(MES_FAIL, CODE_FAIL);
    }

    public String resMesSucc(String mes) {
        return resMes(mes, CODE_SUCC);
    }

    public String resMesFail(String mes) {
        return resMes(mes, CODE_FAIL);
    }

    private String resMes(String mes, int code) {
        this.put("mes", mes);
        this.put("code", code);
        return JSON.toJSONString(this);
    }

    public static ResMesUtil build() {
        return new ResMesUtil();
    }

3.login.js

$("body").keydown(function() {
    if (event.keyCode == "13") {//keyCode=13是回车键
        $('#login').click();
    }
});

$('#login').click(function() {
    const userName = $('#userName').val();
    const passWord = $('#passWord').val();
    if (userName == null || userName === '' || passWord == null || passWord === '') {
        alert("用户名和密码不能为空！");
        return;
    }

    $.ajax({
        url: "/login",
        type: "post",
        data: {
            "userName": userName,
            "password": passWord
        },
        success: function (data) {
            data=JSON.parse(data);
            if(data.code === 200)
                window.location.href='/';
            else if(data.code === 400) {
                alert(data.mes);
                $('#userName').val("");
                $('#passWord').val("");
            }
        }
    });
});

登录模块的前端部分代码

<body>
<div class="content">
    <div class="logo">
        <h1>登录模块演示</h1>
    </div>
    <div class="form_content">
        <div class="user_name">
            <img src="/login/user_name.png">
            <input type="text" id="userName" name="userName" class="write_in" placeholder="账号">
        </div>
        <div class="user_password">
            <img src="/login/user_password.png">
            <input type="password" id="passWord" name="passWord" class="write_in" placeholder="密码">
        </div>
        <div class="submit">
            <input id="login" type="submit" class="login" value="登录">
        </div>
    </div>
</div>

</body>
<script type="text/javascript" th:src="@{login/login.js}"></script>
</html>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/119820.html