Thymeleaf模板引擎
Posted qq_48838980
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Thymeleaf模板引擎相关的知识，希望对你有一定的参考价值。
一、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>
<!-- <!– 新 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>-->
<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="以上是关于Thymeleaf模板引擎的主要内容，如果未能解决你的问题，请参考以下文章