Web3与智能合约交互实战

链客，专为开发者而生，有问必答！

此文章来自链客区块链技术问答社区，未经允许拒绝转载。

以太坊中智能合约和web3交互实战

最近区块链、以太坊十分的火，所有就会有许多人去进入区块链这个工作，也有许多人去学习。所以在开端学习以太坊的时分，许多人都是自己创建以太坊节点后，运用geth交互。但是不能盼望普通用户经过指令运用dapp。因此我们需求一种友爱的方法来与智能合约交互，那么这种问题的答案便是web3.js。

Web3.js

Web3.js是以太坊官方的API，可以帮忙智能合约开发者运用HTTP或许IPC与本地、长途的以太坊节点交互。实践就一个库的调集。当然了也包括几个库，比如：

web3-eth用来与以太坊区块链和智能合约交互

web3-shh用来控制whisper协议与p2p通讯以及播送

web3-bzz用来与swarm协议交互

web3-utils包括了一些Dapp开发有用的功用

Web3与geth通讯运用的是 JSON-RPC ，这是一种轻量级的RPC协议，整个通讯的模型可以抽象为下图。

树立检验链

在开发的初期的时分，我们并不用用实在的公链，为了开发的效率，一般都是用本地树立检验链。在这儿我们就挑选用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

创建 UI

在项目目录下创建index.html，在这儿我们将创建基础的 UI，功用包括name和age的输入框，以及一个按钮，这些将经过 jQuery 结束：

Document

Info Contract

    Name



    Age



    Update Info

接下来需求编写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.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检验效果如下图（输入名字和年龄后改写）。

毕竟也说了，最近区块链以太坊都很火，也就会有许多衍生的使用，需求我们去多学习学习笔记那个跟上节奏嘛。今日就讲到这儿，因此我们需求一种友爱的方法来与智能合约交互，那么这种问题的答案便是web3.js。所以可以仔细仔细看一看，期望对我们有些帮忙。