二、文章发布页制作及后台实现《iVX低代码/无代码个人博客制作》
注：iVX也有免費(fèi)直播課《第八期直播課》
一、文章編輯頁(yè)制作
當(dāng)首頁(yè)制作完畢后，需要顯示內(nèi)容就需要有文章數(shù)據(jù)，此時(shí)我們創(chuàng)建一個(gè)文章編輯頁(yè)增加對(duì)應(yīng)的數(shù)據(jù)。
那么我們創(chuàng)建一個(gè)頁(yè)面，命名為文章發(fā)布頁(yè)：
接著我們查看標(biāo)題部分：
此部分為左右兩邊，左側(cè)為標(biāo)題提示輸入和一個(gè)標(biāo)題的文本輸入框，右側(cè)是一個(gè)發(fā)布按鈕，此時(shí)我們創(chuàng)建左右兩行：
由于左右兩行需要在同一行顯示，那么此時(shí)我們就需要設(shè)置左右兩行的寬度為 50%，使其不占滿超過(guò)100%的寬度居于一行，并且需要設(shè)置高度為包裹：
接著在左側(cè)添加一個(gè)文本以及一個(gè)輸入框：
那么右側(cè)就是一個(gè)發(fā)布按鈕，發(fā)布按鈕更改完對(duì)應(yīng)的屬性后如下：
接著我們創(chuàng)建一個(gè)行命名為編輯器，并且設(shè)置這個(gè)行的高度為撐開(kāi)：
接著在這個(gè)行內(nèi)創(chuàng)建一個(gè)富文本編輯器，再將富文本編輯器的高度設(shè)置100%即可：
二、數(shù)據(jù)庫(kù)創(chuàng)建
現(xiàn)在我們的頁(yè)面制作完畢后，那么接下來(lái)就需要?jiǎng)?chuàng)建數(shù)據(jù)庫(kù)存儲(chǔ)我們發(fā)布的內(nèi)容；此時(shí)點(diǎn)擊后臺(tái)創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)：
此時(shí)我們可以重命名當(dāng)前數(shù)據(jù)庫(kù)為文章數(shù)據(jù)：
接著，我們點(diǎn)擊數(shù)據(jù)庫(kù)，在數(shù)據(jù)庫(kù)中添加文章字段，我們需要添加的字段有 文章標(biāo)題、文章內(nèi)容、文章閱讀、文章點(diǎn)贊以及點(diǎn)贊用戶列表；在這里存儲(chǔ)文章點(diǎn)贊用戶列表是為了方便對(duì)要點(diǎn)贊或者登錄后的用戶訪問(wèn)文章后判斷是否已經(jīng)點(diǎn)贊，若已經(jīng) 點(diǎn)贊，那么就顯示已點(diǎn)贊。
此時(shí)我們?cè)跀?shù)據(jù)庫(kù)中添加上述的幾個(gè)字段：
此時(shí)我們需要注意，店在哪用戶列表的字段類型為 json，為json 的原因是存儲(chǔ)了對(duì)應(yīng)的數(shù)據(jù)是一個(gè)數(shù)組數(shù)據(jù)，存儲(chǔ)到數(shù)據(jù)庫(kù)的內(nèi)容是字符串的“文本形式”。
三、文章數(shù)據(jù)提交服務(wù)創(chuàng)建
接著，我們創(chuàng)建一個(gè)服務(wù)命名為文章數(shù)據(jù)提交：
隨后我們編輯當(dāng)前的文章數(shù)據(jù)提交服務(wù)，首先需要確定要接受的值：
其他值例如閱讀數(shù)、點(diǎn)贊數(shù)這些都是存在默認(rèn)值，那么此時(shí)我們不需要接受值的傳入。那么接著選擇對(duì)應(yīng)的數(shù)據(jù)庫(kù)提交值即可：
在這里，我們依次把對(duì)應(yīng)的數(shù)據(jù)進(jìn)行提交，在點(diǎn)贊用戶列表處添加了“[]”表示空數(shù)組內(nèi)容，也就是默認(rèn)為空的意思。
接著，我們創(chuàng)建一個(gè)回調(diào)事件，只要返回的條件是成功的，那么就返回1表示正確，否則其余情況直接返回失敗原因即可：
四、點(diǎn)擊按鈕事件設(shè)定
接著我們給對(duì)應(yīng)的發(fā)布按鈕增加事件，只要發(fā)布按鈕點(diǎn)擊后，直接使用服務(wù)，服務(wù)對(duì)應(yīng)的提交數(shù)據(jù)，但是此時(shí)我們發(fā)現(xiàn)，我們的發(fā)布作者暫時(shí)還未知道是什么：
那么此時(shí)我們直接創(chuàng)建一個(gè)變量，命名為用戶昵稱，默認(rèn)值為“匿名”，只要用戶未登錄，發(fā)布的用戶都統(tǒng)一昵稱為匿名即可：
接著編寫(xiě)提交按鈕的回調(diào)判斷即可：
只要返回結(jié)果的值為1，那么就是表示成功提交，否則直接彈出返回結(jié)果，也就是對(duì)應(yīng)的失敗原因即可。
接著我們預(yù)覽當(dāng)前頁(yè)面，隨后復(fù)制一段內(nèi)容進(jìn)行提交：
點(diǎn)擊發(fā)布后成功提交內(nèi)容：
并且在數(shù)據(jù)庫(kù)中也找到了對(duì)應(yīng)的內(nèi)容：
此時(shí)該功能成功完成。
總結(jié)
以上是生活随笔為你收集整理的二、文章发布页制作及后台实现《iVX低代码/无代码个人博客制作》的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
