企业官网建设流程全解析

简介：对于使用Delphi进行Web开发的团队而言，这份资料将Intraweb与EasyUI两套技术栈有机整合，面向需要快速构建现代化交互界面的IW开发者。资源包约4.22MB，虽然未标注具体文件数量，但核心内容包含jQuery EasyUI 1.4版API中文文档，以及“IW与EasyUI”集成示例，分别用于查阅组件用法和对接前后端数据操作，整体结构清晰，适合作为工具手册与入门参考。目前已有479人学习下载。通过这套资料，开发者可以掌握在Intraweb中通过JSON/AJAX与EasyUI数据网格交互的典型做法，理解服务器控件与前端UI组件的分工，从而在熟悉的Delphi环境下实现无需页面刷新即可排序、过滤、编辑数据的富客户端体验。无论是初次尝试IW与EasyUI组合，还是希望优化现有项目的前端表现，这份资源都能提供从API速查到项目落地的实用支撑。

1. 从“IntraWeb + EasyUI”这个组合说起：Delphi后端项目里最省事的UI补法

做Delphi后台系统做到第二年，我先后拆过不下十套与IntraWeb相关的UI集成方案，直到拿到这套“Intraweb与EasyUI源”，才意识到问题不在EasyUI本身，而在IntraWeb（简称IW）与前端组件之间的边界怎么画。IWEasyUI源包把前端静态脚本、后端组件封装和几个典型Demo放到了一起，适合正在用IW 14/15做后台管理、又被自带控件逼得写不动的团队：不用再为“datagrid分页”“tabs手风琴”去造轮子，直接沿用EasyUI那套成熟交互。它解决的是IW工程里最难处理的部分——让VCL组件的生命周期与EasyUI的jQuery渲染保持同步。你需要的不是更多教程，而是一套能把IW后端事件和前端AJAX绑定起来的可用骨架。

2. IntraWeb与EasyUI的搭配逻辑：控件隔离与页面生命周期

2.1 IntraWeb的“伪无状态”模型：先摸清IW的Session与线程边界

IntraWeb这类框架的底层思路是用VCL组件模拟桌面程序，但用户每次点击都会触发一个HTTP请求。这里最容易被前端工程师误解的点是：IW页面并不是简单的HTML模板，它由TIWAppForm在服务端渲染成HTML后回传，而Session状态保存在服务端内存中。我习惯把IW称为“伪无状态”——浏览器端只有一份HTML片段，而按钮、输入框这些控件实例都挂在服务端的Session字典里，线程按Session隔离。

这意味着你在服务端写WebApplication.UserSession的时候，实际上拿到的只是当前这个浏览器会话的数据；而不是像传统Web框架那样可以在各个请求里共享静态全局对象。IW的每个Session内都有一个对应的工作线程，这个线程处理该Session下的页面事件与AJAX回调。若在多线程环境里直接访问未加锁的全局变量，大概率会在压力测试时出现数据错乱。

IntraWeb嵌入EasyUI时，最容易踩的边界就在这里：EasyUI是在浏览器端运行的jQuery组件库，它不感知IW的Session上下文。Commander按钮的OnClick事件由IW线程触发后，你要让服务端生成一段JavaScript脚本，推到浏览器端执行$.fn.datagrid的初始化。服务端与浏览器端各自维护状态，而不是像过去写B/S时一刀切全交给后端。

2.2 为什么EasyUI能补IW的动态交互短板

IW自带控件中最让人头疼的是：表格控件笨重、样式老化、下拉联动麻烦。EasyUI的优势在于它有layout、tabs、datagrid、treegrid、combobox等一套完整UI模型，并且交互逻辑都在前端完成，只需要服务端提供一个JSON数据源。做后台管理界面时，左边树、右边列表、底部工具栏这种“三明治布局”，用EasyUI几十行配置就能搭建。

与其把IW官方的样式调了又调，不如直接加一层EasyUI：IW保留Session管理和业务事件，EasyUI负责渲染和交互。这样做法还有个额外收益：后续前端工程师介入时可以并行工作，只见IW输出JSON和初始化参数，不需要去理解Delphi代码。

2.3 两种方案的职责划分表：后端事件驱动 vs 前端组件接管

职责划分的第一原则：服务端只出数据，不出HTML片段（例外是初次加载时初始化脚本）。这样EasyUI的各个组件在$.ajax拿到JSON后自行渲染，数据字段变化时后端不用改动前端模板，保持低耦合。

