本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

举起你的手来

560

文章

262684

访问

+关注

分类

暂无分类

日期归档

2023-05(1)

Thymeleaf模板引擎

发布于2021-05-29 21:51 阅读(506) 评论(0) 点赞(29) 收藏(4)

文章目录

一、Spring Boot整合Thymeleaf
二、Spring Boot集成Bootstrap
三、Thymeleaf访问模型里的数据
- 1、访问model里的数据
四、课后作业

一、Spring Boot整合Thymeleaf

1、创建项目

在这里插入图片描述

添加项目依赖

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

在这里插入图片描述

3、创建登录控制器

在这里插入图片描述

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

在这里插入图片描述

运行login.html

5、启动项目

访问http://localhost:8080/toLoginPage

在这里插入图片描述

课堂练习

（1）创建用户实体类

在这里插入图片描述

（2）

二、Spring Boot集成Bootstrap

1、集成Bootstrap

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

在这里插入图片描述

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

链接：https://pan.baidu.com/s/1vEmjeGTdM9jERbXPU4bmAw 提取码：qgo9
解压包之后复制到static包中

在这里插入图片描述

2、编写登录页面

（1）集成Bootstrap

在这里插入图片描述

（2）编写登录界面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
<!--    &lt;!&ndash; 新 Bootstrap4 核心 CSS 文件 &ndash;&gt;-->
<!--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">-->
<!--    &lt;!&ndash; jQuery文件。务必在bootstrap.min.js 之前引入 &ndash;&gt;-->
<!--    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>-->
<!--    &lt;!&ndash; bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js &ndash;&gt;-->
<!--    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>-->
<!--    &lt;!&ndash; 最新的 Bootstrap4 核心 JavaScript 文件 &ndash;&gt;-->
<!--    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>-->

    <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

在这里插入图片描述

3、用户名和密码非空校验

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

在这里插入图片描述

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

（1）登录成功页面

在这里插入图片描述

<!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）登录失败页面

在这里插入图片描述

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

（3）运行程序测试

在这里插入图片描述

登录成功界面

在这里插入图片描述

登录失败界面

在这里插入图片描述

三、Thymeleaf访问模型里的数据

1、访问model里的数据

（1）创建个人实体类

在这里插入图片描述

package net.zjs.lesson09.bean;

/**
 * 功能：个人实体类
 * 作者：zjs
 * 日期：2021-05-24
 */
public class Person {
    private int id;
    private String name;
    private String gender;
    private int age;
    private String telephone;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getTelephone() {
        return telephone;
    }

    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }

    @Override
    public String toString() {
        return "Person{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", gender='" + gender + '\'' +
                ", age=" + age +
                ", telephone='" + telephone + '\'' +
                '}';
    }
}

（2）添加获取个人信息方法

在这里插入图片描述

（3）创建显示个人信息的页面

在这里插入图片描述

（4）启动服务器

访问：http://localhost:8080/getPerson

在这里插入图片描述

无法实现效果，更改代码

在这里插入图片描述

查看效果

在这里插入图片描述

card替换了panel

在这里插入图片描述

查看效果

在这里插入图片描述

（5）创建商品实体类

在这里插入图片描述

package net.zjs.lesson09.bean;

/**
 * 功能：商品实体类
 * 作者：zjs
 * 日期：2021-05-24
 */
public class Product {
    private int id;
    private String name;
    private Double price;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Double getPrice() {
        return price;
    }

    public void setPrice(Double price) {
        this.price = price;
    }

    @Override
    public String toString() {
        return "Product{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", price=" + price +
                '}';
    }
}

（6）创建商品控制器

在这里插入图片描述

package net.zjs.lesson09.controller;

import net.zjs.lesson09.bean.Product;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

/**
 * 功能：商品控制器
 * 作者：zjs
 * 日期：2021-05-24
 */
@Controller
public class ProductController {
    @GetMapping("/getProducts")
    public String getProducts(Model model){
        List<Product> products=new ArrayList<>();
        Product product=new Product();
        product.setId(1);
        product.setName("海尔");
        product.setPrice(2000);
        products.add(product);

        product=new Product();
        product.setId(2);
        product.setName("电脑");
        product.setPrice(5000);
        products.add(product);

        product=new Product();
        product.setId(3);
        product.setName("手机");
        product.setPrice(3000);
        products.add(product);
        
        //将商品列表写入模型
        model.addAttribute("products",products);
        //返回逻辑视图名
        return "products";

    }
}

（7）编写显示商品信息的页面

在这里插入图片描述

<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="card">
        <div class="card-header" style="background-color:royalblue">
            <h4 class="card-title" style="color:white">显示商品信息</h4>
        </div>
        <div class="card-body">
            <ul class="list-group">
                <li class="list-group-item" th:each="product:${products}">
                    编号：<span th:text="${product.id}">1</span><br/>
                    名称：<span th:text="${product.name}">洗衣机</span><br/>
                    单价：<span th:text="${product.price}">1000</span><br/>
                </li>
            </ul>
        </div>
        <div class="card-footer">
            信工院2021.05.24
        </div>
    </div>

（8）启动服务器

在这里插入图片描述

添加空里表

在这里插入图片描述

四、课后作业

任务：利用MyBatis、JPA或Redis技术，从数据库读取用户信息进行验证用户是否登录成功

1、增加用户表t_user

在这里插入图片描述

2、创建用户实体类

在这里插入图片描述

package net.zjs.lesson09.bean;

/**
 * 功能：用户实体类
 * 作者：zjs
 * 日期：2021-05-19
 */
public class User {
    private int id;
    private String name;
    private int age;
    private String address;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", age=" + age +
                ", address='" + address + '\'' +
                '}';
    }
}