当前位置：首页 > news >正文

基于 Delphi 的前后端分离：之五，使用 HTMX 让页面元素组件化之面向对象的Delphi代码封装

news 文章来源：https://blog.csdn.net/pcplayer/article/details/139704108 2025/4/27 4:30:10

前情提要

本博客上一篇文章，描述了使用 Delphi 作为后端的 Web Server，前端使用 HTMX 框架，把一个开源的前端图表 JS 库，进行了组件化。

上一篇文章仅仅是描述了简单的前端代码组件化的可能性，依然是基于前端库的 JS 字符串代码。

接下来，我们要把 JS 的字符串代码，变成 Delphi 的面向对象编程，封装为一个 Delphi 的类。

当然，最终输出给前端的，依然是 JS 字符串代码。

详情开始

需求描述

当前端需要一个图表组件的时候，后端的 Web Server 需要发送这个图表组件的代码。这个图表组件有很多变量，比如 Title，是 Light 模式还是 Dark 模式（显示在图表上，一个是白底，一个是黑底），等等。另外，图表的数据，也需要程序根据外来的数据进行赋值。外来数据，可能是一个来自数据库的 DataSet。

框架描述

因为上一篇博客里面用到的那个图表的 JS 代码，保存在一个外部文件中，我们把这部分代码的需要根据程序运行动态变化的部分拿出来，由我们的 Delphi 的对象去生成。不变的部分，依旧让它在这个外部文件里面，作为一个模板。

做一个包装这个图表的对象，在这个对象里面，处理这个图表有关的数据。这个对象最终将这些数据输出为 JSON 字符串作为前端图表的代码的一部分。

总之，就是把需要动态变化的部分，作为对象的属性参数。把图表的数据也是需要随时可以修改的，作为对象的方法。最终，这个对象，把数据打包为一个 JSON 字符串，然后加载外部模板文件，用这个 JSON 字符串替换掉模板文件里面的标志位，最终输出完整的图表的 JS 代码给客户端。

实现代码

图表组件的代码：

图表组件原本的代码如下：

<div id="chartContainer" style="height: 370px; width: 100%;"></div><script type="text/javascript">var chart = new CanvasJS.Chart("chartContainer", {theme: "light1", // "light2", "dark1", "dark2"animationEnabled: false, // change to true		title:{text: "Basic Column Chart"},data: [{// Change type to "bar", "area", "spline", "pie",etc.type: "column",dataPoints: [{ label: "apple",  y: 10  },{ label: "orange", y: 15  },{ label: "banana", y: 25  },{ label: "mango",  y: 30  },{ label: "grape",  y: 28  }]}]
});
chart.render();</script>

上述代码中，有关图表的数据是写死的。我们要把数据部分拿出来，用 Delphi 的对象来动态创建。抽调数据部分，留下不变的部分，作为模板。

图表组件的模板代码：

