Delphi Web前端开发入门：用Pascal与TMS WEB Core做网页

简介Delphi Web前端开发教程以TMS WEB Core框架为主线面向希望用Delphi或Lazarus快速进入Web应用开发的初学者与进阶开发者也适合传统Delphi程序员补齐前端与跨平台发布知识。教程从Delphi/Object Pascal的历史与现状讲起梳理IntraWEB、uniGUI与TMS WEB Core等Web框架的特点再进入环境配置、项目设置、Pas2JS编译、RTL运行时库、页面设计、调试及部署分发等环节兼顾概念理解与动手实践。目录还覆盖Web开发基础知识、第三方框架比较、预处理器、命令行编译与实用函数等专题便于读者按知识模块查漏补缺。资源包仅含1个PDF文件约3.84MB便于离线阅读和按目录查阅内容涉及渐进式Web应用、Electron桌面应用与Miletus桌面应用等创建方式可帮助读者建立从桌面到Web、移动端的完整开发路径。目前已有5029人学习适合作为TMS WEB Core入门与框架选型的系统参考资料也可用于企业内部培训前的基础铺垫。1. 先弄明白一件事Delphi 写网页到底是怎么一回事不少人第一次听到「Delphi Web 前端开发」第一反应是这不是做 Windows 窗口程序的工具吗某公司内部培训上就有这样的场面——写了七八年 Object Pascal 的同事被安排做后台管理页面打开浏览器开发者工具看了十分钟就关掉说这活儿干不了。他缺的不是编程能力是没人告诉他这条路已经被 TMS WEB Core 铺好了。说白了这门技术教的是用你熟悉的 Pascal 写浏览器能直接打开的网页。窗体上拖个按钮、写段事件代码框架负责把它翻译成 HTML 和 JavaScript产出的是纯静态文件丢到任何托管服务器就能访问。它适合手上有 Delphi 基础、一碰前端就发怵的人也适合零基础、想找条不那么挤的入门路的人。2. 为什么值得学一套 Pascal 代码跑遍网页、桌面和手机2.1 从「只会做桌面窗口」到「能交付网页」的距离有多远先说一个很多人没意识到的事实你现有的 Delphi 技能绝大部分是可以直接搬过来的。变量声明、类、属性、事件、异常处理、单元文件组织方式这些在 TMS WEB Core 里都没变。真正变的只有一层就是「东西画在哪儿」。你可以这样理解以前你在 Windows 的窗体画布上摆控件Windows 负责把按钮画成按钮现在你在 TMS WEB Core 的窗体设计器里摆同样的控件框架负责把 TWebButton 渲染成浏览器里真实的按钮元素。你在 Object Pascal 里写的事件处理代码编译后变成 JavaScript 跑在浏览器里用户点一下按钮那段代码就执行。我第一次接触的时候最大的心理障碍是「我不懂前端」。后来发现入门阶段根本不需要你手写 HTML 和 CSS框架已经把常用控件封装好了。教程目录里那一长串 TWebLabel、TWebButton、TWebEdit、TWebComboBox、TWebMemo、TWebProgressBar本质上就是你在 VCL 里用惯的那些控件的 Web 版本属性名、事件名都对得上号。你会用 TEdit就基本会用 TWebEdit。还有一层价值在于覆盖面。同一套代码思路可以产出浏览器直接访问的 Web 应用、可以做成渐进式 Web 应用PWA也可以套一层壳变成 Windows 或 Mac 上的桌面程序甚至能往移动端走。对个人开发者和小团队来说这意味着不用为了「再做个网页版」重新学一门语言、重写一遍业务逻辑。提示入门阶段别急着研究底层怎么转译。先把一个按钮点下去、标签数字变一下这个闭环跑通信心比原理重要。2.2 TMS WEB Core 和 IntraWEB、uniGUI 到底差在哪教程原文把 Delphi 的 Web 开发方案叫「三剑客」IntraWEB、uniGUI、TMS WEB Core。三个都能让你用 Pascal 做 Web但思路完全不同选错了后面会很别扭。一句话区分前两个是「服务端帮你画页面」TMS WEB Core 是「把 Pascal 编译成前端代码让浏览器自己跑」。对比项IntraWEBuniGUITMS WEB Core代码实际跑在哪服务端进程服务端进程浏览器里浏览器收到什么服务端生成的页面服务端生成的页面加脚本纯 HTML 加 JS 静态文件部署要求服务端程序必须常驻服务端程序必须常驻任意静态托管空间用户量上来之后服务端压力跟着涨服务端压力跟着涨压力主要在浏览器和带宽适合什么场景内网管理系统内网业务系统对外网站、Web 应用、可离线应用这个差别在实际项目里非常具体。用前两个方案你的程序必须跑在一台服务器上用户每次操作都要跟服务器来回通信服务器挂了页面就打不开。用 TMS WEB Core编译出来就是一堆 html、js、css 文件扔到任何静态托管上就能用没有后端进程要维护也不存在「服务端崩了全员停摆」这种事。教程里提到的「无需二进制文件、可执行文件」讲的就是这个。你交付的不是一个 exe而是一个文件夹。2.3 纯 HTML/JS 输出这件事对你意味着什么「第一个能生成真正 100% WEB HTML/JS 应用程序的 Delphi 框架」——这句话第一次看有点营销味但拆开看确实是个硬差别。第一层意思是交付变简单了。传统 Delphi 项目发布你得考虑目标机器有没有运行库、要不要装依赖、32 位还是 64 位。Web 项目发布你把编译产物整个目录传上去用户用浏览器打开就行跨平台问题直接消失了——Windows、Mac、Linux、手机浏览器能开就能用。第二层意思是调试方式变了。你在 IDE 里按运行程序在浏览器里打开你可以直接开浏览器自带的开发者工具看网络请求、看控制台报错、改 CSS 看效果。教程里专门有一节讲调试和实时预览这个能力入门阶段一定要早点用起来比闷头猜错误快十倍。第三层意思是它带来了一些新概念。教程里提到的 REST API、云数据库、HTML 模板、JavaScript 和 CSS 混用都是传统桌面开发里不太会遇到的东西。别被这些词吓住它们只是「数据从哪来」和「页面长什么样」这两件事的不同解法后面第 3 章会用大白话一个个过一遍。注意纯前端意味着你的数据库密码、密钥这类东西绝对不能写在前端代码里。涉及敏感数据的操作必须走服务端接口。这个坑新手极容易踩后面避坑那一章还会展开讲。3. 动手前的地基零基础也能听懂的几个 Web 概念3.1 HTML、CSS、JavaScript 三件套分别管什么把网页想象成一个人HTML 是骨架决定了有哪些部件、部件之间怎么嵌套CSS 是衣服和妆容决定颜色、大小、位置、圆角、阴影JavaScript 是肌肉和神经决定点一下会发生什么、数据怎么变。你写 TMS WEB Core 的时候其实是在跟这三样打交道只是被框架包了一层。你在窗体上放一个 TWebButton框架最后生成的是一个 button 元素这是 HTML 的活你给按钮设颜色、设宽度最后变成一段样式规则这是 CSS 的活你双击按钮写 WebButton1Click 事件最后变成一段绑在点击事件上的 JS 函数这是 JavaScript 的活。入门阶段你不需要手写这三样但需要知道它们存在、知道出了问题去哪看。举个例子页面上的按钮位置不对你去翻 Pascal 代码是找不到原因的那是 CSS 的事点了按钮没反应去浏览器控制台看有没有红色报错那是 JavaScript 的事。建立这个「问题归属」的判断比记住语法重要得多。教程里提到的绝对定位和相对定位本质上就是 CSS 定位方式的两种选择。绝对定位是你把控件拖到哪儿它就固定在哪儿像素级精确适合做固定布局的界面相对定位是控件跟着页面流走窗口变窄会自动换行适合内容长度不定的页面。新手容易一上来全用绝对定位桌面端看着挺好用户手机上一打开全挤在一起这是血泪经验。3.2 Pas2JSPascal 是怎么变成浏览器能跑的代码的浏览器只认 JavaScript不认 Pascal。中间那个翻译官就是教程里提到的 Pas2JS 编译器。它的工作方式可以类比成翻译整本书而不是同声传译你在 IDE 里点编译Pas2JS 把你的 Pascal 单元一次性翻成 JS 文件然后浏览器加载这些 JS 去执行。所以你写完代码必须重新编译才能在浏览器里看到效果改一行跑一次这点跟传统 Delphi 开发习惯一致。除了翻译语法Pas2JS 还需要一套运行时库来支撑那些 Delphi 里司空见惯的东西比如字符串处理、日期时间、集合、异常。教程里提到的 RTL 运行时库就是干这个的。你在代码里写 FloatToStr、StrToFloatDef、FormatDateTime 这些函数编译后并不会凭空消失而是对应到运行时库里的实现。知道这一点你就不会奇怪为什么最终产物里除了你自己的代码还有一堆别的 js 文件。教程里还提到预处理器和命令行编译。预处理器简单理解就是「编译前先做一遍文本替换」常见的用法是区分调试版和发布版命令行编译则是让构建过程可以写进脚本不用每次开 IDE 手动点。这两样入门时可以先跳过等你能独立做完一个页面再回头看会突然觉得有用。3.3 Application、Form、Frame 三个对象先认个脸这三个是 TMS WEB Core 里最基础的对象搞混了后面会很乱。Application 是应用级别的对象整个网页程序只有一个。它管的是全局的事程序什么时候启动、什么时候结束、全局的配置和状态放哪儿。你在里面写的初始化代码页面一加载就会执行。Form 是窗体也就是一个页面或者一个页面里的一个窗口。你用设计器拖控件拖的就是拖到某个 Form 上。多页面的应用会有多个 Form可以在运行期创建也可以把 Form 嵌到别的控件里托管显示。教程里专门讲了运行期创建窗体和在其它控件中托管窗体这两种做法在单页应用里用得非常多。Frame 是框架可以理解成「可以复用的界面片段」。比如你的系统每个页面顶部都有一条导航栏与其在十个 Form 里各画一遍不如做成一个 Frame每个 Form 里放一份。以后导航栏要改只改 Frame 一处所有页面跟着变。用一句话记住层级Application 管全局Form 管一个页面Frame 管一段可复用的界面。新手常见错误是把全局状态塞进 Form结果换页面就丢了也有人把所有东西都堆在 Application 里最后代码没法维护。分清职责从一开始就养成习惯。4. 第一个能跑的例子半小时做出一个会算数的网页4.1 装环境社区版加框架试用版教程摘要里写得很清楚学这个只需要免费的 Delphi 社区版加上 TMS WEB Core 的试用版够用了。这句话对新手很重要意思是你不必先掏钱买授权才能开始。安装顺序建议是这样先装 IDE装完打开确认能新建一个普通桌面项目并运行说明基础环境没问题然后装 TMS WEB Core装完重启 IDE看新建项目对话框里有没有出现 Web 相关的项目模板。有就说明装好了。如果你用的是 Lazarus教程里也有对应章节。Lazarus 是开源方案安装过程和 Delphi 不一样但装完之后的操作思路是相通的。新手我不太建议一上来就折腾 Lazarus先把 Delphi 社区版这条路走通遇到问题搜出来的资料也多一些。提示装完先别急着写代码花五分钟把 IDE 里的项目模板列表翻一遍。教程里提到有普通 Web 应用、渐进式 Web 应用、Electron 桌面应用、Miletus 桌面应用几种模板先知道它们存在以后要做什么心里有数。4.2 新建项目选对模板看清目录结构新建项目的时候选最基础的那个 Web 应用模板别一上来就选 PWA 或者桌面壳那些等你能做出一个能跑的页面再说。创建完成后你会看到两类东西。一类是设计器里的窗体长得跟你熟悉的桌面窗体差不多可以拖控件、调属性另一类是项目里的文件包括 Pascal 单元、一个 HTML 模板文件还有若干配置。教程里提到「使用 HTML 模板」「自动同步 HTML 模板」意思是你可以在模板文件里写一些静态的骨架同时框架会负责把设计器里的控件对应上去。这里有个容易懵的点设计器里看到的布局和浏览器里最终的样子可能不完全一样。因为设计器只是一个可视化编辑环境真正决定外观的是最终生成的 HTML 和 CSS。看到不一致先别慌运行起来在浏览器里看以浏览器为准。项目设置里还有一些跟版本、路径相关的选项。教程里有「配置项目设置」「自动化版本管理」这样的章节这些属于进阶内容第一次做例子时用默认值就行不用每项都改。4.3 拖三个控件写第一段 Pascal 事件代码现在开始真正的第一步。在窗体上做三件事放两个 TWebEdit分别命名为 WebEdit1 和 WebEdit2用来输入两个数字。放一个 TWebButton命名为 WebButton1Caption 属性改成「算一下」。放一个 TWebLabel命名为 WebLabel3Caption 清空用来显示结果。然后在设计器里双击这个按钮IDE 会自动跳到代码编辑器并生成一个空的事件方法。往里填下面这段procedure TForm1.WebButton1Click(Sender: TObject); var NumA, NumB, Sum: Double; begin // StrToFloatDef 的第二个参数是转换失败时的兜底值 // 用户什么都没输的时候这里会拿到 0而不是直接报错崩溃 NumA : StrToFloatDef(WebEdit1.Text, 0); NumB : StrToFloatDef(WebEdit2.Text, 0); Sum : NumA NumB; // 把结果写回标签的 Caption浏览器里会立刻刷新 WebLabel3.Caption : FloatToStr(Sum); end;逐段说清楚这段代码在干什么。NumA, NumB, Sum: Double声明了三个双精度浮点变量分别装第一个数、第二个数和结果。用 Double 而不是 Integer是因为用户可能输入小数用整数类型会把小数部分截掉。StrToFloatDef(WebEdit1.Text, 0)是「把文本转成数字转不了就用 0」。这里为什么不直接写 StrToFloat因为用户可能什么都没输或者输了一堆字母直接转会抛异常在浏览器里表现为页面报错、按钮点了没反应对新手来说极难排查。用带默认值的版本是最省事的防呆写法。WebLabel3.Caption : FloatToStr(Sum)把数字转回文本赋给标签。TWebLabel 的 Caption 属性就是它显示的内容改了这个属性浏览器里立刻跟着变。这种「改属性就更新界面」的机制跟你以前做桌面程序完全一样。4.4 点运行之后发生了什么编译、预览与产物按下运行会发生几件事值得你花两分钟搞清楚。第一步Pas2JS 把你的 Pascal 单元编译成 JavaScript 文件。第二步IDE 启动一个本地服务或者打开一个本地文件在浏览器里加载页面。第三步页面加载时 Application 对象初始化你的 Form 被创建控件被渲染成对应的 HTML 元素。第四步你点按钮那段编译后的 JS 函数执行标签内容更新。如果按钮点了没反应按这个顺序排查先在浏览器里打开开发者工具的控制台看有没有红色报错有的话大概率是代码写错了比如控件名字拼错没报错但没反应检查按钮的 OnClick 事件是不是真的绑上了设计器里选中按钮看事件页还有一种情况是标签更新了但你没看见因为标签宽度是 0 或者被别的控件挡住了。教程里提到的「实时预览」是个很省时间的功能改完样式不用重新编译就能看到效果。但要注意它主要针对外观调整逻辑代码改了还是得重新编译运行才有变化。这一点我当初搞混过改了半天 Pascal 代码页面没反应以为软件坏了。等这个例子跑通了你可以试着改一改把加法改成乘法加一个清空按钮把两个输入框换成 TWebSpinEdit 让用户只能选数字。每改一次跑一次这种小步快跑的感觉比看十页文档管用。5. 新手最容易翻车的五个地方避坑清单5.1 装环境和新建项目阶段的坑现象一新建项目对话框里找不到 Web 项目模板。原因通常是框架装了但 IDE 没重启或者装的时候版本对不上——IDE 是这一个版本框架装到了另一个版本的目录里。解决方式很直接完全关掉 IDE 再打开还不行就重装框架装的时候看清楚它问你要往哪个 IDE 版本里装多个版本共存时尤其容易选错。现象二项目能新建一运行就报一堆找不到单元的错误。原因是项目搜索路径里没有包含框架的源码目录。你新建的是空项目或者从别的地方拷来的项目路径配置没跟过来。解决方式是打开项目选项检查搜索路径里有没有框架的库目录缺了就补上补完重新编译一次。现象三同一个项目在自己的电脑上跑得好好的拷给同事就打不开。原因是路径里带了绝对路径或者依赖了本机特定位置的配置文件。解决方式是把项目里所有路径改成相对路径并且养成「拷贝整个项目目录」的习惯别只拷 pas 文件。5.2 写代码和调试阶段的坑现象四代码逻辑没错但界面上就是没变化。原因很可能是改了控件属性却没触发重绘或者你改的是设计期属性、运行期被别的代码覆盖了。解决方式是先确认改动发生在运行期并且确实执行到了那一行必要时在中间加一句往标签写调试信息的代码看执行流到底走到哪儿。另外改了 Pascal 代码一定要重新编译实时预览看的是外观不是逻辑。现象五功能在自己电脑上正常发给别人用就出问题。常见原因有两个一是用了只在本地有效的地址或者端口二是把密钥、数据库地址这类敏感信息直接写在了前端代码里。前者改成相对路径或者可配置项后者必须挪到服务端接口后面。前端代码是明文交付给浏览器的任何人打开开发者工具都能看到这一点跟传统桌面程序完全不同务必记住。现象六控件拖得整整齐齐用户手机上一打开全乱了。原因是全程用了绝对定位控件位置是写死的像素。解决办法是给主要容器改用相对布局或者至少给页面设一个最小宽度、允许横向滚动。教程里讲绝对定位和相对定位那两节值得反复看这不是理论是直接影响用户能不能用的东西。注意这一章列的六条前三条跟环境有关后三条跟思路有关。环境问题通常一次就能解决思路问题会反复出现遇到时回来对一遍比到处问人快。6. 学完第一个例子之后下一步该往哪走第一个加法例子跑通说明环境、编译、事件、界面更新这条链路你已经打通了。接下来最忌讳的是马上扎进复杂项目然后被一堆没见过的东西劝退。给你一条我自己走过、也带人走过很多遍的路线。阶段花多久具体做什么检验标准控件熟练三到五天把 TWebEdit、TWebComboBox、TWebCheckBox、TWebListBox、TWebMemo 各用一个遍能不看教程做出一个录入表单布局过关三到五天用相对定位做一个两栏布局窗口拉窄不乱在手机浏览器里打开能看数据打通一周左右用 REST API 从服务端取一组列表数据渲染到 TWebListBox数据能取到、能显示、加载中有提示部署上线一到两天把编译产物传到静态托管用真实地址访问别人手机能打开你的页面前两个阶段不用碰任何服务端知识纯控件和布局最容易建立信心。第三个阶段是分水岭教程里 REST API 那一部分就是为它准备的你要开始理解「数据从哪来」这件事。第四个阶段会让你发现一堆只在真实网络环境下才出现的问题比如缓存、路径大小写、跨域这些踩一次就记住了。一个立刻能用的小技巧每次开始新页面之前先花五分钟在纸上画出界面上有哪些元素、点了之后各自发生什么然后再打开 IDE。我早期是直接开 IDE 边想边拖结果拖到一半发现布局思路不对全部推倒重来一晚上就没了。还有一个习惯值得从第一天就养成每做完一个小功能就编译一次、在浏览器里点一遍。别攒着写几百行再跑那时候报错你根本不知道是哪一行引起的。从那以后我每次改完一段代码都强制走一遍「编译—运行—点一下」的流程翻车的次数肉眼可见地降下来了。希望帮到你。本文还有配套的精品资源点击获取