htmx 学习

akck

已于 2024-05-15 15:12:50 修改

阅读量1.3k

点赞数 39

文章标签：学习 html5 xhtml

于 2024-04-06 13:59:06 首次发布

本文链接：https://blog.csdn.net/2301_79701576/article/details/137425124

版权

HTMX学习 day 1

最近听说有一款特别火爆的前端的js框架，可以在不使用一行js代码的情况下实现页面的交互，我对此产生了浓厚的兴趣

先是了解了htmx :(这里是直接粘贴官方文档)

htmx 允许您使用属性直接在 HTML 中访问 AJAX、CSS 转换、WebSockets 和服务器发送事件，因此您可以构建具有超文本的简单性和强大功能的现代用户界面

HTX很小（~14k min.gz’d），无依赖性，可扩展，与 react 相比，IE11 兼容且代码库大小减少了 67%

感觉非常轻量，而且对于开发者十分友好。

映入htmx方法：

这里我写了一个demo用Java后端+htmx写的，感觉好爽，直接简化看js代码的书写。

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;


@Controller
public class DemoController {

    @PostMapping("/clicked")
    @ResponseBody
    public String handleButtonClick() {
        return "按钮已点击!";
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTMX Demo</title>
  <script src="https://unpkg.com/htmx.org"></script>
</head>
<body>

<button hx-post="/clicked" hx-swap="outerHTML">
    <!--  这是post请求的练习
       记录一下学习到的知识点 ： hx-post 表示发送的是post请求
       hx-swap="outerHTML" 表示将请求获取到的内容替换下面的按钮
  -->
  点击我
</button>

</body>
</html>

这里整理一下刚才用到的htmx代码的含义:

hx-post – 表示发送的是post请求

hx-swap – outerHTMX 表示将相应的内容替换到按钮的位置

这里我用4.0整合了一下htmx的基本语法内容：

1. `hx-get`

用途：从服务器异步获取HTML，并将其加载到指定的目标元素中。
示例：<a href="/example" hx-get="/get/data" hx-target="#target">Load</a>

2. `hx-post`, `hx-put`, `hx-delete`

用途：支持通过POST、PUT、DELETE方法向服务器发送请求。
示例：<form hx-post="/post/data" hx-target="#target">...</form>

3. `hx-target`

用途：指定响应内容的目标元素。
示例：hx-target="#id"

4. `hx-swap-oob`

用途：支持"out of band"更新，允许你从响应中选择性地更新页面上多个元素。
示例：<div id="update" hx-swap-oob="true">...</div>

5. `hx-trigger`

用途：定义触发请求的事件类型，如点击、悬停等。
示例：hx-trigger="click"

6. `hx-prompt`

用途：在发送请求之前提示用户输入。
示例：hx-prompt="Please enter your name"

7. `hx-confirm`

用途：在执行操作前显示一个确认对话框。
示例：hx-confirm="Are you sure?"

8. `hx-push-url`

用途：在请求完成后更新浏览器的URL。
示例：hx-push-url="/new/url"

9. `hx-vals`

用途：向请求添加额外的数据。
示例：hx-vals='{"key":"value"}'

10. `hx-select`

用途：指定响应中哪些元素应该被加载到目标中。
示例：hx-select="#only-this-part"

11. `hx-indicator`

用途：指定一个元素作为操作期间的指示器（如加载旋转器）。
示例：hx-indicator="#loading"

12. `hx-headers`

用途：向请求添加自定义HTTP头。
示例：hx-headers='{"X-Custom-Header":"value"}'

13. `hx-ext`

用途：启用HTMX扩展。
示例：hx-ext="json-enc"

14. `hx-history-elt`

用途：指定哪个元素的变化应该影响浏览器历史记录。
示例：hx-history-elt="true"

使用HTMX的好处

无需JavaScript：可以直接在HTML中声明动态行为，减少JavaScript代码的编写。
渐进增强：HTMX允许你在不改变后端逻辑的情况下，逐步增强前端页面的交互性。
易于学习：HTMX的语法直观简单，容易理解和使用，特别适合不熟悉复杂JavaScript框架的开发者。

感觉有了ai之后学习那些新的知识更加便捷了。

我尝试用给出的这些语法去单个进行练习并书写笔记加深理解

练习后端代码：

// 处理post请求的后端
@GetMapping("/server/post")
public String handlePost(@RequestParam String message) {
    // 这里是简单返回接受到的数据 实际应用中可能需要保存到数据库中
    return "信息" + message;
}

// 处理put请求
@PutMapping
public String handlePut() {
    // 这里模拟资源跟新的操作
    return "执行了一个数据库的跟新操作";
}

// 处理delete请求
@DeleteMapping("/server/delete")
public String handleDelete() {
    // 这里模拟数据库执行删除操作
    return "数据库成功执行删除操作";
}


// 处理get请求
@GetMapping("/server/details")
public String loadDetails() {
    // 返回一些详细信息 实际应用中可能会根据请求返回不同的数据
    return "请求返回";
}

练习前端HTMX代码

<!-- 练习使用hx-post 提交表单-->
<form hx-post=".server/post" hx-target="#post-result">
    <input type="text" name="message" placeholder="Type a message">
    <button type="submit">提交</button>
</form>
<div id="post-result"></div>
<!-- 学习笔记 这里的意思是将表单提交到/server/post   并且将结果跟新到id为post-result的元素之中-->
<!--  知识巩固  placeholder 作用： 提示输入框中要输入的属性
-->


<!--练习使用hx-put跟新资源-->
<button hx-put="/server/put" hx-target="#put-result" hx-trigger="click">
    修改结果
</button>
<div id="put-result"></div>
<!--学习笔记  这里的put和target 上面写过了 重点是这个 hx-trigger 标签
    hx-trigger 作用是定义触发请求的事件类型 如 点击 悬停 等
    知识巩固  click 点击  dblclick 双击
-->

<!--练习使用hx-delete删除资源-->
<a href="#" hx-delete="/server/delete" hx-trigger="click" hx-target="body" hx-swap="outerHTML">
    删除结果
</a>
<!--学习笔记 当链接被点击是，将/server/delete地址发送DEKETE请求，结果显示在alert中
     知识巩固  hx-trigger="body" 表示将结果返回到body属性中
     hx-swap="outerHTML"      表示用相应结果替换先前的html页面中的内容
-->

<!--练习hx-target 和 hx-swap-oob联合使用-->
<div id="user-list" hx-get="/service/user" hx-trigger="click" hx-target="#user-list" hx-swap-oob="true">
    自动跟新列表
</div>
<!-- 学习笔记  异步加载数据 响应中的out-of-band元素将跟新到对应的ID的元素中
     这里在次巩固一下hx-swap-oob="true" 的内容
     hx-swap-oob="true“  作用是： 支持"out of band"更新 允许你从响应中选择性跟新页面上多个元素
        就是将页面上的元素跟新
-->
<!-- 使用hx-trigger 实现悬停加载数据-->、
<div hx-get="/server/details" hx-target="#details" hx-trigger="mouseenter">
    悬停就可以加载数据哦！
</div>
<div id="details"></div>
<!-- 学习笔记 hx-trigger="mouseenter" 表示发送请求的方式为悬停触发 意思是只要悬停就可以把元素显示出来 -->

练习效果

在这里插入图片描述

练习总体感受就是htmx对于后端开发者非常友好，可以让后端开发者不写一行cs代码就实现页面的交互，而且开发效率非常高。

在这里插入图片描述

补充：

后端

// 后端配合的额外添加数据的代码
@PostMapping("/vals/example")
public String handleVals(@RequestParam String extraData) {
    return "添加数据" + extraData;
}

// 跟新http头
@GetMapping("/headers/example")
@ResponseBody
public String handleHeaders(@RequestHeader("X-Custom-Header") String customHeader) {
    return "Received header: " + customHeader;
}

前端

<!--提示用户输入密码的案例-->
<button hx-post="/propt/example" hx-prompt="请输入密码" hx-target="#reponse">发送</button>
<div id="response"></div>
<!-- 学习笔记  这里主要学习的是hx-prompt 这个属性 作用是在发送请求之前去提示用户输入
-->
<!--确认对话框的案例-->
<button hx-delete="/confirm/example" hx-confirm="你确定？" hx-target="#response">
    删除
</button>
<!--学习笔记  hx-confirm 作用是在点击之后跳出对话框提示你是否确认你的操作
-->

<!-- 跟新url的案例-->
<button hx-get="/push/url" hx-push-url="/new/url" hx-target="#response">
    跟新url
</button>
<!--学习笔记 hx-push-url="要跟新的新的url" -->

<!--添加额外数据的案例-->
<button hx-post="/vals/example" hx-vals='{"extraData":"1234"}' hx-target="#response">
    提交
</button>
<!-- 学习笔记 hx-vals 表示要额外添加的内容
-->

<!--指定目标元素的案例-->
<div id="only-this-part">
    指定目标的元素
</div>
<!--学习笔记
此示例主要体现在前端，通过hx-select指令选择特定的DOM元素更新到页面的特定部分。
-->

<!-- 加载指示器的案例-->
<div id="loading" style="display: none;">...</div>
<button hx-get="/example" hx-indicator="#loading" hx-target="#response">load</button>
<!--学习笔记
hx-indicator
指定一个元素作为操作期间的指示器（如加载旋转器）
-->

<!--自定义http响应头的案例-->
<button hx-get="/headers/example" hx-headers='{"X-Custom-Header":"value"}' hx-target="#response">
    发送请求
</button>