基于 Delphi 的前后端分离：之三，使用 HTMX

最新推荐文章于 2024-12-12 17:48:23 发布
原创 最新推荐文章于 2024-12-12 17:48:23 发布 · 1.6k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Delphi #前端 #HTMX

# 前请提要

基于 Delphi 的前后端分离：之一_delphi 后台+vue-优快云博客

基于 Delphi 的前后端分离：之二_后端 框架 delphi-优快云博客

# 发现一个非常好的前端框架 - HTMX

这里仍然使用之二里面提到的页面模板，但采用 HTMX 来和后端交互，做到前端显示的内容来自后端服务器的动态代码。

首先，整个页面的完整代码，是基于 BootStrap 框架的一个现成的页面。在这个页面里面，某个位置显示了价格 $12 是写死在页面里面的。
价格显然应该是动态的，价格数据由服务器端输出。因此，前端的页面里面需要加上代码，从服务器端获得最新的价格，呈现到页面上。

如果是最传统的 WEB 编程方式，就是在服务器端把包含价格信息在内的整个页面从 <html> 开始彻底重新构造一遍，全部输出给客户端。


### 页面代码：

#### 要使用 HTMLX
页面的头部，加上这行引用：

```

<script src="https://unpkg.com/htmx.org@1.9.12"></script>


```

