Spring Boot 整合 thymeleaf 模版

最新推荐文章于 2022-08-08 08:00:00 发布

colg

最新推荐文章于 2022-08-08 08:00:00 发布

阅读量272

点赞数

分类专栏： JAVAE体系文章标签： spring boot thymeleaf

本文链接：https://blog.csdn.net/NorRinInTheSky/article/details/79906240

版权

JAVAE体系专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Spring Boot 整合 thymeleaf 模版

1. pom.xml 引入依赖

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

2. 添加配置文件

spring:
  thymeleaf:
    cache: false                                    # 开发时禁用缓存

3. 目录结构

4. login.html 页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- 引入公共js，css -->
<head th:insert="common/head.html"></head>
<link href="css/style.css" rel="stylesheet">
<title>登录系统</title>

<body>
    <div class="container">
        <div class="form row">
            <div class="form-horizontal col-md-offset-3" id="login_form">
                <h3 class="form-title">登录系统</h3>
                <div class="col-md-9">
                    <div class="form-group">
                        <i class="fa fa-user fa-lg"></i>
                        <input class="form-control required" type="text" placeholder="Username" id="username" name="userid" autofocus="autofocus" maxlength="20" />
                    </div>
                    <div class="form-group">
                        <i class="fa fa-lock fa-lg"></i>
                        <input class="form-control required" type="password" placeholder="Password" id="password" name="pwd" maxlength="8" />
                    </div>
                    <div class="form-group">
                        <label class="checkbox">
                            <input type="checkbox" name="remember" value="1"/>记住我
                        </label>
                    </div>
                    <div class="form-group col-md-offset-9">
                        <button type="submit" class="btn btn-success pull-right" name="submit" id="login_submit">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>

<script src="/script/login.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        login.init();
    });
</script>

</html>

5. head.html页面


<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

6. style.css

body {
    background: url("../img/1.jpg");
    animation-name: myfirst;
    animation-duration: 12s;
    /*变换时间*/
    animation-delay: 5s;
    /*动画开始时间*/
    animation-iteration-count: infinite;
    /*下一周期循环播放*/
    animation-play-state: running;
    /*动画开始运行*/
}
@keyframes myfirst {
    0% {
        background: url("../img/1.jpg");
        width: auto;
    }
    34% {
        background: url("../img/2.jpg");
    }
    67% {
        background: url("../img/3.jpg");
    }
    100% {
        background: url("../img/4.jpg");
    }
}
.form {
    background: rgba(255, 255, 255, 0.2);
    width: 400px;
    margin: 120px auto;
}

/*阴影*/

.fa {
    display: inline-block;
    top: 27px;
    left: 6px;
    position: relative;
    color: #ccc;
}
input[type="text"], input[type="password"] {
    padding-left: 26px;
}
.checkbox {
    padding-left: 21px;
}

7. login.js

/**
 * login 模块逻辑
 * 
 * login.init(params);
 */
var login = {
    URL: {
        login: function() {
            return '/login';
        }
    },
    init: function() {
        $("#login_submit").click(function() {
            var params = {
                userid: $("#username").val(),
                pwd: $("#password").val()
            }

            // 校验用户名，密码
            // TODO colg

            $.post(login.URL.login(), params, function(result) {
                if(result.success) {
                    // TODO colg
                    console.log(result);
                } else {
                    console.log("result: " + result.msg);
                }
            });
        });
    }
}

8. loginController

@Controller
public class LoginController extends BaseController {

    @GetMapping("/")
    public String index() {
        return "admin/login";
    }


    /**
     * 用户认证
     * 
     * @param userid
     * @param pwd
     * @param session
     * @return
     */
    @PostMapping("/login")
    @ResponseBody
    public ResultBean login(String userid, String pwd, HttpSession session) {
        // 用户认证
        ActiveUser activeUser = loginService.login(userid, pwd);

        // 将用户信息存入session
        session.setAttribute("user", activeUser);

        return new ResultBean(activeUser);
    }

}