WebBroker 制作网站
WebBroker 概述
Delphi 提供三种 Web 框架：1. WebBroker；2. WebSnap；3. IntraWeb。
WebBroker 最简单，也最灵活。WebSnap 复杂也不好用；IntraWeb 用起来倒是简单了，但想要做复杂的网页，想要自己做一些底层控制，确实没有文档也找不到地方下手。尤其是现在各种 JS CSS 框架层出不穷，想在页面上用上这些框架，反倒不方便。
想用 Delphi 做一个类似 Wordpress 的 CMS，从要实现的界面功能开始，测试用哪个框架更容易做出来。最后发现，还是用 WebBroker 更简单，比用 IntraWeb 更简单。当然，要求你需要懂一些 Javascript 和 CSS。不用太精通，懂一点点，概念上入门就好。
一个 WEB 页面（这里不讨论类似 Flash 这样的插件），就是要显示的文字内容字符串和图片的链接地址字符串，以及一堆 html 标签字符串，再加上 css 字符串和 javascript 字符串。总之无论显示出来时什么格式，就是一堆字符串文本。
除了静态页面，动态页面有以下几种方法来创建：
A. 服务器端的代码创建好完整的页面描述字符串（css 和 javascript 可能是事先写好的），发送给客户端浏览器。这是最传统的方法。
B. 服务器端创建一部分页面描述字符串，另外一部分，则由客户端的 javascript 根据从服务器端获取的数据来创建。
C. 彻底的 ajax，服务器端只输出数据，客户端界面完全由 javascript 来创建。
A 的好处是所有代码都在服务器端实现，比如早期的 asp.net 和早期的 WebSnap 。坏处是客户端界面一旦需要修改，就必须修改甚至重新编译发布服务器端的代码。虽然有时候仅仅是修改服务器端的页面模板。
B 的好处是一部分界面的显示方式在客户端的 javascript 和 css 的代码来实现，修改页面显示格式仅仅需要修改保存在服务器端的文本文件就可以了。坏处是一个页面，可能有多个页面元素导致的对服务器的多次访问，增加了服务器的访问次数。
C 的好处是服务器只提供数据，整个页面的界面由客户端的 javascript 生成。麻烦的是复杂的 javascript 比较难搞。
总之，页面元素内容的获得和页面元素的创建，拆得越细则页面代码越灵活，对页面的修改就越不需要去改动服务器端代码，但一个页面对服务器端访问次数就会越多。因此，这里需要一个综合的考虑。
因此，看起来，使用 WebBroker 来开发网页，比较好的方式是：
1. 页面框架和页面内容，在服务器端创建。为了方便修改页面显示格式，页面的模板需要允许可以更改。一些可以配置的项目，用外部参数来表达。
2. 服务器端程序创建的页面，只需要文档内容。文档格式通过 css 来实现。这样只要调整 css 就能调整页面布局和风格。
3. 部分页面，使用 ajax 的方式。因此 WebBroker 也需要提供一些仅仅返回部分数据的接口。
CMS 涉及到的具体技术点
用户登录：
采用 Cookie 则可以很简单地解决用户登录身份验证的问题。WebBroker 作为服务器端程序，如果是 CGI 模式，则无法在内存里面为每个用户保留一份登录的 Cookie，对此有两个办法可以解决：
1. 将用户登录信息创建相应的 key 字符串返回给用户的 Cookie 并保存到数据库；下次用户访问时读取 Cookie 然后查数据库来验证；
2. 将用户登录信息创建的 key 是满足某个只有服务器知道的算法写入 Cookie 返回给用户。下次用户访问时读取 Cookie 并计算校验。
采用方法2可以降低数据库服务器的压力。但可能会增加 WEB 服务器的计算量。
对于不支持 Cookie 的浏览器设置，可以采用将这个 key 写入页面的隐藏字段，或写入 URL 的方式。对于服务器端代码来说，使用 Cookie 最简单。
富文本输入框：
CKEditor 是一个用于浏览器网页的富文本输入框。如何将它放进 WebBroker 制作的页面？原理是写一个 html 页面文件，里面包含 CKEditor 的 javascript 的引用，和一个 html 的文本输入框，并且用 CKEditor 的提供的 javascript 函数，在页面里，将该文本输入框替换为 CKEditor。至于用户输入文字后的提交按钮，按照网页的 form 的标准提交方式写页面代码，也就是类似 form action="WebBroker.exe/MyCommit/" 这样的描述语句。所有这些都和 WebBroker 没有关系。和 WebBroker 有关系的是那个提交路径 MyCommit。在服务器端 WebBroker 的代码里面，在相应路径的事件函数里面用代码读取页面提交的内容就可以。
页面布局：
严格依照页面只提供文档结构化内容，风格和布局交给 css 的原则。这样一来，页面布局就很容易通过更换 css 来变化风格而无需修改服务器端WebBroker代码。
css 最好采用成熟的 css 框架，如果完全自己手写 css 很难做到各浏览器兼容。我在这里采用了 bootstrap 这套 css框架。
页面活动部分及 ajax：
采用成熟的 jquery 这套 javascript 框架。
使用成熟的 bootstrap 和 jquery 使得页面可以很容易获得漂亮风格的外观。而这一切和 WebBroker 没有关系，仅仅是一些简单的页面模板套用。在不修改 WebBroker 代码的情况下，仅仅修改页面模板就能获得页面。
因此，一套完善的 CMS 代码，需要提供管理员可以上传并覆盖掉模板文件的方法。或者，允许同一个页面存在多个模板页面文件，允许配置选择使用哪套模板文件。
最后，需要注意到问题：页面里面涉及到相对路径的地方，需要反复测试。
代码中需要注意的问题：
页面开头第一行：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
这一行告诉浏览器这是一个 HTML5 的页面。如果是静态页面，这一行写成 <!DOCTYPE HTML PUBLIC> 是没有问题的。但如果这个页面被 WebBroker 作为页面模板调入然后输出，则中文会出现乱码。
页面需要加上：
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- 这句话保证手机上看到的字体大小是正常的 -->
WebBroker and ajax
服务器端输出给浏览器的页面代码为
<div class="thumbnail">
<img id="img1" class="title-img" />
<div class="caption">
<h4><a href="http://shop.runcam.com/runcam-3/" title="RunCam 3" target="_blank"><span id="Caption1">ajax 在这里写入正确内容</span></a></h4>
</div>
</div>
上述页面代码，有两个地方，需要客户端通过 ajax 去获得正确的内容。其一，是 img id="img1"；其二，是 span id="Caption1"。
采用 jquery 的 ajax 的代码如下：
<script>
$(function(){
//以下代码可以通过 ajax 方式获得图片文件链接并显示出来。
htmlobj=$.ajax({url:"titlepic?ImgNo=1",async:false});
$('#img1').attr("src", htmlobj.responseText);
htmlobj=$.ajax({url:"titlecaption?id=1", async:false});
$('#Caption1').text(htmlobj.responseText);
})
</script>
详细语法，查 jquery 的手册就可以明白。
对应上述客户端 jquery 的方法，是服务器端 WebBroker 的对应的代码。
其一，是 WebBroker 里面的路径 titlepic 的事件代码，读取 Request.QueryFields.Values['ImgNo'] 来获得编号，然后根据编号返回相应的图片链接地址（可以是绝对路径，也可以是相对路径）。
其二，是 titlecaption 路径的实践代码，直接返回描述字符串文本。例子：Response.Content := '这是一张获奖的火星风景照片';
结论：用 WebBroker 来对应 jquery 做的 ajax 是非常简单的。
------------------------------
采用 WebBroker 开发网站，还可以有另外一种方法：将 WebBroker 程序当作一个 WebServer 来使用。访问它的代码类似： http://ipaddress/home.html 看不到 WebBroker.exe 这样的字符串在 URL 里面。
在服务器端 WebBroker 的默认路径下，首先判断用户请求的 URL，根据是哪个 html 文件，来调用对应的 PageProducer。而每个 PageProducer 的 OnTag 事件里，填入动态的内容。至于模板页，则用户可以随时编辑修改，对应的 css 和 javascript 也可以随时修改。这样也能达到不修改程序而改变页面布局风格的目的。并且 URL 更简单。这样相当于是把 WebBroker当作一个标准的 WEB Server 来使用。网上有篇文章是把 WebBroker 程序绑定到 Windows 的 http.sys 上面，实现完成端口的访问，刚好就可以用这种方式。
| -ICP -IDC -ISP |