二、文章發布頁制作及后臺實現《iVX低代碼/無代碼個人博客制作》

注:iVX也有免費直播課《第八期直播課》

一、文章編輯頁制作

當首頁制作完畢后,需要顯示內容就需要有文章數據,此時我們創建一個文章編輯頁增加對應的數據。

那么我們創建一個頁面,命名為文章發布頁:

在這里插入圖片描述
接著我們查看標題部分:
在這里插入圖片描述
此部分為左右兩邊,左側為標題提示輸入和一個標題的文本輸入框,右側是一個發布按鈕,此時我們創建左右兩行:
在這里插入圖片描述
由于左右兩行需要在同一行顯示,那么此時我們就需要設置左右兩行的寬度為 50%,使其不占滿超過100%的寬度居于一行,并且需要設置高度為包裹:
在這里插入圖片描述
接著在左側添加一個文本以及一個輸入框:
在這里插入圖片描述
那么右側就是一個發布按鈕,發布按鈕更改完對應的屬性后如下:
在這里插入圖片描述
接著我們創建一個行命名為編輯器,并且設置這個行的高度為撐開:
在這里插入圖片描述
接著在這個行內創建一個富文本編輯器,再將富文本編輯器的高度設置100%即可:
在這里插入圖片描述

二、數據庫創建

現在我們的頁面制作完畢后,那么接下來就需要創建數據庫存儲我們發布的內容;此時點擊后臺創建一個數據庫:
在這里插入圖片描述
此時我們可以重命名當前數據庫為文章數據:
在這里插入圖片描述
接著,我們點擊數據庫,在數據庫中添加文章字段,我們需要添加的字段有 文章標題、文章內容、文章閱讀、文章點贊以及點贊用戶列表;在這里存儲文章點贊用戶列表是為了方便對要點贊或者登錄后的用戶訪問文章后判斷是否已經點贊,若已經 點贊,那么就顯示已點贊。

此時我們在數據庫中添加上述的幾個字段:
在這里插入圖片描述
此時我們需要注意,店在哪用戶列表的字段類型為 json,為json 的原因是存儲了對應的數據是一個數組數據,存儲到數據庫的內容是字符串的“文本形式”。

三、文章數據提交服務創建

接著,我們創建一個服務命名為文章數據提交:
在這里插入圖片描述

隨后我們編輯當前的文章數據提交服務,首先需要確定要接受的值:
在這里插入圖片描述
其他值例如閱讀數、點贊數這些都是存在默認值,那么此時我們不需要接受值的傳入。那么接著選擇對應的數據庫提交值即可:
在這里插入圖片描述

在這里,我們依次把對應的數據進行提交,在點贊用戶列表處添加了“[]”表示空數組內容,也就是默認為空的意思。

接著,我們創建一個回調事件,只要返回的條件是成功的,那么就返回1表示正確,否則其余情況直接返回失敗原因即可:
在這里插入圖片描述

四、點擊按鈕事件設定

接著我們給對應的發布按鈕增加事件,只要發布按鈕點擊后,直接使用服務,服務對應的提交數據,但是此時我們發現,我們的發布作者暫時還未知道是什么:
在這里插入圖片描述
那么此時我們直接創建一個變量,命名為用戶昵稱,默認值為“匿名”,只要用戶未登錄,發布的用戶都統一昵稱為匿名即可:
在這里插入圖片描述
接著編寫提交按鈕的回調判斷即可:
在這里插入圖片描述

只要返回結果的值為1,那么就是表示成功提交,否則直接彈出返回結果,也就是對應的失敗原因即可。

接著我們預覽當前頁面,隨后復制一段內容進行提交:
在這里插入圖片描述
點擊發布后成功提交內容:
在這里插入圖片描述
并且在數據庫中也找到了對應的內容:
在這里插入圖片描述
此時該功能成功完成。

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

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

相關文章

VS2013配置pro*C/C++開發環境

