作者簡介

作者名：1_bit
簡介：CSDN博客專家，2020年博客之星TOP5，藍橋簽約作者。15-16年曾在網上直播，帶領一批程序小白走上程序員之路。歡迎各位小白加我咨詢我相關信息，迷茫的你會找到答案。

必看提示

項目存放在：https://editor.ivx.cn/?showall=1#10699167 有需要的直接可以看著仿

1小時學會不打代碼制作一個網頁精美簡歷（1）
1小時，不會代碼的我如何完成 網易云音樂 大作業網頁制作？（IVX 第2篇）
1小時賺300塊，不打代碼幫人做個吃雞網頁 [IVX實戰第3篇]

注：圖片資源可以私聊 bit 哥拿~歡迎私聊熱心博主 bit 哥喲

一、先看看目標作品才知道要做什么

1.1 為了方便你們賺錢，我介紹一下 IVX 自帶的解決方案，分分鐘做好一個項目

👸小媛：bit 哥，bit 哥，又有人找我接單了，自從上次用了 IVX 接單后感覺我發現了財富密碼。😂

🐶1_bit：啥？你不會又想叫我幫你吧。

👸小媛：邊幫邊學，這樣我也能進步。😋

🐶1_bit：你又給了一個我無法拒絕的理由。

👸小媛：多謝 bit哥。😋

🐶1_bit：這次做什么？

👸小媛：做一個資源共享平臺，也就是記錄一下軟件、視頻、圖書文檔之類的Web系統，然后還要我幫他運營，我想我直接在 ivx 上直接發布就很舒服了，哈哈哈，給個 1000塊錢。

🐶1_bit：行吧，是整個站點，完整的？

👸小媛：是的。

🐶1_bit：不過你用了那么久 IVX 你知道 IVX 到底是啥嗎？

👸小媛：是個編輯器？

🐶1_bit：emmm，看來你就記住這個了；IVX 是一個編程語言。

👸小媛：啥？沒代碼也是語言嗎？😂

🐶1_bit：當然是啊，你不懂手語嗎？手語也是語言呀。

👸小媛：突然煥然大悟。😂

🐶1_bit：IVX 的特點就是去除了傳統代碼，使用更為簡單的繪制方式繪制應用，并且如果你想要將你繪制的應用轉化為代碼，那么 IVX 自身帶有編譯器，或者說有一種解釋程序，將你繪制的程序轉化為代碼，這樣你就兩者皆可得了，是不是很爽？

👸小媛：哈哈哈，你的意思就是我簡簡單單就可以得到一個應用和這個應用的代碼了？

🐶1_bit：對呀，所以你說 IVX 那個編輯器是啥？

👸小媛：哈哈哈，是個編程語言。😂

🐶1_bit：我剛剛說了那么多你還不清楚嗎？是個 IDE！

👸小媛：IDE是啥？

🐶1_bit：你竟然 IDE 都不懂？ IDE 全稱 Integrated Development Environment ，意思是提供用戶開發所必備的程序支撐，現在 IVX 的線上環境都提供了，剛剛我已經說了有編譯器、開發界面、又可以預覽、并且可以發布等功能，那這個在線的編輯器應該具體叫做什么？

👸小媛：叫做 IDE…😂

🐶1_bit：你終于明白了。所以你這次做的站點，你不是說你要發布在 IVX 私有云上方便維護嗎？所以 IVX 連你正式部署的功能都有，當然可以叫做 IDE 了，而且比常規的 IDE 更加強大，懂了吧。

👸小媛：懂了懂了，那趕緊開始吧。

🐶1_bit：為什么方便你賺錢，我跟你說幾句秘籍，可能你下次接單可以用得上。

👸小媛：啥秘籍？

🐶1_bit：IVX 自帶解決方案，例如 “企業大中臺/WebApp解決方案”、“企業辦公OA系統解決方案”、“企業營銷/小程序/H5解決方案”、“智能物聯網/BI解決方案”、“智能城市/園區解決方案”，你可以直接去 IVX 找，這樣就不用麻煩我了，你直接可以用，分分鐘賺個幾千不香嗎？

👸小媛：哈哈哈，你就是不想我找你。

