HTML页面通过Web3JS连接智能合约并调用其中接口

最新推荐文章于 2024-09-21 01:24:13 发布
最新推荐文章于 2024-09-21 01:24:13 发布
阅读量2k 收藏 5
点赞数 2
文章标签： html web3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45966674/article/details/131654280
版权

之前我们学习solidity 并用它编写了智能合约 登上区块链 然后也做了基本的测试
但是 其实在web3时代 前端依旧扮演者非常重要的角色
我们现在就来打通web3 从合约到页面的一个管理

首先 我们还是将自己的ganache环境起起来
在这里插入图片描述
然后 在我们之前智能合约的项目终端执行

truffle migrate

将我们的智能合约部署上去
在这里插入图片描述
然后 我们用MetaMask 导入我们ganache环境的第一个用户
在这里插入图片描述
然后 我们拿个html文件 编写代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "./js/web3.min.js"></script>
</head>
<body>
    <script type="module">
      var web3 = new Web3(Web3.givenProvider || "http://localhost:8545");
      let account = await web3.eth.requestAccounts();

    </script>
</body>
</html>

注意 他这里引入的web3.min.js 你们需要本地确实有这个文件
然后 我们运行

他这里就会需要我们选择链接授权用户 我们选择刚刚导入的ganache账号在这里插入图片描述
然后 我们在html中改一下代码 输出一下返回结果
在这里插入图片描述
再次运行 他就会将授权账号返回回来
在这里插入图片描述
那么 这样 就确认我们已经拿到它的一个授权了

但是 目前来讲 只是连到了我们的区块链 能拿到一些信息 但是 我们要拿区块链上的智能合约
web3.eth中有一个Contract函数
他接受两个参数
第一个参数 abi
可能很多人都熟悉API ABI的话差不多
也是基本的接口或者函数 只是 他是一种二进制的 JSON的交互智能合约 会比API更原始一点
然后 第二个参数是address
address的作用比较关键 就是 一个区块链上能部署很多智能合约 那么 它为什么就要连接你的呢？
我们每次部署智能合约都会输出这里一个contract address 就是填在里面 帮他找到你的合约的
在这里插入图片描述
那么 address知道怎么传了
但是 这个ABI估计大家还是有点懵
他其实就是让你传入 要用的这个合约上的接口
我们打开智能合约项目 找到 根目录下 编译生成的 build 下的 contracts下的 StudentStorage.json
在这里插入图片描述
这个文件 上来我们就会看到 ABI
在这里插入图片描述
我们直接点击 左侧 这个小箭头 将这个abi收起来
在这里插入图片描述
然后 将这里面的整个数组 复制 作为Contract的第一个参数 abi
在这里插入图片描述
在这个数组中 我们也能找到之前写的一些函数的信息
在这里插入图片描述
但是这里需要提醒 每次你改了智能合约 从小部署 他都会重新编译 这个json的内容也会改，所以你每次都要改这里的abi参数

可能很多人非常麻烦 之后呢确实我们可以处理到同一个文件夹 然后 我们web程序直接导入这个json 去取他里面的这个数据就好了
但是 目前来讲 我们还是快速建立功能

