WEB页面访问以太坊智能合约--使用Web3

最新推荐文章于 2025-08-01 12:32:24 发布

原创最新推荐文章于 2025-08-01 12:32:24 发布 · 4.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#ethereum #web3 #solidity #smart contract

区块链专栏收录该内容

6 篇文章

订阅专栏

准备工作

使用remix IDE开发智能合约代码,并部署合约到测试链上。请参考《使用remix发布智能合约》
安装Ganache，使用Ganache模拟一个以太坊坊节点。请参考《Ganache模拟以太坊区块链节点》

Web3简介

Web3JS是以太坊官方的Javascript API库的集合，通过web3可以开发出用户友好的去中心化应用，Web3与以太坊节点通信实现了 JSON-RPC协议，这是一种轻量级的RPC（Remote Procedure Call）协议，整个通信的模型可以抽象为下图。

安装Web3

安装web3之前，需要先安装nodejs和npm，如果不知道怎么安装的可以参考《使用ganche模拟以太坊节点》，里边有介绍到。进入nodejs命令行终端，输入下面命令，创建web3userinfo项目，我们把项目放在e盘，当然也可以放到其它位置上：

D:\ProgramFiles\blockchain\nodejs>e:                                                                                             
E:\>mkdir web3useinfo                                                                                                                     
E:\>cd web3useinfo

然后，使用 node.js 的包管理工具 npm 初始化项目：

E:\web3useinfo>npm init

下来一路回车完成package.json文件的创建，这个文件用来定义项目基本信息包括项目名称，版本，作者等。接下来，使用下面的命令来安装web3js：

E:\web3useinfo>npm install web3@^0.20.0

以节点模块的方式引入web3，所以安装完成后项目文件里多了一个node_modules文件，文件夹里边就是web3相关的js函数库。

注意：“npm install web3@^0.20.0”，安装0.20.0版本的web3，如果按照官网命令“npm install web3”，安装最新的版本，到目前为止，是无法完成安装的。

创建界面

在项目目录下创建index.html，在这里我们将创建前端界面，功能包括姓名和年龄的输入框，以及一个按钮，这些将通过 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><!—引入web3-->
 
 </head>
 <body>
     <div class="container">
 
         <h1>用户信息智能合约</h1>
 
         <h2 id="info"></h2>
 
         <label for="name" class="col-lg-2  control-label">姓名</label>
         <input id="name" type="text">
 
         <label for="name" class="col-lg-2  control-label">年龄</label>
         <input id="age" type="text">
 
         <button id="button">更新信息</button>
 
     </div>
     <script  src="./node_modules/ jquery-3.2.1/jquery-3.2.1.slim.min.js"></script>
     <script  src=”./app/index.js”>
        // 引入更新和读取智能合约的代码
     </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;

}
#instructor {

    padding:1em;

    background-color:#fff;

    margin: 1em 0;

}

到此页面已经准备好了。
编写交互的代码
使用Web3与智能合约交互，在项目根目录下新建文件./app/index.js，修改html页面的<script src=”./app/index.js”></scrip>脚本，引入交互的代码。
可以开始编写在index.js代码，首先创建web3实例，并连接我们的GANACHE以太坊节点：

if (typeof web3 !== 'undefined') {
         web3 = new  Web3(web3.currentProvider); //可以用来连接metamask  Provider
     } else {
         // 创建新的provider,连接本地以太坊节点，我们可以连接ganache作为模拟节点

        web3 = new Web3(new  Web3.providers.HttpProvider("http://localhost:7545"));
     }

上面代码作用是如果web3已经被定义，那么就可以直接当作我们的provider 使用。如果没有定义，则我们手动指定 provider。

在上面代码的基础上，接下来设置默认的以太坊账户：

web3.eth.defaultAccount = web3.eth.accounts[0];

Ganache安装完成后，默认自动创建了 10 个账户了提供给我们使用，这里我们选择第一个账户当作默认账户。

接下来需要获取合约的 ABI（Application Binary Interface）和合约地址,简单来说，合约地址是用来区分不同合约的，而ABI是用来定义合约拥有什么的功能。只有知道了合约的地址和ABI才可以和合约进行交互。假设已经发布了UserInfoContract合约，并获取到ABI后，把ABI粘贴到下面方法里。

var userInfoContract = web3.eth.contract(粘贴合约ABI);

如果没有发布UserInfoContract合约，可以参考《使用remix发布智能合约》。接下来拷贝合约的地址，将其复制到下面的代码中：

var userInfo = userInfoContract.at('粘贴合约地址');

完成这些我们就可以调用合约中的函数了，下面使用 jQuery 与我们的合约进行交互：

serInfo.getUser(function(error, result){
     if(!error)
         {
             $("#info").html(result[0]+' ('+result[1]+' 岁 )');
             console.log(result);
         }
     else
         console.error(error);
 });
 
 $("#button").click(function() {
     info.setUser($("#name").val(), $("#age").val());
 });

以上的代码就简单地实现了对合约中两个函数的调用，分别读取和显示姓名（userName）和年龄（userAge）变量。
到此我们就完成了全部的代码， index.html测试效果如下图（输入名字和年龄后刷新）。

总结一下，通过这一课程，介绍了使用web3js，web页面和智能合约进行交互。

参考文献

Interacting with a Smart Contract through Web3.js :
(Tutorial)) https://coursetro.com/posts/code/99/Interacting-with-a-Smart-Contract-through-Web3.js-(Tutorial