🐶1_bit：哈哈哈，你還可以說你用 華為、平臺、保利等企業的技術給他們做，他們會覺得很實惠的。

👸小媛：為啥？

🐶1_bit：因為這些平臺也在用 IVX，懂了吧？

👸小媛：明白了，我這就去接單，哈哈哈。財富密碼財富密碼。😎

1.2 帶著激動的心情正式開始了

🐶1_bit：好了好了，正式開始吧。那現在給你看看圖，我們先做一個首頁。

👸小媛：嗯嗯，是要有搜索功能，也需要有一個分享資源的頁面。

🐶1_bit：直接點擊分享資源就可以分享了；接著我們看看分享資源頁面吧。

👸小媛：嗯，對的，一共需要一個資源標題、展示封面圖、這個資源的網址地址和是什么類型的。

🐶1_bit：最后給你看一下搜索界面。

👸小媛：搜索輸入內容就可以了嗎？哇，還有瀏覽次數記錄，謝謝 big哥，哈哈哈。

二、頁面制作

2.1 首頁標題欄制作不打代碼真輕松

🐶1_bit：首先我們做頁面吧，第一個是首頁，我們打開 IVX 在線編輯器 https://editor.ivx.cn/，創建一個項目叫做資源管理系統，選擇相對定位。

👸小媛：已建好。

🐶1_bit：然后我們選擇屏幕為中屏，在對象樹中點擊前臺前臺在左側的組件欄處點擊頁面即可新建一個頁面，創建好的頁面1，重命名為首頁。

👸小媛：了解。

🐶1_bit：我們先分析一下我們首先需要做的標題欄，如下圖這是一個行排列，這個排列中藍色框選的是圖片，綠色框選的是文本框，創建這一個標題欄極為容易。

👸小媛：就是首先創建一個行對吧？然后首先在行內添加一個圖片，然后再添加一個文本；這樣logo部分就做完了？😂

🐶1_bit：是的。我們在對象樹中選擇首頁，然后在左側的組件欄中找到行點擊進行添加，重命名這個行為標題。

👸小媛：然后在標題中創建一個圖片對吧？

🐶1_bit：然后發現這個行有背景色不太美觀，并且圖片也超出這個行的大小了，這個時候我們點擊行，將會在左側出現該行的組件框，在組件框中點擊高度設置為包裹，那么這個行就會的高度就會隨著內容的最大高度進行變化，也就是說這個行的高度就會等于這個內容最大的高度。

👸小媛：但是這個圖片也要設置最大高度呀？

🐶1_bit：那就把圖片寬度在這個時候設置為 6% 就好了，這個時候高度也會隨著改變的。

👸小媛：然后再設置一下背景色以及左外邊距，設置外邊距就會就會與左邊的元素產生出一個設置的距離；最后設置一下背景色為白色。

🐶1_bit：應該還要設置這個行的垂直水平為居中吧，這樣才可以全部居中顯示，否則就不好看了。

👸小媛：設置了，問題不大。這個時候應該往里面添加一個文本了。點擊標題，在左側組件欄中點擊文本進行添加。



🐶1_bit：然后點擊這個分割線。

🐶1_bit：然后在對象樹中點擊分割線，更改屬性為垂直，并且可以設置長度和粗細。

👸小媛：然后同理開始添加文本吧？😫

🐶1_bit：是的，我們直接添加文本，更改內容，設置左外邊距為10就可以了。

👸小媛：接下來就可以開始賦值幾個文本就可以了吧？

🐶1_bit：是的。

👸小媛：復制完，修改文本就解決了。😂

🐶1_bit：最后我們再這里新建一個行，設置寬度為 50%，然后設置水平對齊為靠右，垂直為居中就可以了，我們這個時候在這個行中創建一個按鈕就可以直接靠右顯示，我們更改按鈕的文本內容以及背景就完成了標題欄的制作。

👸小媛：解決，點擊這個行，再點擊一個按鈕就可以進行添加了。

🐶1_bit：改一下行的背景以及按鈕的文本就可以了。

👸小媛：還需要更改一下圓角設置，改小一點就解決了。按鈕的屬性欄下面，就可以改小值了。 😎