其实 address 也可以在build 下的 contracts下的 StudentStorage.json中找到
在这里插入图片描述
如图所见 如果编译过多次 那么 就会有很多个在这 直接取最后一个就好了
因为肯定是最新的
在这里插入图片描述
我们 HTML参考代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "./js/web3.min.js"></script>
</head>
<body>
    <script type="module">
      var web3 = new Web3(Web3.givenProvider || "http://localhost:8545");
      let account = await web3.eth.requestAccounts();
      console.log(account);
      const StudentStorage = await new web3.eth.Contract([
            {
            "inputs": [
                {
                "internalType": "uint256",
                "name": "",
                "type": "uint256"
                }
            ],
            "name": "userList",
            "outputs": [
                {
                "internalType": "uint256",
                "name": "id",
                "type": "uint256"
                },
                {
                "internalType": "string",
                "name": "name",
                "type": "string"
                },
                {
                "internalType": "uint256",
                "name": "age",
                "type": "uint256"
                }
            ],
            "stateMutability": "view",
            "type": "function",
            "constant": true
            },
            {
            "inputs": [
                {
                "internalType": "string",
                "name": "name",
                "type": "string"
                },
                {
                "internalType": "uint256",
                "name": "age",
                "type": "uint256"
                }
            ],
            "name": "addtList",
            "outputs": [
                {
                "internalType": "uint256",
                "name": "",
                "type": "uint256"
                }
            ],
            "stateMutability": "nonpayable",
            "type": "function"
            },
            {
            "inputs": [],
            "name": "queryList",
            "outputs": [
                {
                "components": [
                    {
                    "internalType": "uint256",
                    "name": "id",
                    "type": "uint256"
                    },
                    {
                    "internalType": "string",
                    "name": "name",
                    "type": "string"
                    },
                    {
                    "internalType": "uint256",
                    "name": "age",
                    "type": "uint256"
                    }
                ],
                "internalType": "struct StudentStorage.userData[]",
                "name": "",
                "type": "tuple[]"
                }
            ],
            "stateMutability": "view",
            "type": "function",
            "constant": true
            }
        ],
        "0x9d80C47da52731Df5649Ff81f8EAB664c0c80429"
    );
    console.log(StudentStorage);
    </script>
</body>
</html>

当然 Contract的函数 你们不能直接抄 但是什么 我已经说的够清楚了
我们页面控制台输出结果如下
在这里插入图片描述
能输出这个智能合约 我们就成功了

可能有人就会想 那么 既然我们用StudentStorage接了这个智能合约对象
是不是我们直接 StudentStorage.函数 就可以调用了呢？
其实不然
在这里插入图片描述
我们打开这个对象 发现 之前我们写的函数 并不在里面
不用急
我们里面必然会有一个 methods 打开你就会发现 我们的函数就都在里面了
在这里插入图片描述
然后 我们将html代码改写如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "./js/web3.min.js"></script>
</head>
<body>
    <input type="text" id="myname">
    <input type="number" id="myage">
    <button id="add">添加</button>
    <script type="module">
      var web3 = new Web3(Web3.givenProvider || "http://localhost:8545");
      let account = await web3.eth.requestAccounts();
      console.log(account);
      const StudentStorage = await new web3.eth.Contract([
            {
            "inputs": [
                {
                "internalType": "uint256",
                "name": "",
                "type": "uint256"
                }
            ],
            "name": "userList",
            "outputs": [
                {
                "internalType": "uint256",
                "name": "id",
                "type": "uint256"
                },
                {
                "internalType": "string",
                "name": "name",
                "type": "string"
                },
                {
                "internalType": "uint256",
                "name": "age",
                "type": "uint256"
                }
            ],
            "stateMutability": "view",
            "type": "function",
            "constant": true
            },
            {
            "inputs": [
                {
                "internalType": "string",
                "name": "name",
                "type": "string"
                },
                {
                "internalType": "uint256",
                "name": "age",
                "type": "uint256"
                }
            ],
            "name": "addtList",
            "outputs": [
                {
                "internalType": "uint256",
                "name": "",
                "type": "uint256"
                }
            ],
            "stateMutability": "nonpayable",
            "type": "function"
            },
            {
            "inputs": [],
            "name": "queryList",
            "outputs": [
                {
                "components": [
                    {
                    "internalType": "uint256",
                    "name": "id",
                    "type": "uint256"
                    },
                    {
                    "internalType": "string",
                    "name": "name",
                    "type": "string"
                    },
                    {
                    "internalType": "uint256",
                    "name": "age",
                    "type": "uint256"
                    }
                ],
                "internalType": "struct StudentStorage.userData[]",
                "name": "",
                "type": "tuple[]"
                }
            ],
            "stateMutability": "view",
            "type": "function",
            "constant": true
            }
        ],
        "0x9d80C47da52731Df5649Ff81f8EAB664c0c80429"
    );
    console.log(StudentStorage);

    async function getList() {
        let res = await StudentStorage.methods.queryList().call();
        console.log(res);
    }

    add.onclick = async function() {
        console.log(myname.value,myage.value)

        await StudentStorage.methods.addtList(myname.value,myage.value).send({from: account[0]})
        getList();
    }
    getList();
    </script>
