Delphi 代码上面花的时间最少。

前提是你要熟悉 Delphi 的 WebBroker 框架。不熟悉也没关系，5分钟就可以入门，10分钟就熟悉了。

CMS 就是个基于 WEB 的内容管理嘛。相当于一个简单的没有跟贴功能的 BBS。这样的东西，后边是数据库，存储帖子。前边是表现层，也就是 WEB 前端。对于数据库来说，Delphi 的数据库操作那是简单得不能再简单了。

花费时间最多的还是和前端有关的事情。相关的技术细节，我在本博客之前的文章里面都有提到。这里总结一下。

花费时间最多的前端

当然，前端花费时间多，也有一部分原因是前端我不熟悉。

这里记录一下时间都用到哪里去了。

1. 找了一个简单的 CSS 用来美化页面。熟悉这个 CSS 框架的使用，看它的例子和文档。这个 CSS 功能不是很强大，但确实不错。好处就是它体积小，加载不会花很多网络流量和时间；

2. 找了10来个富文本编辑器，评估一下哪个好用，哪个更简单，哪个的体积更小。单单是评估10多个编辑器，就花掉2天时间。最后选择了 Quill 这个编辑器。

3. 学会使用 Quill 编辑器花了很多时间。如果只是简单地在页面里面使用它，大概几分钟或者十分钟就能用起来。但是，当发现它会被页面上的 Pico.CSS 影响，要解决这个问题，花了我三天时间。上网查资料，各种搜索，评估各种方案，比如我就在采用 iframe 还是采用 Shadow DOM 这两种方案上，花了很多时间测试，看看哪个更好用。最后发现 Shadow DOM 方式对于 Quill 来说是不能用的。

4. 因为想用 Delphi 12.2 最新版的 WebStencils 控件，又要花时间去学习如何使用它。当然也遇到过一些不知道如何解决的问题，花费很多时间摸索和测试。

5. 开发完成后，想采用 IIS CGI 的方式，放到 IIS 下面去使用。然后又想让链接地址简单一些，不要暴露后台程序是 MyCMS.exe 这样的东西，又上网查资料，发现 IIS 可以采用【URL 重写】的方式来实现。然后去搜索资料学习这个 URL 重写该怎么做，又花费了一天。

6. 页面里面使用了 HTMX 来做一些 AJAX 的动作。HTMX 大概是从完全不懂到能够使用，入门最快的前端技术。看着官方页面上的文档和例子，几分钟，就能把它用起来。

总结一下心得

本来做这个玩意，就是想评估一下 Delphi 最新推出的 WebStencils 控件，实际做点东西才能知道它好不好用。东西并不复杂，页面也没有几个。顺便也评估一下 HTMX 是否好用。

选择各种框架，工具，最重要的一点是，要能够达到代码封装，代码重用。不要在很多地方复制粘贴相同的代码。

关于 WebSencils

Delphi 的 WebBroker 框架下，原来就有的 PageProducer 控件，能够让我们把很多个页面里面相同的部分提取出来作为一个单独的文件，也就是组件化了。最后在需要的时候，把需要的页面的各个部分组装到一起。因为页面其实就是字符串文件，所以 PageProducer 提供的功能就是让我们能够在程序里面通过字符串替换掉标记的方式，组装页面。可能需要写一些 Delphi 的代码。

新推出的 WebStencils 则是通过在页面里面嵌入一些标记后，由 WebStencils 自己的代码自动去替换。这样一来，就少写了很多代码。需要修改时，也仅仅改页面代码，Delphi 程序很多时候不需要修改，因此也就不需要重新编译。这样做，非常方便把页面代码组件化。页面代码里面，有很多重复的东西，比如页头，页脚，都不用每个页面都写了。也不用写把这些页面组件组装到一起的代码。确实省了很多代码和开发时间。

更进一步，WebStencils 支持页面上的字符串标记，可以在运行时被 Delphi 程序的对象的值替换，这就给我们带来了更多的便利。我们无需写代码来实现页面上内容被运行期的数据变化了。比如，如果采用 PageProducer 或者我们自己写和页面有关的代码，都需要对页面文件的字符串进行处理。比如我们有个页面是以下代码：

