以太坊智能合约开发第七篇:智能合约与网页交互

原文发表于: 以太坊智能合约开发第七篇:智能合约与网页交互

上一篇中,我们通过truffle开发框架快速编译部署了合约。本篇,我们将来介绍网页如何与智能合约进行交互。

编写网页

首先我们需要编写一个网页。打开 smartcontract/app/index.html 文件,修改 head 区代码如下:


  Hello - Truffle
  
  
  
  
  
  
  

修改 body 区代码如下:


  
  

网页呈现效果如下图:
以太坊智能合约开发第七篇:智能合约与网页交互_第1张图片

修改启动脚本

smartcontract/app/javascripts/app.js 脚本文件是智能合约与网页交互的核心,修改代码如下:

//导入CSS
import "../stylesheets/app.css";
//导入web3和truffle-contract库
import { default as Web3} from 'web3';
import { default as contract } from 'truffle-contract'

//导入Hello合约的ABI文件
import Hello_artifacts from '../../build/contracts/Hello.json'
//获取Hello合约对象
var HelloContract = contract(Hello_artifacts);

window.App = {
  init: function() {
    //设置web3连接
    HelloContract.setProvider(web3.currentProvider);
  },

  //封装合约中的say()方法调用过程,供javascript调用
  say: function(name, callback){
    //instance为Hello合约部署实例
    HelloContract.deployed().then(function(instance){
      //调用Hello合约中的say()方法,并传入参数name
      instance.say.call(name).then(function(result){
        //将返回结果传入回调函数
        callback(null, result);
      });
    }).catch(function(e){
      console.log(e, null);
    });
  }
};

window.addEventListener('load', function() {
  //设置web3连接  http://127.0.0.1:7545 为Ganache提供的节点链接
  window.web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:7545"));
  App.init();
});

前面的篇幅中,我们提到过 web3模块是以太坊提供的工具包,主要用于与合约的通信。从上面的代码中,我们可以看到,通过Hello合约的ABI文件获取到合约对象之后,再配合web3工具,就可以与Hello合约进行通信了。其中 App.say() 是对Hello合约中say()方法的调用过程进行了封装,方便前端代码进行调用。

智能合约与网页交互

启动脚本修改完了之后,就需要与网页进行整合。我们再返过来继续修改 smartcontract/app/index.html 文件。在文件末尾添加如下交互代码:

接下来,就是见证奇迹的时刻。
smartcontract 目录下执行 npm run dev
以太坊智能合约开发第七篇:智能合约与网页交互_第2张图片

注意图中标识的部分。http://locahost:8083 为网页访问地址(每个人运行的端口号可能不一样)。我们也能看出,truffle开发框架集成了 webpack 工具,对网页中包含的静态资源文件进行了打包。

最后,我们通过浏览器打开 http://locahost:8083 来测试下效果:
以太坊智能合约开发第七篇:智能合约与网页交互_第3张图片

至此,一个简单的Dapp应用示例就此完成了。我们也熟练掌握了通过truffle开发框架编写合约代码、快速编译部署、构建Dapp的整个过程。

我的专栏:智能合约
智能合约开发QQ群:753778670
以太坊智能合约开发第七篇:智能合约与网页交互_第4张图片

你可能感兴趣的:(区块链,以太坊,solidity,智能合约)