</body>
</html>

这里 我们通过智能合约返回的StudentStorage对象做了一些操作
首先是 getList 这个方法异步调用了我们写在合约上的 queryList 函数 获取数组的长度
然后输出
因为我们之前合约上getList声明了一个 view 这样 表示 我们这个函数是不会改变合约上的内容 也不会改变区块链的
我们只是做个访问 所以 我们声明call 告诉它我们这个方法是不需要消耗燃料的
在这里插入图片描述
那么 我们的添加函数 调用了addtList 传入了 我们的 myname输入框 和 myage输入框的value
至于这个add.onclick 这里是一个基础 我们html中 调用id内容声明事件是直接可以通过id名去绑定的

然后 调用了addtList 将这些函数添加进去 但是 这个函数是改变了我们合约内容的 所以它会消耗燃料
那么 这个谁来承担呢？
我们web3.eth.requestAccounts()获取了MetaMask的账号授权列表 我们直接取0下标 然第一个用户去扣这个燃料

我们尝试输入内容 然后点击添加
在这里插入图片描述
然后 我们在控制台 console 中 输出的myname.value,myage.value在控制台上了 然后MetaMask弹出 让我们确认燃料
我们直接确定
在这里插入图片描述
我们知道 当我们执行成功 他会调用getList
这里 也成功展示出我们添加后的数组
在这里插入图片描述
但是 智能合约添加的操作 很多会要当前用户的信息 例如我们这里添加一个用户 他会需要知道 谁记录的这条信息 就是 在操作是顺带将操作的这个用户的信息传过来