<div id="chartContainer" style="height: 370px; width: 100%;"></div><script type="text/javascript">
var chart = new CanvasJS.Chart("chartContainer", #JSON);chart.render();</script>

上述模板代码中，【#JSON】是替换标记，也就是动态的数据部分，需要用我们的 Delphi 的对象的代码来生成。

Delphi 对象的代码

unit UCanvaChart;
{----------------------------------------------------------------------封装来自 CanvasJS 的图表 javascript 代码到 Delphi 中。验证概念的实验性代码。pcplayer 2024-6-15
------------------------------------------------------------------------}interfaceusesSystem.SysUtils, System.Classes, System.IOUtils, System.Generics.Collections, System.JSON;typeTChartTheme = (ctLight1, ctLight2, ctDark1, ctDatk2);TChartType = (Column, Bar, Area, Spline, Pie);typeTCanvasJSChart = classprivateFTheme: TChartTheme;FAnimationEnabled: Boolean;FTitle: string;FChartType: TChartType;FData: TDictionary<string, Integer>;function GetJsonStr: string;function GetThemeStr: string;function GetChartTypeStr: string;function GetChartJS: string;publicconstructor Create;destructor Destroy; override;property AnimationEnabled: Boolean read FAnimationEnabled write FAnimationEnabled;property Title: string read FTitle write FTitle;property ChartType: TChartType read FChartType write FChartType;property Theme: TChartTheme read FTheme write FTheme;property JSONStr: string read GetJsonStr;property ChartJS: string read GetChartJS;procedure AddRecord(const AName: string; const AValue: Integer);end;implementation{ TCanvasJSChart }procedure TCanvasJSChart.AddRecord(const AName: string; const AValue: Integer);
beginFData.Add(AName, AValue);
end;constructor TCanvasJSChart.Create;
beginFData := TDictionary<string, Integer>.Create;
end;destructor TCanvasJSChart.Destroy;
beginFData.Free;inherited;
end;function TCanvasJSChart.GetChartJS: string;
varS, JS: string;
beginS := UTF8Decode(TFile.ReadAllText('MyChart.txt'));JS := Self.JSONStr;Result := S.Replace('#JSON', JS);
end;function TCanvasJSChart.GetChartTypeStr: string;
begincase Self.FChartType ofColumn: Result := 'column';Bar: Result := 'bar';Area: Result := 'area';Spline: Result := 'spline';Pie: Result := 'pie';end;
end;function TCanvasJSChart.GetJsonStr: string;
varjo: TJSONObject;ATheme: string;AData: TJSONArray;AName: string;AValue: Integer;
begin//按照 CanvasJS 的规则封装 JSONAData := TJSONArray.Create;for AName in Self.FData.Keys dobeginAData.Add(TJSONObject.Create.AddPair('label', AName).AddPair('y', Self.FData.Items[AName]));end;jo := TJSONObject.Create;tryjo.AddPair('theme', Self.GetThemeStr);jo.AddPair('animationEnabled', TJSONBool.Create(Self.FAnimationEnabled));jo.AddPair('title', TJSONObject.Create.AddPair('text', Self.FTitle));jo.AddPair('data', TJSONArray.Create.Add(TJSONObject.Create.AddPair('type', Self.GetChartTypeStr).AddPair('dataPoints', AData)));Result := jo.ToString;finallyjo.Free;end;
end;function TCanvasJSChart.GetThemeStr: string;
begincase Self.FTheme ofctLight1: Result := 'light1';ctLight2: Result := 'light2';ctDark1: Result := 'dark1';ctDatk2: Result := 'dark2';end;
end;end.

上述代码中，加载外部文件 MyChart.txt 作为模板文件，然后把生成的 JSON 数据插入模板文件里面，输出为图表组件的 JavaScript 代码字符串。

TCanvasJSChart 有一个 AddRecord 方法，可以多次调用这个方法，给这个对象加入多条用于图表显示的数据。

Delphi WebBroker 的代码

作为 WebServer，当收到来自客户端需要图表的请求时，调用 TCanvasJSChart 类，输入图表相关数据，获得图表的 JavaScript 代码，输出给客户端。

unit WebModuleUnit1;interfaceusesSystem.SysUtils, System.Classes, Web.HTTPApp, UCanvaChart;typeTWebModule1 = class(TWebModule)procedure WebModule1DefaultHandlerAction(Sender: TObject;Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);procedure WebModule1WebActionItem1Action(Sender: TObject;Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);private{ Private declarations }function GetMyChart(const ATitle: string; const AChartType: TChartType;const Animation: Boolean; const ATheme: TChartTheme): string;public{ Public declarations }end;varWebModuleClass: TComponentClass = TWebModule1;implementationuses System.IOUtils;{%CLASSGROUP 'Vcl.Controls.TControl'}{$R *.dfm}function TWebModule1.GetMyChart(const ATitle: string;const AChartType: TChartType; const Animation: Boolean;const ATheme: TChartTheme): string;
varAChart: TCanvasJSChart;
beginAChart := TCanvasJSChart.Create;tryAChart.Title := ATitle;AChart.AnimationEnabled := Animation;AChart.Theme := ATheme;AChart.ChartType := AChartType;//作为实验性代码，这里直接写死数据。//这里的数据，可以是从数据库来的 DataSet，然后对 DataSet 做一个循环，逐条记录用 AddRecord 加入到这个图表里面。AChart.AddRecord('apple', 10);AChart.AddRecord('orange', 25);AChart.AddRecord('banana', 33);AChart.AddRecord('mango', 50);AChart.AddRecord('梨子', 45);Result := AChart.ChartJS;finallyAChart.Free;end;
end;procedure TWebModule1.WebModule1DefaultHandlerAction(Sender: TObject;Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
beginResponse.Content := UTF8Decode(TFile.ReadAllText('index.html'));
end;procedure TWebModule1.WebModule1WebActionItem1Action(Sender: TObject;Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
beginResponse.Content := Self.GetMyChart('This is My Chart Title', TChartType.Column, True, TChartTheme.ctDark1);
end;end.

当客户端浏览器里面，用户点击页面里面的按钮，HTMX 根据页面代码，触发对 WEB 服务器的访问，访问的路径是 /MyChart，这个路径也是写在页面里面的 HTMX 的代码决定的。

Web 服务器端 Delphi 的 WebBroker 框架根据上述路径，触发该路径对应的 Action，这里就是:

procedure TWebModule1.WebModule1WebActionItem1Action(Sender: TObject;Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
beginResponse.Content := Self.GetMyChart('This is My Chart Title', TChartType.Pie, True, TChartTheme.ctDark1);
end;

这个方法里面获得了图表组件，输出给客户端浏览器。浏览器页面上，这个图表显示出来了。

上述代码中，在 function TWebModule1.GetMyChart 这个方法里面，创建了 TCanvasJSChart 这个类的对象，并且给它加入了一些数据，这些数据果然在图表里面显示出来了。

经过测试，在调用这个图表对象的时候，果然可以通过设置不同的属性，改变底色，改变图表的形态（比如，柱状图，饼图，等等）。

当然，本测试程序还需要用到一个 Index.html 文件，在这个文件里面，声明了对 HTMX 的引用，也声明了对这个图表库的引用。这个文件的代码，请看本博客上一篇文章：基于 Delphi 的前后端分离：之四，使用 HTMX 让页面元素组件化

总结

这篇文章是上一篇文章内容的进一步改进。如果你想测试，把这篇文章里面的代码直接放到 Delphi 里面去，加上上一篇文章里面提到的 index.html，是可以直接运行的。

结论就是：完全可以把各路前端库，用 Delphi 的代码封装起来，结合 HTMX ，可以用非常简单，符合编程直觉的方式，用 Delphi 写出漂亮的 WEB 应用。

至于前端漂亮的页面，也可以去下载成熟的页面框架来使用。这一点可以参考本博客前面的一篇文章：基于 Delphi 的前后端分离：之二