<div>
<label>价格 </label>
<#MyPrice>
</div>

Delphi 程序大概要这样写：

var SL: TStringList;SL := TStringList.LoadFromFile('MyPage.html');var S := SL.Text;S := S.ReplaceText('<#MyPrice>', MyDataSet.FieldByName('Price').ToString);Response.Content := S;

也就是加载页面文件，把里面的标记找出来，替换为数据库里面的价格字段的值。

如果用了 WebStencils，则上面的 Delphi 代码一行都不用写。只要页面里有对应价格字段的相关标记， WebStencils 加载页面后就会自动找到对应的 DataSet 对象，把价格字段的值替换掉标记。

关于 HTMX

HTMX 更有意思。使用它，可以把页面拆成很多零碎的小组件，然后通过 AJAX 的方式逐个组装页面。而 WEB 程序的不同的路径，就变成了输出不同页面组件的一个 API 接口。更妙的是，这个完全是后端实现，完全不需要在前面用很复杂的前端 JavaScript 框架。

这个就涉及到开发的哲学和方法论的问题了。

简单说，最初的 WEB 开发，就是在后端服务器代码里面，把 HTML 字符串组装好，发送给浏览器呈现。浏览器仅仅是解释 HTML 然后呈现这个页面。

经过了很多年以后，现在比较流行的几个大的前端框架，是用 JavaScript 在前端浏览器里面运行，用运行的代码画出页面。而后端 WEB 服务器只需要输出页面上变化的部分需要的数据就行了。数据则是用 JSON 格式来封装。

这是两种完全不同的极端情况。

HTMX 则是提倡后端输出的不是 JSON 数据，而应该是 HTML 格式的页面元素。HTMX 作为前端的 JavaScript 库，只是把 JavaScript 对于后端的调用（AJAX）和调用后收到的来自后端的 HTML 字符串在页面里面如何呈现，做了封装。使用 HTMX 不需要写代码，只需要写【描述】，或者说写一些属性定义，就能完成工作。

我使用 HTMX 下来的感受是，完全不懂 JavaScript 和类似 jQuery 之类的 JavaScript 代码库，也能做出动态的页面来。我这里说动态页面，是指页面 AJAX 方式局部更新。

从代码架构上来说，使用 HTMX 就可以让后端 WEB SERVER 程序，尤其是 Delphi WebBroker 程序，变成一个有很多特定功能的 WEB 接口。就好比常见的代码里面的各种函数调用。这样做的好处是代码逻辑更清晰，模块化更好。

比较 Delphi WebStencils 和 HTMX

这两个都可以让页面变成组件，把相同的页面代码抽离出来，而不是重复的复制粘贴到很多页面文件里面。

使用 WebStencils 是在服务器上的代码组装页面。一次性组装完成后，发送给浏览器。

HTMX 则是在浏览器页面加载完成后，还可以继续向后端服务器请求某个页面元素，将获得的页面组件显示到 HTMX 代码指定的位置。也就是当页面上有局部的更新时，不需要刷新整个页面，服务器只需要输出对应的页面的局部的代码，可能就是几个 DIV 相关的字符串，数据量很小，因此服务器压力也会很小，占用的流量带宽也很小。

因此，要正确评估某个页面的当前需求，来决定采用哪个方案。

更复杂的页面

对 Delphi 的开发者来说，后端用 Delphi 代码开发完全没问题。可能不熟悉 CSS / JAVASCRIPT 等等前端技术。要开发一个功能强大的前端网页，可能会觉得很难。

1. 页面美化：直接套一个现成的 CSS；比如我这次套了个 PICO.CSS 页面立马变漂亮，不用自己去考虑页面排版之类的事情。当然，要是套个 BootStrap 之类的大框架也不错。

2. 复杂的页面组件，比如动态编辑的表格，或者图表（Chart），那就去找一个开源的组件，直接用起来。甚至还可以用 Delphi 代码把它封装为一个 Delphi 的组件（对象），写 WEB 程序的时候就完全不用考虑它的细节，只需要调用 Delphi 的对象的方法/属性，就可以实现页面上的复杂内容。

3. 页面呈现期间的动态局部内容更新，采用 HTMX，则不需要写 JAVASCRIPT 代码就能实现。