越来越香了。

它们不仅是内置的系统组件，而且还被自动推送安装。即使在少数未安装的系统上 - 使用中的 web.view 也会自动安装（无需编写任何代码）。

我用它开发过很多项目，不得不说它稳定可靠，性能强大，界面简洁，真是省心。

.js

这里有一个适合使用的极简前端组件htmx.js。该组件最大的特点是简单、一次学会、易于理解。

我们浏览网页的正常流程是在浏览器中输入URL，并向HTTP服务器发送请求。然后服务器返回 HTML 代码，浏览器显示该页面。

然而htmx.js却非常有创意，网页上的每个HTML节点都可以向服务器发送请求并获取HTML，并实时更新页面上的指定节点。并且无需编写任何代码。

开始

首先我们打开，创建一个项目并选择htmx.js模板：

生成的工程如下：

点击“运行”直接测试效果，点击“发布”生成独立的EXE文件。

在项目管理器中右键单击“网页”弹出菜单，然后单击“使用外部编辑器打开”。如果安装了VS Code，将使用VS Code打开网页目录。

单击并在 VS Code 中打开 .html 源代码：

htmx.js 基础知识

打开.html，先看一个最简单的htmx.js示例：

点这里发送 GET 请求

请注意，所有以“hx-”为前缀的属性都在 htmx.js 中使用。

hx- 用于指定事件发生时触发HTTP请求，例如：

hx-trigger="click"

表示当点击事件发生时触发请求。

hx- 可以使用标准网页事件名称。常用的事件如下：

也可以在事件名称后添加修饰符。例如修饰符once表示只允许触发一次：

hx-trigger="click once"

其他事件装饰器：

以下 HTML 使用多个事件装饰器：

这意味着当松开按键（ ）且文本框内容发生变化（ ）时触发，并延迟 500 毫秒后发送请求。

hx-get 指定请求哪个后端页面，例如：

hx-get="/api/index.aardio"

表示当事件触发时，页面“/api/”。被要求。由于启动SPA应用时，后端根目录被自动指定为“/web”，因此实际请求为“/web/api/”。

hx-swap指定将返回的HTML写入哪里，“”指定更新网页节点内部HTML，“”指定替换目标网页节点的所有HTML，其他包括“”、“”、“”、“ “ ， “没有任何” 。看名字就知道它们是做什么的，我就不解释了。

hx-属性使用CSS选择器来指定要写入的网页节点，例如：

hx-target="#info-div"

指定服务器返回的 HTML 写入 id 为“info-div”的节点。如果省略hx-属性，则写入目标是当前节点本身。

hxmx.js更新HTML时，如果发现新旧HTML中ID相同的元素，就会进行优化并平滑显示。

看到这里，你已经知道如何使用htmx.js了。

虽然htmx.js文档中有更多奇特的用法，但它们可能并不通用。有些事情搞得太复杂并不一定是好事。

htmx.js + 后端

它提供了嵌入式HTTP服务器，可以直接使用代码编写网页，并且支持类似PHP的模板语法。

模板语法很简单，代码写在里面，HTML代码写在外面。其实就是将外部代码转换成函数的参数。

例如，服务器端有如下代码：

abc

运行后会自动转换为纯代码如下：

print("abc"); response.write("123");

在HTTP后端，该函数实际上指向用于向HTTP客户端输出数据的.()函数。

HTTP 后端有两个最常用的对象。该对象包含所有HTTP请求信息，该对象是HTTP响应对象，用于向客户端发送数据。

打开内置的“工具>库函数文档”，点击文档可以查看该对象的所有属性和方法。所有 HTTP 服务器实现都是统一兼容的。文档指定了用法。

也可以参考起始页的《网站开发与开发入门教程》。关于模板语法，请参考“语法与使用手册>语言>模板语法”

模板语法不仅可以用于编写 HTTP 后端，也可以用于输出 HTML，实际上可以用于生成任何字符串。 C# 中的许多函数都支持此模板语法。例如，在运行时编译 C# 代码支持使用模板语法生成 C# 代码。另外提供了.()函数直接解析模板并返回字符串。

htmx.js 定向动画，后端线程

这里需要注意的是，上面示例项目中默认导入的HTTP服务器是：

wsock.tcp.simpleHttpServer;

这是一个多线程 HTTP 服务器，每次请求时执行的代码都在后台线程中运行。多线程开发需要注意的是，每个线程运行在独立的环境中，全局变量相互隔离。这个限制实际上让多线程开发更加简洁，陷阱也更少。详细信息请参考附带的“示例程序>语言>多线程”。

如果改为.tcp.，则为单线程异步HTTP服务器。

下面我们仍然使用默认的。多线程的优点是耗时操作不会冻结界面。当后端执行耗时操作时，网页前端通常需要显示动画。 htmx.js 使这变得非常简单。

我们只需要简单修改前面提到的网页代码如下：

点这里发送 GET 请求

主要是添加hx-属性。该属性的值使用 CSS 选择器来指定发送 HTTP 请求时要显示的 HTML 元素。此处指定 id 为“”的元素。

其实我们可以自定义这个请求动画的样式。我们打开样式文件.css并添加以下样式：

.htmx-indicator{ display:none; } .htmx-request.htmx-indicator{ display:inline; }

发送请求时，CSS类“htmx-”将自动添加到网页上设置的指示符元素中，并且当HTTP请求结束时该类将被删除。

然后我们打开对应的后端代码/web/api/。并输入以下代码：

上面代码的作用是：如果收到GET请求，线程会休眠2秒，模拟一个耗时的操作。然后输出当前时间。

我们运行一下看看效果：

请求参数

如果htmx.js中提交请求的节点是表单控件，只要指定name属性——请求参数就会自动以该名称发送，参数值为该控件的值。

如果提交请求的节点是表单，那么HTTP请求参数就是表单中所有控件的值。

您还可以使用 JSON 对象在节点的 hx-vals 属性中指定请求参数。例如网页是这样写的：

点这里发送 GET 请求

后端可以使用：

request.get["myval"]