6.钱包UI和区块链浏览器.md

概述

本章，我们将为钱包添加UI，并为区块链创建区块链浏览器。我们的节点已经使用HTTP的方式发布了它的功能，所以我们将创建一个网页，向这些接口发送请求并可视化结果。

为了实现所有这些，必须添加一些额外的接口并为节点添加一些逻辑，例如：

• 查询块和交易的信息
• 查询特定地址的信息

本章实现的完整代码请戳这里，UI部分可以在这里找到

新的接口

让我们添加一个用户可以查询特定块的接口，如果hash已知的话。

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

查询特定交易亦是如此：

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

我们还想显示有关特定地址的信息。现在我们回到该地址的未使用输出列表，因为根据这些信息，可以计算例如：该地址的总余额。

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

还可以添加关于给定地址的已使用交易输出的信息，以便可视化给定地址的完整历史记录。

前端技术

我们将使用Vue.js来实现钱包和区块链浏览器的UI部分。由于本教程不涉及前端开发，因此我们不会介绍前端代码。用户界面代码的仓库可以在这里找到。

区块链浏览器

区块链浏览器是一个用于可视化区块链状态的网站。区块链浏览器的典型用例是轻松检查给定地址的余额，或者验证给定交易是否包含在区块链中。

在本例中，我们只需向节点发出http请求，并以一种有意义的方式显示响应。我们从不提出任何修改区块链状态的请求，因此构建区块链浏览器全都是关于以有意义的方式可视化节点提供的信息。

区块链浏览器的截图如下所示：

钱包界面

对于钱包界面，我们还将创建一个类似于区块链浏览器的网站。用户应该能够发送硬币并查看地址的余额。我们还将显示交易池。

钱包截图：