10分鐘做一個新聞問答web站點[iVX低代碼實戰]

一、創建首頁
進入到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數據,完成服務后給評論對象數組賦值,該值則為服務返回的數據結果:
在這里插入圖片描述
最后預覽即可看到評論結果:
在這里插入圖片描述

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

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

相關文章

iOS開發網絡篇—網絡編程基礎

一、為什么要學習網絡編程 1.簡單說明 在移動互聯網時代,移動應用的特征有: (1)幾乎所有應用都需要用到網絡,比如QQ、微博、網易新聞、優酷、百度地圖 (2)只有通過網絡跟外界進行數據交互、數據…

PDF.js開發筆記

PDF.js是一個由HTML5建立的PDF閱讀器。依托開源社區驅動和Mozilla實驗室的技術支持。目標是建立一個通用的,基于web的解析和渲染PDF文件的平臺。https://github.com/ChineseDron/pdf.js# 是從Mozilla原版中fork出來的一個版本,原版的鏈接在這里https://g…

深入理解Three.js(WebGL)貼圖(紋理映射)和UV映射

本文將詳細描述如何使用Three.js給3D對象添加貼圖(Texture Map,也譯作紋理映射,“貼圖”的翻譯要更直觀,而“紋理映射”更準確。)。為了能夠查看在線演示效果,你需要有一個兼容WebGL的現代瀏覽器&#xff0…

Android之glide加載圓形圖片地址異常監聽

1 問題 glide加載圖片地址的時候,可能這個地址沒有圖片,那么我們需要對這種異常情況進行處理,當然我們也需要把這個圖片進行圓形化 2 代碼解決 Glide.with(mContext).load(iconPath).error(new ColorDrawable()).listener(new RequestListen…

在蘭州吃牛肉面時親眼目睹的一幕,我感動了

今天中午去吃占國牛肉面,人比較多,很熱鬧。旁邊坐了一群身穿校服的小學生,身后坐著一位小學老師,當孩子們發現老師在后面的時候,都異口同聲地叫老師過去跟他們一起吃,老師嘿的一笑,沒同意&#…

如何跨 Namespace 同步 Secret 和 ConfigMap?

Secret 和 ConfigMap 資源對象是命名空間級別的。它們只能被同一命名空間中的 Pod 引用。所以有時候不得不手動為每個命名空間創建它們。但有很多場景,我們想讓它們是全局的,至少可以是跨命名空間共享的 Secret 和 ConfigMap,例如這些場景&am…

OS X 10.11 安裝Cocoapods

sudo gem install cocoapods報如下錯誤: ERROR: While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/xcodeproj 解決的辦法是:sudo gem install -n /usr/local/bin cocoapods gem影像改成:https://ruby.taobao.org/…

一文總結學習 Python 的 14 張思維導圖

本文主要涵蓋了 Python 編程的核心知識(暫不包括標準庫及第三方庫,后續會發布相應專題的文章)。 首先,按順序依次展示了以下內容的一系列思維導圖:基礎知識,數據類型(數字,字符串&am…

GEE學習筆記

掩膜 ? 在遙感圖像處理中,"掩膜"是指一種用于隱藏或保留圖像特定部分的技術。掩膜通常是一個二進制圖像,其中的像素值為0或1,分別表示遮蔽或保留。 ? 在去除云的情境中,掩膜通常用于隱藏圖像中被云覆蓋的部分&#…

十一、飛機大戰(IVX 快速開發教程)

十一、飛機大戰 制作微信小游戲大致流程與微信小程序、Web類似,不同的在于是組件的使用。 文章目錄十一、飛機大戰11.1.1 完成游戲角色制作11.1.2 完成物理世界添加11.1.3 完成子彈對象反重力運動11.1.4 使用對象組創建子彈11.1.5 子彈優化11.1.6 設置敵機11.1.7 優…

中國版LinkedIn呼之欲出

迄今為止,發展勢頭強勁的Facebook仍未上市,而美國職業社交網站LinkedIn 卻率先登錄紐約證券交易所,股價在第一天的交易中飆升,從45美元的發行價上漲了一倍,然后超過100美元,最終以94.25美元收盤。 LinkedIn…

Android之實現RecyclerView拖拽效果和固定部分元素不進行交換位置(包含源代碼下載地址)

1、效果爆照 啟動的效果 拖動過程中的效果 拖動后的效果 2、需求和問題 需求:RecyclerView實現拖拽效果,但是部分固定位置不能進行拖拽也不能在拖拽的過程中交換順序

各主流瀏覽器內核介紹

所謂的“瀏覽器內核”無非指的是一個瀏覽器最核心的部分——“Rendering Engine”,直譯這個詞匯叫做“渲染引擎”,不過我們也常稱其為“排版引擎”、“解釋引擎”。這個引擎的作用是幫助瀏覽器來渲染網頁的內容,將頁面內 容和排版代碼轉換為用…

測繪地理信息標準(國家、行業、地方)大全來了:測繪地理信息標準化服務平臺

測繪地理信息標準化服務平臺,這里有你需要的所有標準,趕快來圍觀吧!

WPF效果第一百八十七篇之再玩ListBox

大周末的接著上一篇又玩了ListBox,這不又來再次去玩耍ListBox;畢竟是我的最愛,沒辦法就喜歡玩耍他;閑話也不多扯了,直接看最終效果:2、ItemsPanel還是老樣子:<ItemsPanelTemplate x:Key"CommonItemsPanelTemplate"><WrapPanel Orientation"Horizontal&…

Nginx支持比Apache高并發的原因

1.先從各自使用的多路復用IO模型說起&#xff1a; select模型&#xff1a;&#xff08;apache使用&#xff0c;由于受模塊等限制&#xff0c;用的不多&#xff09; 單個進程能夠 監視的文件描述符的數量存在最大限制select()所維護的 存儲大量文件描述符的數據結構 &#xf…

利用pdf.js開發嵌入pdf顯示,以及利用jquery-ui左右分欄顯示

原來考慮用pdf.js的viewer.html頁面&#xff0c;但怎么用都不方便。因此直接用pdf.js在左側連續顯示pdf所有內容&#xff0c;右側顯示其它相關內容&#xff0c;并且左右寬度可以任意拖動&#xff0c;最終實現效果如圖&#xff1a; 代碼&#xff1a;<!DOCTYPE html><ht…

十三、制作 iVX音樂分享小程序

功能介紹 通過前幾節的學習&#xff0c;我們對完成一個應用已經有了一些自己的心得。在此再次再制作一個小的音樂小程序應用。該應用一共分為首頁、榜單頁、音樂分享頁和音樂搜索頁。 首頁&#xff1a; 榜單內容頁&#xff1a; 音樂分享頁&#xff1a; 音樂搜索頁&#xff1a…

01_反射_02_反射類的構造方法

【工程截圖】 【Person.java】 //將要被反射的類 package com.Higgin.reflect; import java.util.List;public class Person {private String name"NULL";private int age0;public Person(){System.out.println("構造方法&#xff1a;Person()");}public P…

西北師范大學地理與環境科學學院考研真題匯總(自然地理學)持續更新。。。

西北師范大學地理與環境學科學院研究生入學考試的所有專業(地圖學與地理信息系統、自然地理學、人文地理學、環境科學、環境工程)的專業課均為自然地理學,本文持續收集整理歷年自然地理學考研入學考試真題。 1998年 一、名詞 1. 焚風 2. 徑流模數 3. 趨同適應 4. 墨卡托…