溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Spingboot+thymeleaf+ajax簡單登錄實現(xiàn)

發(fā)布時間：2020-05-11 08:49:44 來源：網(wǎng)絡(luò) 閱讀：1057 作者：知止內(nèi)明 欄目：編程語言

登錄頁面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keys" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.1.3/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/login.css}">
    <style>

    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <!--<div><a class="navbar-brand" href="index.html" >學習平臺</a></div>-->
        </div>
    </div>
</nav>

<div class="container">

    <form class="form-signin" id="loginForm" role="form">
        <h3 class="form-signin-heading"><i class="glyphicon glyphicon-user"></i> 用戶登錄</h3>
        <div class="form-group has-success has-feedback">
            <input type="text" class="form-control" id="loginacct" name="loginacct" placeholder="請輸入登錄賬號" autofocus>
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="text" class="form-control" id="userpswd" name="userpswd" placeholder="請輸入登錄密碼"
                   >
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <select class="form-control">
                <option value="member">會員</option>
                <option value="user">管理</option>
            </select>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> 記住我
            </label>
            <br>
            <label>
                忘記密碼
            </label>
            <label >
                <a href="reg.html">我要注冊</a>
            </label>
        </div>
        <a class="btn btn-lg btn-success btn-block" onclick="dologin()"> 登錄</a>
    </form>
</div>
<script th:src="@{/webjars/jquery/3.4.1/dist/jquery.min.js}" src="jquery/jquery-2.1.1.min.js"></script>
<script th:src="@{/webjars/bootstrap/4.1.3/js/bootstrap.min.js}" src="bootstrap/js/bootstrap.min.js"></script>
<script th:src="@{layer/layer.js}"></script>
<script>
    function dologin() {
        // 非空校驗
        var loginacct = $("#loginacct").val();
        var userpswd = $("#userpswd").val();
        if (loginacct == "") {
            layer.msg("用戶登錄賬號不能為空，請輸入", {time: 2000, icon: 5, shift: 6}, function () {
            });
            return;
        }
        if (userpswd == "") {
            //alert("用戶登錄密碼不能為空，請輸入");
            layer.msg("用戶登錄密碼不能為空，請輸入", {time: 2000, icon: 5, shift: 6}, function () {
            });
            return;
        }

        // 提交表單
        // alert("提交表單");
        //$("#loginForm").submit();
        // 使用AJAX提交數(shù)據(jù)
        var loadingIndex = null;
        var  usedata = {};
        usedata['loginacct']= loginacct;
        usedata['userpswd']= userpswd;

        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "/dologin",
            data: JSON.stringify(usedata),
            beforeSend: function () {
                loadingIndex = layer.msg('處理中', {icon: 16});
            }, success: function (result) {
                layer.close(loadingIndex);
                if (result.success) {
                    window.location.href = "main";
                } else {
                    layer.msg("用戶登錄賬號或密碼不正確，請重新輸入", {time: 2000, icon: 5, shift: 6}, function () {
                    });
                }
            }
        });
    }
</script>
</body>
</html>

服務(wù)端頁面


import com.jth.pojo.ResultInfo;
import com.jth.pojo.User;
import lombok.extern.log4j.Log4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpSession;
import javax.validation.Valid;

/**
 * @author liwen406
 * @Title: DispatcherController
 * @Description:
 * @date 2019/5/8 / 20:47
 */
@Log4j
@Controller
public class DispatcherController {

    @GetMapping("/{page}")
    public String pagea(@PathVariable String page) {
        return page;
    }

    @ResponseBody
    @PostMapping("/dologin")
    public Object login(@Valid @RequestBody User user, HttpSession session) {
        log.info("提交表單數(shù)據(jù)為："+user);
        ResultInfo result = new ResultInfo();
        if (user.getLoginacct().equals("admin") && user.getUserpswd().equals("admin")) {
            result.setSuccess(true);
        } else {
            result.setSuccess(false);
        }
        return result;
    }
}

pojo


import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

/**
 * @author liwen406
 * @Title: ResultInfo
 * @Description:  回調(diào)方法數(shù)據(jù)
 * @date 2019/5/8 / 21:20
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
@Accessors(chain = true)
public class ResultInfo {
    private boolean success;
    private Object data;
}

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;

/**
 * @author liwen406
 * @Title: User
 * @Description:
 * @date 2019/5/8 / 20:39
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class User implements Serializable {
    private Integer id;
    private String username;
    private String loginacct;
    private String userpswd;
    private String email;
    private String createtime;
}

結(jié)果

2019-05-09 12:44:35.218  INFO 11284 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring DispatcherServlet 'dispatcherServlet'
2019-05-09 12:44:35.218  INFO 11284 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Initializing Servlet 'dispatcherServlet'
2019-05-09 12:44:35.226  INFO 11284 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Completed initialization in 8 ms
[SeleniumAutoConsole] INFO [http-nio-8080-exec-1] com.jth.controller.DispatcherController.login(31) | 提交表單數(shù)據(jù)為：User(id=null, username=null, loginacct=121, userpswd=admin, email=null, createtime=null)
2019-05-09 12:44:37.361  INFO 11284 --- [      Thread-47] o.s.s.concurrent.ThreadPoolTaskExecutor  : Shutting down ExecutorService 'applicationTaskExecutor'
向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手