本系列文章之二

創(chuàng)新互聯(lián)專注于企業(yè)營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、尋甸網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為尋甸等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。# 摘要

上一篇文章，我在頁(yè)面里面，使用 JS 向服務(wù)器端獲取數(shù)據(jù)，然后修改頁(yè)面元素顯示數(shù)據(jù)成功。接下來(lái)，真正的頁(yè)面，是需要格式的，要好看。如何做到？

# 開(kāi)始 # 網(wǎng)頁(yè)模板和 Delphi

要設(shè)計(jì)好看的頁(yè)面，大多數(shù)程序員做不到。一方面缺乏美感，一方面做服務(wù)器端的程序員也是不擅長(zhǎng)前端頁(yè)面設(shè)計(jì)的 HTML, CSS, JS 代碼。總之頭疼。

那么，我們?nèi)ハ螺d現(xiàn)成的頁(yè)面模板好了。我找了一個(gè)顯示得好看的頁(yè)面模板下載回來(lái)做一次實(shí)驗(yàn)。

## 頁(yè)面模板

我下載的頁(yè)面模板是一個(gè)基于 BootStrap 的頁(yè)面模板。最新版的 BootStrap 里面已經(jīng)不使用? jQuery 了。于是我要在頁(yè)面里面增加?axios 庫(kù)的代碼，用來(lái)訪問(wèn)服務(wù)器。

據(jù)說(shuō)因?yàn)?**jquery** 里面包含了 AJAX 的代碼（訪問(wèn)服務(wù)器）以及操作 DOM 的代碼（訪問(wèn)頁(yè)面元素）導(dǎo)致 jquery 很臃腫，而?axios 僅僅是 HTTP 訪問(wèn)服務(wù)器的代碼，很小巧，所以 VUE 也用它。

下載好頁(yè)面模板后，我下載的頁(yè)面模板里面只有一個(gè) index.html 文件，然后有個(gè)目錄結(jié)構(gòu)，底下包含圖片，JS，CSS 等等。這些我通通不管。

## Delphi 服務(wù)器端

在我的 WebBroker 程序里面，拖一個(gè)?WebFileDispatcher1 到我的?TWebModule1 里面，開(kāi)始設(shè)置：

1. 設(shè)置 WebFileDispatcher1 的屬性：RootDiretory 為：D:\test\WebBroker前后端分離\BootStrap_1\Appvila-free-lite\Appvila-free-lite
2. 上述目錄下是我下載的一個(gè) BootStrap 的模板頁(yè)面。里面有 index.html；
3. WebFileDispatcher1 的默認(rèn)屬性：WebFileExtension 里面，已經(jīng)指定了可以訪問(wèn)的文件是 html,jpeg 等等。如果有其它的，自己添加；
4. WebFileDispatcher1 的屬性 virtualPath 默認(rèn)是 “/”
5. 瀏覽器使用 http://127.0.0.1:8080/index.html ?就能看到硬盤(pán)下的頁(yè)面文件了。相當(dāng)于這個(gè)獨(dú)立的程序是一個(gè)提供靜態(tài)頁(yè)面的 WebServer；

這時(shí)候，瀏覽器顯示出來(lái)的頁(yè)面很好看。頁(yè)面如圖：

如果點(diǎn)擊上述頁(yè)面的 Pricing 菜單，顯示價(jià)格頁(yè)如下圖：

上面的那個(gè)價(jià)格頁(yè)，是靜態(tài)頁(yè)面，里面的價(jià)格，是 index.html 頁(yè)面里面寫(xiě)死了的！

我要想頁(yè)面價(jià)格隨時(shí)可以根據(jù)服務(wù)器端的輸出不同而變化，怎么搞？

### 前端頁(yè)面 index.html 修改

在前端頁(yè)面增加 JS 就好了。

首先給頁(yè)面元素增加 ID，否則 JS 怎么去找到它來(lái)修改呢。比如上面那個(gè)價(jià)格顯示 12 刀的東西，我在 index.html 里面一搜索，就發(fā)現(xiàn)它的代碼是：

$12/mo

這里是寫(xiě)死 $12 的。我要用程序去修改它，因此我給它加上一個(gè) ID，簡(jiǎn)單修改 index.html 的代碼為：

$12/mo

我增加了一個(gè) span, id 是 price_1；

頁(yè)面元素有了。再使用上一篇文章里面的代碼向服務(wù)器請(qǐng)求數(shù)據(jù)然后修改頁(yè)面元素，在 Index.html 里面，增加 JS 代碼如下

### 對(duì)應(yīng)的后端代碼

我給 Delphi 的 WebBroker 增加一個(gè) Action，定義它的 path 屬性為 price，雙擊這個(gè) Action 產(chǎn)生它的事件代碼，在里面寫(xiě)：

