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

最新推荐文章于 2024-05-27 09:52:37 发布
最新推荐文章于 2024-05-27 09:52:37 发布
阅读量1.9k 收藏 5
点赞数 1
文章标签： 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
这里 也成功展示出我们添加后的数组
在这里插入图片描述
但是 智能合约添加的操作 很多会要当前用户的信息 例如我们这里添加一个用户 他会需要知道 谁记录的这条信息 就是 在操作是顺带将操作的这个用户的信息传过来

瑞晟技术服务中心-耿瑞
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【web3】使用web3.js发布并执行智能合约
小陈的博客
12-22 4294
昨天我们学习了使用 web3.js 库查询链上区块和交易的用法，今天我们来介绍一下使用 web3.js 与智能合约的交互。在学习本节前，你应该对智能合约有一定的了解。智能合约的生命周期包括创建、发布、执行以及销毁。创建：在 Remix 中编写智能合约，编译生成 ABI 和 字节码文件。发布：对应 Remix 中的Deploy按钮的功能，也即 web3.js 中合约实例上的deploy方法。执行：对应web3.js 中合约实例上的call和send方法。销毁：在合约中使用方法销毁指定合约。
以太坊开发：web3（二）创建智能合约的ABI接口
weixin_42769202的博客
02-17 1211
首先，实现：以太坊开发web3（一） 参考： https://blog.csdn.net/weixin_42769202/article/details/113835024 输入相关命令： jiahuan@ubuntu:~/project$ cd web3_test jiahuan@ubuntu:~/project/web3_test$ npm list web3 web3_test@1.0.0 /home/jiahuan/project/web3_test └── web3@0.2..
web3.min.js
08-28
web3.min.js 直接引用，方便快捷，需要配合node.js等的请绕行 (是一个通过RPC 调用 和本地以太坊节点进行通信的js库。可以与任何暴露了RPC接口的以太坊节点连接。)
使用eth-vue构建你的智能合约应用：一个以太坊与Vue.js的完美结合
最新发布
gitblog_00095的博客
05-27 435
使用eth-vue构建你的智能合约应用：一个以太坊与Vue.js的完美结合 项目地址:https://gitcode.com/DOkwufulueze/eth-vue 1、项目介绍 eth-vue是一个基于Truffle的优秀框架，专为快速搭建具备认证功能的以太坊去中心化应用程序（dApps）而设计。它集成了Vue 3、Vuex、Vuex-persist和vue-router，让你在开发过程中拥有...
【CryptoZombies - 3 应用前端和 Web3.js】001 Web3.js入门与web3 Provider
水亦心的博客
06-05 2195
目录 一、前言 二、Web3.js 1、引入 2、Web3.js怎么解决 3、Web3.js环境搭建 4、实战 1.要求 2.代码 三、Web3 Provider 1、引入 2、Infura 3、MetaMask 4、实战 1.要求 2.代码 一、前言 终于到了这里了，之前我们讲的solidity教程只是基础的合约编写，但是我们并不能像普通程序一样运行，因为我们还需要自己搭建运行环境。这确实要比比普通的编程语言难得多。 而我们要做的就是知难而上。 今天我们要讲的是Web
Web3.js在以太坊上部署和调用智能合约
qq_62761962的博客
04-24 1664
Web3.js在以太坊上部署和调用智能合约
使用web3.js连接Metamask钱包并完成合约交互
什么当当当啊？
01-29 1820
Web3.js是一个用于与以太坊网络进行交互的JavaScript库。它提供了一些方法和功能，可以实现与以太坊区块链进行交互，例如发送交易、查询账户余额、调用智能合约等。Metamask是一个以太坊钱包插件，可以在浏览器中创建和管理以太坊账户。它是一个非常方便的工具，可以让用户在浏览器上直接与以太坊网络进行交互，而无需下载和同步完整的以太坊区块链。本文介绍了如何使用web3.js库连接Metamask钱包，并完成与智能合约的交互。
web3-infura：使用Web3.js通过Infura.io与以太坊的Ropsten网络接口并调用智能合约方法
02-13
使用Web3.js和Infura的智能合约 Web3.js是一个库的集合，这些库使您可以使用HTTP或IPC连接与本地或远程以太坊节点进行交互。 在本练习中，我们将使用web3.js在以太坊Ropsten测试网上部署合约并进行使用。 我们将首先...
web3抽奖合约 包含前端html调用和合约内容
08-10
2. **实例化Web3**：在页面加载时，Web3.js连接到一个以太坊节点（例如Infura），并实例化Web3对象。 3. **获取合约 ABI**：ABI（Application Binary Interface）是智能合约的二进制接口，它定义了合约的所有函数和...
再深刻理解下web3.js中estimateGas如何计算智能合约消耗的gas量
01-08
我们可使用web3.js框架的estimateGas函数获得一个以太坊智能合约的Gas估计值 ，通过执行一个消息调用或交易，该消息调用或交易直接在节点的VM中执行，并未在区块链中确认，函数会返回估算使用的gas量。 函数调用： ...
web3swift：Swift中的优雅Web3js功能。 以太坊网络上的本机ABI解析和智能合约交互
02-05
web3swift 功能的快速实现 :high_voltage: 通过JSON RPC与远程节点进行交互 :thought_balloon: 智能合约ABI解析 :open_book: 本地密钥库管理（与geth兼容） 私钥和交易直接在iOS设备上创建，并直接发送到节点 ...
使用web3调用智能合约的简单例子.pdf
02-27
调用部署的智能合约可以通过Node.js实现，借助web3.js库，它可以与以太坊网络进行通信。首先，确保安装了web3.js库： ```bash npm install web3 ``` 然后，你可以编写如下的Node.js脚本来调用合约： ```...
用 Web3 以太坊接口连接与操作 MetaMask 开发指南
StevenX5
10-31 4782
本文用一个例子，演示了如何使用 window.ethereum 对象连接并操作 MetaMask 钱包的方法。MetaMask 是一个浏览器插件钱包，支持火狐浏览器和谷歌浏览器。插件安装完成后，window 对象中会出现一个 window.ethereum 的对象。
web3.js获取导入
weixin_45966674的博客
06-07 1092
这个 我觉得适合更多人的情况 但肯定还是英文的官方文档会更好一些 但无伤大雅。然后 按一下回车 如果你的引入没问题 就会输出这样一个构造函数。这个的话是纯英文的网址 相对 需要一定的英语基础 但会更全面一些。我们将下载下来的js文件放在本地 然后创建一个html页面引入它。下载好解压出来就会有一个 web3.min.js。我们将中文文档拉到下面 就可以看到一个基本的用法。这个和jq属于同类 他也是js的一个代码方法库。我们可以看到 他就输出了这个web3对象。我们搜索 web3.js。
web3.js 基础
chinusyan的专栏
10-28 2102
web3.js
怎么使用Web3.js开发一个简单的Dapp
qq_37116560的博客
04-20 927
以太坊是一个基于区块链的开源去中心化平台，用于运行我们的智能合约。它不仅是一种加密货币，还是一种复杂的应用程序，可以在区块链上执行智能合约，以避免交易中出现任何欺诈企图。当满足预定义的条件时，它会自动执行。基于智能合约的交易的好处在于，这些交易是不可逆转的，但可以追踪。它不受单个组织的控制，并在不受中央控制的区块链网络上运行。一旦将 web3.js 作为项目的依赖项，您需要做的就是使用提供程序的实例实例化 web3 对象。在区块链中，数据可以作为块添加，其中每个块都有前一个块的地址，因此称为区块链。
在前端页面上应用智能合约实现合约交互例子
weixin_46353030的博客
11-23 4183
环境和工具 win10 Remix VScode Ganache-cli web3 实现步骤 Remix上编译和部署合约 创建新合约InfoContract.sol并写入以下内容： pragma solidity ^0.5.0; contract InfoContract { string fName; uint age; function setInfo(string memory _fName, uint _age) public { fNam
手把手部署区块链智能合约及python的web3接口调用
m0_54487794的博客
05-23 1280
至于合约怎么部署在区块链上，在网上自行搜索吧，别以为把部署代码直接粘在控制台内就可以了，在部署之前还要有解锁、转账、挖矿等操作，部署之后还要挖一下矿，才能算部署成功，因为部署成功（即挖矿后）会有一个十六进制的地址，这个就是智能合约在你这个链上的地址，到时候在python代码里还要粘进去的。创世块是什么请自行搜索，网络上很多示例的创世块博主都试过，在实际使用时会有各种各样的问题，如挖矿难度过大，格式不标准等等，博主贴上自己用的创世块代码，可以避免不必要的问题。在控制台输入命令操控Geth。
web3.js调用智能合约
03-25
1. 引入web3.js库 需要先在HTML文件中引入web3.js库，可以从官方网站下载或者使用CDN链接。 ```html <script src="https://cdn.jsdelivr.net/npm/web3@1.3.0/dist/web3.min.js"></script> ``` 2. 连接到以太坊网络 在JavaScript代码中，创建一个`Web3`对象并连接到以太坊网络。 ```js // 连接到以太坊网络 const web3 = new Web3(Web3.givenProvider || "http://localhost:8545"); ``` 其中，`Web3.givenProvider`是指网页已经连接了以太坊网络，可以直接使用当前提供商，否则指定一个本地的以太坊节点地址。 3. 加载智能合约ABI和地址 需要加载智能合约的ABI和地址，以便使用web3.js调用智能合约的方法。 ```js // 加载合约ABI和地址 const contractABI = [...]; const contractAddress = '0x...'; const myContract = new web3.eth.Contract(contractABI, contractAddress); ``` 4. 调用智能合约方法 调用智能合约的方法可以使用`myContract.methods`属性，该属性包含了智能合约的所有方法。以调用`get()`方法为例： ```js // 调用合约get()方法 myContract.methods.get().call((error, result) => { if (!error) { console.log(result); } else { console.error(error); } }); ``` 其中，`call()`方法表示调用智能合约的读取方法（不改变区块链数据），如果是写入方法需要使用`send()`方法。回调函数返回结果或错误信息。 5. 监听智能合约事件 智能合约的事件可以通过`myContract.events`属性进行监听。以监听`Transfer`事件为例： ```js // 监听Transfer事件 const transferEvents = myContract.events.Transfer(); transferEvents.on('data', (event) => { console.log(event.returnValues); }); transferEvents.on('error', console.error); ``` 以上就是使用web3.js调用智能合约的基本流程。涉及到的概念比较复杂，需要深入学习区块链和以太坊相关知识。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值