九、二手信息站點后臺完成 (IVX 快速開發教程)

九、二手信息站點后臺完成

了解完后臺實現后,我們開始為該二手商品站點完成完成后臺制作。

文章目錄

  • 九、二手信息站點后臺完成
      • 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變量為當時設置的隱藏文本的內容,隨后再跳轉到詳情頁:

此時我們創建一個商品詳情變量用于數據顯示:

再詳情頁的顯示事件中直接調用對應服務進行內容賦值到詳情對象變量即可:

在詳情頁創建一個循環組件,將要顯示的內容進行循環,設置循環組件的數據來源為商品詳情變量:

隨后再設置對應的內容即可,在此使用富文本變量舉例:

最后只需要為跳轉按鈕都添加頁面跳轉即可完成。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/286767.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/286767.shtml
英文地址,請注明出處:http://en.pswp.cn/news/286767.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Android之自定義帶圓角的水紋波效果

1 需求 自定義帶圓角的水溫波效果 2 代碼實現 bg_navigation_ripple.xml <?xml version"1.0" encoding"utf-8"?> <ripple xmlns:android"http://schemas.android.com/apk/res/android"android:color"color/c3"><i…

爬蟲是什么?起什么作用?

【爬蟲】 如果把互聯網比作一張大的蜘蛛網&#xff0c;數據便是放于蜘蛛網的各個節點&#xff0c;而爬蟲就是一只小蜘蛛&#xff0c;沿著網絡抓取自己得獵物&#xff08;數據&#xff09;。這種解釋可能更容易理解&#xff0c;官網的&#xff0c;就是下面這個。 爬蟲是一種自動…

根據實例類型反射操作數據庫(簡單通用表操作類)

這個類適用簡單的表 1.有且只有id為主鍵&#xff0c; 2.并且實例類主鍵&#xff0c;也就是id應為字段&#xff0c;其他為屬性 3.實例類名跟表名一樣&#xff0c;字段屬性跟列名一樣 public class ProType{public int id;public string type{get;set;}public int array{get;set;…

React-引領未來的用戶界面開發框架-讀書筆記(五)

第11章 性能優化 Reactde Dom diff算法使我們能夠在任意時間點高效地重新繪制整個用戶界面&#xff0c;并保證最小程度的DOM改變&#xff0c;然而&#xff0c;也存在需要對組件進行細致優化的情況&#xff0c;這時就需要渲染一個新的DOM來讓應用運行得更加高效。 shouldCompone…

oneproxy檢測主從復制同步延遲

Q:為什么要實現讀寫分離延遲檢測&#xff1f; A:就好比你在ATM機存錢&#xff0c;你老婆收到短信后樂呵呵的拿網銀APP查看&#xff0c;結果錢沒過來。其實錢已經到賬了&#xff0c;只是查詢的ATM機節點錢還沒過來。所以我們dba要監控數據&#xff0c;一旦發現錢沒有復制到另一A…

.NET 分表分庫動態化處理

介紹本期主角:ShardingCore 一款ef-core下高性能、輕量級針對分表分庫讀寫分離的解決方案&#xff0c;具有零依賴、零學習成本、零業務代碼入侵我不是efcore怎么辦這邊肯定有小伙伴要問有沒有不是efcore的,我這邊很確信的和你講有并且適應所有的ADO.NET包括sqlhelperShardingCo…

addEventListener 的事件函數的傳遞【轉載】

addEventListener 參數如下&#xff1a; addEventListener(type, listener[, useCapture]); type&#xff0c;事件名稱listener&#xff0c;事件處理器useCapture&#xff0c;是否捕獲一直把 listener 記成是響應函數&#xff0c;function 類型。相信很多人也是這么理解的。多數…

Android之elevation實現陰影效果

1 需求 需要控件實現陰影效果 2 實現 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"andr…

十、小程序實戰 (IVX 快速開發教程)

