昨天的區塊鏈「百度貼吧」還差一個用戶界面 代碼都在這兒_REA:SafePost

本文目的很明確：手把手教你使用DApp開發框架Embark構建一個去中心化百度貼吧，主要包括以下3部分：

明確DApp需求，部署智能合約；

使用EmbarkJS測試智能合約；

使用React構建DApp的前端。

在上一篇文章中，營長手把手帶你們使用Solidity語言部署合約，并使用EmbarkJS完成智能合約測試，本文基于此將繼續深入，使用JavaScript用戶界面框架React構建去中心化百度貼吧的前端。

渲染第一個組件

在構建與智能合約實例交互的組件之前，我們需要先在屏幕上實際渲染一個簡單的文本，以確保React框架已經得到了正確的配置。

為此，我們需要將React框架添加為項目的依賴項。事實上，我們的代碼依賴兩個程序包：react和react-dom。之所以需要react-dom是因為它可以在DOM(DocumentObjectModel，文檔對象模型)環境中渲染使用React框架定義的組件，聽起來令人摸不著頭腦，簡單來說這就是瀏覽器所做的工作。

接下來我們需要將這兩個依賴項添加到項目的package

...}

接下來，我們將該狀態綁定到表單字段：

TopicPost你可能會問代碼中的loading是干嘛的，別著急，我們馬上會說到它。最后但同樣重要的是，我們需要添加一些事件處理程序，以便在用戶輸入數據時視圖中的更改能傳遞回組件并更新組件的狀態。為了確保一切正常，我們還需要為表單提交添加一個事件處理程序，讓它輸出狀態對象state中的數據，換句話說，我們需要更新處理程序handleChange()和創建帖子處理程序createPost()，代碼如下：

比特幣/GBP的交易量昨天為8.81億美元:金色財經報道，CoinShares研究主管James Butterfill在社交媒體上稱，比特幣/GBP的交易量昨天為8.81億美元（平均為7000萬美元），當法定貨幣受到威脅時，投資者開始青睞比特幣。[2022/9/28 5:58:47]

