EOS [从零开始 DAPP 开发] 17 - 使用 JsonRpc 从 EOS 区块链获取用户信息并展示

pendingauth · 2019年09月02日 · 31 次阅读

本文转载自币乎,作者松果,原文链接:https://bihu.com/article/1337095219

JsonRpc

JsonRpc是eosjs库提供的用于和区块链交互的RPC接口,定义方式如下:

const url = network.protocol + '://' + network.host + ':' + network.port;
const rpc = new JsonRpc(url, { fetch })

上一篇文章中,已经在src/api/config.js中把它导出了,会被主界面用来获取用户信息并展示。

目前的项目结构如图所示:

在src/api目录下新增了fetch.js,封装了使用JsonRpc查询multi_index表(get_table_rows)的能力,代码如下:

fetch.js中定义了两个方法:fetchAll、fetchOne,分别用于获取多条或(通过主键)一条数据,内部都调用了rpc.get_table_rows来查询multi_index数据表,并返回查询到的数据。

react-router-dom

为了使项目支持链接跳转,需要安装一个React路由模块:

npm install react-router-dom --save

安装好后,目前package.json中的dependencies如下:

除去React自带的react、react-dom、react-scripts外,已安装13个第三方模块。

App.js中,render函数返回的组件的最外层再包一层react-router-dom提供的组件,这样子组件就能支持链接跳转,通过组件实现。

用户信息界面

在src目录下新建pages目录,用于保存界面相关的代码;

在src/pages目录下新建user目录,并在定义一个组件,用于展示用户信息;

组件是组件的子组件,通过属性传值的方式,组件把从store中获取的logged和user的值传给组件。

render函数会重新渲染界面,代码如下:

使用antd(Ant Design)库提供的、、、等组件,可以很方便的搭建出界面。

运行效果如下,未登录时:

登陆后:

Tips

目前只完成了用户信息的展示,用户信息的右侧区域会用来展示微文列表,项目代码在Github同步更新:https://github.com/songguo6/weiwen-dapp

更多内容

EOS开发系列目录

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册