2019獨角獸企業重金招聘Python工程師標準>>> 1、軟件:VS2013,oracle10g 2、VS2013 新建VC空項目,然后在源文件中新建一個*.pc文件(不知道我的配置哪兒有問題,新建的pc文件必須和工程同名)&#…

查看linux版本的三種常用方法

1) 登錄到服務器執行 lsb_release -a ,即可列出所有版本信息,例如: [root3.5.5Biz-46 ~]# lsb_release -a LSB Version: 1.3 Distributor ID: RedHatEnterpriseAS Description: Red Hat Enterprise Linux AS release 4 (Nahant Update 1) Rel…

Windows 11 23H2 25131 推送!全新搜索體驗,優化應用商店

面向 Dev頻道的 Windows 預覽體驗成員,微軟現已推送 Windows 11 預覽版 Build 25131。主要變化1.微軟為 Windows 11 搜索引入全新體驗,當您在搜索結果中點擊“打開文件位置”時,現在將選擇文件資源管理器中的文件,此前只是打開文件…

C# RichTextBox 實現循環查找關鍵字

實現效果如上圖&#xff0c;點擊“Search”按鈕&#xff0c;開始從文首查找關鍵字“menu”&#xff0c;并高亮&#xff0c;再次點擊“Search”按鈕&#xff0c;繼續查找下一個。查找到文末&#xff0c;自動從文首重新查找。 private int _searchIndex 0;//查找開始位置/// <…

C語言試題二十七之請編寫程序,實現矩陣(3行3列)的轉置(即行列互換)。

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 請編寫一個…

網站常見漏洞-- XSS攻擊

跨站攻擊&#xff0c;即Cross Site Script Execution(通常簡寫為XSS&#xff0c;因為CSS與層疊樣式表同名&#xff0c;故改為XSS) 是指攻擊者利用網站程序對用戶輸入過濾不足&#xff0c;輸入可以顯示在頁面上對其他用戶造成影響的HTML代碼&#xff0c;從而盜取用戶資料、利用用…

【ArcGIS遇上Python】從入門到精通系列之第一章:ArcGIS Python簡介

文章目錄1. Python簡介2. Python的特點3. ArcGIS的腳本語言4. ArcGIS中的Python腳本編輯器1. Python簡介 Python是一種跨平臺的計算機程序設計語言。 是一個高層次的結合了解釋性、編譯性、互動性和面向對象的腳本語言。最初被設計用于編寫自動化腳本(shell)&#xff0c;隨著版…

C# RichTextBox 做簡單的HTML代碼編輯器 ---------左側顯示行號

說明&#xff1a;此顯示行號為實際行號&#xff0c;不論是空行還是自動換行&#xff0c;都計算在內&#xff0c;跟實際IDE的行號不同&#xff0c;同步滾動會有半行高度以內的誤差。 實現原理&#xff0c;在RichTextBox 編輯器左側放置另一RichTextBox &#xff08;或其它控件也…

五、文章詳情頁制作及跳轉功能實現《iVX低代碼/無代碼個人博客制作》

注&#xff1a;iVX也有免費直播課《第八期直播課》 一、詳情頁制作 在之前的章節中&#xff0c;我們已經制作完畢了登錄、注冊、首頁等內容&#xff0c;在這一節中&#xff0c;我們編寫詳情頁以及詳情頁功能制作。 詳情頁頁面如下&#xff1a; 詳情頁頭部也就是一個頭部欄&…

c++ 數據類型轉換: static_cast dynamic_cast reinterpret_cast const_cast

c 數據類型轉換&#xff1a; static_cast dynamic_cast reinterpret_cast const_cast 【版權聲明】轉載請注明出處 http://www.cnblogs.com/TenosDoIt/p/3175217.html【目錄】 引言 static_cast 定義 dynamic_cast 定義 舉例&#xff1a;下行轉換&#xff08;把基類的指針或引用…

