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

sherlock221 发布于2019-06-27 18:23 / 3518人阅读

摘要：原文发表于以太坊智能合约开发第七篇智能合约与网页交互上一篇中，我们通过开发框架快速编译部署了合约。智能合约与网页交互启动脚本修改完了之后，就需要与网页进行整合。

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

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

编写网页

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


  Hello - Truffle

修改 body 区代码如下：

网页呈现效果如下图：

修改启动脚本

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 ：

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

最后，我们通过浏览器打开 http://locahost:8083 来测试下效果：

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

我的专栏：智能合约
智能合约开发QQ群：753778670

私有云服务器托管区块链智能合约开发智能合约区块链智能合约技术以太坊与区块链

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/24054.html

python使用web3py与以太坊智能合约交互

摘要：合约规定了公共职能部门，以创造新的投资和撤资，这将成为对冲基金的主要职能。对冲基金的用户通过其以太坊地址来识别，该地址相当于公钥。我发现与其他程序如程序的以太坊智能合约进行交互的最简单方法是使用他们的。在以太坊和其他区块链中，仍有很多被证明的概念正在实施，开发人员在尝试如何应对这些新概念。作为dInvest 系列文章一部分，我也在研究以太坊并尝试在区块链中实施对冲基金。在上一篇文章中...

Joyven 2019-07-30 17:48 评论0 收藏0
以太坊智能合约开发第二篇：理解以太坊相关概念

摘要：原文发表于以太坊智能合约开发第二篇理解以太坊相关概念很多人都说比特币是区块链，以太坊是区块链。它是以太坊智能合约的运行环境。是由以太坊节点提供。以太坊社区把基于智能合约的应用称为去中心化的应用。原文发表于：以太坊智能合约开发第二篇：理解以太坊相关概念很多人都说比特币是区块链1.0，以太坊是区块链2.0。在以太坊平台上，可以开发各种各样的去中心化应用，这些应用构成了以太坊的整个生态...

yibinnn 2019-06-27 18:20 评论0 收藏0
工厂模式管理多个以太坊solidity智能合约

摘要：在新智能合约的构造函数中，将引用我们的合约工厂的地址。以太坊，主要是针对工程师使用进行区块链以太坊开发的详解。以太坊入门教程，主要介绍智能合约与应用开发，适合入门。这里是原文用工厂模式管理多个智能合约我们写了一份小的计算合约作为Hello World。如果我们可以创建一个允许用户创建自己的计数器的合约怎么办？ showImg(https://segmentfault.com/img/...

leone 2019-06-27 18:51 评论0 收藏0
以太坊、EOS和Hyperledger等不同区块链的比较

摘要：以太坊背后的主要人物是。以太坊通过在区块链上引入智能合约，彻底改变了加密世界。以太坊使用名为以太坊虚拟机的虚拟机执行其智能合约。以太坊最终将利用协议转向权益证明。截至目前，以太坊在可扩展性方面都失败了。不同的区块链智能合约和区块链技术现在风靡一时。越来越多的人出于某种原因试图进入这个神奇的世界。如果你是这项技术的新手并正在寻找基于区块链的开发平台的快速入门，那么本指南非常适合你。我们...

harriszh 2019-06-27 18:50 评论0 收藏0
以太坊是什么 - 以太坊开发入门指南

摘要：以太坊是什么以太坊是一个建立在区块链技术之上，去中心化应用平台。运行环境以太坊虚拟机是以太坊中智能合约的运行环境。是由以太坊客户端提供的是典型的开发以太坊时使用的客户端，基于语言开发。本文首发于深入浅出区块链社区原文链接:以太坊是什么 - 以太坊开发入门指南原文已更新，请读者前往原文阅读很多同学已经跃跃欲试投入到区块链开发队伍当中来，可是又感觉无从下手，本文将基于以太坊平台，以通俗...

tomlingtm 2019-06-27 18:24 评论0 收藏0