6.DApp-用Web3实现前端与智能合约的交互

已于 2023-10-18 09:41:40 修改
阅读量2.6k 收藏 2
点赞数 20
分类专栏： DApp 文章标签： web3 智能合约 交互 区块链 开发语言 javascript 后端
于 2023-10-17 20:22:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70819559/article/details/133892708
版权

题记

        用Web3实现前端与智能合约的交互，以下是操作流程和代码。

准备ganache环境

        文章地址：4.DApp-MetaMask怎么连接本地Ganache-CSDN博客 

准备智能合约 

        文章地址： 2.DApp-编写和运行solidity智能合约-CSDN博客

编写index.html文件

        

<!DOCTYPE html>

<html>

<head>

    <title>Name Contract Demo</title>

    <!--导入web3库-->

    <script src="https://cdn.jsdelivr.net/npm/web3@1.5.2/dist/web3.min.js"></script>

    <script>

    // 检查Metamask是否已安装

    if (typeof window.ethereum !== 'undefined') {

    console.log('Metamask已安装');

    }

    // 设置Web3.js提供者为Metamask

    const provider = window.ethereum;

    const web3 = new Web3(provider);

    // 请求Metamask连接到以太坊网络

    provider.request({ method: 'eth_requestAccounts' })

    .then(() => {

      console.log('Metamask已连接到以太坊网络');

    })

    .catch((err) => {

      console.error('无法连接到以太坊网络', err);

    });

    function setName() {

    // 合约地址

    const contractAddress = '0x32FDC4E86421143b1c27dE49542Bc8ECE2B162a0';

    // 合约ABI

    const contractABI = [

    {

        "inputs": [

            {

                "internalType": "string",

                "name": "_name",

                "type": "string"

            }

        ],

        "name": "setName",

        "outputs": [],

        "stateMutability": "nonpayable",

        "type": "function"

    },

    {

        "inputs": [],

        "name": "getName",

        "outputs": [

            {

                "internalType": "string",

                "name": "",

                "type": "string"

            }

        ],

        "stateMutability": "view",

        "type": "function"

    }

    ];

    const contract = new web3.eth.Contract(contractABI, contractAddress);

    const name = document.getElementById('name').value;

    // 替换为您的账户地址web3.eth.defaultAccount

    const fromAddress = '0x4e8eB4d1C203929074A3372F3703E556820fEA57';

    //contract.methods.setName(name).send({from: fromAddress})

    contract.methods.setName(name).send({from: fromAddress})

    .on('transactionHash', function(hash){

        console.log('Transaction Hash:', hash);

    })

    .on('receipt', function(receipt){

        console.log('Transaction Receipt:', receipt);

    })

    .on('error', function(error){

        console.error('Error:', error);

    });

    }

    function getName() {

    // 合约地址

    const contractAddress = '0x32FDC4E86421143b1c27dE49542Bc8ECE2B162a0';

    // 合约ABI

    const contractABI = [

    {

        "inputs": [

            {

                "internalType": "string",

                "name": "_name",

                "type": "string"

            }

        ],

        "name": "setName",

        "outputs": [],

        "stateMutability": "nonpayable",

        "type": "function"

    },

    {

        "inputs": [],

        "name": "getName",

        "outputs": [

            {

                "internalType": "string",

                "name": "",

                "type": "string"

            }

        ],

        "stateMutability": "view",

        "type": "function"

    }

    ];

    const contract = new web3.eth.Contract(contractABI, contractAddress);

    contract.methods.getName().call()

    .then(function(result) {

        console.log('Name:', result);

        document.getElementById('nameValue').innerText = result;

    })

    .catch(function(error) {

        console.error('Error:', error);

    });

    }

    </script>

</head>

<body>

    <h1>设置姓名</h1>

    <label for="name">姓名:</label>

    <input type="text" id="name">

    <button οnclick="setName()">设置姓名</button>

    <br>

    <button οnclick="getName()">得到姓名</button>

    <br>

    <span id="nameValue"></span>

