温州哪里有网站建设,哈尔滨百度关键词优化,百度广告代运营,点击精灵seo一、 什么是 Thymeleaf JPA#xff08;Java Persistence API#xff09;#xff1a;是一种用于对象关系映射#xff08;ORM#xff09;的 Java 规范#xff0c;它简化了数据库操作#xff0c;使开发者可以以面向对象的方式处理数据存储。通过定义实体类和数据访问接口Java Persistence API是一种用于对象关系映射ORM的 Java 规范它简化了数据库操作使开发者可以以面向对象的方式处理数据存储。通过定义实体类和数据访问接口JPA 框架可以自动生成 SQL 语句并执行数据库操作。Thymeleaf是一种现代的服务器端 Java 模板引擎它允许开发者在 HTML 页面中嵌入动态内容实现页面的动态生成。Thymeleaf 提供了丰富的模板语法和标签可以方便地与后端数据进行交互并生成最终的 HTML 页面返回给客户端。 二、相关配置 1. 首先要引入依赖 1.1 pom.xml
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion3.3.3/versionrelativePath/ !-- lookup parent from repository --/parentgroupIdcom.ty/groupIdartifactIdThymeleaf/artifactIdversion0.0.1-SNAPSHOT/versionpackagingwar/packagingnameThymeleaf/namedescriptionThymeleaf/descriptionurl/licenseslicense//licensesdevelopersdeveloper//developersscmconnection/developerConnection/tag/url//scmpropertiesjava.version21/java.version/propertiesdependencies!-- 导入thymeleaf 布局包 --dependencygroupIdnz.net.ultraq.web.thymeleaf/groupIdartifactIdthymeleaf-layout-dialect/artifactIdversion1.0.6/version/dependency!-- 导入 mybatis-plus 包 --dependencygroupIdcom.baomidou/groupIdartifactIdmybatis-plus-spring-boot3-starter/artifactIdversion3.5.7/version/dependency!-- 导入 MySQL 驱动 --dependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion8.0.30/version/dependency!-- 引入阿里巴巴数据源 --dependencygroupIdcom.alibaba/groupIdartifactIddruid-spring-boot-3-starter/artifactIdversion1.2.20/version/dependency!-- 开启热部署 --dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-devtools/artifactIdscoperuntime/scopeoptionaltrue/optional/dependency!-- 导入jquery包 --dependencygroupIdorg.webjars/groupIdartifactIdjquery/artifactIdversion3.7.1/version/dependency!-- thymeleaf 模版引擎 启动器 --dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId/dependency!-- SpringBoot web 启动器 --dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependency!-- 导入mysql包 --dependencygroupIdcom.mysql/groupIdartifactIdmysql-connector-j/artifactIdscoperuntime/scope/dependency!-- 导入 lombok --dependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdoptionaltrue/optional/dependency!-- tomcat --dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-tomcat/artifactIdscopeprovided/scope/dependency!-- SpringBoot test 启动器 --dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependency!-- 引入MyBatis-Plus支持不需要再引入MyBatis包 --dependencygroupIdcom.baomidou/groupIdartifactIdmybatis-plus-spring-boot3-starter/artifactIdversion3.5.7/version/dependency!-- 引入MyBatis-Plus动态数据源支持 --dependencygroupIdcom.baomidou/groupIdartifactIddynamic-datasource-spring-boot3-starter/artifactIdversion4.1.2/version/dependency!-- 引入 slf4j 包 --dependencygroupIdorg.slf4j/groupIdartifactIdslf4j-api/artifactId/dependency/dependenciesbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactId/plugin/plugins/build/projectThymeleaf 模版的使用
然后 就可以在 html 中引用 Thymeleaf 模版
!DOCTYPE html
html langen
headmeta charsetUTF-8title物联设备信息管理主页面/title!-- 引入 jQuery --script th:src{/jquery-3.7.1.js} src../static/jquery-3.7.1.js/scriptstylea {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
bodyh1 aligncenter物联设备信息管理/h1p th:text${msg} aligncenter/pdiv idAdda th:href{/add}添加/a/divtable border1 cellspacing0 cellpadding0 aligncentertr bgcolor#a9a9a9th设备ID/thth设备名称/thth设备制作商/thth型号/thth安装日期/thth最后维护日期/thth设备位置/thth设备IP地址/thth设备状态/thth操作/th/trtr th:eachdevice:${iotDevices}td th:text${device.getDeviceId()}/tdtd th:text${device.getDeviceName()}/tdtd th:text${device.getManufacturer()}/tdtd th:text${device.getModel()}/tdtd th:text${#dates.format(device.getInstallationDate(),yyyy-MM-dd)}/tdtd th:text${#dates.format(device.getLastMaintenanceDate(),yyyy-MM-dd)}/tdtd th:text${device.getLocation()}/tdtd th:text${device.ip}/tdtd th:switch${device.getStatus()}span th:case0 stylecolor: darkgray ; font-weight: bold离线/spanspan th:case1 stylecolor: green ; font-weight: bold在线/spanspan th:case2 stylecolor: red ; font-weight: bold维护中/span/tdtda th:href{/update(id${device.getDeviceId()})}修改/a
!-- a th:href{/delete(id${device.getDeviceId()})}删除/a--a th:href|del(${device.getDeviceId()}|删除/a/td/tr/tablescript$(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.Driverurl: jdbc:mysql://localhost:3306/dao?useUnicodetruecharacterEncodingutf-8username: rootpassword: whs#配置mybatis相关信息
mybatis:config-location: classpath:mybatis/mybatis-config.xmlmapper-locations: classpath:mybatis/mapper/*.xmltype-aliases-package: com.ty.iot.pojo#配置日志输出
logging:level:com.baomidou: debug #设置MyBatis-Plus日志级别为debugorg.springframework.jdbc.datasource.init: debug #设置DataSource初始化日志级别为debug#容器配置
server:port: 8080servlet: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);ListIotDevices list();}5. IotDevicesMapper.xml 文件 ?xml version1.0 encodingUTF-8?
!DOCTYPE mapper PUBLIC -//mybatis.org//DTD Mapper 3.0//EN http://mybatis.org/dtd/mybatis-3-mapper.dtd
mapper namespacecom.ty.iot.mapper.IotDevicesMapperresultMap idiotResource typeiotDevicesid columndevice_id propertydeviceId/idresult columndevice_name propertydeviceName/resultresult columninstallation_date propertyinstallationDate/resultresult columnlast_maintenance_date propertylastMaintenanceDate/resultresult columnmanufacturer propertymanufacturer/resultresult columnmodel propertymodel/resultresult columnlocation propertylocation/resultresult columnip propertyip/resultresult columnstatus propertystatus/result/resultMapinsert idaddinsert iot_devices values(default,#{deviceName},#{manufacturer},#{model},#{installationDate},#{lastMaintenanceDate},#{location},#{ip},#{status})/insertupdate idupdateupdate iot_devicestrim prefixset suffixOverrides, suffixwhereif testdeviceName ! null and deviceName ! device_name #{deviceName},/ifif testmanufacturer ! null and manufacturer ! manufacturer #{manufacturer},/ifif testmodel ! null and model ! model #{model},/ifif testinstallationDate ! nullinstallation_date #{installationDate},/ifif testlastMaintenanceDate ! nulllast_maintenance_date #{lastMaintenanceDate},/ifif testlocation ! null and location ! location #{location},/ifif testip ! null and ip ! ip #{ip},/ifif teststatus ! nullstatus #{status},/if/trimdevice_id #{deviceId}/updatedelete iddeletedelete from iot_devices where device_id #{deviceId}/deleteselect idlistById resultMapiotResourceselect * from iot_deviceswhereif testdeviceId ! nulldevice_id #{deviceId}/if/where/selectselect idlist resultMapiotResourceselect * 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 {Resourceprivate 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;}}一个简单的 JPAThymeleaf增删改查 就完成了 三、总结 Thymeleaf 是一个现代的服务器端 Java 模板引擎用于创建动态的 Web 页面。它允许在 HTML 文件中嵌入动态内容并与后端数据进行交互从而实现页面的动态生成。 自然的模板语法 Thymeleaf 的模板语法类似于 HTML使得前端开发人员容易上手。它使用标准的 HTML 标签和属性并通过添加特定的 Thymeleaf 属性来实现动态内容的插入。例如可以使用th:text属性来设置元素的文本内容th:each属性来遍历列表数据等。 强大的表达式语言 Thymeleaf 提供了一种强大的表达式语言可以在模板中访问后端数据。表达式语言支持基本的数据类型、对象属性访问、集合遍历、条件判断等操作。例如可以使用${user.name}来访问后端传递过来的用户对象的名称属性。 模板布局和片段 Thymeleaf 支持模板布局可以将页面的公共部分提取出来作为模板片段然后在其他页面中通过th:insert或th:replace属性进行引用。这样可以提高代码的复用性减少重复的代码编写。
