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

登錄頁面

創(chuàng)新互聯(lián)公司專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、廬山網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計、商城建設(shè)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為廬山等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

<!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'

名稱欄目：Spingboot+thymeleaf+ajax簡單登錄實現(xiàn)
網(wǎng)站網(wǎng)址：http://www.rwnh.cn/article32/jjessc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、App設(shè)計、網(wǎng)頁設(shè)計公司、定制網(wǎng)站、虛擬主機、網(wǎng)站營銷

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

pojo

結(jié)果