🐶1_bit：這個時候我們改一下那個頁面背景色吧，由于標題欄顏色是白色，背景是愛色不容易圖書標題欄的層次，我們現在改一下背景，會很好的突出感覺。

👸小媛：我更改了背景色顏色為 #FAF9F8，看起來舒服多了。

2.2 完成首頁搜索框制作就完成一半功能了

🐶1_bit：那我們現在繼續往下新建頁面內容。

👸小媛：好的。

🐶1_bit：此時我們新建一個行命名為搜索框，在搜索框下新建一個行命名為內容，內容行設置寬度為 80%，搜索框設置水平對齊為居中，這樣內容行就會居中顯示。

👸小媛：接下來呢？

🐶1_bit：接下來我們在內容行中新建兩個行，一個行用作存放 ivx 的logo，還有一個搜索框。

👸小媛：首先創建一個行，重命名為 logo，設置水平為對齊為居中，設置背景色為透明，在里面添加一個圖片，上傳 ivx 的 logo 圖片即可。

🐶1_bit：接下來呢？

👸小媛：接下來一樣，創建一個行，添加一個輸入框和一個按鈕，設置一下圓角以及他們的寬度、背景色為透明。 😎

🐶1_bit：那這樣首頁就做好了。

2.3 完成主要搜索頁

👸小媛：接下來是制作搜索頁了吧？

🐶1_bit：是的，搜索頁制作很簡單，我們先看看搜索頁。

👸小媛：這步就是一樣嗎？直接賦值搜索框丟上去就可以了？ 😂

🐶1_bit：簡單吧？

👸小媛：其實就是新建一個頁叫做結果頁，然后改一下背景色為 #FAF9F8 ，然后把之前的標題欄丟過去，然后再把輸入框和搜一下按鈕賦值進去修改一下大小就可以了。 😎

🐶1_bit：可以可以，挺好的。那下面怎么做？

👸小媛：都是用到重復的知識，也超級簡單，其實就是繼續創建一個行重命名為結果塊，行里面包含另外一個行重命名為結果塊背景，但是這個結果塊背景的寬度大小為 80%，外面那個行設置的水平對齊方式為居中，這樣就可以居中了，修改內部這個行的背景色為白色，這樣就有對比了。

🐶1_bit：里面的怎么做？

👸小媛：其實這個應該就是如下圖分析，這是一個列，因為是豎直存放的，這個列會占比一個百分數為整體寬度，而后這個列的第一個元素為一個圖片，設置這個圖片的寬度為 100%，這樣就不會超出行了；隨后下一個元素就是一個文本，再之后添加一個行，這個行有 3 個文本，第一個文本為數字，例如 200，第二個文本為瀏覽，第三個文本為日期；最后為一個行，這個航里面有一個查看按鈕，查看按鈕存放于整一行的右側，也就是說設置這個行的水平對齊為右即可。

🐶1_bit：分析的不錯，具體怎么做呢？

👸小媛：首先我們需要把內容塊，或者內容塊背景的高度更改為包裹，隨后創建一個行，這個行命名為內容塊，寬度為 18%，隨后這個內容塊行里面創建一個列存放主要元素，命名為詳細內容，這個列的高度直接設置為 100%。

🐶1_bit：繼續添加元素吧。

直接添加一個行，這個行命名為時間，然后在這個行中添加一個添加文本即可。

🐶1_bit：就還差一點了，加油。 😎

👸小媛：最后添加一個查看行，這個行添加一個查看按鈕就可以了，很簡單；可是圓弧的陰影我不會做。

🐶1_bit：小問題，首先我們需要設置這個邊框的圓角和邊框線屬性。

🐶1_bit：然后在陰影設置里面給予數值就可以了。

👸小媛：原來如此，解決了。

三、建立數據庫及后臺服務

3.1 嘗試一下模擬數據建立

🐶1_bit：現在我們開始建立數據庫吧？

👸小媛：啥？

🐶1_bit：既然是完整的站點，肯定有數據庫的存在了呢。

👸小媛：哈哈哈，差點忘記了。

🐶1_bit：首先我們先給對象建立一個對象數組。點擊前臺，在左側組件欄下部，找到對象數字，點擊后創建，并且命名這個對象數值為資源內容。

