九、二手信息站點后臺完成
了解完后臺實現后,我們開始為該二手商品站點完成完成后臺制作。
文章目錄
- 九、二手信息站點后臺完成
- 9.1.1 完成二手信息站點注冊功能
- 9.1.2 完成二手信息站點登錄功能
- 9.1.3 完成商品發布功能
- 9.1.4 首頁信息獲取
- 9.1.5 詳情頁內容
9.1.1 完成二手信息站點注冊功能
首先完成賬戶的注冊需要在該項目后臺中添加一個私有用戶:
隨后我們點擊注冊頁面的 按鈕組件 為其添加事件;首先為 手機驗證碼按鈕 添加事件,事件邏輯為該 按鈕 受到點擊后進行響應,隨后添加一個 動作,該 動作 為選擇 私有用戶對象,用 私有用戶對象 發起一個 手機驗證碼動作:
隨后得到驗證碼后我們直接為 注冊按鈕 添加一個事件,條件為 點擊觸發:
為了判斷該動作是否成功完成,我們為這個動作設置一個 回調事件;添加 回調事件 后增加其條件,判斷注冊結果是否成功,若成功則使用系統界面對象發起一個彈窗,內容為注冊結果并且跳轉到登錄界面:
再此為了保證完整性,再添加一個條件判斷注冊結果是否為否,為否則彈出注冊失敗原因:
9.1.2 完成二手信息站點登錄功能
登錄界面的功能實現跟注冊頁面實現類似。為 登錄按鈕 添加一個事件為 點擊觸發,隨后依舊是使用 私有用戶 對象發起一個登錄操作:
隨后為登錄時間添加一個回調,為回調增加一個條件,若登錄結果為成功,那么就彈出彈窗作為提示并且跳轉到信息展示頁面:
最后也為其添加一個登錄失敗事件,并且做彈窗提示:
9.1.3 完成商品發布功能
在商品發布頁中,我們需要使用文件接口獲取本地圖片:
獲取到本地圖片完成成功后,我們需要創建一個封面圖地址的文本變量:
并且在獲取到文件后將這個變量設置為讀取到的 base64 圖片內容:
接著我們添加一個隱藏的圖片:
并且設置這個圖片為不可見,在正式賦值后給與圖片信息,這樣不會影響整體的頁面排版:
接著我們繼續為獲取圖片按鈕添加事件,此時將剛剛獲取到的圖片信息賦值給這個封面圖圖片,并且設置該負面圖屬性可見:
但是此時的圖片是不可見的,因為我們一般情況下,圖片并非使用 base64 顯示,此時應該轉化這個圖片為 base64 圖片:
最后我們為發布按鈕添加發布事件。這個事件需要創建一個服務將傳遞的值給與數據庫,那么這個操作就意味著我們需要再多做一個操作,也就是創建一個數據庫。首先我們在后臺創建一個商品數據庫:
在這個商品數據庫中添加幾個字段,由于截圖不全再次截圖 2 次進行說明:
隨后添加一個服務命名為發布信息:
在服務中創建需要的參數:
在服務中設置商品數據庫對象動作為提交,并且給與對應的數據:
最后自己設置一個返回結果為是否成功:
此時必要的工作已經做完,我們接著可以為發布按鈕添加發布事件了。在發布按鈕中添加點擊后觸發事件,該事件動作為使用發布信息發布啟動服務作為動作,傳入發布信息作為傳遞的值:
完成后給與一個成功提示與錯誤提示即可:
9.1.4 首頁信息獲取
此時我們已經可以從數據庫中獲取數據,首頁的內容應該豐富起來。我們此時在首頁中添加對象變量命名為商品數據,設置列名與數據庫列名一致:
接著我們對這個頁面添加一個事件,觸發調價哪位頁面顯示之前,此時我們應該調用一個服務獲取數據,再此新建一個服務命名為默認數據:
該服務不需要接收參數,直接輸出數據庫數據即可:
我們接著頁面添加事件,該事件直接調用該服務,調用完畢后給商品數據變量賦值為返回值即可:
此時我們回到頁面之中,刪除多余的商品信息內容,直留下一個。在唯一一個商品信息列外,添加一個 for 循環組件:
設置 for 循環組件的數據來源為商品信息變量:
接著我們將內容依次對應設置即可:
此時我們應該還設置一個隱藏的文本用來記錄當前的 id 值,因為在詳情頁面中我們需要通過當前這個商品信息 id 值,找到數據庫中匹配的數據。添加一個文本,設置值為當前數據的 ID,并且設置屬性為不可見:
9.1.5 詳情頁內容
詳情頁是通過當前點擊的 數據ID 到數據庫中進行檢索,我們此時應該創建一個服務命名為某商品數據:
設置接收參數 id 為數字,通過商品數據庫對象進行輸出操作,設置條件且為 數據ID 等于當前 id 值即可:
我們接下來需要了解一下進入商品詳情頁的邏輯。首先我們第一步為點擊商品數據,此時我們應該創建一個變量為查詢id,該變量值用來在商品信息頁面加載時提供具體的 id 用于服務的調用:
此時我們再為圖片設置一個點擊事件,點擊圖片時賦值查詢id變量為當時設置的隱藏文本的內容,隨后再跳轉到詳情頁:
此時我們創建一個商品詳情變量用于數據顯示:
再詳情頁的顯示事件中直接調用對應服務進行內容賦值到詳情對象變量即可:
在詳情頁創建一個循環組件,將要顯示的內容進行循環,設置循環組件的數據來源為商品詳情變量:
隨后再設置對應的內容即可,在此使用富文本變量舉例:
最后只需要為跳轉按鈕都添加頁面跳轉即可完成。