4 2 為所有權合約建立客戶端

2021-09-16 19:30:41 字數 3092 閱讀 6529

在前一章中,我們為所有權合約編寫了solidity**;在前一章和本章中,我們學習了web3.js的有關知識和使用web3.js呼叫合約的方法。現在是時候為智慧型合約建立客戶端了,這樣方便使用者使用。

建立乙個客戶端,使用者從中選擇乙個檔案,輸入所有者細節,然後按下submit按鈕廣播交易,用檔案雜湊和所有者的細 節呼叫合約的set方法。一旦交易被成功廣播,將顯示交易雜湊。使用者還能夠選擇乙個檔案,並從智慧型合約中得到所有者的細節。客戶端還將實時顯示最新挖出的 set交易。

我們將在前端使用sha1.js獲取檔案雜湊,使用jquery進行dom操縱,並使用bootstrap 4建立乙個反應層(responsive layout)。在後端使用express.js和web3.js。我們將使用socket.io,這樣不需要前端間隔相等的時間請求資料,後端就把最近 挖出的交易推到前端。

web3.js可以在前端使用,但對於應用是個安全漏洞。也就是說,我們在使用儲存在geth中的賬戶,並把geth節點url顯示給前端,這將使儲存在那些賬戶中的以太幣面臨風險。

4.2.1 專案結構

在本章的練習檔案中,將發現兩個目錄:final和initial。final包含專案的最終源**,而initial包含可以用於迅速建立應用的空的源**檔案和庫。

public目錄包含與前端相關的檔案。在public/css中會發現bootstrap.min.css,它是 bootstrap庫;在public/html中會發現index.html,所應用的html**放在這裡;在public/js目錄中將發現 jquery、sha1和socket.io的js檔案。在public/js中還會發現乙個main.js檔案,應用的前端js**放在這裡。

4.2.2 建立後端

編碼開始前最後需要做的一件事是,使用在前一章中見到的**部署所有權合約,並複製合約位址。現在建立乙個單獨的服務端,它將為瀏覽器提供html,並接收socket.io連線:

這裡使用了express.static中介軟體,用於在公共目錄中發現靜態檔案。

現在連線到geth節點,並獲取已部署合約的引用,這樣可以傳送交易並監聽事件。相關**如下:

上述**就是用得到的合約位址替換原有的合約位址。

其中,「/submit」路徑用於建立和廣播交易。獲取交易雜湊之後,把它傳送給客戶端。然後等待挖出交易。「/getinfo」路徑用於呼叫節點自身的合約get方法,而非建立交易。它僅僅傳送回所得到的回應。

這裡需要檢查一下狀態是否為true,如果為true,才能向所有連線的socket.io客戶端廣播事件。

4.2.3 建立前端

讓我們從應用的html開始建立前端。把下面的**放入index.html檔案:

執行過程如下:

1)顯示bootstrap的檔案輸入框,這樣使用者可以選擇乙個檔案。

2)顯示乙個文字框,使用者可以輸入所有者的細節。

3)得到兩個按鈕。乙個用於儲存檔案雜湊和合約中的所有者細節,另乙個用於從合約中獲取檔案資訊。單擊submit按鈕觸發submit()方法,單擊get info按鈕觸發getinfo()方法。

4)得到乙個顯示資訊的報警框。

5)顯示乙個有序列表,以顯示使用者在該頁面上時被挖出的合約交易。

接下來為getinfo()和submit()方法編寫實現,與服務端建立socket.io連線,並從服務端監聽socket.io資訊。

執行過程如下:

1)定義submit()方法。在submit方法中,確保選擇乙個檔案,且文字框不為空,然後讀取檔案內容作為陣列 快取,並傳送陣列快取給sha1.js顯示的sha1()方法,以獲取陣列快取中的內容雜湊。得到雜湊之後,使用jquery發出乙個ajax請求給 「/submit」路徑,然後在報警框中顯示交易雜湊。

2)定義getinfo()方法。該方法首先確定選中乙個檔案,然後就像之前一樣生成雜湊,並發出請求到「/getinfo」端點,以得到關於那個檔案的資訊。

3)使用socket.io庫顯示的io()方法建立socket.io連線,然後等待事件連線到觸發器——這表示連線已經建立。在連線建立之後,監聽來自服務端的資訊,並向使用者顯示交易細節。

4.2.4 測試客戶端

,可以看到圖4-1所示的介面。

圖 4-1

現在選擇乙個檔案,輸入所有者姓名,單擊submit按鈕,介面將變為圖4-2所示的樣子。

圖 4-2

在這裡可以看到顯示交易雜湊。現在等待,直到交易被挖出。一旦挖出,就可以在當前交易列表中看到交易,如圖4-3所示。

圖 4-3

現在再次選擇同乙個檔案,單擊get info按鈕,介面如圖4-4所示。

賬號所有權

關於區塊鏈 三 賬戶的所有權 傳統銀行系統 銀行卡 密碼 開戶時會記錄個人的資訊用於該賬號的所有權 位元幣系統 密碼 私鑰 私鑰 shshhfihduhdihfihsihfihdihw8ihidhhfieuiu2i374 hash hash fun shshhfihduhdihfihsihfihdi...

賬戶所有權問題

誰能用 2a38cba2390fde 位址支付,誰就擁有這個賬戶的所有權 私鑰 sdhgkdnhgggsdjuufjlkkhsuhfggdngbf hash hash fun sdhgkdnhgggsdjuufjlkkhsuhfggdngbf 2a38cba2390fde 位元幣中乙個位址對應乙個私...

std move轉換所有權

在c 11中,標準庫在中提供了乙個有用的函式std move,std move並不能移動任何東西,它唯一的功能是將乙個左值強制轉化為右值引用,繼而可以通過右值引用使用該值,以用於移動語義。從實現上講,std move基本等同於乙個型別轉換 static cast lvalue 作用是 轉換所有權,注...