procedure TWebModule1.WebModule1WebActionItem1Action(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
begin
  Response.Content := '99';
end;

上面直接返回字符串 99，其實(shí)這里可以根據(jù)參數(shù)去數(shù)據(jù)庫(kù)查價(jià)格查到后把價(jià)格數(shù)據(jù)變成字符串輸出給客戶端。注意這里沒(méi)有任何的 HTML 標(biāo)簽，僅僅是數(shù)據(jù)。后端代碼根本不要去處理和 HTML 有關(guān)的事情。

### 運(yùn)行結(jié)果

編譯運(yùn)行 Delphi 的程序，其實(shí)就是按一下 F9 或者點(diǎn)擊 IDE 界面上的綠色三角形運(yùn)行按鈕，服務(wù)器端就運(yùn)行起來(lái)了，不到 1 秒鐘，速度非常快。

然后，在瀏覽器里面輸入地址：http://127.0.0.1/index.html

當(dāng)然，主頁(yè)面顯示出來(lái)了。然后，點(diǎn)擊 Pircing 菜單，價(jià)格頁(yè)面出來(lái)了，圖如下：

看看第一個(gè)價(jià)格，原本顯示 12 的，現(xiàn)在顯示為服務(wù)器端輸出的 99；

##搞定！

我從寫(xiě)完上一篇文章，然后想到要套用模板，到網(wǎng)上搜索模板，吃了個(gè)晚飯，下載模板，到現(xiàn)在，只間隔了幾個(gè)小時(shí)。下載完模板后，真正把代碼實(shí)現(xiàn)出來(lái)，前后花了幾分鐘而已。

#進(jìn)一步的探討

老實(shí)說(shuō)，看了?VUE?的教程，發(fā)現(xiàn)這個(gè)玩意的代碼，其實(shí)非常的對(duì)程序員不友好。

高級(jí)語(yǔ)言，為啥高級(jí)？就是易讀易懂啊，否則不如寫(xiě)匯編?，F(xiàn)在的前端代碼包括?JS，明明可以寫(xiě)得易讀的，一堆人非要寫(xiě)成人看不懂的樣子才顯得水平高。而這個(gè)?VUE?充分發(fā)揮了要顯得高級(jí)的特性，語(yǔ)法直接整成不易讀的格式。

這也是為啥?Delphi?之父，要搞個(gè)?TypeScript?的原因了。

Delphi 的 PASCAL 語(yǔ)言，當(dāng)年發(fā)明出來(lái)是用于編程教學(xué)的教學(xué)語(yǔ)言，嚴(yán)謹(jǐn)，因此易讀。

這個(gè)?VUE?是讓程序員自己用 JS 代碼去寫(xiě)一個(gè)按鈕放哪里之類的東西，要命啊。Delphi?已經(jīng)可以可視化拖放布局幾十年了。

那么，我現(xiàn)在可以用現(xiàn)成的頁(yè)面框架，通過(guò)修改頁(yè)面的 HTML 和 JS 代碼的方法，讓一個(gè)好看的頁(yè)面變成動(dòng)態(tài)頁(yè)面。但是，這個(gè)好看的頁(yè)面，我的修改依然是改代碼，而不是可視化設(shè)計(jì)。

進(jìn)一步，如果能夠做一個(gè)工具程序，將 Delphi 的設(shè)計(jì)期的 Form 可視化設(shè)計(jì)的方式，?比如設(shè)計(jì) FireMonkey?的?Form ，把 Form 里面用于布局的 Layout 控件，解析為?html 里面的 DIV 字符串，那我就可以通過(guò)?Delphi?的?Form?可視化設(shè)計(jì)，再套用一個(gè)前端的框架比如 BootStrap，輸出一個(gè)排版好的頁(yè)面；使用 BootStrap 主要是避免程序員自己去調(diào)試頁(yè)面代碼來(lái)實(shí)現(xiàn)頁(yè)面布局和風(fēng)格。

這樣一來(lái)，似乎在可以可視化設(shè)計(jì)前端頁(yè)面的同時(shí)，前端頁(yè)面的代碼和后端的代碼是徹底分離了。后端可以用 Delphi 的 WebBroker 框架就可以很簡(jiǎn)單地寫(xiě)出服務(wù)器端的代碼。

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級(jí)服務(wù)器適合批量采購(gòu)，新人活動(dòng)首月15元起，快前往官網(wǎng)查看詳情吧

名稱欄目：基于Delphi的前后端分離：之二-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://aaarwkj.com/article0/ccdjoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、搜索引擎優(yōu)化、網(wǎng)站營(yíng)銷、App設(shè)計(jì)、標(biāo)簽優(yōu)化、小程序開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)