3. 拆“Intraweb与EasyUI源”：工程结构、静态资源与第一个可跑Demo

3.1 资源包内的工程结构：从DPr到前端目录

这套资源包下载后是一个常规的Delphi工程压缩状态。打开后你会看到.dpr主工程文件，.pas单元文件，以及一个专门存放EasyUI脚本的static/js与static/css目录。一般这类资源包都会额外放一个README或“环境说明”文本，里面写了IW版本要求与Delphi版本兼容范围。建议先不要急着把整个包拖进IDE，第一步核对IW编译环境是你熟悉、且资源包能直接打开的正确版本。

我按常规整理一下：

• ServerController.pas：负责IVAppServer配置与公共事件。
• MainForm.pas：登录后的主窗体。
• uEasyUI.pas：封装了EasyUI的JS生成、JSON序列化方法（这是资源包的核心）。
• static/：EasyUI官方脚本、样式、图标字体文件。

3.2 配置IW加载静态文件：动手前必须知道的三件事

EasyUI资源要能被浏览器正常请求，核心是让IW在收到静态文件URL时跳过Session校验。原因是IW默认对大部分路径都做Session关联，而js/css文件没有Session信息，如果处理不当很容易出现404或直接被重定向到登录页。

多数人在这一步的第一反应是把jquery.easyui.min.js放进Site目录，然后努力修改路径。其实有更稳妥的做法。我平时会在服务器控制器里加一个分发入口，拦截以/static/开头的请求，直接在响应流中输出本地文件内容。代码如下：

// ServerController.pas uses IdGlobal, SysUtils, Classes; procedure TIWServerController.IWServerControllerBaseOnAfterDispatch( const Request: THttpRequest; const Response: THttpResponse); var LPath, LFullFile: string; begin // 拦截所有 /static/ 路径，返回实际物理文件 LPath := Request.PathInfo; // 类似 /static/easyui/jquery.easyui.min.js if Pos('/static/', LPath) = 1 then begin // 拼接工程根目录下 static 文件夹 LFullFile := IncludeTrailingPathDelimiter(ExtractFilePath(GetModuleName(HInstance))) + Copy(LPath, 2, MaxInt); // 去掉开头的 / if FileExists(LFullFile) then begin if LowerCase(ExtractFileExt(LFullFile)) = '.js' then Response.ContentType := 'text/javascript; charset=utf-8' else if LowerCase(ExtractFileExt(LFullFile)) = '.css' then Response.ContentType := 'text/css; charset=utf-8'; Response.WriteFile(LFullFile); end; end; end;

逻辑说明：这段代码在每次HTTP请求分发后执行，PathInfo就是URL去掉域名后的路径。我通过“多一层转发”而不是写死全路径，是为了在你把工程整体移动目录后不必再改HTML里的引用路径。

参数说明：Response.ContentType用来告诉浏览器当前返回的是脚本或样式；Request.PathInfo与你在浏览器地址栏看到的“相对路径”对应，不同Delphi/IW版本里参数名称略有差异，以你IDE提示为准。代码里的TIdHTTPResponse如果你使用的IW版本不同，可能需要改为对应的RVHTTPResponse类型，这也是新手最容易卡住的地方。

3.3 跑通第一个页面：把IWForm里的按钮事件映射到EasyUI操作

在资源包里，登录页通常是最简单也最有代表性的Demo：左侧EasyUI panel嵌入账号输入，右侧IW后端生成一个“登录”按钮。当用户点击登录按钮时，IW在OnClick里触发调用后端验证，然后通过ExecuteJS调用EasyUI的messager.alert弹窗。

// MainForm.pas procedure TMainForm.btnLoginClick(Sender: TObject); begin if edtUser.Text = 'admin' then begin // 向前端执行EasyUI的messager提示 WebApplication.ShowMessage('登录成功，准备跳转'); end else begin // 调用EasyUI的弹窗组件 WebApplication.ExecuteJS( '$.messager.alert("提示", "用户名或密码错误", "warning");' ); end; end;

这块代码要说明两个点：WebApplication.ShowMessage是IW自带方法，弹的是浏览器原生警告框，样式跟随浏览器；而WebApplication.ExecuteJS则是把传入的JavaScript字符串原样注入到当前页面执行。若要交给EasyUI渲染，所有UI提示都必须走ExecuteJS，因为后端并不直接生成UI层HScript。

