当前位置： 首页 > article >正文

JPA + Thymeleaf 增删改查

article 2024/11/18 2:33:20

一、 什么是 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 文件中嵌入动态内容，并与后端数据进行交互，从而实现页面的动态生成。

  1. 自然的模板语法：

    • Thymeleaf 的模板语法类似于 HTML，使得前端开发人员容易上手。它使用标准的 HTML 标签和属性，并通过添加特定的 Thymeleaf 属性来实现动态内容的插入。
    • 例如，可以使用th:text属性来设置元素的文本内容，th:each属性来遍历列表数据等。

  2. 强大的表达式语言：

    • Thymeleaf 提供了一种强大的表达式语言，可以在模板中访问后端数据。表达式语言支持基本的数据类型、对象属性访问、集合遍历、条件判断等操作。
    • 例如，可以使用${user.name}来访问后端传递过来的用户对象的名称属性。

  3. 模板布局和片段：

    • Thymeleaf 支持模板布局，可以将页面的公共部分提取出来作为模板片段，然后在其他页面中通过th:insert或th:replace属性进行引用。这样可以提高代码的复用性，减少重复的代码编写。

http://www.kler.cn/a/324639.html

相关文章：

  • ODC 如何精确呈现SQL耗时 | OceanBase 开发者工具解析
  • ADS项目笔记 1. 低噪声放大器LNA天线一体化设计
  • v-html 富文本中图片使用element-ui image-viewer组件实现预览,并且阻止滚动条
  • Go八股（Ⅵ）Goroutine 以及其中的锁和思想
  • cmake生成器表达式
  • 接上篇-使用 element-plus 优化UI界面
  • 【Element-UI】实现el-drawer抽屉的左右拖拽宽度
  • ​美​团​一​面​-​2​
  • 《中国电子报》报道: 安宝特AR为产线作业者的“秘密武器
  • 一种用于常开型智能视觉感算系统的极速高精度模拟减法器
  • c++模拟真人鼠标轨迹算法
  • css实现自定义静态进度条-vue2
  • 【Elasticsearch】-dense_vector与hnsw的含义
  • idea 创建多模块项目
  • 探索基因奥秘：汇智生物如何利用组蛋白甲基化修饰测序技术革新农业植物基因组研究？
  • Hadoop三大组件之MapReduce（二）
  • matlab-对比两张图片的RGB分量的差值并形成直方图
  • 二次记录服务器被（logrotate）木马入侵事件
  • Redis实践之高级用法：管道、消息队列、事务、分布式锁
  • docker搭建clickhouse并初始化用户名密码
  • 【NLP】基于“检测器-纠错器”中文文本纠错框架
  • 大语言模型(LLM)效率优化技术全面综述：模型优化、数据优化、框架优化
  • 【unity进阶知识1】最详细的单例模式的设计和应用，继承和不继承MonoBehaviour的单例模式，及泛型单例基类的编写
  • 远程服务器安装anaconda并创建虚拟环境
  • 技术周总结09.23～09.29周日(分布式)
  • VCL界面组件DevExpress VCL v24.1.6全新发布