EOS [从零开始 DAPP 开发] 19 - 使用 eosjs Api 和 JsonRpc 完成微文发布和列表功能

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

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

这篇文章继续进行微文DAPP的前端界面开发,使用eosjs提供的Api和JsonRpc,完成微文发布和微文列表展示的功能。

发布微文

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

src/App.js中的render函数代码如下:

把原来的业务逻辑拆分到了不同组件中,代码放在src/components目录:

  • < Header>组件:主要包括几个Button:登录/注销、签到领币、发微文;

  • < User>组件:展示用户信息;

  • < Posts>组件:展示已发布的微文列表。

运行效果如下:

点击“写微文”按钮,弹出对话框:

编辑好微文内容后,点击提交调用Scatter发送交易:

在微文列表可以看到新发布的微文:

发布微文的业务逻辑代码写在src/api/service.js中:

export const post = async (content, attachtype, attachment, callback) => {
  const logged = store.getState().logged;
  try{
    const res = await pushAction(logged.name, logged.authority, 'post', {
      author: logged.name,
      content,
      attachtype,
      attachment,
    });
    callback(res);
  }catch(error){
    callback(error);
  }
}

调用了pushAction函数向EOS区块链发起交易。

src/components/Header.js完成了微文发布的界面逻辑(还包括其他两个Button:登录/注销、签到领币),主要使用如下Ant Design组件搭建:

import { Layout, Button, Modal, Input, Radio, Select } from 'antd';


微文列表

微文列表被封装成了一个组件:src/components/Posts.js,主要使用Ant Design的组件实现;

数据管理使用了原生的state,这里使用state,是因为数据只在组件中使用,如果涉及到多个组件共享数据的情况,则使用Redux。

在React的生命周期回调函数componentDidMount中,使用fetchAll来获取保存在EOS区块链上的数据:

fetchAll封装了JsonRpc的get_table_rows函数,用来查询multi_index表的数据,现在eosjs的get_table_rows已支持倒序查询,指定reverse参数为true即可:

export const fetchAll = async (table, options) => {
  const res = await rpc.get_table_rows({
    json: true,             
    code: contract,     
    scope: contract,      
    table,        
    limit: 9999,       
    reverse: true,              
    ...options,   
  });
  return res.rows;
}

微文列表中的每一项(List.Item)都会展示发文时间,这里使用了第三方node模块:momentjs,安装方法如下:

npm install moment --save

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

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

momentjs的使用也很简单,会根据不同的时间格式显示时间:

import moment from 'moment';    

<em>{moment(item.time).format('YYYY-MM-DD HH:mm:ss')}</em>


Tips

项目代码在Github同步更新:https://github.com/songguo6/weiwen-dapp

更多内容

EOS开发系列目录

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