exportclassCreatePostextendsComponent{..

createPost(event){event

...}

請注意代碼中更新處理程序handleChange()的實現方式，我們在其中使用了設置狀態函數setState()來更新傳遞給該函數的值。現在我們需要做的就是將這些處理程序附加到表單中：

createPost(e。>TopichandleChange('topic',e。/>handleChange('content',e})>Post由于我們正在使用表單的onSubmit()處理程序，因此很重要的一點就是將type=“submit”添加到按鈕對象button中，或將按鈕對象更改為，否則，表單將不會發出提交事件。

做完了這些，在提交表單時我們就能在控制臺中看到組件的狀態了！接下來最大的挑戰就是使用EmbarkJS和它的API實現組件與智能合約實例的交互。

1、將數據上傳到IPFS

回想一下我們剛才的定義，DReddit中創建帖子函數createPost()接收一些字節作為帖子的描述，我們也討論了，這些字節實際上并不是帖子自身的數據，而是能夠指向帖子數據的IPFS哈希值。換句話說，我們必須以某種方式將數據上傳到IPFS中，并獲得這樣的哈希值。

數據：昨天現貨交易量與30天的ADV相比增長了4倍:skew數據顯示，昨天是本季度加密貨幣市場最活躍的時段，現貨交易量與30天的ADV相比增長了4倍。[2021/7/28 1:19:22]

幸運的是，強大的EmbarkJS為我們提供了大量的API來實現這個功能！就比如說，EmbarkJS的存儲文檔函數EmbarkJS

代碼中我們使用了將JavaScript對象轉換為字符串的函數JSON

asynccomponentDidMount(){constipfsHash=web3

...}

這里需要強調的一點是：在頁面加載時調用數據獲取函數EmbarkJS

);

這也意味著我們的應用程序只會在EmbarkJS準備就緒時執行渲染，展示數據。從理論上來說，這樣做等待的時間可能會變長，但就我們這個DReddit應用程序而言，造成影響的可能性不大。

我們還需要添加帖子所有者和帖子創建日期。按照預期，所有者和創建日期都將作為帖子的屬性被記錄下來。我們只需要以用戶可以理解的方式對數據進行格式化，展示所有者并不會有什么問題，但要以人類可讀的形式展示日期就需要安裝并導入日期格式庫dateformat，安裝的操作如下所示：

npminstall--savedateformat

安裝完成后，我們需要更新帖子組件Post的渲染函數render()，將得到的帖子創建日期creationDate轉換成人類可讀的形式。

..

當我們添加帖子時，帖子個數posts

V神：如果推特是一個去中心化加密協議，就不會遇到昨天的問題:7月16日消息，V神在推特上表示，讓股價搖搖欲墜、操縱選舉、散播社會不和、發送病下載鏈接、為非加密金融騙局做廣告？具有諷刺意味的是，如果推特本身是一個去中心化的加密協議，我們就不會遇到昨天的問題。[2020/7/16]

render(){return({this

list=awaitPromise

...}

請注意，在上面的代碼中，我們并沒有用await語句來等待每次對帖子的調用。這是故意為之，因為我們不可能等待每一個承諾的完成，所以我們會收集所有需要的承諾，然后使用Promise

);this

到現在為止，我們的DReddit應用程序已經可以展示所有已創建帖子的列表。但遺憾的是，在添加新帖子時，它并不會自動重新加載帖子。因此，我們必須在每次添加帖子后刷新瀏覽器，這樣做十分影響用戶體驗，我們現在需要解決這個問題。

b）重新加載帖子

我們有多種不同的方法來實現帖子列表的重新加載，最簡單的一種就是讓創建帖子組件createPost告訴帖子列表組件List重新加載帖子。但是，我們構建的這個React應用程序并沒有設置通信層，所以最直接的方法就是更改創建帖子組件CreatePost和帖子列表組件List的父組件(在這里就是App組件)中加載帖子的邏輯，讓這個父組件把邏輯傳遞到需要它的地方。這也意味著我們將把獲取帖子列表的功能放在App組件中，帖子列表組件List僅僅接收傳遞過來的純數據。

這個實現方法聽起來很繞，但不用擔心，在代碼中實現它并不難！我們首先需要在App組件中定義一個讀取帖子函數loadPosts()，然后基本上我們需要把帖子列表組件List中componentDidMount()函數的所有功能都移動到App組件中：

動態 | EOS節點競選進行中 加入投票的EOS相比昨天增加11萬個:據EOS引力區，EOS節點競選進行中，目前為止，加入投票的EOS達到3.9769億個，占EOS總量的39.10%，相比昨天增加11萬個。中國大陸的7家超級節點分別是：第1名zbeos、第2名火幣礦池、第3名starteos、第7名EOS佳能、第15名eosflytomars、第17名EOSBEIJING、第18名EOS cochain、第35名EOS引力區。參與EOS投票的賬戶達到35418個，相比昨天增加110個。EOS賬戶總數達到405909個，相比上周同期增加18113個。[2018/10/20]

exportclassAppextendsComponent{..

}list=awaitPromise

);list;this

}

為了完成這項工作，我們還需要引入一個帖子的狀態，這樣就可以確保App組件在掛載時會調用讀取帖子函數loadPosts()：

