Web3与智能合约交互实战

时间 2019-11-19

标签 web3 web 智能合约交互实战栏目 HTML 繁體版

原文原文链接

本文首发于深刻浅出区块链社区原文连接:Web3与智能合约交互实战原文已更新，请读者前往原文阅读css

写在前面

在最初学习以太坊的时候，不少人都是本身建立以太坊节点后，使用geth与之交互。这种使用命令行交互的方法虽然让不少程序员感到兴奋（黑客帝国的既视感？），但不可能期望普通用户经过命令行使用Dapp。所以，咱们须要一种友好的方式（好比一个web页面）来与智能合约交互，因而问题的答案就是web3.js。html

Web3.js

Web3.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）协议，整个通讯的模型能够抽象为下图。node

搭建测试链

在开发初期，咱们并无必要使用真实的公链，为了开发效率，通常选择在本地搭建测试链。在本文咱们选择的Ganache（在此以前使用的是testrpc，Ganache属于它的升级版），一个图形化测试软件（也有命令行版本），能够一键在本地搭建以太坊区块链测试环境，而且将区块链的状态经过图形界面显示出来，Ganache的运行界面以下图所示。jquery

从图中能够看到Ganache会默认建立10个帐户，监听地址是http://127.0.0.1:7545，能够实时看到Current Block、Gas Price、Gas Limit等信息。git

建立智能合约

目前以太坊官方全力支持的智能合约开发环境是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，这里对这三个选项作一简单说明：github

Javascript VM：简单的Javascript虚拟机环境，纯粹练习智能合约编写的时候能够选择
Injected Web3：链接到嵌入到页面的Web3，好比链接到MetaMask
Web3 Provider：链接到自定义的节点，如私有的测试网络。

若是链接成功，那么在下面的Account的选项会默认选择 Ganache 建立的第一个帐户地址。接下来咱们点击Create就会将咱们的智能合约部署到咱们的测试网中。接下来 Remix 的页面不要关闭，在后面编写前端代码时还要用到合约的地址以及ABI信息。web

安装Web3

在这以前，先在终端建立咱们的项目：npm

> 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 实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="main.css">

    <script src="./node_modules/web3/dist/web3.min.js"></script>

</head>
<body>
    <div class="container">

        <h1>Info Contract</h1>

        <h2 id="info"></h2>

        <label for="name" class="col-lg-2 control-label">Name</label>
        <input id="name" type="text">

        <label for="name" class="col-lg-2 control-label">Age</label>
        <input id="age" type="text">

        <button id="button">Update Info</button>


    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    <script>
       // Our future code here..
    </script>

</body>
</html>

接下来须要编写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 建立好以后，在<script>标签中间编写web.js的代码与智能合约交互。首先建立web3实例，并与咱们的测试环境链接：

<script>
    if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
    } else {
        // set the provider you want from Web3.providers
        web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));
    }
</script>

这段代码是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)

☛ 深刻浅出区块链 - 系统学习区块链，打造最好的区块链技术博客。

☛ 个人知识星球为各位解答区块链技术问题，欢迎加入讨论。

☛ 关注公众号“深刻浅出区块链技术”第一时间获取区块链技术信息。