零基礎(chǔ)小白，用無代碼開發(fā)一個(gè)網(wǎng)站，有手就會(huì)！（不懂代碼也能建網(wǎng)站）

任何人對“網(wǎng)站”都不陌生。我們每天都訪問各種網(wǎng)站。那么，如何搭建自己的網(wǎng)站呢？很多人不知道代碼，不知道技術(shù)，覺得自己建網(wǎng)站是不可能的。實(shí)際上，建立一個(gè)網(wǎng)站并不困難。哪怕代碼完全不能理解，即使沒有建站經(jīng)驗(yàn)，也很容易擁有自己的網(wǎng)站。首先來看看搭建一個(gè)網(wǎng)站需要什么準(zhǔn)備工作。
一：服務(wù)器
首先，搭建網(wǎng)站最關(guān)鍵的當(dāng)然是要有一臺(tái)服務(wù)器，它的作用就是提供網(wǎng)站運(yùn)行所需要的硬件環(huán)境。但這并不意味著我們真的要去買一臺(tái)物理機(jī)來當(dāng)服務(wù)器，因?yàn)楝F(xiàn)在國內(nèi)有很多云平臺(tái)都可以購買云服務(wù)器，而且價(jià)格還很便宜。
二：服務(wù)器管理軟件
服務(wù)器管理軟件的作用就是能夠讓我們很方便地，在服務(wù)器上安裝軟件或者是管理文件。因?yàn)榉?wù)器上的操作系統(tǒng)一般都是沒有界面的Linux系統(tǒng)，如果全靠命令行來操作Linux的話，對小白來說難度就太大了。
三：域名
域名是我們訪問網(wǎng)站時(shí)輸入的地址，由于網(wǎng)站是搭建在服務(wù)器上的，按理說我們應(yīng)該通過服務(wù)器的ip地址來訪問網(wǎng)站才對?？扇澜绲木W(wǎng)站那么多，如果通過記住這些冷冰冰的數(shù)字來訪問網(wǎng)站，那豈不是太難了，所以域名就應(yīng)運(yùn)而生。當(dāng)我們在地址欄輸入域名時(shí)，會(huì)有DNS服務(wù)器幫我們找到，站服務(wù)器的IP地址并返回給瀏覽器，然后瀏覽器再通過ip地址訪問網(wǎng)站。
四：網(wǎng)站程序
搭建網(wǎng)站的最后一個(gè)步驟是一份網(wǎng)站程序源碼，它的作用就是提供一個(gè)可供訪問的界面，并實(shí)現(xiàn)網(wǎng)站的所有功能。按道理來說，開發(fā)網(wǎng)站程序本來是含代碼量最高難度也最大的一個(gè)步驟，但是在這里介紹一個(gè)無代碼開發(fā)平臺(tái)——Zion。通過可視化和組件化模塊就能實(shí)現(xiàn)制作小程序、網(wǎng)站。

下面就詳細(xì)介紹一下搭建一個(gè)屬于自己的導(dǎo)航網(wǎng)站，點(diǎn)擊左側(cè)側(cè)邊欄的分類，右邊顯示不同的數(shù)據(jù)根據(jù)側(cè)邊欄內(nèi)容過濾，任意點(diǎn)擊會(huì)跳轉(zhuǎn)到對于的網(wǎng)站，這是我做的效果，如圖所示：

1.1 制作方法
想要實(shí)現(xiàn)這種效果的方法有很多，如下：

1. 選擇視圖 條件式容器內(nèi)套列表，在列表過濾字段，然后條件式容器和選擇視圖匹配。
2. 選擇視圖 列表，然后列表過濾字段與選擇視圖名稱匹配（☆推薦）

談?wù)勥@兩種方法：這兩種方法實(shí)現(xiàn)的效果是一樣的，但在制作的過程中方法1絕對比方法2要慢很多而且容易出錯(cuò)。因?yàn)榉椒?需要對每個(gè)條件式容器設(shè)置條件及內(nèi)套的列表也要一個(gè)個(gè)過濾會(huì)很麻煩，而且效率也低，制作容易出錯(cuò)卡頓；方法2直接用選擇視圖和列表，列表過濾字段直接和選擇視圖名稱匹配。
1.2 頁面布局

• 在頁面拖入【選擇視圖】和【列表】及【文字】組件，如圖所示：

1.2.1 選擇視圖布局

• 選擇視圖樣式中將多行打開，X【0】，Y【70】，W【135】，H【650】，如圖所示：

