温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Spingboot+thymeleaf+ajax简单登录实现

发布时间:2020-05-11 08:49:44 来源:网络 阅读:1028 作者:知止内明 栏目:编程语言

登录页面

<!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提交数据
        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>

服务端页面


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("提交表单数据为:"+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:  回调方法数据
 * @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;
}

结果

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) | 提交表单数据为: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问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI