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

基于 Delphi 的前后端分离：之一
# 缘起

看到Delphi盒子论坛里面有人讨论WEB开发，提到 IntraWeb 和 UniGUI 控件。

这两个控件都是在使用 Delphi 写后端（服务器端）的代码时，在后端构造页面代码，让浏览器访问时可以看到页面。这种做法把前端代码和后端代码混在一起了，基本上是 C/S 开发的模式。当然，传统的 WEB 开发，不管是 ASP，JSP 还是 PHP，也都是类似的模式。只是 Delphi 的上述两种框架提供了页面的可视化开发，拖拉控件就能出现页面。

从程序架构来说，后端只负责数据，前端代码只负责页面显示，这样分开，架构上更清晰，代码也更容易维护。WEB 开发转了一大圈，终于转到前端页面彻底用 JS 代码来实现并且也【组件化】了，基本上转到了 N 多年前 Delphi 的开发模式上了。

于是我想试试，后端用 Delphi 来写服务器，输出数据给前端，前端用 JS 来从服务器获取数据，渲染页面。当然，前端渲染页面的框架很多，比如 VUE 等等。这里我仅仅做研究，是否最终会用到哪个前端框架，接下来再说。

# 第一个测试

首先使用 Delphi 创建一个 Stand alone 模式的 WebBroker 工程，运行起来，默认工作在8080端口上面，让浏览器去访问它，就能看到页面。这个工程的基本代码是：
```
procedure TWebModule1.WebModule1DefaultHandlerAction(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
begin
  
  Response.Content :=
    '' +
    'Web Server Application' +
    'Web Server Application' +
    '';
end;
```
上述代码，就是当这个服务器收到一个 HTTP 请求的时候，返回一堆字符串给浏览器。这堆字符串刚好是一个标准的 HTML 页面的代码，于是浏览器就显示这个 HTML 页面的内容了。

运行这个 WebBroker 的程序，打开浏览器，地址栏输入：http://127.0.0.1:8080

然后就能看到浏览器网页显示上述代码里面的那串文字了。你当然可以试着改掉那行字，重新编译运行程序，然后用浏览器重新打开（刷新一下页面）就能看到你输入的文字。

WebBroker 就是这么简单。

### 但是，这是在后端创建 HTML 代码！

# 我们来试试前端

首先，从前端如何向后端获取数据（仅仅是数据，而不是 HTML 页面代码）做起。

网上一搜，这篇文章说得不错：

javaScript中ajax、axios总结 - 唯美(vmei) - 博客园 (cnblogs.com)

这篇文章里面，提到 3 种方法：

1. 直接使用原生的 JS 代码；

2. 使用 jQuery 这个 JS 库；

3. 使用 axios 这个 JS 库；

使用原生的 JS 代码，代码行数比较多。使用 jQuery 这个库，我以前做过，这次就不想测试了。而且现在流行的前端框架 VUE 等都开始使用 axios，那我就试试 axios 和 Delphi 如何搭配吧。

## 前端页面代码：
```
<head>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
 
<body>
<p> 实现前端调用后端的 HTTP 请求的方法：<br>
https://www.cnblogs.com/hgdzjp/p/9438893.html
p>
<p id="demo22">aaap>
 
<script>
 
axios.get('http://127.0.0.1:8080')
    .then(function(response){
        //请求成功
		document.getElementById("demo22").innerHTML = response.data;
    }).catch(function(erroe){
        //请求失败
    });
 
 
 
script>
 
body>
 
html>
```
把这个页面保存为一个硬盘上的本地文件 test.html，直接用浏览器打开它，最终的显示内容符合我的预期，说明这段代码工作正常。

### 代码解释

上述页面代码，第一个 P 里面的一行字，就是典型的页面 HTML 代码，浏览器打开这个文件，那个 P 里面包含的两行文字就显示出来。这个是静态 HTML 代码。

第二个 P ，其 id 是 demo22，其页面内容是 aaa（其实没有内容也不影响页面代码执行，我加上 aaa 是为了当页面 JS 代码没执行时，页面上能够显示这个 aaa 让我知道 JS 代码没执行。）

页面里面的

# 缘起

# 第一个测试

### 但是，这是在后端创建 HTML 代码！

# 我们来试试前端

## 前端页面代码：

### 代码解释