👸小媛：接下來怎么做呢？

🐶1_bit：我們點擊加號，就跟 Excel 那樣創建這個列的元素有哪些，并且類型是什么；其中第一個數據ID，類型為數值；然后依次創建類型相符的數據，其中瀏覽也為數值，其它均為字符串。

🐶1_bit：以上信息中，目標地址為點擊后跳轉到的資源地址，方面圖為圖片的地址。

👸小媛：明白了。

🐶1_bit：然后我們可以點擊加號，為這些字段（數據ID這些統稱為字段）添加具體的值。

👸小媛：解決。

3.2 按捺一把使用模擬數據輸出頁面

🐶1_bit：接下來，我們在結果頁中，添加一個 for 循環，在結果內容行中進行添加，并把內容塊放到這個這個 for 循環創建下。

👸小媛：為什么要添加這個？

🐶1_bit：因為我們的數據很多都是類似的，不需要你自己一個個去顯示，太累了；使用循環可以重復創建相同屬性的內容，只要把這些標題名進行修改就好了。

👸小媛：知道了，悟了。

🐶1_bit：這個時候我們點擊 for 循環，在屬性面板中點擊數據來源的箭頭，選擇資源內容這個對象數組的值。

🐶1_bit：接下來還需要為這些具體內容值綁定數據。接下來我們點擊圖片，選擇素材的地址為循環所產生的內容，在屬性面板中選擇當前數據1，這個當前數據1指的是循環后得到的當前數據，然后值我們選擇為封面圖。

👸小媛：其他數據也一樣是吧？

🐶1_bit：是的。

👸小媛：那我懂了。我選擇文本標題，然后也選擇當前數據，選擇標題，其它的都是這樣的操作。 😎

🐶1_bit：那你選完了嗎？

👸小媛：選完了。

🐶1_bit：那你預覽試一下。

👸小媛：哈哈哈，把我在資源內容里面填寫的值都輸出了。

🐶1_bit：我覺得還有一個東西你沒寫。

👸小媛：是啥？

🐶1_bit：就是點擊查看進行跳轉。

👸小媛：對喔，真的忘記了。

🐶1_bit：我們點擊按鈕，點擊事件，在出現的面板中選擇觸發為點擊，選擇對象為前臺。

🐶1_bit：然后我們選擇需要執行的動作為打開外鏈，然后目標地址就可以設置當前數據1的目標地址。

👸小媛：哈哈哈，出來了，并且點擊查看也可以跳轉了，完美。

3.3 迫不及待前先創建一個數據庫

🐶1_bit：模擬數據用完了接下來我們就需要使用真實數據了。

👸小媛：是的，迫不及待了。

🐶1_bit：我們先創建一個數據庫。點擊后臺創建一個私有數據庫用來作為資源數據的存放處，并且重命名為資源數據庫。

🐶1_bit：然后點擊字段創建一個標題。

🐶1_bit：接下來再依次創建跟那個資源內容中對應的列，如果有默認存在列則不需要重復創建。

👸小媛：創建好了。

🐶1_bit：隨后我們繼續添加數據，將資源內容數組的值填充到這里。

👸小媛：解決。

3.4 又一個關鍵點創建服務

🐶1_bit：接下來我們數據有了，我們為其添加服務，用于讀取數據庫數據。

👸小媛：服務是啥？

🐶1_bit：服務就是具體的后臺邏輯，我們要什么數據，提取什么數據都需要服務呢。

👸小媛：唔，原來如此。

🐶1_bit：我們點擊后臺，右側找到服務進行創建，并且更改服務名為讀取數據。

🐶1_bit：之后我們在服務列表中點擊對象選擇為資源數據庫，選擇動作為輸出。

👸小媛：那接下來怎么做呢？

🐶1_bit：這個就很簡單了，我們在輸出列中選擇需要輸出的內容，然后在完成回調中設置讀取完數據后具體要做什么，只需要選擇對象為當前服務，然后自己自定義設置值就ok了；自定義返回結果直接設置返回內容為輸出結果，并且結果為對象數組的值就可以了。