十、小程序實戰 使用小程序完成一個二手信息站點與 WebApp 實現流程類型&#xff0c;只是部分內容使用了微信小程序特有的組件&#xff0c;例如微信登錄與 WebApp 略有差別&#xff0c;其它邏輯實現較為類似。我們先制作頁面&#xff0c;之后再實現功能。 由于之前已經完成了…

【VB測繪程序設計】第一章 VB測繪程序設計概述

目 錄 第一節 測繪程序設計的意義 第二節 程序設計語言的發展 第三節 測繪程序設計語言的選擇

類屬性和實例屬性沖突

類屬性和實例屬性名字沖突怎么辦 修改類屬性會導致所有實例訪問到的類屬性全部都受影響&#xff0c;但是&#xff0c;如果在實例變量上修改類屬性會發生什么問題呢&#xff1f;class Person(object):address Earthdef __init__(self, name):self.name namep1 Person(Bob) p2…

源代碼下載 第六章 注解式控制器詳解

2019獨角獸企業重金招聘Python工程師標準>>> 源代碼請到附件中下載。 其他下載&#xff1a; 跟著開濤學SpringMVC 第一章源代碼下載 第二章 Spring MVC入門 源代碼下載 Controller接口控制器詳解 源代碼下載 源碼下載——第四章 Controller接口控制器詳解——跟著開…

Android6.0到底有什么不一樣

在android 6.0&#xff08;API 23&#xff09;中&#xff0c;Google已經移除了移除了Apache HttpClient相關的類 http://developer.android.com/intl/zh-cn/about/versions/marshmallow/android-6.0-changes.html 本文轉自屠夫章哥 51CTO博客&#xff0c;原文鏈接&#xff1a;…

WPF|快速添加新手引導功能(支持MVVM)

閱讀導航前言案例一案例二案例三&#xff08;本文介紹的方式&#xff09;如何使用&#xff1f;控件如何開發的&#xff1f;總結1. 前言案例一站長分享過 眾尋 大佬的一篇 WPF 簡易新手引導 一文&#xff0c;新手引導的效果挺不錯的&#xff0c;如下圖&#xff1a;該文給出的代碼…

三、界面介紹(IVX快速手冊)

三、集成開發環境界面介紹 通過本節你將了解 iVX 在線集成開發環境 界面&#xff0c;快速建立對 在線集成開發環境 的認識。 文章目錄三、集成開發環境界面介紹3.1 界面區域3.2 舞臺3.3 組件工具欄3.4 對象樹/素材面板3.5 屬性面板3.6 菜單面板3.7 邏輯工具面板3.8 輔助工具3.…

Android studio之提示Failed to resolve: com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.46

1、錯誤提示如下 Failed to resolve: com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.46 Show in Project Structure dialog Affected Modules: app2、解決辦法 在project的build.gradle里面加入 maven { url https://jitpack.io }

【VB測繪程序設計】第二章 VB測繪程序基礎

第一節 數據類型 VB中提供了以下11中基本的數據類型: 一、數值型 二、字符串 三、日期型 1.界面設計 2. 代碼 <

React-引領未來的用戶界面開發框架-讀書筆記(六)

第12章 服務端渲染 想讓搜索引擎抓取到你的站點&#xff0c;服務端渲染這一步不可或缺&#xff0c;服務端渲染還可以提升站點的性能&#xff0c;因為在加載JavaScript腳本的同時&#xff0c;瀏覽器就可以進行頁面渲染。 React的虛擬DOM是其可被用于服務端渲染的關鍵。首先每個R…

TrimPath - Js模板引擎

當頁面中引用template.js文件之后&#xff0c;腳本將創建一個TrimPath對象供你使用。 parseDOMTemplate(elementId,optionalDocument)  //獲得模板字符串代碼 得到頁面中Id為elementId的DOM組件的InnerHTML&#xff0c;將其解析成一個模板&#xff0c;這個返回一個templateOb…