JPA + Thymeleaf 增删改查
一、 什么是 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.Driverurl: jdbc:mysql://localhost:3306/dao?useUnicode=true&characterEncoding=utf-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);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 {@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";}}
一个简单的 JPA+Thymeleaf增删改查 就完成了
三、总结
Thymeleaf 是一个现代的服务器端 Java 模板引擎,用于创建动态的 Web 页面。它允许在 HTML 文件中嵌入动态内容,并与后端数据进行交互,从而实现页面的动态生成。
自然的模板语法:
- Thymeleaf 的模板语法类似于 HTML,使得前端开发人员容易上手。它使用标准的 HTML 标签和属性,并通过添加特定的 Thymeleaf 属性来实现动态内容的插入。
- 例如,可以使用
th:text
属性来设置元素的文本内容,th:each
属性来遍历列表数据等。强大的表达式语言:
- Thymeleaf 提供了一种强大的表达式语言,可以在模板中访问后端数据。表达式语言支持基本的数据类型、对象属性访问、集合遍历、条件判断等操作。
- 例如,可以使用
${user.name}
来访问后端传递过来的用户对象的名称属性。模板布局和片段:
- Thymeleaf 支持模板布局,可以将页面的公共部分提取出来作为模板片段,然后在其他页面中通过
th:insert
或th:replace
属性进行引用。这样可以提高代码的复用性,减少重复的代码编写。
相关文章:

JPA + Thymeleaf 增删改查
一、 什么是 Thymeleaf JPA(Java Persistence API):是一种用于对象关系映射(ORM)的 Java 规范,它简化了数据库操作,使开发者可以以面向对象的方式处理数据存储。通过定义实体类和数据访问接口&a…...
Android常用C++特性之std::this_thread
声明:本文内容生成自ChatGPT,目的是为方便大家了解学习作为引用到作者的其他文章中。 std::this_thread 是 C11 标准库中的一个命名空间,提供了一组与当前线程(即调用这些函数的线程)相关的操作。通过 std::this_threa…...
成语700词(31~45组)
目录 31.对待错误的态度(12 个)32.改变与不变(19 个)33.顺势造势(6 个)34.自然会发生(6 个)35.提早准备和补救(11 个)36.办公、管理相关(8 个)37.空谈与虚幻(8 个)38.来者众多(11 个)39.人多热闹(6)40.好坏掺杂(7 个)41.流行与名声(14 个)42.与传播、传闻…...

vue3组件通信(组合式API)
vue3组件通信(组合式API) vue3组件通信,采用组合式API。选项式API,参看官网 Vue3组件通信和Vue2的区别: 移出事件总线,使用mitt代替。 vuex换成了pinia。把.sync优化到了v-model里面了。把$listeners所…...

从预测性维护到智能物流:ARM边缘计算控制器的工业实践
工业4.0时代的到来,边缘计算技术成为连接物理世界与数字世界的桥梁。ARM架构的边缘计算控制器凭借其低功耗、高能效和灵活性等特点,在工业自动化领域展现出巨大潜力。本文将通过几个实际应用案例来探讨ARM边缘计算控制器是如何提升生产线效率和安全性的&…...

2024年汉字小达人区级自由报名备考冲刺:最新问题和官模题练一练
今天是2024年第十一届汉字小达人的区级自由报名活动的第二天。 我们继续回答几个关于汉字小达人的最新问题,做几道2024年官方模拟题,帮助孩子们少走弯路,再冲刺一般,更精准地备考2024年汉字小达人。 【温馨提示】本专题在比赛期…...

Linux相关概念和重要知识点(8)(操作系统、进程的概念)
1.操作系统(OS) (1)基本结构的认识 任何计算机系统都包含一个基本的程序集合,用于实现计算机最基本最底层的操作,这个软件称为操作系统。操作系统大部分使用C语言编写,少量使用汇编语言。 从…...

测序技术--组蛋白甲基化修饰、DNA亲和纯化测序,教授(优青)团队指导:从实验设计、结果分析到SCI论文辅助
组蛋白甲基化修饰工具(H3K4me3 ChIP-seq)组蛋白甲基化类型也有很多种,包括赖氨酸甲基化位点H3K4、H3K9、H3K27、H3K36、H3K79和H4K20等。组蛋白H3第4位赖氨酸的甲基化修饰(H3K4)在进化上高度保守,是被研究最多的组蛋白修饰之一。 DNA亲和纯化测序 DNA亲…...

