EOS [从零开始 DAPP 开发] 20 - 使用 eosjs Api 和 JsonRpc 完成微文点赞功能

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

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

使用区块链浏览器查询数据

微文DAPP的数据都是上链的,智能合约:weiwendappssweiwentokens部署在Jungle测试网,可以在EOS区块链浏览器中查询合约执行数据。

微文点赞

点赞是微文DAPP的核心功能,DAPP通证(WEI)主要就是通过点赞挖矿获得。

点赞在weiwendappss合约中的Action名为like,主要代码如下:

ACTION like(name author, uint32_t type, uint64_t type_id) {
  require_auth(author);

  check_user(author);
  check(type == TYPE_POST || type == TYPE_COMMENT, "invalid like type");
  check_liked(author, type, type_id);

  if(type == TYPE_POST){
    post_t posts(_self, _self.value);
    check(posts.find(type_id) != posts.end(), "post does not exist");

    update_like_data<post_t>(author, type_id);

  }else if(type == TYPE_COMMENT){
    comment_t comments(_self, _self.value);
    check(comments.find(type_id) != comments.end(), "comment does not exist");

    update_like_data<comment_t>(author, type_id);
  }

  like_t likes(_self, _self.value);
  likes.emplace(author, [&](auto& like){
    like.id = likes.available_primary_key();
    like.type = type;
    like.type_id = type_id;
    like.author = author;    
  });  
}

对于微文点赞和评论点赞,业务逻辑都是一样的,只是数据类型不同,因此可以用函数模板来实现这个功能,完成所有逻辑后,点赞数据被添加到liketable表中。

DAPP前端(frontend)代码结构如下:

在src/api/service.js中新增点赞相关的API:

like用于点赞,使用pushAction把点赞数据提交到EOS区块链;

isLiked用于判断某篇微文或评论是否已被当前用户赞过。

点赞前端逻辑代码写在src/components/Posts.js中,定义了handleLike函数处理点赞图标的OnClick触发的事件,代码如下:

内部调用了like函数发起交易。

点赞运行效果如下,点击微文下方的like图标,调用Scatter发送交易:

点赞成功后,作者和点赞者都获得收益,自己给自己点赞会记录点赞数,不会获得收益:

发布的微文被点赞时,作者获得的赞数和收益实时更新:

小结

到目前为止,微文DAPP已经完成一半以上的开发了,还有评论、关注、充值/提现功能的前端部分待完成;

智能合约已部署在Jungle测试网,全部功能完成后,会把前端代码部署到IPFS,这样就实现了真正的去中心化;

微文DAPP只是一个教程实例,还有很多功能缺陷和bug,目的是学习EOS DAPP开发,权当抛砖引玉,为EOS生态做一点贡献。

Tips

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

更多内容

EOS开发系列目录

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