#### 页面代码片段
```

<h2 clas
最低0.47元/天 解锁文章
pcplayer
关注
基于 Delphi 的前后端分离：之一
pcplayer的博客
12-02 2743
后端用 Delphi 来写服务器，输出数据给前端，前端用 JS 来从服务器获取数据，渲染页面。
基于 Delphi 的前后端分离：之二
pcplayer的博客
12-02 1982
前端套用网页模板，后端用 Delphi 开发，前后端彻底分离解耦。
htmx 是什么？
sensor_WU 博客
10-25 919
HTMX 提供了一种轻量级的方式来构建动态网页，使得开发者可以更专注于 HTML 和后端逻辑，而不是繁琐的 JavaScript 代码。它非常适合于快速开发需要动态更新的应用程序。懂得就懂了，不懂得也就不明白了！
Delphi的Web前后端分离
09-14
Delphi程序员也可以写Web的后端代码，不信你可以下载此文档看看。
基于 Delphi 的前后端分离：之五，使用 HTMX 让页面元素组件化之面向对象的Delphi代码封装
pcplayer的博客
06-15 1391
用 Delphi 的类封装前端图表组件
基于 Delphi 的前后端分离：之四，使用 HTMX 让页面元素组件化
pcplayer的博客
06-15 1618
对于 HTML5 的页面，使用 HTMX 就可以很容易把各路开源的页面代码，组件化，实现模块化开发，简化代码，方便维护。
Delphi 12 控件之htmx&webstencils(中文版）.pdf
11-21
htmx&webstencils(中文版）.pdf
Delphi 实现界面和业务分离(2)-界面和业务分离演化实例
aishizhuang1602的博客
10-29 254
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, DB, ADODB, ExtCtrls, DBCtrls, StdCtrls, Grids, DBGrids, Mask, ...
Delphi 12.3控件之htmx&webstencils-fastwebdevelopmentwithradstudio-1-69-translate.rar
最新发布
03-26
Delphi 12.3控件之htmx&webstencils-fastwebdevelopmentwithradstudio_1_69_translate.rar
从壹开始前后端分离 [.netCore 填坑 ] 三十二║ 四种方法快速实现项目的半自动化搭建...
weixin_30916125的博客
10-09 389
更新 1、更新小伙伴 @大龄Giser提出好点子：试试VS的插件扩展：VSIX、ItemProject等，将T4模板给制作插件，这里先记下，有懂的小伙伴可以自己先试试，我会在以后更新。 2、感谢小伙伴 @博客园董事长的测试和指正，本文 T4 模板已经支持 Oracle 3、再次感谢小伙伴 @大龄Giser 关于使用VSIX+ProjectTemplate创建项目模板，提供开源支持...
DELPHI做后台的网站源代码
06-29
一、关于后端 1、完整DELPHI代码，使用最基本的CGI 2、稍加改动，可以用于ISAPI等 3、后端纯接口，类似RETFUL 4、内置SQLite数据库，稍做修改可以换用其他数据库 5、编译结果是EXE，复制到服务器的CGI目录下后，建议去掉exe扩展名 6、以此基本框架为参考，可以快速开发网络服务 二、关于前端 1、纯静态页面 2、使用Ajax接口从后台获取服务 3、使用jqGrid 4、支持文件的上传，自动解压，自动改名 5、使用了localstorage技术，不是很好，高手可以自行修改 三、关于服务器 1、使用的是CGI技术，可以适应于任何服务器 2、为了展示方便，附带了一个小型服务器abyssws.exe 3、abyssws.exe必须运行在非中文路径下 4、第一次启动请运行runserver.exe配置路径，以后直接运行abyssws.exe即可 5、默认使用8001端口 6、如果使用apache等服务器，请自行配置CGI
DelphiWebMVC+vue+element-ui开发事例.zip
05-29
案例基于DelphiWebMVC后端框架开发，前端使用vue+element-ui技术，vscode 做前端开发工具。使用delphi+vscode 来进行web项目开发。
适合Delphi\VB\C#winForm等程序员的前端框架：HtmlVCL
lllllllllluoyi的专栏
04-23 1189
由于我们Delphi\VB\C#winForm现在是弱势群体，也想转转型，用OOP去理解各种变态前端框架真是泪奔。大家都在努力跟上时代步伐，但是非常吃力，入门易灵活运用太难。我的好友老曹，他学了半年Div+CSS，最后我问他咋样了，他说放弃了，还是Delphi香。我最讨厌的是隐藏式代码，就像界面上的隐藏功能一样，不知道代码写在哪里，但界面上有反应，还有关联式代码我也不喜欢，比如类似...
Delphi 生成网页(html)报表
weixin_30820151的博客
10-08 207
在整理硬盘的时候，突然发现了这个小东西，回想起来是好多年前给 永恩集团 (达芙妮) 做连锁POS系统的时候做的一个用DELPHI 生成HTML报表的测试(我已经5年没用DELPHI 了)。为什么要求这么变态？ 我当初给达芙妮用fastreport 做了一个报表，格式和数据展示完全满足要求，但最终被拒绝了，其原因是，他们原来有一套oracle erp 的打印就是用HTML 网...
【Delphi + Vue】Web后端动态图片传递给前端
sensor_WU 博客
05-26 1785
解决delphi做后端传递图片给前端，通过base64编码实现
在 Delphi 中使用 RESTful API
glkyyl的博客
10-29 1595
类创建一个请求对象，设置请求方法（GET、POST、PUT、DELETE 等），设置请求头和请求体，然后将请求发送到 REST 客户端。组件来与 RESTful API 进行通信。确保你已经将这些库和组件引入到你的项目中。类来创建 REST 客户端对象。通过该对象，你可以发送 HTTP 请求并接收响应。创建 REST 客户端对象：在 Delphi 中，你可以使用。引入必要的库和组件：在 Delphi 中，你可以使用。发送 HTTP 请求：使用。
DelphiWebMVC 分层开发
PRSoft的博客
01-03 865
MVC 本身是视图层技术，我们把业务代码放在控制器内开发是没有问题的，但从系统设计上来划分，这里并不适合编写具体的业务代码， 如：在不同的界面上都需要显示用户信息，如果把业务都写在控制器内，这个功能将会是重复的，实际上我们只需要一个公共的函数即可。 这样我们就需要进行业务上的功能划分，如用户业务类，这个类可以完成用户信息的增加，修改，删除，查询等各项功能，无论你在哪个业务模块使用，只要调用此业...
delphi的web开发一些必要步骤
时间就像一张网，你撒在哪里，你的收获就在哪里
11-13 2243
在UserSessionUnit中的 uses加入IWAppForm 在implementation中加入 uses IWInit,ServerController 在Public   中定义参数和函数，每个用户登录后都会独立创建一个 procedure Move(AFormClass:TIWAppFormClass); //定义我们的一个打开新页面的函数 //事
Delphi 12.2 新增的 WebStencils 尝鲜
m0_74825466的博客
12-12 644
这个有本文上述的 github 链接里面的例子代码。1. 使用一个框架页面，在需要装正式内容的地方，写上：@RenderBody;2. 页面内容文件比如 index.html，不需要有页面框架代码诸如 等等，仅仅只需要提供页面显示内容。然后在文件开头把要使用的框架文件的名字写上去：@LayoutPage 框架.html；3. 页面的其它地方的代码，需要引入其它外部文件的内容，使用 @Import 文件名.html 的方式。问题来了：我的页面组装正确了，也正确显示了。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值