</body>

</html>

<!DOCTYPE html>
<html>
<head>
    <title>Name Contract Demo</title>
    <!--导入web3库-->
    <script src="https://cdn.jsdelivr.net/npm/web3@1.5.2/dist/web3.min.js"></script>
    <script>
    // 检查Metamask是否已安装
    if (typeof window.ethereum !== 'undefined') {
    console.log('Metamask已安装');
    }
  
    // 设置Web3.js提供者为Metamask
    const provider = window.ethereum;
    const web3 = new Web3(provider);
  
    // 请求Metamask连接到以太坊网络
    provider.request({ method: 'eth_requestAccounts' })
    .then(() => {
      console.log('Metamask已连接到以太坊网络');
    })
    .catch((err) => {
      console.error('无法连接到以太坊网络', err);
    });
  
    function setName() {
    // 合约地址
    const contractAddress = '0x32FDC4E86421143b1c27dE49542Bc8ECE2B162a0'; 
    // 合约ABI
    const contractABI = [
	{
		"inputs": [
			{
				"internalType": "string",
				"name": "_name",
				"type": "string"
			}
		],
		"name": "setName",
		"outputs": [],
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"inputs": [],
		"name": "getName",
		"outputs": [
			{
				"internalType": "string",
				"name": "",
				"type": "string"
			}
		],
		"stateMutability": "view",
		"type": "function"
	}
    ]; 
    const contract = new web3.eth.Contract(contractABI, contractAddress);
    const name = document.getElementById('name').value;
    // 替换为您的账户地址web3.eth.defaultAccount
    const fromAddress = '0x4e8eB4d1C203929074A3372F3703E556820fEA57'; 
    //contract.methods.setName(name).send({from: fromAddress})

    contract.methods.setName(name).send({from: fromAddress})
    .on('transactionHash', function(hash){
        console.log('Transaction Hash:', hash);
    })
    .on('receipt', function(receipt){
        console.log('Transaction Receipt:', receipt);
    })
    .on('error', function(error){
        console.error('Error:', error);
    });
    }

    function getName() {
    // 合约地址
    const contractAddress = '0x32FDC4E86421143b1c27dE49542Bc8ECE2B162a0'; 
    // 合约ABI
    const contractABI = [
	{
		"inputs": [
			{
				"internalType": "string",
				"name": "_name",
				"type": "string"
			}
		],
		"name": "setName",
		"outputs": [],
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"inputs": [],
		"name": "getName",
		"outputs": [
			{
				"internalType": "string",
				"name": "",
				"type": "string"
			}
		],
		"stateMutability": "view",
		"type": "function"
	}
    ]; 
    const contract = new web3.eth.Contract(contractABI, contractAddress);
    contract.methods.getName().call()
    .then(function(result) {
        console.log('Name:', result);
        document.getElementById('nameValue').innerText = result;
    })
    .catch(function(error) {
        console.error('Error:', error);
    });
    }
    </script>
</head>
<body>
    <h1>设置姓名</h1>
    <label for="name">姓名:</label>
    <input type="text" id="name">
    <button onclick="setName()">设置姓名</button>
    <br>
    <button onclick="getName()">得到姓名</button>
    <br>
    <span id="nameValue"></span>
</body>
</html>

执行程序 

       使用vscode的Live Server打开网页

       参考这篇文章的执行方法：1.Vue-在独立页面实现Vue的增删改查-CSDN博客 

展示图 

发起交易 

完成交易 

 后记

        觉得有用可以点赞或收藏！