瑞晟技术服务中心-耿瑞
关注
Java Web3J ：使用web3j调用自己的智能合约的方法（教程）
鄙人kunzhi96，感恩遇见！
12-21 1万+
web3j是一个轻量级、高度模块化、响应式、类型安全的Java和Android类库提供丰富API，用于处理以太坊智能合约及与以太坊网络上的客户端(节点)进行集成。可以通过它进行以太坊区块链的开发，而无需为你的应用平台编写集成代码。web3j调用智能合约是web3j使用的关键，当前区块链的核心原理其实很简单：这是智能合约优秀的框架，经过了无数安全的效验，目前绝大多数项目引用此相关依赖。有些函数是固定写法例如claim，deposit，approve等等。
部署智能合约以及 javascript 调用合约函数（Web3项目二实战之三）
仗剑行于江湖，执笔记江湖事。
12-17 1685
在上一篇，我们已然为项目编写了智能合约，在攥写完智能合约后，该项目将完成了一大部分，剩下无非就是用户界面交互的内容。然而，在码完了智能合约代码后，起着承前启后关键性的便是，前端界面与智能合约的交互。智能合约好比是Web3项目的灵魂、核心，那么，通过javascript与智能合约交互，便是一座通往Web3核心的沟通桥梁，并且，这座桥是唯一必经之路。
【web3】使用web3.js发布并执行智能合约
小陈的博客
12-22 4377
昨天我们学习了使用 web3.js 库查询链上区块和交易的用法，今天我们来介绍一下使用 web3.js 与智能合约的交互。在学习本节前，你应该对智能合约有一定的了解。智能合约的生命周期包括创建、发布、执行以及销毁。创建：在 Remix 中编写智能合约，编译生成 ABI 和 字节码文件。发布：对应 Remix 中的Deploy按钮的功能，也即 web3.js 中合约实例上的deploy方法。执行：对应web3.js 中合约实例上的call和send方法。销毁：在合约中使用方法销毁指定合约。
web3.js调用智能合约
weixin_33694172的博客
07-05 1194
本文将用web3.js走一个简单调用智能合约流程。 1 利用truffleinit 命令生成智能合约框架 代码参考。按照自动化生成的框架进行简单的修改如下： contracts\Migrations0.sol pragma solidity ^0.4.23; contract Migrations0 { //编写一个函数，来完成两个数的相加操作 functionaAnd...
Web3.js 库使用指南
最新发布
m0_57836225的博客
09-21 502
是一个强大的 JavaScript 库，它提供了一系列工具和方法，使开发者能够轻松地与以太坊区块链进行通信、查询数据、发送交易以及与智能合约交互。Infura 是一个可靠的区块链节点服务，你需要在 Infura 上注册并获取自己的项目 ID，然后替换。发送交易调用合约函数时，需要先估计交易所需的 gas 数量，然后构建交易对象，使用私钥对交易进行签名，最后发送交易并获取交易哈希。是一个功能强大的库，为开发者提供了与以太坊区块链进行交互的便捷方式。在区块链开发中，与以太坊区块链进行交互是一项关键任务。
以太坊Dapp通过web3js部署调用智能合约
热门推荐
Ella的博客
03-16 1万+
通过web3js部署调用智能合约1、在线编译智能合约2、部署合约 参考视频：https://www.bilibili.com/video/BV14z4y1Z7Jd?p=1 1、在线编译智能合约 https://remix.ethereum.org/ pragma solidity ^0.4.0; contract MyCounter{ uint256 counter; constructor() public { counter = 1; } fu
Web3.js在以太坊上部署和调用智能合约
qq_62761962的博客
04-24 1880
Web3.js在以太坊上部署和调用智能合约
用web3.js与智能合约交互
weixin_42649617的博客
12-05 2761
工具：Truffle v4.0.4 ganache-1.1.0-beta（ui界面版） nodejs 8.9.4 npm 5.6.0 web3 1.0.0 思路： 1、先用truffle创建一个以太坊智能合约项目，部署在ganache测试网络。 2、用npm创建另外一个项目，使用web3和智能合约交互 创建truffle项目： 1、mkdir truffle_test & cd truffle test 2、初始化：truffle init 3、编写智能合约，在contracts文件夹下新建智能合约
web3-infura：使用Web3.js通过Infura.io与以太坊的Ropsten网络接口并调用智能合约方法
02-13
使用Web3.js和Infura的智能合约 Web3.js是一个库的集合，这些库使您可以使用HTTP或IPC连接与本地或远程以太坊节点进行交互。 在本练习中，我们将使用web3.js在以太坊Ropsten测试网上部署合约并进行使用。 我们将首先...
web3swift：Swift中的优雅Web3js功能。 以太坊网络上的本机ABI解析和智能合约交互
02-05
web3swift 功能的快速实现 :high_voltage: 通过JSON RPC与远程节点进行交互 :thought_balloon: 智能合约ABI解析 :open_book: 本地密钥库管理（与geth兼容） 私钥和交易直接在iOS设备上创建，并直接发送到节点 ...
MetaMask与Web3中智能合约调用（2）
qq_44001572的博客
12-06 2441
智能合约交易区别于点对点交易，智能合约交易只需付费给矿工费用，也就是gas fee，是支付给矿工的手续费，当我们在以太坊区块链上进行转账时，矿工要把我们的交易打包并放上区块链，才能使交易完成，在这过程中会消耗区块链的运算资源，所以要支付费用这个过程为Gas Fee=Gas Limit(限制) x Gas Price(价格)gas limit：每一次交易或合约调用都要设置一个gas limit，如果该次操作所使用的gas数量小于或等于您所设置的gas limit，则会被执行，但如果gas总消耗量超过gas l
web3调用智能合约至前端全过程
holidaycomings的博客
10-28 1016
web3调用智能合约至前端全过程 首先将区块链准备工作完成 Remix发布合约，使用injectweb3，用ganache创建10个虚拟账号，metamask连接至其中一个账号（在metamask内点引入账号，复制一个账户私钥进去，用8545本地连接就行，ganache改成8545） 部署合约后，使用webstorm 先安装node（linux终端自行安装即可），然后创node项目 mkdir web3test && cd web3test npm init npm install web3
使用web3.js连接Metamask钱包并完成合约交互
什么当当当啊？
01-29 2396
Web3.js是一个用于与以太坊网络进行交互的JavaScript库。它提供了一些方法和功能，可以实现与以太坊区块链进行交互，例如发送交易、查询账户余额、调用智能合约等。Metamask是一个以太坊钱包插件，可以在浏览器中创建和管理以太坊账户。它是一个非常方便的工具，可以让用户在浏览器上直接与以太坊网络进行交互，而无需下载和同步完整的以太坊区块链。本文介绍了如何使用web3.js库连接Metamask钱包，并完成与智能合约的交互。
使用web3.js进行编译发布及调用智能合约
好记性不如烂笔头
04-20 4850
简要：web3.js 是一个库的集合，允许您使用HTTP或IPC连接与本地或远程以太节点进行交互。solc.js 是solidity的编译器。官方推荐编译方式。Ganache CLI是以太坊开发工具Truffle套件的一部分，是Ganache的命令行版本。Ganache CLI使用ethereumjs来模拟完整的客户端行为，并使开发以太坊应用程序更快，更轻松，更安全。它还包括所有流行的RPC功能和...
3:以太坊Dapp之使用web3js调用智能合约
逐渐深入
04-03 320
接上文部署完智能合约成功后,我们可以新建一个vue工程，写个基本的展示来调用智能合约。合约地址： 上文执行出来的地址。abi: 上文中提到过的地方。
使用 Infura 和 web3.js 调用智能合约
rejames的博客
04-25 749
Infura 提供公开的 Ethereum 主网和测试网络节点。到 Infura 官网申请，输入一些基本资料和 Email，就可以收到 API-key。 infura 使用 RPC 查询合约内存储的状态 最常需要查询的状态就是 Token 的余额。就用 EOS Token 合约做为示例来看看。 取得取得合约信息 可以通过 Etherscan，大部分知名的合约可以直接搜索到。 e...
web3.js版本1.0合约调用方法
Harry Wong的博客
02-02 493
摘要web3.js版本1.0合约调用方法，代码示例。 调用代码示例如下 var Web3 = require("web3"); var provider = new Web3.providers.HttpProvider("http://localhost:8545"); var Web3EthContract = re...
web3常用api接口
weixin_43903173的博客
11-02 2127
web3.js API是从连接以太坊开始的 web3.js包含在web3中 1.链接以太节点 var Web3=require(“web3”);//导入web3 var web=new Web3(new Web3.providers.HttpProvide('http://localhost:8545")); 以下步骤全部都需要连接以太节点 这种连接方式是通过Web3构造方法指定的HttpPr...
web3js调用已部署智能合约的function
hdyes的专栏
06-26 7665
简介与环境简介web3.js是以太坊提供的一个Javascript库，它封装了以太坊的JSON RPC API、IPC调用，提供了一系列与以太坊区块链交互的J对象和函数。几乎囊括JSON RP的API，还可以编译和部署智能合约以及调用智能合约等，其中最重要的就是与智能合约交互的JS对象及函数。开发环境macos操作系统nodejs 8.9.4npm 5.6.0调用智能合约首先需要使用Solidit...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值