第六章 錢包管理界面和區塊鏈瀏覽器

• 概覽
• 增長新接口
• 前端技術選型
• 區塊鏈瀏覽器
• 錢包管理界面
• 體驗
• 小結

概覽

本章節咱們將爲咱們的區塊鏈實現一個錢包管理界面和一個區塊鏈瀏覽器。 咱們的後臺如今已經提供了很多的一些HTTP接口(Restful API)，咱們的UI實現，其實只須要向後臺提供的接口發送請求並把結果可視化就好了。

爲了達成這個，咱們還須要額外增長一些接口和邏輯，好比:

• 查詢區塊和交易信息的接口
• 查詢指定錢包地址的信息的接口

增長新接口

首先咱們增長一個能夠根據已知區塊哈希值查詢指定區塊的接口:

app.get('/block/:hash', (req, res) => {
        const block = _.find(getBlockchain(), {'hash' : req.params.hash});
        res.send(block);
    });

而後增長一個根據交易id查詢對應交易的接口：

app.get('/transaction/:id', (req, res) => {
        const tx = _(getBlockchain())
            .map((blocks) => blocks.data)
            .flatten()
            .find({'id': req.params.id});
        res.send(tx);
    });

咱們也許還想根據某個錢包的地址去查看錢包相應的信息。 咱們能夠將屬於該地址的「未消費交易outputs」給所有列出來，而後UI邏輯就能夠根據該結果來計算該錢包餘額了。

app.get('/address/:address', (req, res) => {
        const unspentTxOuts: UnspentTxOut[] =
            _.filter(getUnspentTxOuts(), (uTxO) => uTxO.address === req.params.address)
        res.send({'unspentTxOuts': unspentTxOuts});
    });

咱們也能夠根據指定地址來計算其已消費交易outputs來將該地址下的消費歷史記錄呈現出來。

前端技術選型

咱們的前端使用vue.js來實現。由於前端實現並非咱們的重點，因此咱們這裏不會像此前介紹區塊鏈實現同樣把前端的實現代碼和邏輯都走一遍。這裏只作簡單的介紹。代碼量很少，也很簡單，你們能夠在項目的ui文件夾下找到。

區塊鏈瀏覽器

咱們能夠經過區塊鏈瀏覽器來查看咱們的區塊鏈的狀態。典型的使用場景可能會是，好比你想快速簡便的查看指定錢包地址的餘額，或者去驗證一筆交易是否在該區塊中已經記帳。

咱們須要作的僅僅是向節點後臺(默認3001端口)發送http請求，而後得到對應的返回結果，而後友好的展現呈現出來給你們。咱們不會去實現任何會修改區塊鏈狀態的功能，所以，打造這樣的一個區塊鏈瀏覽器要作的僅僅是去服務器把數據取出來，而後經過界面友好的呈現出來而已。

下圖就是區塊鏈瀏覽器運行後的一個示例:

錢包管理界面

咱們也會爲錢包管理實現相應的頁面功能。用戶經過該管理界面能夠將加密貨幣發送給別人，也能夠查看對應錢包地址的餘額。同時，咱們還會把交易池的信息給呈現出來。

下圖就是錢包管理界面運行後的一個示例:

[圖片上傳失敗...(image-ae8ca9-1561260980241)]

體驗

安裝和啓動後臺節點

首先，和以前同樣，咱們先按順序啓動節點1和節點2。

打開一個終端，進入到項目目錄，運行:

npm install
npm run node1

而後打開第二個終端，啓動第二個節點:

npm install
npm run node2

安裝和啓動區塊鏈瀏覽器

啓動完後臺節點後，咱們開始啓動區塊鏈瀏覽器。 首先打開第三個終端並定位到項目目錄，而後進入到ui這個文件夾下的naivecoin-explorer這個文件夾，執行如下命令後，區塊鏈瀏覽器將運行在8081端口:

npm install
npm start

而後瀏覽器(chrome)中訪問http://localhost:8081 就能正常訪問區塊鏈瀏覽器了。

安裝和啓動錢包管理界面

和啓動區塊鏈瀏覽器相似， 首先打開第四個終端並進入項目目錄下的ui/naivecoin-wallet這個目錄， 而後執行:

npm install
npm start

而後經過瀏覽器輸入http://localhost:8082 就能正常訪問錢包管理界面了。

小結

原本這兩個ui的代碼是在另一個github倉庫中的，可是爲了方便本身，也爲了方便你們，因此將其放到咱們區塊鏈項目下的ui文件夾去了。一開始兩個管理界面使用的端口都是8081，不能同時啓動，因此將其中一個改爲8082。

本章節的代碼實現請看這裏

本文由天地會珠海分舵編譯，轉載需受權，喜歡點個贊，吐槽請評論，如能給Github上的項目給個星，將不勝感激.