七、文章管理页面及功能实现《iVX低代码/无代码个人博客制作》
注:iVX也有免費直播課《第八期直播課》
一、文章管理頁頁面制作
文章管理頁的基本結構與首頁類似,我們復制一個首頁,并且重命名首頁的名稱為文章管理頁:
我們接著刪除如下圖所框選部分內容:
接著重命名導航為內容:
刪除多余的內容留下一個文本并且將文本內容更改成位置列表:
接著需要更改內容行的屬性,使其行可以自動換行并且設置裁剪為 y 軸:
接著在內容行下創建一個行命名為文章:
設置文章的高度為包裹:
接著在文章中添加兩個行,一個叫做左一個叫做右,左用于添加對應的左側文章標題,右對應的添加刪除和編輯按鈕:
若想使這兩個行能夠在一行顯示,我們需要設置左右兩行的寬度總和為 100%,左行設置寬度為80%,右行設置寬度為 20%,并且由于行自帶高度還需要設置高度為包裹:
此時由于文章文本并沒有占據整行,在此需要設置這個文本的寬度為 100%,使其占滿整行內容:
接著設置左行的文本內容為文章標題,設置文本寬度為100%:
接著在右行設置兩個按鈕,一個用于文章刪除一個用于文章編輯:
統一設置他們的圓角取消、寬度100%,以及文本更改:
二、文章刪除功能實現
刪除文章一般并不是真正的在數據庫中對數據進行刪除,我們一般使用一個字段標記內容是否刪除,在此我們在文章中設置一個字段為“是否刪除”:
接著更改數據庫值,0為正常,1為刪除:
接著創建一個服務命名為刪除文章,根據傳遞過來的ID值更改是否刪除列的值:
接著在服務中接收一個參數命名為刪除ID,隨后在邏輯中選擇對應的數據庫,隨后選擇數據庫進行有條件的字段更新,設置對應的是否刪除為1即可,如果更新成功返回1表示成功否則直接返回失敗原因即可:
三、獲取當前作者文章
此時要刪除文章數據我們還需要獲取當前作者的文章數據,新建一個服務,通過傳遞一個昵稱來獲取當前用戶的文章內容(最好直接判斷當前登錄用戶):
此時直接通過傳遞一個昵稱獲取跟昵稱對應的發布作者文章即可。
接著我們直接更改當前頁面的事件即可:
接著我們創建一個 for 循環把文章行放入其中:
設置循環創建的數據來源為當前頁面中的文章數據:
接著給文本綁定內容:
隨后給予刪除按鈕事件,點擊后調用服務即可:
那么此時完成后還需要對應的在當前頁面做出響應,直接在當前頁面循環文章的文章數據對象數組中刪除對應 ID 的一行數據即可,所以此時在完成刪除動作后,判斷是否成功,如果成功就刪除對象數組的內容即可:
此時我們預覽頁面成功的查看到元素,接著直接點擊刪除查看是否有效果:
點擊刪除后內容空白,成功完成:
接著到數據庫中更改當前刪除的標記為0,咱們此時需要重新給予獲取當前用戶的文章一個條件,還需要判斷文章是否刪除,此時更改獲取服務:
四、文章編輯頁及功能制作
接著我們復制一個文章發布頁作為文章編輯頁:
重命名該頁,并且更新發布按鈕為更新:
接著創建一個編輯ID變量存儲選擇編輯的文章:
回到管理頁,當我們點擊了編輯后,跳轉到文章編輯頁時應該給予編輯ID為點擊的文章ID,并且跳轉頁面:
隨后在文章編輯頁創建一個變量存儲詳情數據,并且給予對應的列名:
接著給予當前編輯頁顯示時間,顯示時直接調用之前編寫的詳情服務,傳入對應ID之后用詳情對象數組存儲對應的返回值即可:
接著我們為頁面中的容器綁定值:
接著創建一個服務為更新內容,接收標題、內容和ID為參數,通過ID進行內容更新:
最后給更新事件添加服務,傳入對應參數即可:
最后我們更改標題:
點擊更新之后成功更新:
最后首頁顯示內容已更改:
總結
以上是生活随笔為你收集整理的七、文章管理页面及功能实现《iVX低代码/无代码个人博客制作》的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Matplotlib饼图注释
- 下一篇: Scrapy爬取起点中文网小说信息 绝对