手把手教你玩eos：卡牌游戏第三课——从区块链中读取状态

文章由EOS节点EOSWing（柚翼）首发于eoswing.io博客，并向知币（ZHIBI.COM）授权刊载。内容将不定期更新，仅供学习交流之用。

0.引言

0.1教程概况

手把手教你玩eos系列教程，从最基础开始，一步一步教你学会用eos。比如发代币，开发DAPP等等。

本文是第九篇。本篇教程主要学习如何从区块链中获取数据。

0.2 学习内容

相关准备

代码编写

测试代码

0.3 机器环境

cpu: 1核

内存: 8G

操作系统：CentOS 7.4 64位

服务器所在地：中国香港

推荐将服务器放在网络较为优质的环境，比如中国香港。不然会有很多配置依赖下载上的问题。

1 相关准备

1.1 课程目标

为了获取数据，我们使用RPC调用（get_table_rows）传入参数，这将强制它仅返回与包含在多索引表的一行中的当前播放器相关联的数据。然后，我们将在新的个人资料页面中显示前端的数据。

整个流程如下图所示：

1.2 准备工作

进入开发环境容器

进入前端文件夹

2 代码编写

2.1 编写与区块链通信的代码

打开负责与后端区块链通信的ApiService.js

在代码中添加getUserByName()和getCurrentUser()两个函数:

2.2 编写显示玩家信息的组件

我们在Game下面创建PlayerProfile组件负责显示玩家信息

首先，下载图片素材到images文件夹

创建PlayerProfile.jsx

输入代码：

创建index.js

输入代码：

2.3 添加调用逻辑代码

回到上级目录，创建组件的index.js

输入代码：

再回到Game目录下，在Game.jsx中增加代码块

修改代码如下：

再到App文件夹下，修改App.jsx

此次修改如下，注意对比前后差别。

3 测试代码

因为这次会读取缓存信息。所以注意先清除下浏览器缓存，或者换一个浏览器。

如果没清除缓存的话，会自动跳到玩家信息页面。

在浏览器中输入网址查看：

输入正确的账号名和私钥后，登录可以看到当前玩家信息。

由于我们还没有比赛，输赢的数据都是零。

4 后记