摘要：前端是如何獲取交易數(shù)據(jù)并顯示出來(lái)的我們先在比原的前端代碼庫(kù)中尋找。這過(guò)程中的推導(dǎo)就不再詳說(shuō)，需要的話可以看前面講解比原是如何顯示余額的那篇文章。的定義是其中的值是。

作者：freewind

比原項(xiàng)目倉(cāng)庫(kù)：

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

Gitee地址：https://gitee.com/BytomBlockc...

在前一篇文章中，我們?cè)噲D理解比原是如何交易的，但是由于內(nèi)容太多，我們把它分成了幾個(gè)小問(wèn)題，并在前一篇解決了“在dashboard中如何提交交易信息”，以及“比原后臺(tái)是如何操作的”。

在本文我們繼續(xù)研究下一個(gè)問(wèn)題：在提交的交易成功完成后，前端會(huì)以列表的方式顯示交易信息，它是如何拿到后臺(tái)的數(shù)據(jù)的？也就是下圖是如何實(shí)現(xiàn)的：

由于它同時(shí)涉及到了前端和后端，所以我們同樣把它分成了兩個(gè)小問(wèn)題：

前端是如何獲取交易數(shù)據(jù)并顯示出來(lái)的？

后端是如何找到交易數(shù)據(jù)的？

下面依次解決。

我們先在比原的前端代碼庫(kù)中尋找。由于這個(gè)功能是“列表分頁(yè)”顯示，這讓我想起了前面有一個(gè)類似的功能是分頁(yè)顯示余額，那里用的是src/features/shared/components/BaseList提供的通用組件，所以這邊應(yīng)該也是一樣。

經(jīng)過(guò)查看，果然在src/features/transactions/components/下面發(fā)現(xiàn)了List.jsx文件，且目錄結(jié)構(gòu)跟src/features/balances/components/非常相似，再大略看一下代碼，就能確定使用了一樣的方法。

但是如果回想一下，過(guò)程似乎還是有點(diǎn)不同。在顯示余額那里，是我們手動(dòng)點(diǎn)擊了左側(cè)欄的菜單，使得前端的路由轉(zhuǎn)到了/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觸發(fā)了loadPage，最后一步步調(diào)用了后臺(tái)接口/list-balances。而這次在本文的例子中，它是在提交了“提交交易”表單成功后，自動(dòng)轉(zhuǎn)到了“列表顯示交易”的頁(yè)面，會(huì)不會(huì)同樣觸發(fā)onEnter或者onChange呢？

答案是會(huì)的，因?yàn)樵谇拔闹?，?dāng)submitForm執(zhí)行后，向后臺(tái)的最后一個(gè)請(qǐng)求/submit-transaction成功以后，會(huì)調(diào)用dealSignSubmitResp這個(gè)函數(shù)，而它的定義是：

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

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

可以看到，它最后也會(huì)切換前端路由到/transactions，跟顯示余額那里就是完全一樣的路線了。所以按照那邊的經(jīng)驗(yàn)，到最后一定會(huì)訪問(wèn)后臺(tái)的/list-transactions接口。

這過(guò)程中的推導(dǎo)就不再詳說(shuō)，需要的話可以看前面講解“比原是如何顯示余額的”那篇文章。

最后拿到了后臺(tái)返回的數(shù)據(jù)如何以表格形式顯示出來(lái)，在那篇文章中也提到，這里也跳過(guò)。

當(dāng)我們知道了前端會(huì)訪問(wèn)后臺(tái)的/list-transactions接口后，我們就很容易的在比原的主項(xiàng)目倉(cāng)庫(kù)中找到下面的代碼：

api/api.go#L164-L244

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

可以看到，list-transactions對(duì)應(yīng)的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)
}

從這個(gè)方法的參數(shù)可以看到，前端是可以傳過(guò)來(lái)id，account_id和detail這三個(gè)參數(shù)的。而在本文的例子中，因?yàn)槭侵苯犹D(zhuǎn)到/transactions的路由，所以什么參數(shù)也沒(méi)有傳上來(lái)。

我把代碼分成了兩塊，一些錯(cuò)誤處理的部分被我省略了。依次講解：

第1處是想根據(jù)參數(shù)來(lái)獲取transactions。如果account_id有值，則拿它去取，即某個(gè)帳戶擁有的交易；否則的話，用id去取，這個(gè)id指的是交易的id。如果這兩個(gè)都沒(méi)有值，應(yīng)該是在第二個(gè)分支中處理，即a.wallet.GetTransactionsByTxID應(yīng)該也可以處理參數(shù)為空字符串的情況

第2處代碼，如果detail為false（如果前端沒(méi)傳值，也應(yīng)該是默認(rèn)值false，則將前面拿到的transactions變成摘要，只返回部分信息；否則的話，返回完整信息。

我們先進(jìn)第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處代碼是遍歷數(shù)據(jù)庫(kù)中以TxPrefix為前綴的值，其中TxPrefix為TXS:，下面要進(jìn)行遍歷。這里的DB無(wú)疑是wallet這個(gè)leveldb

第2處開(kāi)始進(jìn)行遍歷

第3處是把每一個(gè)元素的Value拿出來(lái)，它是JSON格式的，把它轉(zhuǎn)成AnnotatedTx對(duì)象。txIter的每一個(gè)元素是一個(gè)key-pair，有Key()，也有Value()，這里只用到了Value()

第4處是在當(dāng)前的這個(gè)annotatedTx對(duì)象中尋找，如果它的input或者output中包含的帳戶的id等于accountId，則它是我們需要的。后面再使用annotateTxsAsset方法把annotatedTx對(duì)象中的asset相關(guān)的屬性（比如alias等）補(bǔ)全。

其中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"`
}

它其實(shí)就是為了持有最后返回給前端的數(shù)據(jù)，通過(guò)給每個(gè)字段添加JSON相關(guān)的annotation方便轉(zhuǎn)換成JSON。

如果前端沒(méi)有傳account_id參數(shù)，則會(huì)進(jìn)入另一個(gè)分支，對(duì)應(yīng)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
}

這個(gè)方法看起來(lái)挺長(zhǎng)，實(shí)際上邏輯比較簡(jiǎn)單。如果前端傳了txID，則會(huì)在wallet中尋找指定的id的交易對(duì)象；否則的話，取出全部（也就是本文的情況）。其中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:。

我們?cè)龠M(jìn)入listTransactions的第2處，即detail那里。如果detail為false，則只需要摘要，所以會(huì)調(diào)用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
}

這一段的代碼相當(dāng)直白，就是從transactions的元素中取出部分比較重要的信息，組成新的TxSummary對(duì)象，返回過(guò)去。最后，這些對(duì)象再變成JSON返回給前端。

那么今天的這個(gè)小問(wèn)題就算解決了，由于有之前的經(jīng)驗(yàn)可以利用，所以感覺(jué)就比較簡(jiǎn)單了。