👸小媛：那數據怎么在前臺顯示呢？

🐶1_bit：我們只需要在結果頁顯示的時候把數據傳過來就好了。

👸小媛：具體怎么傳遞你還沒說呢。

🐶1_bit：簡單，選擇完顯示進行觸發后，點擊對象選擇為我們的讀取數據服務，之后在讀取服務完成后選擇列表對象，進行賦值操作，由于之前循環的內容為這個列表的值，此時就會自動顯示你數據庫只能夠的內容。



👸小媛：哇塞，原來之前用那個對象數組的原因是這樣呀，怪不得名稱也需要一致。 😎

🐶1_bit：這個時候你可以把那個資源列表的數據刪除再預覽一下頁面，然后就ok了。

👸小媛：哈哈哈，數據出來了，完美。

3.5 創建資源提交頁面及功能實現

🐶1_bit：接下來我們需要做的是提交新的資源數據了，這樣才一直有新的數據錄入。

👸小媛：激動。

🐶1_bit：先做個頁面吧，標題會做吧？

👸小媛：會呢，復制過來就可以了。

🐶1_bit：剩下的內容呢？

👸小媛：簡簡單單，跟之前的內容一樣，復制過來添加幾個行，簡簡單單輕輕松松。

🐶1_bit：行的，現在我們為這個頁面創建一個提交服務吧。

👸小媛：沖沖沖。

🐶1_bit：首先我們創建個服務叫做提交信息。

🐶1_bit：之后在接收參數中添加參數，設置參數名稱以及參數類型并且改為必填，操作對象已經選擇資源數據庫，動作選為提交。

👸小媛：收到，接下來呢。

🐶1_bit：由于服務是接收參數，我們將參數傳遞到數據庫中，選擇在動作中，設置表弟等于傳遞過來的標題、類型等于傳遞過來的類型、目標地址等于傳遞過來的地址這樣依次類推。

🐶1_bit：然后點擊動作，添加一個回調；我們可以理解為回調就是完成這個動作后要做什么事情，在這里我們為添加好信息后創建一個回調用于返回是否添加成功。

👸小媛：OK。

🐶1_bit：然后我們在回調中對象選擇當前服務，然后自定義返回結果為提交結果是否成功，將會返回是和否。

👸小媛：接下來可以用這個服務了吧？

🐶1_bit：是的。我們回到分享數據的界面，為這個按鈕添加一個事件。

👸小媛：接下來是不是就是選擇觸發事件為點擊，選擇對象為提交數據服務，然后依次選擇提交的內容就ok了吧？

🐶1_bit：是的，然后我們再設置這個回調里面設置回到前臺首頁就可以了，此時就可以去搜索了。

👸小媛：完美，我嘗試了沒問題，那我怎么實現搜索呢？

3.6 臨門一腳！完成最后搜索功能

🐶1_bit：那當然也是創建服務呀，ivx 的服務可是很強大的，不打代碼也可以完成后臺操作。

👸小媛：感受到了，那我具體怎么做呢？ 😎

🐶1_bit：這一步你會覺得意想不到的簡單，我們點擊讀取數據，在讀取數據數據服務中添加一個參數，命名為搜索關鍵字，然后該類型為字符串，再到數據動作中將塞選條件更換為 標題 包含 搜索關鍵字即可。

👸小媛：就這？

🐶1_bit：當然還需要添加一些別的操作了。我們點擊前臺，新建一個變量，叫做搜索關鍵字。

🐶1_bit：然后在前臺中，設置這個搜索框的內容賦值到這個變量中。

🐶1_bit：當然點擊了搜索還需要進行跳轉，此時添加一個跳轉動作到結果頁就可以了。

🐶1_bit：然后在結果頁中，找到事件；在我們調用服務動作時自動出現了剛剛我們為該服務添加的參數，將這個參數設置為剛剛那個搜索關鍵字即可。

👸小媛：我搜索測試出現了剛剛我添加的東西了呢。

🐶1_bit：剩下一些你自己想要的功能自己添加了喲，我項目放這里了你可以直接看我的編輯界面知道我怎么做的 。

👸小媛：已經可以了，美滋滋。 😎 😎 😎