编译智能合约以及前端交互工具库（Web3项目一实战之三）
仗剑行于江湖，执笔记江湖事。
11-15 845
我们已然在上一篇，为项目写好了智能合约代码。但身为开发人员的我们，深知高级编程语言所编写出来的代码，都是需要经过编译，而后外部方能正常调用。很显然，使用solidity这门新的高级编程语言编写出来的智能合约，也同样需要经过编译，而后生成JSON文件（或叫做ABI）以供外部调用。而这个JSON文件，javascript正好通过它来调用智能合约里的函数，从而达到前端与智能合约的“完美交流”。
使用solidity与web3创作一个在线小游戏之四：基于VUE的DAPP，与智能合约的交互
lixiaodog的博客
04-20 1075
在我的上一篇文章 使用solidity与web3创作一个在线小游戏之三：（在VUE中使用WEB3，并使用Truffle包装对象与智能合约交互）_lixiaodog的博客-CSDN博客 中，我们完成了VUE框架的搭建，并成功编写了myWeb3对象，然后用这个对象成功获取到了我们当前的地址。在这章中，我们将使用VUE编写一个简单的LOGIN页面，并使用这个页面与GameManage合约完成登录这个交互动作。 首先在GameManage合约中，加入代码： function adminLogin(
Dapp如何实现前后端分离（前端如何和智能合约交互）
区区小块的博客
04-04 7881
通过例子一步步的展示如何实现智能合约和Vue前端的交互
web3智能合约交互
ddjc123的博客
04-09 3266
web3智能合约交互调用只读方法安装依赖调用方法代码示例发送交易安装依赖调用方法代码示例 调用只读方法 调用合约的只读查询方法，不需要发送任何交易。因此不会改变合约的状态。 安装依赖 npm install web3 npm install fs 调用方法 myContract.methods.myMethod([param1[, param2[, ...]]]).call(options[, callback]) 参数说明 options - Object : 选项，包含如下字段： from -
以太坊DApp开发的入门示例
热门推荐
lucasma的博客
03-25 2万+
环境准备 ubuntu 16.04， 64位 还需要安装以太坊相关的环境: * nodejs * truffle * solidity * testrpc 可以参考我之前的一篇文章: http://blog.csdn.net/pony_maggie/article/details/79531534 另外，本篇还会用到webpack，安装教程网上也有很多。这部分如果不熟悉的话请自行...
以太坊(Ethereum) - 智能合约前端页面
吴吃辣
11-19 2284
章节以太坊(Ethereum) – 是什么 以太坊(Ethereum) – 什么是智能合约 以太坊(Ethereum) – 以太币 以太坊(Ethereum) – 虚拟机(E.V.M.) 以太坊(Ethereum) – 分布式应用(DApp) 以太坊(Ethereum) – 账号(地址) 以太坊(Ethereum) – 虚拟机架构 以太坊(Ethereum) – 网络节点 以太坊(Ethereu...
Web3与智能合约交互实战（附代码）
HiBlock的博客
04-19 2677
在最初学习以太坊的时候，我们需要一种友好的方式（比如一个web页面）来与智能合约交互，问题的答案是web3.js。
用web3.js与智能合约交互(修改版)
jevior的博客
09-21 1835
首先放上官方API：https://web3js.readthedocs.io/en/1.0/index.html 工具：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创建另外...
smart-degree-dapp-web:智能度用例的nodeJS前端
05-02
去中心化的Web应用程序以与智能合约进行交互 正在安装 下载依赖项 npm install 运行去中心化的Web应用程序 npm start 然后访问： 阿德贝勒哈米德·巴赫塔 卡里姆·塔姆（Karim Taam） 卢多维奇·马莱沙尔 执照
使用Web3.js实现DApp和智能合约的交互
Web3.js是以太坊开发的JavaScript库，用于与以太坊区块链进行交互。它提供了许多功能，包括连接到以太坊网络、部署智能合约、调用合约方法等。 1.2 DApp的概念和特点 DApp是去中心化应用程序（Decentralized ...
react-以React为前端JS编写智能合约的完整的星云链DAPP
08-15
以React为前端，JS编写智能合约的完整的星云链DAPP
Web3.js的基本使用（与以太坊智能合约的交互）
m0_54854317的博客
03-06 1433
目录标题 web3.js介绍 web3 模块加载 异步回调（callback） 回调 Promise 事件（v1.0.0） 常用 API —— 基本信息查询 查看 web3 版本 查看 web3 连接到的节点版本（clientVersion） 基本信息查询 获取 network id 获取节点的以太坊协议版本 网络状态查询 是否有节点连接/监听，返回true/false 查看当前连接的 peer 节点 Provider 查看当前设置的 web3 provider 查看浏览器
Web3.js 库使用指南
最新发布
m0_57836225的博客
09-21 943
是一个强大的 JavaScript 库，它提供了一系列工具和方法，使开发者能够轻松地与以太坊区块链进行通信、查询数据、发送交易以及与智能合约交互。Infura 是一个可靠的区块链节点服务，你需要在 Infura 上注册并获取自己的项目 ID，然后替换。发送交易调用合约函数时，需要先估计交易所需的 gas 数量，然后构建交易对象，使用私钥对交易进行签名，最后发送交易并获取交易哈希。是一个功能强大的库，为开发者提供了与以太坊区块链进行交互的便捷方式。在区块链开发中，与以太坊区块链进行交互是一项关键任务。
dapp开发二
zhl11112222的博客
03-26 428
智能合约发布到测试网 1.首先写一个简单的智能合约 pragma solidity ^0.4.10; contract zz{ string public name; function add(string _name) public { name=_name; } function getname() view returns(string) { ...
【智能合约实战】——入门级DAPP，没有想象中那么难
你看到的逆袭，只不过是一场预备很久，草蛇灰线，伏笔千里的反攻
07-29 4245
Dapp就是去中心化应用程序的简称，是以某种方式连接到区块链的在线应用程序。从理论上讲，dapp是运行在节点服务器上面的，而dapp的整个后端存储是在区块链而不是服务器上完成的，重点是dapp的数据是存储在区块链上的，不是中心数据库；DApp的使用方式与其他任何app都相同。......
web3.js与合约交互
q_776355102的博客
07-13 3455
在我的以太坊手机轻钱包开发javascript签名合约交易这篇文章中我已经写到了如何用web3.js发布合约 接下来我们将使用web3.js与现有合约交互,下面合约也是以太坊....javascript签名合约交易这篇文章使用的合约案例.如果您目前没有部署下面合约,你可以参考这边文章部署好合约.,然后按步骤实操. 示例合约 本文以下面的MetaCoin合约为例，说明在应...
在前端页面上应用智能合约实现合约交互例子
weixin_46353030的博客
11-23 4587
环境和工具 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
Web3与智能合约交互实战
omnispace的博客
04-26 1688
Web3与智能合约交互实战写在前面在最初学习以太坊的时候，很多人都是自己创建以太坊节点后，使用geth与之交互。这种使用命令行交互的方法虽然让很多程序员感到兴奋（黑客帝国的既视感？），但不可能指望普通用户通过命令行使用Dapp。因此，我们需要一种友好的方式（比如一个web页面）来与智能合约交互，于是问题的答案就是web3.js。Web3.jsWeb3.js是以太坊官方的Javascript API...
区块链-以太坊-第一个简单的Dapp（前端html与后端智能合约交互）
废弃的诺亚方舟
10-29 8355
对应此博客的视频教学链接:https://pan.baidu.com/s/19VoCROL1HdmBLLm6BEsW1g 1.打开cmd，切换到本地remix目录：cd remix-ide-master；然后使用npm run serve命令，这样就可以直接通过localhost:8080访问remix-solidity开发环境了，比起在线的稳定一点（要想在本地同步使用localhost:808...
编写前端web3应用程序与智能合约交互
06-09
好的，以下是一个简单的前端web3应用程序，用于与上面编写的ERC20智能合约交互： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Web3 App</title> <script src="https://cdn.jsdelivr.net/npm/web3@1.3.5/dist/web3.min.js"></script> </head> <body> <h1>Web3 App</h1> <p>Account: <span id="account"></span></p> <p>Balance: <span id="balance"></span> ERC20 tokens</p> <input id="to" type="text" placeholder="Recipient address"> <input id="value" type="text" placeholder="Amount"> <button onclick="transfer()">Transfer</button> <script> window.addEventListener(&#39;load&#39;, async () => { if (typeof window.ethereum !== &#39;undefined&#39;) { await window.ethereum.enable(); const web3 = new Web3(window.ethereum); const contractAddress = &#39;CONTRACT_ADDRESS&#39;; const contractAbi = [{ &#39;constant&#39;: true, &#39;inputs&#39;: [{&#39;name&#39;: &#39;&#39;, &#39;type&#39;: &#39;address&#39;}], &#39;name&#39;: &#39;balanceOf&#39;, &#39;outputs&#39;: [{&#39;name&#39;: &#39;&#39;, &#39;type&#39;: &#39;uint256&#39;}], &#39;payable&#39;: false, &#39;stateMutability&#39;: &#39;view&#39;, &#39;type&#39;: &#39;function&#39; }, { &#39;constant&#39;: true, &#39;inputs&#39;: [], &#39;name&#39;: &#39;name&#39;, &#39;outputs&#39;: [{&#39;name&#39;: &#39;&#39;, &#39;type&#39;: &#39;string&#39;}], &#39;payable&#39;: false, &#39;stateMutability&#39;: &#39;view&#39;, &#39;type&#39;: &#39;function&#39; }, { &#39;constant&#39;: false, &#39;inputs&#39;: [{&#39;name&#39;: &#39;_to&#39;, &#39;type&#39;: &#39;address&#39;}, {&#39;name&#39;: &#39;_value&#39;, &#39;type&#39;: &#39;uint256&#39;}], &#39;name&#39;: &#39;transfer&#39;, &#39;outputs&#39;: [{&#39;name&#39;: &#39;success&#39;, &#39;type&#39;: &#39;bool&#39;}], &#39;payable&#39;: false, &#39;stateMutability&#39;: &#39;nonpayable&#39;, &#39;type&#39;: &#39;function&#39; }, { &#39;constant&#39;: true, &#39;inputs&#39;: [], &#39;name&#39;: &#39;symbol&#39;, &#39;outputs&#39;: [{&#39;name&#39;: &#39;&#39;, &#39;type&#39;: &#39;string&#39;}], &#39;payable&#39;: false, &#39;stateMutability&#39;: &#39;view&#39;, &#39;type&#39;: &#39;function&#39; }, { &#39;constant&#39;: false, &#39;inputs&#39;: [{&#39;name&#39;: &#39;_spender&#39;, &#39;type&#39;: &#39;address&#39;}, {&#39;name&#39;: &#39;_value&#39;, &#39;type&#39;: &#39;uint256&#39;}], &#39;name&#39;: &#39;approve&#39;, &#39;outputs&#39;: [{&#39;name&#39;: &#39;success&#39;, &#39;type&#39;: &#39;bool&#39;}], &#39;payable&#39;: false, &#39;stateMutability&#39;: &#39;nonpayable&#39;, &#39;type&#39;: &#39;function&#39; }, { &#39;constant&#39;: true, &#39;inputs&#39;: [{&#39;name&#39;: &#39;&#39;, &#39;type&#39;: &#39;address&#39;}, {&#39;name&#39;: &#39;&#39;, &#39;type&#39;: &#39;address&#39;}], &#39;name&#39;: &#39;allowance&#39;, &#39;outputs&#39;: [{&#39;name&#39;: &#39;&#39;, &#39;type&#39;: &#39;uint256&#39;}], &#39;payable&#39;: false, &#39;stateMutability&#39;: &#39;view&#39;, &#39;type&#39;: &#39;function&#39; }, { &#39;constant&#39;: false, &#39;inputs&#39;: [{&#39;name&#39;: &#39;_from&#39;, &#39;type&#39;: &#39;address&#39;}, {&#39;name&#39;: &#39;_to&#39;, &#39;type&#39;: &#39;address&#39;}, { &#39;name&#39;: &#39;_value&#39;, &#39;type&#39;: &#39;uint256&#39; }], &#39;name&#39;: &#39;transferFrom&#39;, &#39;outputs&#39;: [{&#39;name&#39;: &#39;success&#39;, &#39;type&#39;: &#39;bool&#39;}], &#39;payable&#39;: false, &#39;stateMutability&#39;: &#39;nonpayable&#39;, &#39;type&#39;: &#39;function&#39; }, { &#39;inputs&#39;: [{&#39;name&#39;: &#39;_name&#39;, &#39;type&#39;: &#39;string&#39;}, {&#39;name&#39;: &#39;_symbol&#39;, &#39;type&#39;: &#39;string&#39;}, { &#39;name&#39;: &#39;_totalSupply&#39;, &#39;type&#39;: &#39;uint256&#39; }], &#39;payable&#39;: false, &#39;stateMutability&#39;: &#39;nonpayable&#39;, &#39;type&#39;: &#39;constructor&#39; }, { &#39;anonymous&#39;: false, &#39;inputs&#39;: [{&#39;indexed&#39;: true, &#39;name&#39;: &#39;_from&#39;, &#39;type&#39;: &#39;address&#39;}, { &#39;indexed&#39;: true, &#39;name&#39;: &#39;_to&#39;, &#39;type&#39;: &#39;address&#39; }, {&#39;indexed&#39;: false, &#39;name&#39;: &#39;_value&#39;, &#39;type&#39;: &#39;uint256&#39;}], &#39;name&#39;: &#39;Transfer&#39;, &#39;type&#39;: &#39;event&#39; }, { &#39;anonymous&#39;: false, &#39;inputs&#39;: [{&#39;indexed&#39;: true, &#39;name&#39;: &#39;_owner&#39;, &#39;type&#39;: &#39;address&#39;}, { &#39;indexed&#39;: true, &#39;name&#39;: &#39;_spender&#39;, &#39;type&#39;: &#39;address&#39; }, {&#39;indexed&#39;: false, &#39;name&#39;: &#39;_value&#39;, &#39;type&#39;: &#39;uint256&#39;}], &#39;name&#39;: &#39;Approval&#39;, &#39;type&#39;: &#39;event&#39; }]; const contract = new web3.eth.Contract(contractAbi, contractAddress); const accounts = await web3.eth.getAccounts(); const account = accounts[0]; document.getElementById(&#39;account&#39;).textContent = account; const balance = await contract.methods.balanceOf(account).call(); document.getElementById(&#39;balance&#39;).textContent = balance; transfer = async () => { const to = document.getElementById(&#39;to&#39;).value; const value = document.getElementById(&#39;value&#39;).value; await contract.methods.transfer(to, value).send({from: account}); location.reload(); }; } else { alert(&#39;Please install MetaMask to use this dApp!&#39;); } }); </script> </body> </html> ``` 在这个应用程序中，我们使用了web3.js库来与以太坊网络交互，首先需要检查MetaMask是否已安装并启用。然后，我们使用智能合约地址和ABI创建了一个智能合约实例，以便可以与合约交互。我们还获取了当前用户的帐户和智能合约中该帐户的余额，并将其显示在页面上。最后，我们定义了一个转移函数，该函数在用户输入收件人地址和金额后，调用智能合约的“transfer”函数来发送代币，并重新加载页面以更新余额。 请注意，在这个示例中，你需要将“CONTRACT_ADDRESS”替换为你部署的ERC20智能合约的地址。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值