我在实际项目里还会把ExecuteJS包一层：用Format拼接JSON或参数。比如弹窗需要MarkDown内容时，就要在Pascal里把字符串序列化成带转义符的JSON，否则遇到HTML标签或单引号很容易把前端脚本炸掉。

4. 数据交互：JSON回传、AJAX回调与后端请求的三个可靠路径

4.1 用Response给EasyUI返回JSON：小心编码陷阱

EasyUI的datagrid需要的是{total: 100, rows: [{...}]}这种固定结构。IW服务端返回JSON最稳的方法是在事件里获取TIWResponse，然后写入ContentType和JSON字符串。

// 在一个TIWButton的OnClick事件里返回JSON procedure TMainForm.btnLoadDataClick(Sender: TObject); var LJson: string; begin LJson := '{"total":2,"rows":[{"id":1,"name":"演示项目A"},{"id":2,"name":"演示项目B"}]}'; // 方式一：直接发送给当前浏览器，覆盖整个页面内容 WebApplication.Response.ContentType := 'application/json; charset=utf-8'; WebApplication.Response.Write(LJson); end;

这里必须提醒：IW的Response一旦写了内容，后续页面事件就不会再渲染HTML了，所以这种方式适合完整请求，不适合AJAX异步调用。AJAX场景下，前端请求会在success回调里拿到响应文本，然后直接JSON.parse。

4.2 正式AJAX路径：通过IW自带请求或ServerController分发到数据方法

EasyUI的datagrid组件默认用url属性加载数据，它发的是常规HTTP GET请求。IW会对请求URL中的Session做校验，而某些版本在带Session参数的路径下还能处理，不带Session则可能直接回传登录页HTML。为此我在资源包常用方式是把所有数据接口放到一个统一处理函数中，通过URL参数区分动作。

// 前端EasyUI表格初始化 $('#dg').datagrid({ url: 'data.json?action=list&page=1&rows=10', method: 'get', queryParams: { keyword: '测试' }, onLoadError: function(data) { // 这里经常会拿到HTML片段而不是JSON，需要注意 console.error(data); } });

后端用一个伪资源去接收action=list，然后在ServerController里处理并返回JSON。常见做法是写一个自定义Handler，可以在ServerControllerBaseOnAfterDispatch里增加分支，也能配合IW的URL映射配置。

为了更贴合IW本身的机制，我建议新手直接用IW提供的Response方式，先保证返回结构正确。等整套流程跑通后再上自定义路由，否则调试难度会翻倍。

4.3 参数说明：Session、时间戳与数组结构

与EasyUI交互时后端要多留一个心眼：EasyUI的datagrid默认会发分页参数page和rows，还会发排序字段sort与order。后端接收时不能写死，要按这些参数去查询。IW后端取参的代码大致如下：

var LPage, LRows: Integer; begin // 从IW的Request.QueryFields里读分页参数 LPage := StrToIntDef(WebApplication.Request.QueryFields.Values['page'], 1); LRows := StrToIntDef(WebApplication.Request.QueryFields.Values['rows'], 20); // ... 组装SQL或数据集，转成JSON end;

这里有一个新手容易看不懂的点：QueryFields.Values['page']拿到的值是字符串类型，如果前端没传这个参数，StrToIntDef就会用默认值兜底，避免异常。在组装JSON前，后端最好把日期字段统一格式化为YYYY-MM-DD HH:MM:SS，否则EasyUI渲染日期时会出现时间偏移。

4.4 关于“IW中文乱码”的那道坎

在Delphi中字符串默认是UTF-8还是ANSI，取决于编译选项。IW 14以上的默认编码一般没问题，但若你在ExecuteJS里拼接中文，后端字符串与前端页面编码不一致就可能让EasyUI弹窗显示乱码。解决办法是在后端统一转UTF-8：WebApplication.ExecuteJS('...' + UTF8Encode(LStr) + '...')，前端页面在头标签里声明<meta charset="utf-8">。这个问题在资源包里已被处理过，但你自己新增页面时很容易忽略。

5. 避坑/常见问题/排查：EasyUI进IW最常见翻车场景

5.1 现象：EasyUI的js/css加载404

原因：IW的Session验证把所有非授权路径都拦了下来，或静态文件路径与工程物理目录不对应。

解决：优先走ServerController的手动静态文件分发，不要依赖IDE默认的VirtualPath设置。在分发时顺手打印日志，确认PathInfo与LFullFile是否真实存在，排除拼写问题。我就是被这个坑磨了半小时，最终发现是Copy(LPath, 2, MaxInt)把开头的/去掉错了。