C語言試題二十八之編寫函數function功能是:從字符中刪除指定的字符,同一字母的大、小寫按不同字符處理。

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 編寫函數f…

日用有余!國產中科方德桌面操作系統初體驗

國產IT圈里最受關注的話題&#xff0c;除了芯片想必就是操作系統了。但真說起國產操作系統&#xff0c;大家是既熟悉又陌生&#xff0c;聽說過的多而真正使用過的少。而伴隨產業發展&#xff0c;市面上也涌現出眾多國產操作軟件&#xff0c;這些系統是否好用&#xff1f;能否滿…

面試經驗總結

8 transient是干嘛的 Java的serialization提供了一種持久化對象實例的機制。當持久化對象時&#xff0c;可能有一個特殊的對象數據成員&#xff0c;我們不想用 serialization機制來保存它。為了在一個特定對象的一個域上關閉serialization&#xff0c;可以在這個域前加上關鍵字…

【GIS風暴】ArcGIS柵格重采樣(Resample)方法詳解

Contents 1. 最鄰近法(Nearest Neighbor)2. 雙線性內插法(Bilinear Interpolation)3. 三次卷積法(Cubic Convolution)4. ArcGIS重采樣工具(Resample)柵格/影像數據進行配準或糾正、投影等幾何變換后,像元中心位置通常會發生變化,其在輸入柵格中的位置不一定是整數的行…

Unhandled event loop exception PermGen space

原來一直用eclipse3.5&#xff0c;最近嘗試升級到3.7和4.2&#xff0c;但不管是3.7還是4.2項目編譯過程中總提示“Unhandled event loop exception PermGen space”要求退出workspace&#xff0c;與原來3.5版本比較了一下eclipse.ini參數設置發現沒有差別&#xff0c;懷疑是公司…

C# RichTextBox 做簡單的HTML代碼編輯器 ---------利用WinApi修正左側顯示行號 誤差

說明&#xff1a;通過WinApi可以準確定準滾動位置。 //行號 生成顯示 這里rtbLineNum用的 RichTextBox&#xff0c;也可以用其它private void ShowLineNum(){rtbLineNum.Text "";//計算行高&#xff0c;行數int linesLength 0;var pFirst tbEditor.GetPositionFr…

Angular - - angular.element

angular.element 將DOM元素或者HTML字符串一包裝成一個jQuery元素。 格式&#xff1a;angular.element(element); element&#xff1a;包裝成jquery對象的html字符串或者dom元素 jqLite提供的方法&#xff1a; addClass()after()append()attr()bind() – 不支持命名空間,選擇器…

六、文章詳情顯示及點贊實現《iVX低代碼/無代碼個人博客制作》

注&#xff1a;iVX也有免費直播課《第八期直播課》 一、文章詳情實現 上一節我們已經完成了首頁的內容顯示&#xff0c;那么此時我們完成點擊后跳轉到詳情頁內容。 那么此時由于我們需要跳轉到詳情頁需要對應的數據ID&#xff0c;那么此時還需要給首頁的文章數據對象數組一個…

centos格式化xfs文件系統格式并設置自動啟動掛載磁盤

文章目錄 說明操作步驟 說明 非全方位資料&#xff0c;學習實踐而來&#xff0c;歡迎參考學習 操作步驟 要將 /dev/sdb1 分區快速格式化為 XFS 文件系統并設置開機自動掛載&#xff0c;可以按照以下步驟進行操作&#xff1a; 查看已連接的硬盤列表&#xff0c;主要是設備名稱…

System.CommandLine選項Option

前一篇簡單看了一下CommandLine命令的使用&#xff0c;其實在一個命令行工具中&#xff0c;還有一個重要的點&#xff0c;那就是選項——Option&#xff0c;選項是為命提供參數&#xff0c;就好像C#中方法&#xff0c;Command就像方法&#xff0c;Option就像方法的參數&#xf…