剥开比原看代码16:比原是如何通过/list-transactions显示交易信息的-阿里云开发者社区

开发者社区> 比原链bytom> 正文

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

简介: 作者:freewind 比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 在前一篇文章中,我们试图理解比原是如何交易的,但是由于内容太多,我们把它分成了几个小问题,并在前一篇解决了“在dashboard中如何提交交易信息”,以及“比原后台是如何操作的”。
+关注继续查看

作者:freewind

比原项目仓库:

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

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

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

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

img_589000e82808cdc41a92f1f1053ab397.png

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

  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)
}

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

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

  1. 第1处是想根据参数来获取transactions。如果account_id有值,则拿它去取,即某个帐户拥有的交易;否则的话,用id去取,这个id指的是交易的id。如果这两个都没有值,应该是在第二个分支中处理,即a.wallet.GetTransactionsByTxID应该也可以处理参数为空字符串的情况
  2. 第2处代码,如果detailfalse(如果前端没传值,也应该是默认值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为前缀的值,其中TxPrefixTXS:,下面要进行遍历。这里的DB

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ExpandableListView getChildView 不执行,不显示子列表
原因很简单:   在 GroupView 里面不要加入 button 等可点击空间,否则 和 点击 Groupview 展开相冲突。 去掉就好了getGroupView
1483 0
Android官方开发文档Training系列课程中文版:连接无线设备之通过P2P搜索网络服务
原文地址:http://android.xsoftlab.net/training/connect-devices-wirelessly/nsd-wifi-direct.html 本阶段的第一节课 Using Network Service Discovery 展示了如何搜索本地网络服务。
867 0
通过定制orabbix监控分析潜在的Oracle问题
在之前的博客中分享过 简单定制Orabbix监控项   http://blog.itpub.net/23718752/viewspace-1769773/ 定制的功能在Orabbix中实现非常灵活而且轻巧,还是能够感受到一种开源风的清爽。
796 0
SharePoint自动化系列——通过PowerShell创建SharePoint List Items
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 代码如下(保存到本地ps1文件中,右键run with PowerShell即可): Add-PSSnapin microsoft.
711 0
安卓开发ScrollView嵌套ListView只显示一行
在用列表控件做一个“更多功能”的界面的时候 1 2 7 8 12 13 17 18 23 27 28 33 37 38 39 原本用ScrollView嵌套...
939 0
SharePoint自动化系列——通过PowerShell创建SharePoint Lists
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 代码如下(保存到本地ps1文件中,右键run with PowerShell即可): Add-PSSnapin microsoft.
680 0
+关注
比原链bytom
比原链(Bytom)是一种多样性比特资产的区块链交互协议。官方QQ群:144860289
67
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载