摘要：本文首发于深入浅出区块链社区原文链接与智能合约交互实战原文已更新，请读者前往原文阅读写在前面在最初学习以太坊的时候，很多人都是自己创建以太坊节点后，使用与之交互。
本文首发于深入浅出区块链社区
原文链接:Web3与智能合约交互实战原文已更新，请读者前往原文阅读
在最初学习以太坊的时候，很多人都是自己创建以太坊节点后，使用geth与之交互。这种使用命令行交互的方法虽然让很多程序员感到兴奋（黑客帝国的既视感？），但不可能指望普通用户通过命令行使用Dapp。因此，我们需要一种友好的方式（比如一个web页面）来与智能合约交互，于是问题的答案就是web3.js。
Web3.jsWeb3.js是以太坊官方的Javascript API，可以帮助智能合约开发者使用HTTP或者IPC与本地的或者远程的以太坊节点交互。实际上就是一个库的集合，主要包括下面几个库：
web3-eth用来与以太坊区块链和智能合约交互
web3-shh用来控制whisper协议与p2p通信以及广播
web3-bzz用来与swarm协议交互
web3-utils包含了一些Dapp开发有用的功能
Web3与geth通信使用的是 JSON-RPC ，这是一种轻量级的RPC（Remote Procedure Call）协议，整个通信的模型可以抽象为下图。
搭建测试链在开发初期，我们并没有必要使用真实的公链，为了开发效率，一般选择在本地搭建测试链。在本文我们选择的Ganache（在此之前使用的是testrpc，Ganache属于它的升级版），一个图形化测试软件（也有命令行版本），可以一键在本地搭建以太坊区块链测试环境，并且将区块链的状态通过图形界面显示出来，Ganache的运行界面如下图所示。
从图中可以看到Ganache会默认创建10个账户，监听地址是http://127.0.0.1:7545，可以实时看到Current Block、Gas Price、Gas Limit等信息。
创建智能合约目前以太坊官方全力支持的智能合约开发环境是Remix IDE，我们在合约编辑页面编写如下代码：
pragma solidity ^0.4.21;
contract InfoContract {
string fName;
uint age;
function setInfo(string _fName, uint _age) public {
fName = _fName;
age = _age;
}
function getInfo() public constant returns (string, uint) {
return (fName, age);
}
}
代码很简单，就是简单的给name和age变量赋值与读取，接下来切换到 run 的 tab 下，将Environment切换成Web3 Provider，并输入我们的测试链的地址http://127.0.0.1:7545，这里对这三个选项做一简单说明：
Javascript VM：简单的Javascript虚拟机环境，纯粹练习智能合约编写的时候可以选择
Injected Web3：连接到嵌入到页面的Web3，比如连接到MetaMask
Web3 Provider：连接到自定义的节点，如私有的测试网络。
如果连接成功，那么在下面的Account的选项会默认选择 Ganache 创建的第一个账户地址。接下来我们点击Create就会将我们的智能合约部署到我们的测试网中。接下来 Remix 的页面不要关闭，在后面编写前端代码时还要用到合约的地址以及ABI信息。
安装Web3在这之前，先在终端创建我们的项目：
> mkdir info > cd info
接下来使用 node.js 的包管理工具 npm 初始化项目，创建package.json 文件，其中保存了项目需要的相关依赖环境。
> npm init
一路按回车直到项目创建完成。最后，运行下面命令安装web.js：
> npm install web3
注意： 在实际安装过程中我发现web3在安装完成后并没有 /node_modules/web3/dist/we3.min.js 文件，这个问题在 issue#1041中有体现，但官方好像一直没解决。不过可以在这里下载所需的文件，解压后将dist文件夹的内容拷贝到 /node_modules/web3路径下。创建 UI
在项目目录下创建index.html，在这里我们将创建基础的 UI，功能包括name和age的输入框，以及一个按钮，这些将通过 jQuery 实现：
Document
Info Contract
接下来需要编写main.css文件设定基本的样式：
body {
background-color:#F0F0F0;
padding: 2em;
font-family: "Raleway","Source Sans Pro", "Arial";
}
.container {
width: 50%;
margin: 0 auto;
}
label {
display:block;
margin-bottom:10px;
}
input {
padding:10px;
width: 50%;
margin-bottom: 1em;
}
button {
margin: 2em 0;
padding: 1em 4em;
display:block;
}
#info {
padding:1em;
background-color:#fff;
margin: 1em 0;
}
使用Web3与智能合约交互
UI 创建好之后，在
这段代码是web3.js Github提供的样例，意思是如果web3已经被定义，那么就可以直接当作我们的 provider 使用。如果没有定义，则我们手动指定 provider。
这里可能会存在疑问：为什么 web3 会被事先定义呢？实际上，如果你使用类似 MetaMask（一个 Chrome 上的插件，迷你型以太坊钱包）这样的软件，provider 就会被自动植入。
在上面代码的基础上，接下来设置默认的以太坊账户：
web3.eth.defaultAccount = web3.eth.accounts[0];
在上文中我们使用 Ganache 已经创建了 10 个账户了，这里我们选择第一个账户当作默认账户。
接下来需要让我们的web3知道我们的合约是什么样的，这里需要用到合约的 ABI（Application Binary Interface）。ABI可以使我们调用合约的函数，并且从合约中获取数据。
在上文中我们已经在 Remix 中创建了我们的合约，这时重新回到 Remix，在 Compile 的 tab 下我们点击Details 出现的页面中我们可以拷贝合约的ABI，如下图所示。
将其复制到代码中：
var infoContract = web3.eth.contract(PASTE ABI HERE!);
接下来转到 run 的tab，拷贝合约的地址，将其复制到下面的代码中：
var info = InfoContract.at("PASTE CONTRACT ADDRESS HERE");
完成这些我们就可以调用合约中的函数了，下面我们使用 jQuery 与我们的合约进行交互：
info.getInfo(function(error, result){
if(!error)
{
$("#info").html(result[0]+" ("+result[1]+" years old)");
console.log(result);
}
else
console.error(error);
});
$("#button").click(function() {
info.setInfo($("#name").val(), $("#age").val());
});
以上的代码就简单地实现了对合约中两个函数的调用，分别读取和显示name和age变量。
到此我们就完成了全部的代码，完整代码可以在 InfoContract 中找到。在浏览器中打开index.html测试效果如下图（输入名字和年龄后刷新）。
本文的作者是盖盖，他的微信公众号: chainlab
参考文献Interacting with a Smart Contract through Web3.js (Tutorial))
☛ 深入浅出区块链 - 系统学习区块链，打造最好的区块链技术博客。
☛ 我的知识星球为各位解答区块链技术问题，欢迎加入讨论。
☛ 关注公众号“深入浅出区块链技术”第一时间获取区块链技术信息。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/24095.html
摘要：什么是事件事件是以太坊虚拟机日志基础设施提供的一个便利接口。在的应用中，如果监听了某事件，当事件发生时，会进行回调。不过要注意日志和事件在合约内是无法被访问的，即使是创建日志的合约。使用监听事件，刷新现在需要使用监听事件，刷新。 本文首发于深入浅出区块链社区原文链接:搞懂 Solidity 事件 Event - 如何在 DApp 中使用原文已更新，请读者前往原文阅读 很多同学对Soli...
摘要：是企业与区块链相遇的地方。的框架旨在成为开发区块链解决方案的支柱。以太坊，主要是针对工程师使用进行区块链以太坊开发的详解。 如果你想将区块链合并到一个Java项目中，现在我们来看看就是这个细分领域中三个最大的OSS玩家。 好的伙计们，我们都听说过比特币，以太坊或其他加密货币，其中有一些时髦的名字围绕着我们常见的新闻，但我们作为Java开发人员知道如何轻松地与这些区块链技术进行交互吗？以...
摘要：首先我们需要要记住，以太坊是由共享同一份数据的相同拷贝的节点构成的。你可以运行你自己的以太坊节点来作为。在你部署智能合约以后，它将获得一个以太坊上的永久地址。如果你还记得第二课，在以太坊上的地址是。 通过前边的学习，DApp 的 Solidity 合约部分就完成了。现在我们来做一个基本的网页好让你的用户能玩它。 要做到这一点，我们将使用以太坊基金发布的 JavaScript 库 —— ...
摘要：目前通常指代基于以太坊或者上的智能合约开发的相关应用。引入以太坊通过的交互流程大致如下总结随着区块链近些年的大红大紫，被推上了风口浪尖，本文从技术的角度大致介绍了一下所涉及的技术要点。 当你开始探索区块链开发，需要了解到这些。 showImg(https://segmentfault.com/img/remote/1460000016608233?w=1370&h=389); 一、DA...
摘要：合约编写可以看出合约需要实现用户投注生成随机数发放奖励奖池余额查询的功能，接下来编写我们的合约代码。总结当前随机数的实现通过链上信息生成，这种生成随机数的方式容易受到不诚实的节点攻击。 导读：本文旨在引导对 DApp 开发感兴趣的开发者，构建一个基于以太坊去中心化应用，通过开发一款功能完备的竞猜游戏，迈出 DApp 开发的第一步，通过实例讲解 Solidity 语言的常用语法，以及前端...
阅读 2857·2021-09-22 15:59
阅读 1196·2021-08-30 09:46
阅读 2127·2019-08-30 15:54
阅读 1856·2019-08-26 12:15
阅读 2384·2019-08-26 12:09
阅读 1197·2019-08-26 11:57
阅读 3222·2019-08-23 17:11
阅读 1759·2019-08-23 15:59
