【智能合约】客户端和web端对智能合约的事件Event进行调用的代码示例

简介: 客户端和web端对智能合约的事件Event进行调用的代码示例web truffle按官网的例子 http://truffleframework.com/boxes/pet-shoptruffle作为一个运行测试框架,用的也是web3对智能合约进行调用。

客户端和web端对智能合约的事件Event进行调用的代码示例

web truffle

按官网的例子

http://truffleframework.com/boxes/pet-shop

truffle作为一个运行测试框架,用的也是web3对智能合约进行调用。

文件所在的位置src/js/app.js


  initWeb3: function() {

      // web3入口
      if (typeof web3 !== 'undefined') {
          App.web3Provider = web3.currentProvider;
      } else {
          // 测试网络
          App.web3Provider = new Web3.providers.HttpProvider('http://localhost:8588'); //这里是我指定的端口88
      }
      web3 = new Web3(App.web3Provider);

    return App.initContract();
  },

初始化智能合约的时候,用了truffle自己编译的json文件进行调用

  initContract: function() {
      //加载Adoption.json
      $.getJSON('Adoption.json', function(data) {
          // 智能合约实例化
          var AdoptionArtifact = data;
          App.contracts.Adoption = TruffleContract(AdoptionArtifact); //赋值到App.contracts下的节点数据

          // 设置合约提供者
          App.contracts.Adoption.setProvider(App.web3Provider);

          // 检索操作
          return App.markAdopted();
      });

    return App.bindEvents();//执行事件绑定
  },

事件绑定是这么实现的

  bindEvents: function() {
    $(document).on('click', '.btn-adopt', App.handleAdopt);
  },

其中btn-adopt对应的是src/index.html中的按钮

 <button class="btn btn-default btn-adopt" type="button" data-id="0">Adopt</button>

运行环境后,进行元素检查,发现按钮绑定了事件

这里写图片描述

被绑定的方法在js文件的下面做定义。

  handleAdopt: function() {
    event.preventDefault();//该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)

    var petId = parseInt($(event.target).data('id'));

      var adoptionInstance;

      web3.eth.getAccounts(function(error, accounts) { //本质还是web3调用
          if (error) {
              console.log(error);
          }

          var account = accounts[0];

          App.contracts.Adoption.deployed().then(function(instance) {
              adoptionInstance = instance;

              // Execute adopt as a transaction by sending account
              return adoptionInstance.adopt(petId, {from: account});
          }).then(function(result) {
              return App.markAdopted(); //成功了就把按钮禁用
          }).catch(function(err) {
              console.log(err.message);
          });
      });
  }

  markAdopted: function(adopters, account) {
      //实例
      var adoptionInstance;


      App.contracts.Adoption.deployed().then(function(instance) {
          adoptionInstance = instance;

          return adoptionInstance.getAdopters.call();
      }).then(function(adopters) {
          for (i = 0; i < adopters.length; i++) {
              if (adopters[i] !== '0x0000000000000000000000000000000000000000') {
                  $('.panel-pet').eq(i).find('button').text('Success').attr('disabled', true);
              }
          }
      }).catch(function(err) {
          console.log(err.message);
      });
  },

总结:web端的智能合约使用技术栈为 Node + truffle + web3 ,能完成完整的编写,测试,部署。

客户端 java web3j

项目开源地址为 https://github.com/web3j/web3j

由于web3j的作用和web3一样,都是对智能合约进行部署调用。

客户端 java qtum-android

量子链官方钱包客户端并没有使用web3j,而是自己写的库。

项目地址为 https://github.com/qtumproject/qtum-android

文件为位置 app/src/main/java/org/qtum/wallet/utils/ContractBuilder.java

目录
相关文章
|
2月前
|
SQL 开发框架 .NET
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
33 0
|
2月前
|
JavaScript 前端开发 API
「深入探究Web页面生命周期:DOMContentLoaded、load、beforeunload和unload事件」
在 Web 开发中,了解页面生命周期是非常重要的。页面生命周期定义了页面从加载到卸载的整个过程,包括各种事件和阶段。在本文中,我们将详细介绍四个关键事件:DOMContentLoaded、load、beforeunload 和 unload。我们将探讨这些事件的属性、API、应用场景,并提供一些代码示例和参考资料。
|
3月前
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
58 0
|
3月前
|
Ubuntu 网络协议 Linux
EVE-NG初次启动及WEB客户端访问
本章从虚拟机Eve模拟器启动、模拟器的启动配置、浏览器访问三个步骤讲解EVE-NG的首次启动。 1.启动模拟器 打开虚拟机环境,启动安装好的EVE-NG虚拟机,进入如下界面。
|
3月前
|
移动开发 网络协议 JavaScript
web客户端websocket
web客户端websocket
122 1
|
3月前
|
Ubuntu 网络协议 Linux
EVE-NG初次启动及WEB客户端访问
本章从虚拟机Eve模拟器启动、模拟器的启动配置、浏览器访问三个步骤讲解EVE-NG的首次启动。 1.启动模拟器 打开虚拟机环境,启动安装好的EVE-NG虚拟机,进入如下界面。
|
4月前
|
SQL 存储 前端开发
Presto【部署 01】Presto服务安装配置启动验证及客户端web工具Yanagishima安装配置验证(详细配置说明+Yanagishima已编译文件分享)
Presto【部署 01】Presto服务安装配置启动验证及客户端web工具Yanagishima安装配置验证(详细配置说明+Yanagishima已编译文件分享)
84 0
|
5月前
|
数据采集 JavaScript 前端开发
超越React,JS代码体积减少90%!它为何是2023年最好的Web框架?
超越React,JS代码体积减少90%!它为何是2023年最好的Web框架?
|
9月前
|
移动开发 JavaScript 前端开发
扛着锄头写代码之vuejs和nodejs搞起web app系列
上次为了vue.js实现web app看的nodejs,首先感谢上次各位大神对nodejs初识不足的指点。本次烟纠了个小小的Demo,来总结和提疑。
73 0
扛着锄头写代码之vuejs和nodejs搞起web app系列
|
9月前
|
开发框架 前端开发 搜索推荐
作为一个学会智能合约的前端开发者,该如何找到 Web3 工作?
作为一个学会智能合约的前端开发者,该如何找到 Web3 工作?