剥开比原看代码16：比原是如何通过/list-transactions显示交易信息的

作者：freewind

比原项目仓库：

Github地址：https://github.com/Bytom/bytom

Gitee地址：https://gitee.com/BytomBlockchain/bytom

在前一篇文章中，我们试图理解比原是如何交易的，但是由于内容太多，我们把它分成了几个小问题，并在前一篇解决了“在dashboard中如何提交交易信息”，以及“比原后台是如何操作的”。

在本文我们继续研究下一个问题：在提交的交易成功完成后，前端会以列表的方式显示交易信息，它是如何拿到后台的数据的？也就是下图是如何实现的：

由于它同时涉及到了前端和后端，所以我们同样把它分成了两个小问题：

  1. 前端是如何获取交易数据并显示出来的？
  2. 后端是如何找到交易数据的？

下面依次解决。

前端是如何获取交易数据并显示出来的？

我们先在比原的前端代码库中寻找。由于这个功能是“列表分页”显示，这让我想起了前面有一个类似的功能是分页显示余额，那里用的是src/features/shared/components/BaseList提供的通用组件，所以这边应该也是一样。

经过查看，果然在src/features/transactions/components/下面发现了List.jsx文件，且目录结构跟src/features/balances/components/非常相似，再大略看一下代码，就能确定使用了一样的方法。

但是如果回想一下，过程似乎还是有点不同。在显示余额那里，是我们手动点击了左侧栏的菜单，使得前端的路由转到了/balances，然后由

src/features/shared/routes.js#L5-L44

const makeRoutes = (store, type, List, New, Show, options = {}) => {
  // ...
  return {
    path: options.path || type + ‘s‘,
    component: RoutingContainer,
    name: options.name || humanize(type + ‘s‘),
    name_zh: options.name_zh,
    indexRoute: {
      component: List,
      onEnter: (nextState, replace) => {
        loadPage(nextState, replace)
      },
      onChange: (_, nextState, replace) => { loadPage(nextState, replace) }
    },
    childRoutes: childRoutes
  }

}

中的onEnter或者onChange触发了loadPage，最后一步步调用了后台接口/list-balances。而这次在本文的例子中，它是在提交了“提交交易”表单成功后，自动转到了“列表显示交易”的页面，会不会同样触发onEnter或者onChange呢？

答案是会的，因为在前文中，当submitForm执行后，向后台的最后一个请求/submit-transaction成功以后，会调用dealSignSubmitResp这个函数，而它的定义是：

src/features/transactions/actions.js#L120-L132

const dealSignSubmitResp = resp => {
  // ...
  dispatch(push({
    pathname: ‘/transactions‘,
    state: {
      preserveFlash: true
    }
  }))
}

可以看到，它最后也会切换前端路由到/transactions，跟显示余额那里就是完全一样的路线了。所以按照那边的经验，到最后一定会访问后台的/list-transactions接口。

这过程中的推导就不再详说，需要的话可以看前面讲解“比原是如何显示余额的”那篇文章。

最后拿到了后台返回的数据如何以表格形式显示出来，在那篇文章中也提到，这里也跳过。

后端是如何找到交易数据的？

当我们知道了前端会访问后台的/list-transactions接口后，我们就很容易的在比原的主项目仓库中找到下面的代码：

api/api.go#L164-L244