• 雙擊進(jìn)入【選擇視圖】中，在【正常視圖】和【選中視圖】拖入【按鈕組件】（選擇視圖按鈕樣式自擬），X【0】，Y【0】，W【135】，H【50】，如圖所示：

• 在【正常視圖】中會(huì)有個(gè)【懸停效果】，選擇【正常視圖的按鈕】點(diǎn)擊進(jìn)入懸停編輯模式，修過懸停后的文字顏色即可，如圖所示：

1.2.2 文字布局

• 【文字】組件就不多說了，X【144】，Y【70】，W【234】，H【25】，文字顏色自擬，將懸浮勾上，如圖所示：

1.2.3 列表布局

• 【列表】具體參數(shù)，X【144】，Y【102】，W【1122】，H【619】，將懸浮勾上，布局模式改為【充滿父組件】，如圖所示：

• 【列表】樣式，縱列數(shù)量：4，橫向空白和縱向空白都為：10，如圖所示：

• 雙擊【列表】，點(diǎn)擊【容器視圖】，將高度改為80，如圖所示：

• 在【容器視圖】中拖入一個(gè)【視圖】，X【0】，Y【0】，W【276】，H【80】并給【視圖】添加邊框效果，后面要做懸停效果的。如圖所示：

• 在【視圖】中拖入圖片和兩個(gè)文字組件，具體參數(shù)如下：

• 進(jìn)入【懸停編輯模式】分別給【視圖】與【文字】添加懸停效果分別修改下顏色即可，如圖所示：

1.3 數(shù)據(jù)表

• 因?yàn)椴挥媒㈥P(guān)系，直接參考以下圖片就行了，如圖所示：

1.4 數(shù)據(jù)綁定及過濾
1.4.1 選擇視圖數(shù)據(jù)綁定

• 給【選擇視圖】，默認(rèn)值自要求默認(rèn)值遠(yuǎn)程數(shù)據(jù)存在的，數(shù)據(jù)來自【遠(yuǎn)程數(shù)據(jù)中的導(dǎo)航側(cè)邊】，字段排序可加可不加，過濾類型【無過濾條件】，如圖所示：

• 雙擊進(jìn)入【選擇視圖】點(diǎn)擊【按鈕】，文字內(nèi)容為【項(xiàng)數(shù)據(jù)中導(dǎo)航側(cè)邊的name】，如圖所示：

1.4.2 文字?jǐn)?shù)據(jù)綁定

• 文字內(nèi)容為【-選擇器/選擇視圖/name-】，如圖所示：

1.4.3 列表數(shù)據(jù)綁定

• 點(diǎn)擊【列表】，添加數(shù)據(jù)表【導(dǎo)航內(nèi)容數(shù)據(jù)】，過濾條件為【type等于選擇器/選擇視圖/name】，如圖所示：

• 進(jìn)入【列表】，綁定【視圖數(shù)據(jù)】，圖片【項(xiàng)數(shù)據(jù)/導(dǎo)航內(nèi)容數(shù)據(jù)/image】，name【項(xiàng)數(shù)據(jù)/導(dǎo)航內(nèi)容數(shù)據(jù)/name】，description【項(xiàng)數(shù)據(jù)/導(dǎo)航內(nèi)容數(shù)據(jù)/description】，如圖所示：

1.5 打開外部鏈接

• 在【視圖】中添加點(diǎn)擊行為【打開外部鏈接】，鏈接內(nèi)容為【項(xiàng)數(shù)據(jù)/導(dǎo)航內(nèi)容數(shù)據(jù)/URL】，如圖所示：

怎么樣，是不是非常簡單，體驗(yàn)下來才知道低代碼開發(fā)原來可以這么 “爽” ，像傳統(tǒng)開發(fā)某個(gè)功能或者需要對網(wǎng)頁進(jìn)行設(shè)計(jì)排版，整個(gè)過程非常折騰，而通過Zion可以快速完成從需求到應(yīng)用，可以節(jié)約不少開發(fā)成本。
同時(shí)Zion也集成了數(shù)據(jù)模型、遠(yuǎn)程數(shù)據(jù)、行為功能，降低大型系統(tǒng)研發(fā)的復(fù)雜性，降低搭建的難度，所以這種低代碼平臺(tái)會(huì)成為某些復(fù)用場景下一種新選擇。最關(guān)鍵的是服務(wù)器，域名這些都給你準(zhǔn)備好了，小白真的是很適合用這個(gè)平臺(tái)去落實(shí)自己的想法。