EOS [从零开始 DAPP 开发] 21 - 使用 eosjs Api 和 JsonRpc 完成微文评论功能

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

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

上一篇文章完成了微文DAPP的点赞功能,这篇文章介绍评论功能的实现过程。

微文评论

有了之前写的项目框架,现在添加新的功能就比较简单了,目前的项目结构如下图所示:

和其他与EOS区块链交互的接口一样,在src/api/service.js中新建评论相关的接口comment:

内部调用pushAction向EOS区块链发送交易。

在src/components/Posts.js中编写评论相关的前端代码,评论使用的antd组件是,点击每条微文的评论图标,弹出对话框:

实现代码如下:

showModal内部调用src/api/fetch.js提供的fetchAll接口,获取保存在multi_index表中的评论数据,用于评论列表的展示;

要注意这里调用fetchAll传递了参数:

{
  index_position: 2,
  lower_bound: item.id,
  upper_bound: item.id,
}

index_position表示用来查询数据的索引编号,1表示使用主键,2及2以后表示使用二级索引查询,根据合约中multi_index表中索引的定义顺序确定:

//评论表
TABLE commenttable {
  uint64_t id;              //自增id
  uint64_t post_id;         //微文id
  name author;              //评论者
  time_point_sec time;      //创建时间
  std::string content;      //评论内容
  asset balance;            //获得代币数
  uint32_t like_num;        //获得赞数
  bool has_parent;          //是否有父级评论
  uint64_t pid;             //父级评论id
  name reply_to;            //回复 @账户名:xxx 

  uint64_t primary_key() const { return id; }
  uint64_t get_secondary_1() const { return post_id; }
  uint64_t get_secondary_2() const { return author.value; }
};

评论表的索引定义顺序为id、post_id、author.value,因此2表示使用post_id(微文id)查询,再通过指定lower_bound和upper_bound就能查询到指定微文的评论数据。

对话框组件的使用方法如下:

在输入框填写评论内容,点击“回复”按钮,调用Scatter发送请求:

实现代码如下:

调用src/api/service中定义的comment接口,把评论内容保存到EOS区块链。

微文的评论列表显示在微文下方:

原本设计的是评论也可以被点赞,实现逻辑和微文点赞是一样的,只是前端代码的变化,这里就省略了,读者如果感兴趣可以自行完成这个功能。

Tips

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

更多内容

EOS开发系列目录

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