上節內容中我們講了前端和智慧合約之間通過一個service元件進行互動，並將前端的資料通過push action的方式儲存到多索引表中。那麼我們如何從智慧合約的表中取資料出來並展示在前端介面呢，這便是我們今天要學習的內容。

對eos有一定了解的朋友們應該知道RPC介面的存在，我們可以通過cleos命令列的get table來獲取表中的內容，也可以通過RPC介面中的get_table_rows來獲取相關內容然後展示在前端頁面上，其主要流程可以按照下圖展示，我們接下來就來看這些操作是如何實現的：

在上一節內容中我們引入了ApiService的概念，接下來讓我們在ApiService中新增一個獲取當前使用者資訊的介面getUserByName()，username將是這個函式的唯一引數，當然通過上面的介紹我們很容易聯想到RPC介面中的get_table_rows，我們具體來看程式碼：

 1static async getUserByName(username) {
 2    try {
 3      //新建一個RPC物件
 4      const rpc = new Rpc.JsonRpc(process.env.REACT_APP_EOS_HTTP_ENDPOINT);
 5      const result = await rpc.get_table_rows({
 6     //傳參格式為JSON
 7        "json": true,
 8        "code": prodcess.env.REACT_APP_EOS_CONTRACT_NAME,    
 9    //code為合約賬戶名
10        "scope": process.env.REACT_APP_EOS_CONTRACT_NAME,   
11    // 合約的scope 
12        "table": "users", 
13    // 要查詢的表明
14        "limit": 1,
15    // 只查一個
16        "lower_bound": username,
17    //這個lower_bound和upper_bound建議參考以下multi-index.hpp學習哦
18      });
19      return result.rows[0];
20    } catch (err) {
21      console.error(err);
22    }
23  }
 

在上面的例子中我們使用了limit，lower_bound等限制，關於multi-index的內容，還是建議各位讀者稍微閱讀下原始碼，即multi-index.hpp中的一些內容，這樣能更方便的理解多索引表，當然我以前的文章中也多次提及過：

eos原始碼賞析（十三）：EOS智慧合約資料持久化儲存（上）

eos原始碼賞析（十四）：EOS智慧合約資料持久化儲存（下）

eos原始碼賞析（十六）：EOS智慧合約資料表查詢

getUserByName的返回結果將是一個JSON格式的字串，包含了玩家的資訊以及遊戲的相關資訊。

然後我們來建立一個PlayerProfile元件來展示上面介面返回的內容，PlayerProfile是React中一個用於展示內容的元件，在這裡我們需要把他包含到Game元件內，做完以上內容我們可以發現：

mapStateToProps 和mapDispatchToProps已經被新增，用來連結元件和Redux store：

1import { connect } from 'react-redux';
2// Game subcomponents
3import { PlayerProfile } from './components';
constructor在Game元件啟動之前獲取多索引表中的資料：

1  constructor(props) {
2    // 初始化建構函式
3    super(props);
4    // 繫結
5    this.loadUser = this.loadUser.bind(this);
6    this.loadUser();
7  }

loaduser，通過ApiService裡的getUserByName獲取最新的玩家的資料：

 1  loadUser() {
 2    const { setUser, user: { name } } = this.props;
 3    // 通過ApiService傳送請求，呼叫getUserByName然後在通過RPC介面中的get_table_rows來查詢表中的資料，並解析展示出來
 4    return ApiService.getUserByName(name).then(user => {
 5      setUser({
 6        win_count: user.win_count,
 7        lost_count: user.lost_count,
 8        game: user.game_data,
 9      });
10    });
11  }

當PlayerProfile建立完成之後，我們在登入之後會看到已登入使用者的資訊，比如玩家名，贏的次數，輸的次數等。但是有個問題需要注意，使用者資料儲存在了Redux store中，但是Redux store會在每次瀏覽器頁面重新整理之後進行重構，資料就會被清空，我們怎麼來解決呢？

我們可以在ApiService中新增一個getCurrentUser函式從本地儲存中來獲取當前使用者的資訊，獲取到之後可以呼叫智慧合約的login action，如果登入成功了，我們就再次把使用者資料儲存到redux store中，從而實現自動登入的功能：

 1  static getCurrentUser() {
 2    return new Promise((resolve, reject) => {
 3      if (!localStorage.getItem("cardgame_account")) {
 4        return reject();
 5      }
 6      takeAction("login", { username: localStorage.getItem("cardgame_account") })
 7        .then(() => {
 8          resolve(localStorage.getItem("cardgame_account"));
 9        })
10        .catch(err => {
11          localStorage.removeItem("cardgame_account");
12          localStorage.removeItem("cardgame_key");
13          reject(err);
14        });
15    });
16  }

登入成功的頁面如下所示：

如果你覺得我的文章對你有一定的幫助，請點選文章末尾的喜歡該作者。

如果你對eos開發感興趣,歡迎關注本公眾號,一起學習eos開發。

微信公眾號

有任何疑問或者指教請新增本人個人微信,當然有對eos開發感興趣或者金庸粉的也可以新增一起交流,備註eos開發或金庸。

                                                                   個人微訊號