func (a *API) buildHandler() {
    // ...
    if a.wallet != nil {
        // ...
        m.Handle("/list-transactions", jsonHandler(a.listTransactions))
        // ...
}

可以看到，list-transactions对应的handler是a.listTransactions：

api/query.go#L83-L107

func (a *API) listTransactions(ctx context.Context, filter struct {
    ID        string `json:"id"`
    AccountID string `json:"account_id"`
    Detail    bool   `json:"detail"`
}) Response {
    transactions := []*query.AnnotatedTx{}
    var err error

    // 1.
    if filter.AccountID != "" {
        transactions, err = a.wallet.GetTransactionsByAccountID(filter.AccountID)
    } else {
        transactions, err = a.wallet.GetTransactionsByTxID(filter.ID)
    }

    // ...

    // 2.
    if filter.Detail == false {
        txSummary := a.wallet.GetTransactionsSummary(transactions)
        return NewSuccessResponse(txSummary)
    }
    return NewSuccessResponse(transactions)
}

从这个方法的参数可以看到，前端是可以传过来id，account_id和detail这三个参数的。而在本文的例子中，因为是直接跳转到/transactions的路由，所以什么参数也没有传上来。

我把代码分成了两块，一些错误处理的部分被我省略了。依次讲解：

  1. 第1处是想根据参数来获取transactions。如果account_id有值，则拿它去取，即某个帐户拥有的交易；否则的话，用id去取，这个id指的是交易的id。如果这两个都没有值，应该是在第二个分支中处理，即a.wallet.GetTransactionsByTxID应该也可以处理参数为空字符串的情况
  2. 第2处代码，如果detail为false（如果前端没传值，也应该是默认值false，则将前面拿到的transactions变成摘要，只返回部分信息；否则的话，返回完整信息。

我们先进第1处代码中的a.wallet.GetTransactionsByAccountID：

wallet/indexer.go#L505-L523

func (w *Wallet) GetTransactionsByAccountID(accountID string) ([]*query.AnnotatedTx, error) {
    annotatedTxs := []*query.AnnotatedTx{}

    // 1.
    txIter := w.DB.IteratorPrefix([]byte(TxPrefix))
    defer txIter.Release()
    // 2.
    for txIter.Next() {
        // 3.
        annotatedTx := &query.AnnotatedTx{}
        if err := json.Unmarshal(txIter.Value(), &annotatedTx); err != nil {
            return nil, err
        }

        // 4.
        if findTransactionsByAccount(annotatedTx, accountID) {
            annotateTxsAsset(w, []*query.AnnotatedTx{annotatedTx})
            annotatedTxs = append(annotatedTxs, annotatedTx)
        }
    }

    return annotatedTxs, nil
}

这里把代码分成了4块：

  1. 第1处代码是遍历数据库中以TxPrefix为前缀的值，其中TxPrefix为TXS:，下面要进行遍历。这里的DB无疑是wallet这个leveldb
  2. 第2处开始进行遍历
  3. 第3处是把每一个元素的Value拿出来，它是JSON格式的，把它转成AnnotatedTx对象。txIter的每一个元素是一个key-pair，有Key()，也有Value()，这里只用到了Value()
  4. 第4处是在当前的这个annotatedTx对象中寻找，如果它的input或者output中包含的帐户的id等于accountId，则它是我们需要的。后面再使用annotateTxsAsset方法把annotatedTx对象中的asset相关的属性（比如alias等）补全。

其中AnnotatedTx的定义值得一看：

blockchain/query/annotated.go#L12-L22

type AnnotatedTx struct {
    ID                     bc.Hash            `json:"tx_id"`
    Timestamp              uint64             `json:"block_time"`
    BlockID                bc.Hash            `json:"block_hash"`
    BlockHeight            uint64             `json:"block_height"`
    Position               uint32             `json:"block_index"`
    BlockTransactionsCount uint32             `json:"block_transactions_count,omitempty"`
    Inputs                 []*AnnotatedInput  `json:"inputs"`
    Outputs                []*AnnotatedOutput `json:"outputs"`
    StatusFail             bool               `json:"status_fail"`
}

它其实就是为了持有最后返回给前端的数据，通过给每个字段添加JSON相关的annotation方便转换成JSON。

如果前端没有传account_id参数，则会进入另一个分支，对应a.wallet.GetTransactionsByTxID(filter.ID)：

wallet/indexer.go#L426-L450

func (w *Wallet) GetTransactionsByTxID(txID string) ([]*query.AnnotatedTx, error) {
    annotatedTxs := []*query.AnnotatedTx{}
    formatKey := ""

    if txID != "" {
        rawFormatKey := w.DB.Get(calcTxIndexKey(txID))
        if rawFormatKey == nil {
            return nil, fmt.Errorf("No transaction(txid=%s) ", txID)
        }
        formatKey = string(rawFormatKey)
    }

    txIter := w.DB.IteratorPrefix(calcAnnotatedKey(formatKey))
    defer txIter.Release()
    for txIter.Next() {
        annotatedTx := &query.AnnotatedTx{}
        if err := json.Unmarshal(txIter.Value(), annotatedTx); err != nil {
            return nil, err
        }
        annotateTxsAsset(w, []*query.AnnotatedTx{annotatedTx})
        annotatedTxs = append([]*query.AnnotatedTx{annotatedTx}, annotatedTxs...)
    }

    return annotatedTxs, nil
}

这个方法看起来挺长，实际上逻辑比较简单。如果前端传了txID，则会在wallet中寻找指定的id的交易对象；否则的话，取出全部（也就是本文的情况）。其中calcTxIndexKey(txID)的定义是：

wallet/indexer.go#L61-L63

func calcTxIndexKey(txID string) []byte {
    return []byte(TxIndexPrefix + txID)
}

其中TxIndexPrefix是TID:。

calcAnnotatedKey(formatKey)的定义是：

wallet/indexer.go#L53-L55

func calcAnnotatedKey(formatKey string) []byte {
    return []byte(TxPrefix + formatKey)
}

其中TxPrefix的值是TXS:。

我们再进入listTransactions的第2处，即detail那里。如果detail为false，则只需要摘要，所以会调用a.wallet.GetTransactionsSummary(transactions)：

wallet/indexer.go#L453-L486

func (w *Wallet) GetTransactionsSummary(transactions []*query.AnnotatedTx) []TxSummary {
    Txs := []TxSummary{}

    for _, annotatedTx := range transactions {
        tmpTxSummary := TxSummary{
            Inputs:    make([]Summary, len(annotatedTx.Inputs)),
            Outputs:   make([]Summary, len(annotatedTx.Outputs)),
            ID:        annotatedTx.ID,
            Timestamp: annotatedTx.Timestamp,
        }

        for i, input := range annotatedTx.Inputs {
            tmpTxSummary.Inputs[i].Type = input.Type
            tmpTxSummary.Inputs[i].AccountID = input.AccountID
            tmpTxSummary.Inputs[i].AccountAlias = input.AccountAlias
            tmpTxSummary.Inputs[i].AssetID = input.AssetID
            tmpTxSummary.Inputs[i].AssetAlias = input.AssetAlias
            tmpTxSummary.Inputs[i].Amount = input.Amount
            tmpTxSummary.Inputs[i].Arbitrary = input.Arbitrary
        }
        for j, output := range annotatedTx.Outputs {
            tmpTxSummary.Outputs[j].Type = output.Type
            tmpTxSummary.Outputs[j].AccountID = output.AccountID
            tmpTxSummary.Outputs[j].AccountAlias = output.AccountAlias
            tmpTxSummary.Outputs[j].AssetID = output.AssetID
            tmpTxSummary.Outputs[j].AssetAlias = output.AssetAlias
            tmpTxSummary.Outputs[j].Amount = output.Amount
        }

        Txs = append(Txs, tmpTxSummary)
    }

    return Txs
}

这一段的代码相当直白，就是从transactions的元素中取出部分比较重要的信息，组成新的TxSummary对象，返回过去。最后，这些对象再变成JSON返回给前端。

那么今天的这个小问题就算解决了，由于有之前的经验可以利用，所以感觉就比较简单了。

原文地址：https://www.cnblogs.com/bytom/p/9356986.html

时间： 2024-10-10 20:07:56

剥开比原看代码16：比原是如何通过/list-transactions显示交易信息的的相关文章

剥开比原看代码05：如何从比原节点拿到区块数据？

作者:freewind 比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 在前一篇中,我们已经知道如何连上一个比原节点的p2p端口,并与对方完成身份验证.此时,双方结点已经建立起来了信任,并且连接也不会断开,下一步,两者就可以继续交换数据了. 那么,我首先想到的就是,如何才能让对方把它已有的区块数据全都发给我呢? 这其实可以分为三个问题: 我需要发给它什么

剥开比原看代码14：比原的挖矿流程是什么样的？

作者:freewind 比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 当我们以bytom init --chain_id=solonet建立比原单机节点用于本地测试时,很快会发现自己将面临一个尴尬的问题:余额为0.就算我们使用bytom node --mining开启挖矿,理论上由于我们是单机状态,本机算力就是全网算力,应该每次都能够挖到,但是不知道为

剥开比原看代码17：比原是如何显示交易的详细信息的？

作者:freewind 比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 在上上篇文章里,我们还剩下一个小问题没有解决,即前端是如何显示一个交易的详细信息的. 先看对应的图片: 这个图片由于太长,分成了两个,实际上可以看作一个. 那么这个页面是怎么来的呢?这是在前面以列表的方式显示交易摘要信息后,可以点击摘要信息右上角的"查看详情"链接打开. 那

剥开比原看代码11：比原是如何通过接口/create-account创建帐户的

作者:freewind 比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 在前面,我们探讨了从浏览器的dashboard中进行注册的时候,数据是如何从前端发到后端的,并且后端是如何创建密钥的.而本文将继续讨论,比原是如何通过/create-account接口来创建帐户的. 在前面我们知道在API.buildHandler中配置了与创建帐户相关的接口配置:

剥开比原看代码12：比原是如何通过/create-account-receiver创建地址的？

作者:freewind 比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 在比原的dashboard中,我们可以为一个帐户创建地址(address),这样就可以在两个地址之间转帐了.在本文,我们将结合代码先研究一下,比原是如何创建一个地址的. 首先看看我们在dashboard中的是如何操作的. 我们可以点击左侧的"Accounts",在右边显示我

剥开比原看代码02：比原启动后去哪里连接别的节点

作者:freewind 比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 比原启动后去哪里连接别的节点 最开始我对于这个问题一直有个疑惑:区块链是一个分布式的网络,那么一个节点启动后,它怎么知道去哪里找别的节点从而加入网络呢? 看到代码之后,我才明白,原来在代码中硬编码了一些种子地址,这样在启动的时候,可以先通过种子地址加入网络.虽然整个网络是分布式的,但

JSqlParser系列之二代码结构（原）

JSqlParser系列之二代码结构(原) 博客园 百味木屋原创,转载请注明出处. 上一篇文章简单介绍如何建立JSqlParser工程,本章对JSqlParser工程的代码结构作大致地介绍. 一.目录结构 JSqlParser的目录结构比较简单,主要有表达式,解析器,语句处理几个目录.下面这张图给出了一个具体的SQL语句与表达式: 接下来,简要介绍一下在JSqlParser中几个抽象概念. 二.SQL语句(statement) JSqlPaser将所有的SQL语句抽象为Statement,Sta

带着马原看学习、生活

带着马原看学习生活 我是带着忐忑而又激动的心情接触马克思主义基本原理概论这门学科的,忐忑是因为来自学姐.学长对这门学科的诟病(好在我养成了一种习惯——对于事物的评定,我是一定得经过自己的实际接触,然后再下定论),激动是因为我为哲学的神秘气息所倾倒,渴望与之一会.果然,没有让我失望,这门学科让我对自己的学习以及生活有了更深的理解,在此,我就大胆的说说我的想法吧. 首先,聊聊马原给我带来的关于学习过程的一些理解吧. 学习,狭义的说就是通过阅读.听讲.研究.观察.理解.探索.实践等手段获得知识或技能的

Derek解读Bytom源码-protobuf生成比原核心代码

作者:Derek 简介 Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 本章介绍bytom代码Api-Server接口服务 作者使用MacOS操作系统,其他平台也大同小异 Golang Version: 1.8 protobuf生成比原核心代码 protobuf介绍 Protocol buffers是一个灵活的.高效的.自动化的用于对结构化数据进行序列化的协议.Prot