Llama 3.2来了,多模态且开源!AR眼镜黄仁勋首批体验,Quest 3S头显价格低到离谱
如果说 OpenAI 的 ChatGPT 拉开了「百模大战」的序幕,那 Meta 的 Ray-Ban Meta 智能眼镜无疑是触发「百镜大战」的导火索。自去年 9 月在 Meta Connect 2023 开发者大会上首次亮相,短短数月,Ray-Ban Meta 就突破百万销量,不仅让马…...

软考高级:SOA 和微服务 AI 解读
概念讲解 SOA(面向服务架构)和微服务虽然都是服务架构的设计模式,但它们的侧重点和实现方式有很大区别。为了帮助你理解这两个概念,我们可以从生活中的例子、概念本身的讲解以及记忆方法三方面入手。 生活化例子 **SOA…...

【每天学个新注解】Day 6 Lombok注解简解(五)—@SneakyThrows
SneakyThrows 简化异常处理 并不建议日常开发中通过此注解解决异常捕获问题!!! 允许方法抛出检查型异常而无需显式声明或捕获这些异常。这对于那些不希望在方法签名中声明异常或不愿意编写复杂的 try-catch 块的场景非常有用。 使用 SneakyT…...

C语言 | Leetcode C语言题解之第437题路径总和III
题目: 题解: /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ //递归遍历树节点,判断是否为有效路径 int dfs(struct TreeNode * root, int ta…...

Linux-TCP重传
问题描述: 应用系统进行切换,包含业务流量切换(即TongWeb主备切换)和MYSQL数据库主备切换。首先进行流量切换,然后进行数据库主备切换。切换后发现备机TongWeb上有两批次慢请求,第一批慢请求响应时间在133…...

Python通过Sqlalchemy框架实现增删改查
目录 简介 什么是SQLAlchemy? SQLAlchemy可以分为两个部分:Core和ORM。 一、首先安装sqlalchemy 二、在配置文件中添加数据库连接信息,我这里是Mysql 三、 创建数据库连接类,我这里是动态读取数据库的表字段,自动…...

windows C++ - 任务计划程序(并发运行时)
如果希望微调并发运行时的现有代码的性能,则任务计划程序会很有用。 无法从通用 Windows 平台 (UWP) 应用获取任务计划程序。 在 Visual Studio 2015 及更高版本中,concurrency::task 类和 ppltasks.h 中的相关类型使用 Windows 线程池作为其计划程序。…...
多米诺骨牌(模拟)
初始化数据结构: 使用一个布尔数组 arr 来表示每个位置是否被占用。初始时所有位置均为 false(未占用)。使用一个 LinkedHashMap(命名为 queue)来记录最近的 R 操作的位置。这个结构可以保持插入顺序,方便后…...
Unity DOTS系列之Struct Change核心机制分析
最近DOTS发布了正式的版本, 我们来分享一下DOTS里面Struct Change机制,方便大家上手学习掌握Unity DOTS开发。 基于ArchType与Chunk的Entity管理机制 我们回顾以下ECS的内存管理核心机制,基于ArchTypeChunk的Entity管理模式。每个Entity不直接存放数据,…...
「数组」定长滑动窗口|不定长滑动窗口 / LeetCode 2461|2958(C++)
目录 概述 1.定长滑动窗口 思路 复杂度 Code 2.不定长滑动窗口 思路 复杂度 Code 总结 概述 在双指针合集中,我们介绍了双指针算法: 「数组」数组双指针算法合集:二路合并|逆向合并|快慢去重|对撞指针 / LeetCode 88|26|11&#…...

【华为】用策略路由解决双出口运营商问题
需求描述 不同网段访问互联网资源时,走不同的出口,即PC1走电信出口,PC2走移动出口。 客户在内网接口下应用策略路由后往往出现无法访问内网管理地址的现象,该举例给出解决办法。 拓扑图 基础配置 #sysname R1 # # interface G…...

第L2周:机器学习|线性回归模型 LinearRegression:1. 简单线性回归模型
本文为🔗365天深度学习训练营 中的学习记录博客原作者:K同学啊 任务: ●1. 通过本文学习LinearRegression简单线形回归模型。 ●2. 模仿本文代码,通过鸢尾花花瓣长度预测花瓣宽度。 一、概念 什么是回归 回归的目的是为了预测&…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日,国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解,“超级…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

初探Service服务发现机制
1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能:服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源…...