5.2 现象：页面能打开但样式错乱，组件显示成一堆方块

原因：EasyUI的样式依赖图标字体文件，字体文件加载路径不在/static/目录内，导致浏览器无法解析图标。

解决：检查html中iconCls引用的图标名是否都在EasyUI的icon.css内，然后让字体文件与css文件放在同级目录。这一点在服务器分发里容易被忽略，你要把/static/easyui/themes/icons/整个目录都暴露出去，不只是js/css。

5.3 现象：AJAX回调里拿不到IW上下文，或提示Session无效

原因：EasyUI发起的请求可能没带IW的Session Cookie，IW端认为这是新来访者，自动建了一个新Session，后续事件就摸不到原页面实例。

解决：在IW初始化设置里允许同Session多个请求共享上下文；在AJAX的URL后手动拼接IW返回的Session参数。我一般是先取出WebApplication.SessionId，然后在前端脚本开头构造全局变量。会话过期且需要自动登录跳转的逻辑，也要单独处理。

5.4 现象：长时间挂起后页面点击无响应，任务管理器的内存与线程数持续上升

原因：这是IW经典的内存泄漏症状。常见来源有三个：一是静态文件分发时没有释放TFileStream等资源；二是Session在页面关闭后没有正常结束；三是EasyUI的定时器或WebSocket保活机制让IW线程无法回收。

解决：在WebApplication.OnSessionEnd里做清理动作，把所有自定义对象和文件流置为FreeAndNil。EasyUI的datetimebox内部自带定时器，页面关闭前要执行$('#dg').datagrid('destroy')这类销毁调用。那些“玄学”般的崩溃，往往就是前端组件没销毁导致的。

5.5 现象：EasyUI布局在IW页面里初始化为空白或高度为0

原因：IW的页面通常使用内联框架或绝对定位渲染，EasyUI的layout组件依赖容器的高度计算，而IW生成的容器在脚本执行时可能还没有完成尺寸布局。

解决：把EasyUI初始化脚本放到window.onload或$(function(){})中，而不是在IW的OnRender事件里唤醒。如果IW的脚本执行顺序靠前，可以延迟200毫秒再初始化，或者使用setTimeout加退避重试。这种方式不算优雅，但对后台表格类页面非常稳。

6. 进阶用法：写一个IWEasyUIGrid封装组件，让前端初始化代码集中可控

当你经过三个项目、十几张页面之后，会发现复制粘贴的还是那一段EasyUI初始化脚本：声明datagrid、设置columns、加载数据地址。与其散落各页面，不如在Pascal端做一次封装。把EasyUI表格的公共初始化参数收敛成一个自绘组件类，用IW自带控件机制渲染出来。

// MyEasyUIGrid.pas type TMyEasyUIGrid = class(TIWComponent) private FDataURL: string; FColumnsJson: string; published property DataURL: string read FDataURL write FDataURL; property ColumnsJson: string read FColumnsJson write FColumnsJson; public procedure RenderHTML(const AContext: TIWBaseHTMLContext); override; end; procedure TMyEasyUIGrid.RenderHTML(const AContext: TIWBaseHTMLContext); var LScript: string; begin inherited; LScript := Format( '<table id="%s" style="width:100%%"></table>' + '<script type="text/javascript">' + '$("#%s").datagrid({url:"%s",columns:%s,fitColumns:true});' + '</script>', [Name, Name, DataURL, ColumnsJson] ); AContext.HTMLText.Write(LScript); end;

这段代码的重点是：继承TIWComponent后重写RenderHTML，把Script生成的时机统一控制在IW向浏览器输出HTML的阶段。外部调用时，只需在Form的OnCreate里设置DataURL和ColumnsJson，不再每页手写重复的插件初始化。参数说明：fitColumns:true会让列宽自动填充，避免出现横向滚动条，但遇到内容很长的文本，还是要单独设置minWidth。

如果想快速验证你的封装是否有效，可以在FIW窗体里放一个按钮，点击后在服务端临时改Grid.DataURL，然后看浏览器端表格能否在AJAX提交前就正常请求新URL。从那以后，我每次集成前端组件到IW时都会强制检查一遍“服务端输出脚本的时机是否落在页面加载前”，并且把所有静态资源路径集中在一个配置单元中管理，不再让零散页面各自指定资源目录。希望帮到你。

本文还有配套的精品资源，点击获取