Spingboot+thymeleaf+ajax简单登录实现

最新推荐文章于 2024-05-07 22:11:26 发布

weixin_34378922

最新推荐文章于 2024-05-07 22:11:26 发布

阅读量6.3k

点赞数 1

文章标签： javascript java 前端 ViewUI

原文链接：http://blog.51cto.com/357712148/2391595

版权

登录页面

<!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" style="font-size:32px;">学习平台</a></div>-->
        </div>
    </div>
</nav>

<div class="container">

    <form class="form-signin" id="loginForm" role="form">
        <h2 class="form-signin-heading"><i class="glyphicon glyphicon-user"></i> 用户登录</h2>
        <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="请输入登录密码"
                   style="margin-top:10px;">
            <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 style="float:right">
                <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'

转载于:https://blog.51cto.com/357712148/2391595