一、 什么是 Thymeleaf
- JPA（Java Persistence API）：是一种用于对象关系映射（ORM）的 Java 规范，它简化了数据库操作，使开发者可以以面向对象的方式处理数据存储。通过定义实体类和数据访问接口，JPA 框架可以自动生成 SQL 语句并执行数据库操作。
- Thymeleaf：是一种现代的服务器端 Java 模板引擎，它允许开发者在 HTML 页面中嵌入动态内容，实现页面的动态生成。Thymeleaf 提供了丰富的模板语法和标签，可以方便地与后端数据进行交互，并生成最终的 HTML 页面返回给客户端。
二、相关配置 ：
1. 首先要引入依赖：
1.1 pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.3.3</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.ty</groupId>
<artifactId>Thymeleaf</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<name>Thymeleaf</name>
<description>Thymeleaf</description>
<url/>
<licenses>
<license/>
</licenses>
<developers>
<developer/>
</developers>
<scm>
<connection/>
<developerConnection/>
<tag/>
<url/>
</scm>
<properties>
<java.version>21</java.version>
</properties>
<dependencies>
<!-- 导入thymeleaf 布局包 -->
<dependency>
<groupId>nz.net.ultraq.web.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>1.0.6</version>
</dependency>
<!-- 导入 mybatis-plus 包 -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-spring-boot3-starter</artifactId>
<version>3.5.7</version>
</dependency>
<!-- 导入 MySQL 驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.30</version>
</dependency>
<!-- 引入阿里巴巴数据源 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-3-starter</artifactId>
<version>1.2.20</version>
</dependency>
<!-- 开启热部署 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<!-- 导入jquery包 -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.7.1</version>
</dependency>
<!-- thymeleaf 模版引擎 启动器 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- SpringBoot web 启动器 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- 导入mysql包 -->
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
<!-- 导入 lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!-- tomcat -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
<!-- SpringBoot test 启动器 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- 引入MyBatis-Plus支持（不需要再引入MyBatis包） -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-spring-boot3-starter</artifactId>
<version>3.5.7</version>
</dependency>
<!-- 引入MyBatis-Plus动态数据源支持 -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>dynamic-datasource-spring-boot3-starter</artifactId>
<version>4.1.2</version>
</dependency>
<!-- 引入 slf4j 包 -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
Thymeleaf 模版的使用
然后 就可以在 html 中引用 Thymeleaf 模版：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>物联设备信息管理主页面</title>
<!-- 引入 jQuery -->
<script th:src="@{/jquery-3.7.1.js}" src="../static/jquery-3.7.1.js"></script>
<style>
a {
text-decoration: none;
text-align: center;
}
#Add {
top: 70px;
left: 690px;
position: fixed;
padding: 10px 15px;
background-color: #00c5ff;
color: white;
text-decoration: none;
border-radius: 4px;
font-size: 18px; /* 调整消息字体大小 */
margin-bottom: 20px; /* 增加与下面元素的距离 */
}
table {
width: 1200px; /* 设置表格的宽度 */
border-collapse: collapse;
margin-top: 60px;
}
th, td {
padding: 15px; /* 增加单元格内边距 */
}
h1 {
font-size: 32px; /* 调整标题字体大小 */
margin-bottom: 30px; /* 增加与下面元素的距离 */
}
</style>
</head>
<body>
<h1 align="center">物联设备信息管理</h1>
<p th:text="${msg}" align="center"></p>
<div id="Add">
<a th:href="@{/add}">添加</a>
</div>
<table border="1" cellspacing="0" cellpadding="0" align="center">
<tr bgcolor="#a9a9a9">
<th>设备ID</th>
<th>设备名称</th>
<th>设备制作商</th>
<th>型号</th>
<th>安装日期</th>
<th>最后维护日期</th>
<th>设备位置</th>
<th>设备IP地址</th>
<th>设备状态</th>
<th>操作</th>
</tr>
<tr th:each="device:${iotDevices}">
<td th:text="${device.getDeviceId()}"></td>
<td th:text="${device.getDeviceName()}"></td>
<td th:text="${device.getManufacturer()}"></td>
<td th:text="${device.getModel()}"></td>
<td th:text="${#dates.format(device.getInstallationDate(),'yyyy-MM-dd')}"></td>
<td th:text="${#dates.format(device.getLastMaintenanceDate(),'yyyy-MM-dd')}"></td>
<td th:text="${device.getLocation()}"></td>
<td th:text="${device.ip}"></td>
<td th:switch="${device.getStatus()}">
<span th:case="0" style="color: darkgray ; font-weight: bold">离线</span>
<span th:case="1" style="color: green ; font-weight: bold">在线</span>
<span th:case="2" style="color: red ; font-weight: bold">维护中</span>
</td>
<td><a th:href="@{/update(id=${device.getDeviceId()})}">修改</a>
<!-- <a th:href="@{/delete(id=${device.getDeviceId()})}">删除</a>-->
<a th:href="|del(${device.getDeviceId()}|">删除</a>
</td>
</tr>
</table>
<script>
$("tr:odd").css("background-color", "lightpink");
$("tr:even").css("background-color", "lightskyblue");
$("tr:first").css("background-color", "lightslategray");
/**
* ajax 删除
*/
// function del(deviceId){
// if (confirm("确定删除吗？")){
// window.location.href="/del?"+ deviceId ;
// }
// }
window.onload = function() {
function del(deviceId) {
if (confirm("确定删除吗？")) {
// 删除操作逻辑
$.ajax({
url: "/del",
type: "post",
data: { deviceId: deviceId },
success: function(response) {
// 删除成功后的处理，例如显示成功消息或更新页面显示
alert("删除成功！");
},
error: function(error) {
// 删除失败后的处理
alert("删除失败：" + error.responseText);
}
});
}
}
};
</script>
</body>
</html>Thymeleaf 模版的使用
一般都是使用这种方式引用 Thymeleaf 模版： <td th:text="${device.getModel()}"></td>
就是这样 是不是非常方便
2. application.yml 配置文件：
spring:
#配置数据源
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/dao?useUnicode=true&characterEncoding=utf-8
username: root
password: whs
#配置mybatis相关信息
mybatis:
config-location: classpath:mybatis/mybatis-config.xml
mapper-locations: classpath:mybatis/mapper/*.xml
type-aliases-package: com.ty.iot.pojo
#配置日志输出
logging:
level:
com.baomidou: debug #设置MyBatis-Plus日志级别为debug
org.springframework.jdbc.datasource.init: debug #设置DataSource初始化日志级别为debug
#容器配置
server:
port: 8080
servlet:
encoding:
charset: UTF-8
还有一点就是 Spring boot 的引入css或者配置文件 必须要放在resource 下面 不然读取不到
因为 Spring boot 默认且只读取 rsource 下的文件
3.编写 实体类 IotDevices
package com.ty.iot.entity;
import com.alibaba.fastjson.annotation.JSONField;
import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data;
import org.springframework.format.annotation.DateTimeFormat;
import java.io.Serializable;
import java.util.Date;
/**
* IotDevices
*
* @aurhor Administrator whs
* @since 2024/9/24
*/
@Data
public class IotDevices implements Serializable {
private static final long serialVersionUID = 1L;
/**
* 设备ID使用自动增长赋值
*/
@JsonProperty("device_id")
private Integer deviceId;
/**
* 设备名称
*/
@JsonProperty("device_name")
private String deviceName;
/**
* 设备制造商
*/
@JsonProperty("manufacturer")
private String manufacturer;
/**
* 型号
*/
@JsonProperty("model")
private String model;
/**
* 安装日期
*/
@JsonProperty("installation_date")
@DateTimeFormat(pattern = "yyyy-MM-dd")
@JSONField(format = "yyyy-MM-dd")
private Date installationDate;
/**
* 最后维护日期
*/
@JsonProperty("last_maintenance_date")
@DateTimeFormat(pattern = "yyyy-MM-dd")
@JSONField(format = "yyyy-MM-dd")
private Date lastMaintenanceDate;
/**
* 设备位置
*/
@JsonProperty("location")
private String location;
/**
* 设备IP地址
*/
@JsonProperty("ip")
private String ip;
/**
* 设备状态[0=离线,1=在线,2=维护中]
*/
@JsonProperty("status")
private Integer status;
}
4. 接口 IotDevicesMapper
package com.ty.iot.mapper;
import com.ty.iot.entity.IotDevices;
import java.util.List;
public interface IotDevicesMapper {
int add(IotDevices iotDevices);
int delete(int id);
int update(IotDevices iotDevices);
IotDevices listById(int id);
List<IotDevices> list();
}
5. IotDevicesMapper.xml 文件
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.ty.iot.mapper.IotDevicesMapper"> <resultMap id="iotResource" type="iotDevices"> <id column="device_id" property="deviceId"></id> <result column="device_name" property="deviceName"></result> <result column="installation_date" property="installationDate"></result> <result column="last_maintenance_date" property="lastMaintenanceDate"></result> <result column="manufacturer" property="manufacturer"></result> <result column="model" property="model"></result> <result column="location" property="location"></result> <result column="ip" property="ip"></result> <result column="status" property="status"></result> </resultMap> <insert id="add"> insert iot_devices values(default,#{deviceName},#{manufacturer},#{model} ,#{installationDate},#{lastMaintenanceDate},#{location},#{ip},#{status}) </insert> <update id="update"> update iot_devices <trim prefix="set" suffixOverrides="," suffix="where"> <if test="deviceName != null and deviceName != ''"> device_name = #{deviceName}, </if> <if test="manufacturer != null and manufacturer != ''"> manufacturer = #{manufacturer}, </if> <if test="model != null and model != ''"> model = #{model}, </if> <if test="installationDate != null"> installation_date = #{installationDate}, </if> <if test="lastMaintenanceDate != null"> last_maintenance_date = #{lastMaintenanceDate}, </if> <if test="location != null and location != ''"> location = #{location}, </if> <if test="ip != null and ip != ''"> ip = #{ip}, </if> <if test="status != null"> status = #{status}, </if> </trim> device_id = #{deviceId} </update> <delete id="delete"> delete from iot_devices where device_id = #{deviceId} </delete> <select id="listById" resultMap="iotResource"> select * from iot_devices <where> <if test="deviceId != null"> device_id = #{deviceId} </if> </where> </select> <select id="list" resultMap="iotResource"> select * from iot_devices order by installation_date desc </select> </mapper>
6. 最后编写 Controller
package com.ty.iot.controller;
import com.ty.iot.entity.IotDevices;
import com.ty.iot.service.IotDevicesService;
import jakarta.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* IotDevicesController
*
* @aurhor Administrator whs
* @since 2024/9/25
*/
@Controller
public class IotDevicesController {
@Resource
private IotDevicesService iotDevicesService;
@GetMapping("/index")
public String index(Model model) {
model.addAttribute("iotDevices", iotDevicesService.list());
return "index";
}
@GetMapping("/add")
public String add(Model model) {
return "add";
}
@RequestMapping("/add")
public String toAdd(IotDevices iotDevices, Model model) {
int add = iotDevicesService.add(iotDevices);
if (add == 0) {
return "redirect:/index";
}
return "redirect:/index";
}
@GetMapping("/update")
public String upd(Model model, int id) {
model.addAttribute("iotDevices", iotDevicesService.listById(id));
return "update";
}
@RequestMapping("/doUpdate")
public String doUpdate(IotDevices iotDevices, Model model) {
int upd = iotDevicesService.update(iotDevices);
if (upd == 0) {
return "redirect:/upd";
}
return "redirect:/index";
}
@RequestMapping("/del?{id}")
public String del(@PathVariable("id") int id) {
iotDevicesService.delete(id);
return "redirect:/index";
}
}
一个简单的 JPA+Thymeleaf增删改查 就完成了
三、总结
Thymeleaf 是一个现代的服务器端 Java 模板引擎，用于创建动态的 Web 页面。它允许在 HTML 文件中嵌入动态内容，并与后端数据进行交互，从而实现页面的动态生成。
自然的模板语法：
- Thymeleaf 的模板语法类似于 HTML，使得前端开发人员容易上手。它使用标准的 HTML 标签和属性，并通过添加特定的 Thymeleaf 属性来实现动态内容的插入。
- 例如，可以使用
th:text属性来设置元素的文本内容，th:each属性来遍历列表数据等。强大的表达式语言：
- Thymeleaf 提供了一种强大的表达式语言，可以在模板中访问后端数据。表达式语言支持基本的数据类型、对象属性访问、集合遍历、条件判断等操作。
- 例如，可以使用
${user.name}来访问后端传递过来的用户对象的名称属性。模板布局和片段：
- Thymeleaf 支持模板布局，可以将页面的公共部分提取出来作为模板片段，然后在其他页面中通过
th:insert或th:replace属性进行引用。这样可以提高代码的复用性，减少重复的代码编写。
