Spring Boot基础学习笔记09——Thymeleaf模板引擎

最新推荐文章于 2022-02-17 14:45:46 发布

BOOM|z

最新推荐文章于 2022-02-17 14:45:46 发布

阅读量136

点赞数 1

分类专栏：企业级信息系统开发

本文链接：https://blog.csdn.net/qq_27349287/article/details/118101618

版权

企业级信息系统开发专栏收录该内容

25 篇文章 1 订阅

订阅专栏

一、Spring Boot整合Thymeleaf

1、创建Spring Boot项目ThymeleafDemo

在这里插入图片描述

2、在全局配置文件里配置Thymeleaf属性

在这里插入图片描述

#缓存配置，默认即是true，开发阶段设置为false
spring.thymeleaf.cache = false
#设置模板使用的编码为utf-8
spring.thymeleaf.encoding = UTF-8
#指定为模板使用的模式为html5，默认html
spring.thymeleaf.mode = HTML5
#指定前缀，默认位置为/templates/，可以修改成其它位置
spring.thymeleaf.prefix = classpath:/templates/
#指定模板文件后缀，默认值为.html，可以修改成其它值
spring.thymeleaf.suffix = .html

3、创建登录控制器LoginController

在这里插入图片描述

4、创建模板文件，获取控制器传来的动态数据

在这里插入图片描述

5、启动项目，访问http://localhost:8080/toLoginPage

二、Spring Boot集成Bootstrap

1、集成Bootstrap

（1）引用在线文档的方式

<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

（2）下载Bootstrap并引用的方式

Bootstrap压缩包下载链接：https://pan.baidu.com/s/1gWca14KH2OnLjoVzp7BirQ 提取码：li4b

在这里插入图片描述

将bootstrap-4.0.0目录拷贝项目的static目录

在这里插入图片描述

2、编写登录页面login.html

（1）集成Bootstrap

在这里插入图片描述

（2）编写登录页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>  
</head>
<body>
<div class="col-6 m-auto" style="margin-top:30px!important;">
    <div class="text-center">
        <span th:text="${currentYear}">今年</span> -
        <span th:text="${currentYear} + 1">明年</span>
    </div>
    <div class="border border-info bg-light p-2" style="border-radius: 5px">
        <form action="/login" method="post">
            <h3 class="text-center">用户登录</h3>
            <div class="mt-1">
                <input type="text" id="username" name="username" class="form-control" placeholder="输入用户名" autofocus>
            </div>
            <div class="mt-1">
                <input type="password" id="password" name="password" class="form-control" placeholder="输入密码">
            </div>
            <div class="checkbox text-center">
                <label>
                    <input class="form-check-input text-center" type="checkbox">记住我
                </label>
            </div>
            <div>
                <button class="btn btn-lg btn-primary btn-block" id="login" type="submit">登录</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>

（3）启动项目，访问http://localhost:8080/toLoginPage

（4）用户名和密码非空校验

在这里插入图片描述

3、控制器编写登录验证方法

在这里插入图片描述

@PostMapping("login")                                                          
public String login(HttpServletRequest request, Model model) {                 
    // 获取表单提交的用户名与密码                                                           
    String username = request.getParameter("username");                        
    String password = request.getParameter("password");                        
    // 判断用户是否登录成功（假设合法用户名为howard，密码为903213）                                    
    if (username.equals("howard") && password.equals("903213")) {              
        model.addAttribute("loginMsg", "恭喜，用户登录成功~");                          
        return "success";                                                      
    } else {                                                                   
        model.addAttribute("loginMsg", "遗憾，用户登录失败~");                          
        return "failure";                                                      
    }                                                                          
}

4、编写登录成功与失败的模板页面

（1）编写登录成功页面success.html

在这里插入图片描述


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>登录成功</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 text-center m-auto border-info border p-3 bg-light" style="margin-top:50px!important;">
    <p th:text="${loginMsg}" class="text-success"></p>
</div>
</body>
</html>

（2）编写登录失败页面failure.html

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>登录失败</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 text-center m-auto border-warning border p-3 bg-light" style="margin-top:50px!important;">
    <p th:text="${loginMsg}" class="text-danger"></p>
</div>
</body>
</html>

————————————————
版权声明：本文为CSDN博主「烟火向星辰」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_50659534/article/details/117029840

五、课后作业

任务：利用MyBatis、JPA或Redis技术，从数据库读取用户信息进行验证用户是否登录成功
1、增加用户表t_user
2、创建用户实体类
3、创建数据访问接口
4、修改控制器login()方法

BOOM|z

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot基础学习笔记09——Thymeleaf模板引擎

一、Spring Boot整合Thymeleaf1、创建Spring Boot项目ThymeleafDemo2、在全局配置文件里配置Thymeleaf属性#缓存配置，默认即是true，开发阶段设置为falsespring.thymeleaf.cache = false#设置模板使用的编码为utf-8spring.thymeleaf.encoding = UTF-8#指定为模板使用的模式为html5，默认htmlspring.thymeleaf.mode = HTML5#指定前缀，默认位
复制链接

扫一扫