一、創建首頁
進入到iVX線上編輯器后,選擇相對定位。
點擊創建后進入到 IDE 之中:
我們在第一步中首先創建一個首頁。點擊左側組件欄中的頁面組件,創建一個頁面:
接著重命名該頁面為Home,在頁面中創建一個行,命名為main:
設置main的高度為包裹,并且背景色透明:
在main之下創建一個行,設置高度為包裹,重命名為標題:
接著設置一下他們之間的屬性信息:
接著創建兩個行,一個行命名為內容,在內容之下創建一個行為信息:
之后在在行中添加信息的內容,對象樹與展示效果如下:
此時在頁面中創建一個對象數組,重命名為信息:
接著在圖片中增加列:
接著在對象數組中添加數據:
接著在內容中添加一個for循環組件:
接下來把信息放到for循環之下:
接著為循環創建綁定一個數據來源的值為信息對象數組值:
接著點擊一個組件,點擊數據綁定:
接著為不同的組件選擇合適的值:
其他內容同理可得,接下來預覽界面發現會自動使用for循環創建多個內容:
二、數據庫創建
接著我們點擊導出可以導出數據成xlsx,這一個步驟是為了將該數據存儲到數據庫之中。
我們點擊后臺,點擊DB進行數據庫創建:
接著我們點擊導入,選擇剛剛導出的內容作為數據庫內容:
導入后我們在數據庫中可以看到剛剛的數據:
接下來點擊后臺,再創建一個服務用于數據獲取,重命名為數據獲取:
服務是數據庫與前臺之間的邏輯層,我們點擊服務對服務進行編輯。在需要做的動作之中旋轉信息對象做輸出,輸出指從數據庫往外輸出內容,當數據庫輸出完畢后,當前服務設置自定義的返回結果,返回結果的內容就是輸出結果的對象數組的值:
接著我們給該頁面添加顯示事件,顯示后那么啟動服務,完成后將對象數組的值賦值為當前服務返回的值:
此時我們對象數組中的值清空后,頁面依舊會顯示內容,這是因為已經使用服務將數據庫的值賦予給頁面中的對象數組:
三、搜索功能制作
搜索功能主要是通過輸入關鍵字,再到數據庫中判斷是否存在相似的內容,從而輸出,那么這個時候咱們只需要給搜索按鈕點擊后有一個事件,這個事件去響應一個搜索服務即可完成。
首先需要做一個搜索服務,搜索服務步驟如下:
接著給點擊按鈕增加時間即可,傳入的關鍵字則是輸入框的值:
服務完畢后直接給予信息對象數組的值即可。
三、發布信息頁面制作
此時再添加一個頁面如下效果:
為了方便,該頁面內容不做過多修飾,點擊不同的五角星可以上傳不同的圖片。
接著咱們為點擊圖片上傳圖片編寫事件(需要添加文件接口):
其他兩張圖片同理不再贅述。
此時給home頁的發按鈕添加點擊事件,點擊后跳轉到發布頁:
此時在數據庫中添加一個值為內容:
添加一個發布服務:
接著給發布頁按鈕發布添加時間,啟動該服務傳遞值內容:
接著成功發布內容,數據庫中也會有提示:
四、數據分頁
首頁的數據過多則需要分頁,分頁需要服務完成。
我們在數據獲取服務中看見有輸出行數填寫框:
這里的行數起始則表示數據庫中第幾行到第幾行內容。若輸入1-3則會出現第1、2、3條數據:
此時這兩條數據寫死并不好,咱們可以使用參數動態響應內容:
此時我們默認輸出1-3條數據,那么在首頁的顯示事件之中,咱們可以將始末參數寫死用1和3代替:
此時寫死也并不是太好,咱們在home頁面中創建兩個變量,一個叫始,一個叫末:
并且始的值為1,末的值為3。最后我們將頁面顯示事件的值換成1和3:
再創建兩個按鈕,一個為上一頁另一個為下一頁:
我們點擊下一頁時,由于每頁初始數據條數為3條,那么第一次的數據是起始為1,結束為3,下一頁則需要其實位置和結束位置都往下移動3個位置,也就是1+3和3+3。
第一頁是1到3條,第二頁就是4到7條,依次類推。
所以在此處點擊下一頁按鈕后,調用服務數據獲取時,應該給始、末兩個變量都加上3,下一頁按鈕事件如下:
那么上一頁則相反是減3:
此時還需要判斷上一頁的值若等于1則不執行,因為第一頁沒有上一頁,條件只需要是不等于1或大于1即可:
我們點擊下一頁,發現若沒有數據后還可以可以點擊:
五、限制下一頁
這個時候需要限制下一頁按鈕的點擊。
此時我們點擊數據獲取服務,在有數據的時候成功返回值,若沒有數據就返回0:
接著再到下一頁中編寫事件,完成數據獲取后,返回的結果值不等于0則賦值信息對象數組的值為返回的數據,若返回結果為0說明空數據,空數據則把已經進行加法遞增3的始、末變量的值再減少3:
此時我們運行程序發現點下一頁空數據時無響應:
六、內容詳情頁
詳情頁直接復制 home 頁內容即可,添加一個評論區,并且給信息對象數組增加一個內容列即可:
接著還需要在home頁的信息對象數組中添加一個列叫做數據ID:
接下來咱們需要在詳情頁中添加一個ID變量,隨后在信息行中添加一個時間,當點擊該行時給予ID變量賦值為當前數據的數據ID,并且跳轉頁面到詳情頁:
接著添加一個服務通過數據ID查找到合適的內容:
接著在詳情頁中,添加一個顯示時響應的時間,該事件響應后就啟動詳情服務,并且把數據ID當作參數傳遞到服務之中,最后將詳情頁中的信息對象數組賦值為返回的值:
接著將循環創建的數組的數據來源綁定為當前頁面中的信息對象數組:
此時運行后我們可以成功進入到頁面獲取到信息:
七、評論
接下來創建一個數據庫,在數據中創建兩個列,一個是評論內容,另外一個是評論文章的ID,這個ID對應評論的對應文章:
接著創建一個服務,接收兩個參數,一個是評論內容另外一個是ID,最后將兩個值存儲到當前的服務之中:
接著咱們點擊評論按鈕啟動該服務,傳遞值:
八、獲取評論
獲取評論也很簡單,只需要傳遞當前的文章ID既可以在數據庫中查找到匹配的內容,返回內容后用一個對象數組存儲即可。
首先在詳情頁創建一個對象數組為評論:
接著在評論行中創建一個for循環循環一個text文本,for循環的數據來源則是評論對象數組,text文本的內容則是評論內容:
接著創建一個服務,通過ID查找評論信息:
接著在頁面事件中添加一個動作,這個動作是顯示后直接調用獲取評論服務,傳入ID數據,完成服務后給評論對象數組賦值,該值則為服務返回的數據結果:
最后預覽即可看到評論結果: