基于 Delphi 的前后端分离：之二

本系列文章之二

# 摘要

上一篇文章，我在页面里面，使用 JS 向服务器端获取数据，然后修改页面元素显示数据成功。接下来，真正的页面，是需要格式的，要好看。如何做到？

# 开始

# 网页模板和 Delphi

要设计好看的页面，大多数程序员做不到。一方面缺乏美感，一方面做服务器端的程序员也是不擅长前端页面设计的 HTML, CSS, JS 代码。总之头疼。

那么，我们去下载现成的页面模板好了。我找了一个显示得好看的页面模板下载回来做一次实验。

## 页面模板

我下载的页面模板是一个基于 BootStrap 的页面模板。最新版的 BootStrap 里面已经不使用  jQuery 了。于是我要在页面里面增加 axios 库的代码，用来访问服务器。

据说因为 **jquery** 里面包含了 AJAX 的代码（访问服务器）以及操作 DOM 的代码（访问页面元素）导致 jquery 很臃肿，而 axios 仅仅是 HTTP 访问服务器的代码，很小巧，所以 VUE 也用它。

下载好页面模板后，我下载的页面模板里面只有一个 index.html 文件，然后有个目录结构，底下包含图片，JS，CSS 等等。这些我通通不管。

## Delphi 服务器端

在我的 WebBroker 程序里面，拖一个 WebFileDispatcher1 到我的 TWebModule1 里面，开始设置：

1. 设置 WebFileDispatcher1 的属性：RootDiretory 为：D:\test\WebBroker前后端分离\BootStrap_1\Appvila-free-lite\Appvila-free-lite
2. 上述目录下是我下载的一个 BootStrap 的模板页面。里面有 index.html；
3. WebFileDispatcher1 的默认属性：WebFileExtension 里面，已经指定了可以访问的文件是 html,jpeg 等等。如果有其它的，自己添加；
4