exportclassAppextendsComponent{constructor(props){super(props);this

asynccomponentDidMount(){awaitthis

...}

最后但同樣重要的是，我們需要將帖子傳遞給帖子列表組件List并將加載帖子函數loadPosts()傳遞給創建帖子組件CreatePost作為回調處理程序：

render(){return(DReddit

。

行情 | 今日恐慌指數為18，較昨天恐慌程度下降:據Alternative.me數據顯示，今日恐慌指數為18，較昨日的15增加3，恐慌情緒有所緩解，但仍為極度恐慌等級。[2018/10/14]

完成后，我們可以分別從this

有了這些功能。在新創建帖子時，帖子列表會自動重新加載，你大可去試一試。

添加投票功能

我們將要實現的最后一個功能就是對帖子進行好評還是差評的投票。這需要我們回到剛剛創建的帖子組件Post中進行更改，首先我們必須明確此處更改要實現的功能：

展示每個帖子的好評數和差評數；

為用戶分別添加處理好評投票和差評投票的處理程序；

確定用戶是否可以對帖子進行投票。

a）渲染帖子的票數

第一個功能是其中最瑣碎的一個，所以我們先來進行它的攻關。雖然DReddit智能合約返回的數據中已經附加了好評數和差評數，但它的格式并不正確，因為智能合約返回的數據是字符串形式。接下來我們需要擴展App組件的加載帖子函數loadPosts()來實現對帖子好評數和差評數的解析，代碼如下：

asyncloadPosts(){..

);...}

完成后，我們可以通過帖子列表組件List中的props對象將每個帖子的好評數和差評數傳遞給每個帖子組件Post：

exportclassListextendsComponent{..

我們還希望在成功發送投票后更新視圖。我們需要通過帖子的props對象獲取帖子的好評差評投票并相應地渲染它們。但是，如果在接收到投票后立刻更新這些值就好了。為此，我們需要更改代碼，讓它只讀取一次來自props對象的好評差評投票并將它們存儲在組件的狀態中。

exportclassPostextendsComponent{constructor(props){super(props);this

...}

同時我們還需要更改組件的渲染函數render()，讓它從組件狀態中讀取數據而不是從props對象中：

render(){..

大功告成，我們現在可以對帖子進行好評差評投票，且對每個帖子只能投票一次，沒錯，當我們對一個帖子多次投票時，程序會報錯。這是因為，我們在智能合約中加入了一項限制條件，確保用戶無法對已經投票或還未創建的帖子進行好評差評投票。

成功近在眼前，最后我們只需要將這個投票限制邏輯加入前端程序中。

c）使用函數canVote()禁用投票按鈕

這個投票限制邏輯實現起來非常簡單。如果用戶不能對帖子投票，我們只需要禁用投票按鈕。我們可以通過調用智能合約中能否投票函數canVote()來確定用戶能否進行投票。同時，我們還需要考慮到，如果用戶已經對一個帖子進行了投票，只是這筆包含投票的交易還未被加入到區塊鏈中，也就是說此時投票尚未完成，這時我們不應該允許用戶對該帖子再次投票。

在代碼中，這個功能對應于投票是否正在提交(submitting)的狀態。一般來說，如果一個用戶之前沒有對某個帖子投票，并且他此時沒有在提交對該帖子的投票，那么他就可以對該帖子投票：

exportclassPostextendsComponent{constructor(props){super(props);this

...}

接下來，我們需要更新帖子組件Post的渲染函數render()，以便在用戶不能對帖子投票時禁用投票按鈕：

render(){..

...}

在進行投票時，我們在發送投票所在的交易之前要先將正在提交狀態submitting設置為是(true)，并在交易完成后再將其改為否(false)，由于此時已經完成了對帖子的投票，因此能否投票狀態canVote也應該被設置為否(false)：

asyncvote(ballot){..

Bingo！運行一下代碼看看效果吧！

一些建議

上述所實現的功能只是百度貼吧提供功能的冰山一角，因此，我們還可以在很多地方做出改進和優化，以下是我的一些建議：

按照反向的時間順序對帖子進行排序，以便最新提交的帖子始終位于頁面頂部；

通過智能合約事件實現帖子列表的重新加載；

引入路由，以便不同用戶在創建和查看帖子時有不同的視圖；

使用CSS來美化應用程序的視圖；

通過使用IPFS和智能合約組合開發一款去中心化應用并不是難事，更多功能等你去挖掘喲。

GitHub地址：

https://github.com/embark-framework/dreddit-tutorial

原文地址：

1、SettinguptheprojectandimplementingaSmartContract

https://embark.status.im/news/2019/02/04/building-a-decentralized-reddit-with-embark-part-1/

2、TestingtheSmartContractthroughEmbarkJS

https://embark.status.im/news/2019/02/11/building-a-decentralized-reddit-with-embark-part-2/

3、Buildingasimplefront-endusingReact

https://embark.status.im/news/2019/02/18/building-a-decentralized-reddit-with-embark-part-3/

Tags：POSOSTPOSTREApos幣如何獲取利息onekeyghost怎么用SafePost$TREAM幣

MEXC