简介：《Delphi Web前端开发教程——基于TMS WEB Core框架》PDF面向希望用Delphi或Lazarus开发Web应用的初学者与高级开发者，也适合传统Delphi程序员补齐前端技能。教程围绕TMS WEB Core展开，讲解如何生成100% HTML/JS应用、无需二进制文件即可部署到托管服务器，并覆盖项目与环境配置、Lazarus安装、Pas2JS编译、RTL运行时库、调试、页面设计、绝对定位、自动化版本管理以及Electron和Miletus桌面应用等主题。书中还梳理Delphi与Object Pascal的发展脉络，比较IntraWEB、uniGUI与TMS WEB Core等Web框架的差异，并涉及渐进式Web应用和命令行编译，帮助读者建立从Web基础到跨平台发布的完整认知。资源包共1个PDF文件，大小约3.84MB，属企业内部培训资料，目录按框架简介、环境配置、组件技能、快速入门与部署分发组织，便于按章节查阅。已有5029人学习，适合作为系统入门与案头查阅手册，配合免费Delphi社区版和TMS WEB Core试用版即可动手实践。
1. 先从困惑说起：会 Delphi 的人写网页到底要不要从头啃 JavaScript
学了几年 Delphi，桌面程序写得挺顺手，突然接到一个 Web 项目，第一反应是不是“完了，要重新学 JavaScript 了”？我以前也这么想。后来发现，做 Delphi Web前端开发并不一定要从零开始啃 HTML、CSS、JS 三座大山——TMS WEB Core 框架做的事，就是把你在 Delphi 里拖控件、写事件、调方法的习惯，原样搬到浏览器里。你写的仍然是 Object Pascal 代码，编译后产出的是 HTML 和 JavaScript，部署上去就是一个纯网页应用，没有 exe，没有 DLL，扔到任何托管服务器都能跑。这份《Delphi Web前端开发教程——基于TMS WEB Core框架》就是给“会一点 Delphi、想碰 Web 前端”的人准备的上手材料，零基础也能跟着走。
2. 先搞懂它是什么：TMS WEB Core 和传统 Web 开发到底差在哪
很多新手第一次听到“用 Delphi 写网页”，脑子里会冒出两个极端画面：要么觉得是把桌面程序硬塞进浏览器，要么觉得和直接用 HTML 写页面没区别。这两种理解都不太对，先花几分钟把核心概念对齐，后面动手才不容易发懵。
2.1 用一个类比说清：Delphi 写界面，最后吐出的是 HTML/JS
传统 Web 开发像是从面粉开始做面包：HTML 是面粉，CSS 是调料，JavaScript 是发酵和烘烤，全得自己动手配比。TMS WEB Core 像是一台面包机——你把原料（Delphi 控件、事件、业务逻辑）按顺序放进去，按下编译按钮，它帮你发酵和烘烤，最后出来的是成品面包，也就是浏览器能直接吃的 HTML、CSS 和 JavaScript。
具体来说，TMS WEB Core 的核心是一个叫 Pas2JS 的编译器，它把 Object Pascal 代码翻译成等价的 JavaScript。你在设计器里拖一个TWebButton，编译后它变成 HTML 里的<button>元素；你双击按钮写OnClick事件，编译后变成绑在这个按钮上的 JavaScript 回调。整个过程你不需要手写一行 JS，但浏览器最终拿到的确实是纯静态文件，没有服务端二进制、没有 exe，扔到任何静态托管服务器上就能访问。
这里有个关键区别值得新手记住：传统 Delphi 程序编译出来是 CPU 能直接跑的机器码，TMS WEB Core 编译出来的是浏览器能直接解析的文本文件。前者依赖 Windows 或目标平台，后者依赖浏览器内核。所以你写代码的方式没变，但运行环境变了，后面调试和部署的思路也要跟着调整。
2.2 为什么值得学：你已有的 Delphi 经验能直接复用到 Web 端
对零基础新手来说，最怕的是“学了新东西，旧经验全作废”。TMS WEB Core 在这件事上比较友好，因为它的设计目标就是让 Delphi 程序员用熟悉的思维模型进入 Web 世界。
第一，语言不变。你还是写begin...end，还是用procedure和function，还是那套强类型、面向对象的写法。变量声明、异常处理、单元引用，全是 Object Pascal 的老规矩。这意味着你不需要重新适应一门语言的语法和类型系统，省下来的精力可以放在 Web 特有的概念上。
第二，界面设计方式不变。Delphi 最让人上瘾的就是可视化设计器：拖控件、设属性、双击写事件，三步走完一个交互。TMS WEB Core 把这套东西原样搬进了 IDE，你拖的是TWebEdit、TWebButton、TWebLabel，设的是Caption、Text、Enabled，双击生成的还是OnClick事件。第一次用的时候会有种“这真的是在写网页吗”的错觉。
第三，组件模型不变。桌面 Delphi 里那种“一个窗体上放控件、控件之间通过事件通信”的写法，在 TMS WEB Core 里照样成立。你甚至可以把现有的桌面项目里的业务逻辑单元直接拿过来用，只要不依赖 Windows 特有的 API，大部分代码能直接编译到 Web 端。
当然，也有需要重新学的东西：页面的生命周期和桌面窗体不完全一样，HTML 模板和 CSS 的配合需要理解，REST API 的异步调用方式和本地数据库访问是两种思路。但这些都属于“增量学习”，不是“推倒重来”。教程里第 2 章和第 3 章花了不少篇幅讲这些新概念，建议别跳过。
2.3 三款 Delphi Web 框架怎么选：TMS WEB Core 的独特定位
Delphi 圈子里做 Web 开发，常被提到的不止 TMS WEB Core 一个，另外还有 IntraWEB 和 uniGUI。新手最容易纠结的问题就是“我该学哪个”，这里用一张表把关键差异摆清楚，不吹不黑。
| 对比项 | TMS WEB Core | IntraWEB | uniGUI |
|---|---|---|---|
| 编译产物 | 纯 HTML/JS/CSS 静态文件 | 依赖服务端生成页面 | 依赖服务端运行 |
| 部署方式 | 任何静态托管服务器 | 需要配套服务端 | 需要配套服务端 |
| 前端体验 | 浏览器里完整运行，可离线 | 页面刷新或局部更新 | 依赖服务端连接 |
| 学习门槛 | 会 Delphi 就能上手 | 需要理解 Web 表单模型 | 组件多，上手较快 |
| 跨平台输出 | Web、PWA、桌面壳 | 主要面向浏览器 | 主要面向浏览器 |
TMS WEB Core 的独特之处在于“100% 前端”这个定位。它生成的是真正的静态文件，不需要在服务器上跑一个 Delphi 写的后端进程。这意味着你可以把编译产物直接传到任何支持静态文件托管的地方，成本低、部署简单。教程里专门有一节讲“轻松部署分发”，说的就是这件事。
另外两个框架各有适用场景：IntraWEB 适合内网管理系统，uniGUI 适合快速搭管理后台。但如果你想要的是“用 Delphi 写一个能给任何人访问的 Web 应用，部署不折腾”，TMS WEB Core 是更直接的选择。教程也覆盖了渐进式 Web 应用（PWA）、Electron 桌面壳和 Miletus 桌面应用这几种输出形态，学完基础之后可以按需扩展。
3. 零基础动手前的准备：环境配置和第一个能跑的页面
概念对齐之后，下一步就是真正把环境跑起来。很多新手卡在这一步，不是因为难，而是因为不知道“装什么、按什么顺序装、装完怎么验证”。这一章按顺序把这条路走一遍。
3.1 需要装什么：免费 Delphi 社区版 + TMS WEB Core 试用版
教程开篇就说了，学习这份材料只需要两样东西：免费的 Delphi 社区版，以及 TMS WEB Core 的试用版。没有隐藏付费门槛，也不需要额外买服务器。
Delphi 社区版可以从官方渠道获取，安装过程按向导走就行。安装时注意勾选 Web 开发相关的组件，尤其是和 JavaScript 调试、HTML 模板相关的部分。如果你用的是 Lazarus，教程里也有专门的“Lazarus 安装 TMS WEB Core”一节，流程略有不同，但整体思路一致。
TMS WEB Core 试用版安装完成后，Delphi 的组件面板里会多出一组 TWeb 开头的控件，新建项目时也会多出 TMS WEB Core 的项目模板。看到这些变化，就说明装对了。
提示：安装顺序建议先装 Delphi 社区版，确认 IDE 能正常打开、能编译一个空 VCL 项目，再装 TMS WEB Core。如果顺序反了，组件注册容易出问题，后面排查起来很麻烦。
装完之后建议做一件事：打开 Delphi，新建一个最简单的 TMS WEB Core Web 应用项目，什么都不改，直接点运行。如果浏览器能打开一个空白页面，说明工具链是通的。这一步看着简单，但能把“环境问题”和“代码问题”提前分开，后面写代码出错时就不用怀疑是环境没装好。
3.2 配置项目设置：从新建到能运行的全流程
新建项目只是第一步，项目设置里还有几个关键项需要确认。教程里专门有“配置 TMS WEB Core 项目设置”和“自动化版本管理”的章节，这里把新手最需要改的几项拎出来。
第一步，选择项目类型。TMS WEB Core 提供几种模板：普通 Web 应用、渐进式 Web 应用（PWA）、Electron 桌面应用、Miletus 桌面应用。新手先从普通 Web 应用开始，结构最简单，编译产物也最干净。
第二步，确认输出目录。项目设置里有一项控制编译产物放到哪里，默认值通常能用，但建议改成你容易找到的路径，比如项目目录下的output文件夹。后面调试和部署都要从这里拿文件，路径清楚能省很多事。
第三步，检查入口 HTML。每个 TMS WEB Core 项目都有一个入口 HTML 文件，编译后的 JS 和 CSS 会被自动挂进去。新手不需要手改这个文件，但要知道它在哪，因为后面页面空白时第一个要检查的就是它。
第四步，版本管理。教程里提到“自动化版本管理”，实际用起来就是给编译产物加版本号，避免浏览器缓存旧文件。新手阶段可以先不折腾，但要知道有这回事，等部署上线后遇到“改了代码用户看不到”的问题时，回头再来配。
配置完成后，点一次编译，去输出目录看一眼：应该有.html、.js、.css这几类文件。看到它们，说明整条链路是通的。
3.3 第一个例子：创建一个能弹出提示的页面
现在写第一个能交互的例子。目标很简单：页面上放一个按钮，点击后弹出一句问候。这个例子虽然小，但覆盖了“控件、事件、编译、运行”四个关键环节。
在窗体上拖一个TWebButton，双击它，IDE 会自动生成事件模板。把下面的代码填进去：
// WebButton1 的点击事件：点击后在浏览器里弹出一句问候 procedure TForm1.WebButton1Click(Sender: TObject); begin // ShowMessage 是 Delphi 里最常用的提示框函数 // TMS WEB Core 会把它翻译成浏览器里的 alert 弹窗 ShowMessage('Hello, TMS WEB Core!'); end;这段代码里只有一行有效逻辑，但背后发生了好几件事。ShowMessage在桌面 Delphi 里调用的是 Windows 的对话框 API，在 TMS WEB Core 里被映射成了浏览器的alert()函数。你写的是 Pascal，编译后变成 JavaScript，浏览器执行的是原生弹窗。整个过程你不需要知道alert怎么拼，框架帮你做了翻译。
再往前一步，把按钮的文字改掉。选中按钮，在对象检查器里找到Caption属性，改成“点我试试”。重新编译运行，浏览器里应该出现一个写着“点我试试”的按钮，点击后弹出问候框。
这个例子跑通之后，建议做一个小改动验证理解：把ShowMessage换成WebLabel1.Caption := '你好';，在窗体上再拖一个TWebLabel，看看点击按钮后标签文字会不会变。如果能变，说明你已经理解了“控件属性可以在事件里修改”这个核心模型。
3.4 运行和调试：看到结果之前会卡在哪
第一次运行 TMS WEB Core 项目，最常见的卡点不是代码写错，而是“浏览器打开了但什么都没显示”。这时候别急着改代码，按下面的顺序排查。
先看浏览器地址栏的端口号。TMS WEB Core 调试时会启动一个本地服务器，端口号是自动分配的。如果端口被占用，页面会打不开。解决办法是关掉占用端口的程序，或者在项目设置里换一个端口。
再看浏览器开发者工具的控制台。按 F12 打开，切到 Console 面板，如果有红色报错，说明 JS 文件加载或执行出了问题。常见原因是输出目录配置不对，编译产物没被正确挂到入口 HTML 上。回到项目设置里核对输出路径，重新编译一次。
如果控制台没有报错但页面还是空白，检查入口 HTML 里的脚本引用路径。有时候项目移动过位置，相对路径失效，脚本加载不到。这种情况下浏览器 Network 面板里会看到 404，一眼就能定位。
调试通过之后，建议养成一个习惯：每次改完代码，先看控制台有没有新报错，再看页面效果。TMS WEB Core 的调试体验和桌面 Delphi 不完全一样，浏览器开发者工具是你最重要的排查入口，越早熟悉越好。
4. 页面设计和控件入门：从拖一个按钮到搭出一个能交互的表单
第一个例子跑通之后，下一步是把单个控件扩展成一个能用的界面。这一章讲三件事：布局怎么摆、常用控件怎么用、HTML 模板怎么配合。三件事按顺序学，别跳。
4.1 绝对定位和相对定位：新手先搞懂这两个概念
桌面 Delphi 程序员第一次做 Web 页面，最容易翻车的地方就是布局。在桌面端，你把按钮拖到坐标 (100, 200)，它就固定在那里。在 Web 端，同样的操作可能在不同屏幕尺寸下表现完全不一样，原因在于定位方式不同。
TMS WEB Core 支持两种定位思路。绝对定位按坐标摆放，和桌面 Delphi 的习惯一致，适合固定尺寸的界面或者嵌入到已知容器里的场景。相对定位按文档流排列，控件一个接一个往下或往右排，适合需要适配不同屏幕宽度的页面。
新手建议先用绝对定位把界面搭出来，因为思维习惯最接近。等界面结构稳定了，再考虑把外层容器改成相对定位，让内部控件跟着容器走。教程里“绝对定位”和“相对定位”两节分别讲了具体用法，还提到“主题”和“BiDiMode 双向模式”，后者主要面向多语言场景，新手可以先跳过。
有一个实用技巧：给窗体或容器设置明确的宽高，再在里面用绝对定位摆控件，表现最稳定。如果容器不设尺寸，浏览器可能按内容撑开，绝对定位的坐标基准会跟着变，看起来就像“控件跑偏了”。
4.2 常用控件 TWebLabel、TWebButton、TWebEdit 怎么用
TMS WEB Core 的控件命名规律很直白：前面加TWeb，后面是控件类型。新手先把三个最常用的用熟，就能搭出大部分基础界面。
TWebLabel用来显示文字，对应 HTML 里的<span>或<div>。核心属性是Caption，改它就能改显示内容。TWebButton是按钮，对应<button>，核心事件是OnClick。TWebEdit是文本输入框，对应<input type="text">，核心属性是Text，用户输入的内容通过它读取。
把这三个控件串起来，就能做一个最小的交互表单。在窗体上放一个TWebEdit、一个TWebButton、一个TWebLabel，双击按钮写下面的代码：
// 读取输入框内容，点击按钮后显示在标签上 procedure TForm1.WebButton1Click(Sender: TObject); begin // WebEdit1.Text 是用户在输入框里敲的文字 // WebLabel1.Caption 控制标签显示的文本 if WebEdit1.Text = '' then WebLabel1.Caption := '请先输入内容' else WebLabel1.Caption := '你输入的是：' + WebEdit1.Text; end;这段代码示范了两个关键点。第一，控件之间通过属性互相读写，WebEdit1.Text拿输入，WebLabel1.Caption放输出，中间用字符串拼接。第二，加了一个空值判断，避免用户没输入时显示奇怪的结果。这种小判断在桌面开发里很常见，在 Web 端同样适用。
除了这三个，教程还覆盖了TWebListBox、TWebComboBox、TWebCheckBox、TWebRadioButton、TWebDateTimePicker等常用控件，以及TWebMainMenu、TWebPopupMenu这类菜单控件。新手不需要一次全学，先把输入、按钮、显示三类用熟，遇到具体需求再查对应章节。
4.3 HTML 模板怎么套：不用从零写 CSS
TMS WEB Core 有一个对新手很友好的设计：控件可以绑定到 HTML 模板里的标签，页面结构和样式可以交给模板，逻辑仍然写在 Pascal 里。教程里“使用 HTML 模板”和“自动同步 HTML 模板”两节讲的就是这个机制。
简单说，你可以在项目里放一个 HTML 文件，里面写好页面骨架和 CSS 样式，然后给控件设置一个模板标签名，编译时框架会把控件“挂”到对应的 HTML 元素上。这样你不需要在 Pascal 代码里一点点设坐标和颜色，样式调整直接改 CSS 就行。
对零基础新手来说，这个机制的好处是“分工明确”：界面长什么样归 HTML/CSS 管，交互逻辑归 Pascal 管。你不需要成为 CSS 高手，但至少要知道怎么改模板里的文字和颜色。教程里还有“实时预览”一节，改完模板能立刻看到效果，不用反复编译，调试效率高很多。
如果暂时不想碰 HTML，也可以纯用设计器拖控件，把界面搭出来。两种方式不冲突，可以先拖控件跑通逻辑，再逐步把样式迁移到模板里。
5. 避坑清单：新手从配置到第一次发布最容易踩的 5 个坑
这一章不讲课，只讲翻车现场。下面 5 个坑是新手阶段出现频率最高的，每个都按“现象 → 原因 → 解决”写清楚，遇到问题时按图索骥就行。
5.1 现象：项目能编译，浏览器打开却是一片空白
原因通常有两个：输出目录配置不对，编译产物没被入口 HTML 加载；或者入口 HTML 本身被改坏了，脚本引用路径失效。
解决方式是先看浏览器开发者工具的 Network 面板，确认.js和.css文件是否返回 200。如果有 404，回到项目设置里核对输出路径，重新编译。如果文件加载正常但页面还是空白，看 Console 面板有没有红色报错，按报错信息定位到具体代码行。
5.2 现象：改了代码，刷新浏览器还是旧样子
原因是浏览器缓存了旧的 JS 文件。Web 开发和桌面开发在这点上差异很大，桌面程序编译完直接跑新 exe，浏览器却可能拿缓存对付你。
解决办法是强制刷新：Windows 上按 Ctrl+F5，Mac 上按 Cmd+Shift+R。如果还不行，打开开发者工具，在 Network 面板勾选“禁用缓存”，再刷新一次。长期方案是配置教程里提到的“自动化版本管理”，给编译产物加哈希或版本号，让浏览器每次都拿新文件。
5.3 现象：控件拖上去之后，位置跟设计器里看到的完全对不上
原因是定位方式混用了。设计器里看起来对齐，是因为设计器按绝对坐标渲染；浏览器里如果父容器没设固定尺寸，或者控件本身用了相对定位，实际位置就会偏移。
解决办法是统一布局方式：要么全部用绝对定位并给容器设明确宽高，要么全部用相对定位并按文档流排列。检查 HTML 模板里有没有影响布局的 CSS，尤其是position和margin相关的规则。新手阶段建议先用绝对定位把界面固定下来，稳定之后再考虑响应式调整。
5.4 现象：本地跑得好好的，部署到服务器上就报 404
原因是路径写成了绝对路径。本地调试时服务器根目录就是项目输出目录，绝对路径能命中；部署到子目录后，同样的绝对路径就指到了错误位置。
解决办法是把所有资源引用改成相对路径。检查入口 HTML 里的脚本和样式引用，检查代码里有没有硬编码的 URL。部署前在本地用子目录方式模拟一次访问，确认路径没问题再上传。
5.5 现象：第一次编译就报错，提示找不到某个单元
原因是 TMS WEB Core 的组件包没装完整，或者 Delphi 版本和 TMS WEB Core 版本不匹配。这种情况通常发生在装完 IDE 后直接装框架、没重启，或者中途升级过其中一个。
解决办法是先卸载 TMS WEB Core，重启 Delphi，重新安装组件包。装完后新建一个空项目编译一次，确认基础环境没问题再导入业务代码。如果还报错，核对教程里提到的版本对应关系，别硬扛。
6. 下一步学什么：从能跑到能交付的四周学习路径
第一个例子跑通、界面能搭出来之后，很多人会陷入“接下来学什么”的迷茫。教程内容很厚，从控件参考到数据库、从调试到部署都有，但新手不需要按目录顺序从头读到尾。下面是一条按周推进的路径，按这个节奏走，四周左右能到“能交付一个小项目”的水平。
| 阶段 | 时间 | 目标 | 对应教程内容 |
|---|---|---|---|
| 第一阶段 | 第 1 周 | 跑通第一个页面，理解控件和事件模型 | 快速入门、配置项目设置、TWebButton/TWebEdit/TWebLabel |
| 第二阶段 | 第 2 周 | 能搭出一个有输入、有输出、有判断的表单 | 页面设计、常用控件、HTML 模板基础 |
| 第三阶段 | 第 3 周 | 能调通一个 REST API，把数据展示到页面 | 数据库开发、REST API 解决方案、Application 对象 |
| 第四阶段 | 第 4 周 | 能编译、调试、部署一个完整小项目 | 调试、命令行编译、部署分发 |
第一周的重点不是学多少控件，而是把“写 Pascal → 编译 → 浏览器运行 → 看控制台”这个循环走顺。循环顺了，后面学新控件只是换名字的事。
第二周开始碰布局和模板。建议做一个带输入框、按钮、列表的小页面，比如一个简单的待办清单：输入框写事项，按钮添加到列表，列表用TWebListBox展示。这个练习覆盖了输入、事件、控件读写三个核心技能，做完之后大部分基础界面都能搭。
第三周进入数据交互。教程里“支持 REST API 的传统数据库解决方案”和“云数据库解决方案”两节是入口，先理解“前端通过 HTTP 请求拿 JSON 数据”这个模型，再用Application对象或框架提供的请求组件发一次请求，把返回的数据显示到页面上。这一步是从“静态页面”到“动态应用”的分水岭，值得多花时间。
第四周收尾在调试和部署。把前三周做的小项目完整编译一次，用浏览器开发者工具排查一遍报错，然后按教程里的部署章节把静态文件传到托管服务器上，用另一台设备访问验证。能走完这一圈，就算入门了。
我第一次跑 TMS WEB Core 项目的时候，编译通过就以为万事大吉，结果浏览器打开一片空白，折腾了大半天才发现是输出目录配错了。从那以后我每次新建项目，都强制先检查一遍编译输出目录和入口 HTML 是否对得上，再开始写业务代码。这个习惯看着琐碎，但能省掉大量“代码没错却跑不起来”的无效排查。希望帮到你。
本文还有配套的精品资源，点击获取
