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

news2025/3/15 7:45:09

题记

        用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博客 

展示图 

 

发起交易 

 

完成交易 

 

 后记

        学会请点赞！ 不会来问我

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1103757.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

简单测试一下 展锐的 UDX710 性能

简单测试一下 展锐的 UDX710 性能

最近在接触 联通5G CPE VN007 &#xff0c;发现使用的是 展锐的Unisoc UDX710 CPU&#xff0c;正好简单的测试一下这颗CPU CPU信息 UDX710 是一颗 双核 ARM Cortex-A55 处理器&#xff0c;主频高达 1.35GHz processor : 0 BogoMIPS : 52.00 Features : fp…
阅读更多...
ARM资源记录《AI嵌入式系统：算法优化与实现》第八章（暂时用不到）

ARM资源记录《AI嵌入式系统：算法优化与实现》第八章（暂时用不到）

1.CMSIS的代码 书里给的5&#xff0c;https://github.com/ARM-software/CMSIS_5 现在有6了&#xff0c;https://github.com/ARM-software/CMSIS_6 这是官网的书&#xff0c;介绍cmsis函数的https://arm-software.github.io/CMSIS_5/Core/html/index.html 2.CMSIS介绍 Cort…
阅读更多...
Git命令在线练习网址--非常友好的提示及动画展示

Git命令在线练习网址--非常友好的提示及动画展示

Git命令在线练习 https://learngitbranching.js.org/ 举个栗子: 在练习时会给你相应提示,你可以按照相应步骤进行操作,并且每一步都有动画演示
阅读更多...
A股风格因子看板 (2023.10 第05期)

A股风格因子看板 (2023.10 第05期)

该因子看板跟踪A股风格因子&#xff0c;该因子主要解释沪深两市的市场收益、刻画市场风格趋势的系列风格因子&#xff0c;用以分析市场风格切换、组合风格暴露等。 今日为该因子跟踪第05期&#xff0c;指数组合数据截止日2023-09-30&#xff0c;要点如下 近1年A股风格因子检验统…
阅读更多...
Windows10 Docker 安装教程

Windows10 Docker 安装教程

Docker Desktop是什么&#xff1f; Docker Desktop是适用于Windows的Docker桌面&#xff0c;是Docker设计用于在Windows 10上运行。它是一个本地 Windows 应用程序&#xff0c;为构建、交付和运行dockerized应用程序提供易于使用的开发环境。Docker Desktop for Windows 使用 …
阅读更多...
手机应用app打开游戏显示连接服务器失败是什么原因？排查解决方案？

手机应用app打开游戏显示连接服务器失败是什么原因？排查解决方案？

亲爱的同学们&#xff0c;有时候我们在使用手机设备时&#xff0c;可能会遇到一个很头疼的问题——连接服务器失败。这个问题不仅让我们感到困扰&#xff0c;还影响到了我们的用户体验。那么&#xff0c;我们究竟能如何解决这个问题呢&#xff1f;今天&#xff0c;笔者就和大家…
阅读更多...
一百九十、Hive——Hive刷新分区MSCK REPAIR TABLE

一百九十、Hive——Hive刷新分区MSCK REPAIR TABLE

一、目的 在用Flume采集Kafka中的数据直接写入Hive的ODS层静态分区表后&#xff0c;需要刷新表&#xff0c;才能导入分区和数据。原因很简单&#xff0c;就是Hive表缺乏分区的元数据 二、实施步骤 &#xff08;一&#xff09;问题——在Flume采集Kafka中的数据写入HDFS后&am…
阅读更多...
Scrum 敏捷管理流程图及敏捷管理工具

Scrum 敏捷管理流程图及敏捷管理工具

​敏捷开发中的Scrum流程通常可以用一个简单的流程图来表示&#xff0c;以便更清晰地展示Scrum框架的各个阶段和活动。以下是一个常见的Scrum流程图示例&#xff1a; 转自&#xff1a;Leangoo.com 免费敏捷工具 这个流程图涵盖了Scrum框架的主要阶段和活动&#xff0c;其中包括…
阅读更多...
CSS详细解析二

CSS详细解析二

05-显示模式 显示模式&#xff1a;标签&#xff08;元素&#xff09;的显示方式。 作用&#xff1a;布局网页的时候&#xff0c;根据标签的显示模式选择合适的标签摆放内容。 块级元素 特点&#xff1a; 独占一行 宽度默认是父级的100% 添加宽高属性生效 行内元素 特…
阅读更多...
RK3399平台开发系列讲解（驱动篇）Regulator Framework

RK3399平台开发系列讲解（驱动篇）Regulator Framework

🚀返回专栏总目录 文章目录 一、Regulator驱动二、consumer接口函数三、用户空间sysfs接口沉淀、分享、成长，让自己和他人都能有所收获！😄 📢 要简单介绍下系统的Regulator Framework。 Regulator翻译为”调节器”，分为电压调节器(voltage regulator)和电流调节器(cu…
阅读更多...
leetcode209. 长度最小的子数组 [滑动窗口] 待更正

leetcode209. 长度最小的子数组 [滑动窗口] 待更正

题目 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 示例 1&#xff1a; 输入…
阅读更多...
金融数学方法：有限差分法

金融数学方法：有限差分法

目录 1.原理介绍 1.1 有限差分法介绍 1.2 有限差分法步骤 2.案例分析 2.1 问题重述 2.2 问题求解 1.原理介绍 1.1 有限差分法介绍 有限差分法是一种常用的数值计算方法&#xff0c;用于求解偏微分方程或常微分方程的数值解。它的基本思想是将连续的空间区域离散化为有限…
阅读更多...
河北建筑模板厂家供应-能强优品木业

河北建筑模板厂家供应-能强优品木业

随着我国建筑业的蓬勃发展&#xff0c;建筑模板作为一项基础性的建筑材料&#xff0c;在市场需求中占据着举足轻重的地位。在河北建筑模板供应市场中&#xff0c;广西贵港市能强优品木业有限公司以其实力雄厚、品质卓越、性价比极高的特点脱颖而出&#xff0c;成为众多建筑企业…
阅读更多...
Sentinel-1主动微波数据下载

Sentinel-1主动微波数据下载

Sentinel-1主动微波数据下载 这里主要介绍主动微波数据用于反演陆地参数的情况 GRD文件类型包含多视强度数据&#xff0c;该强度与后向散射系数相关&#xff0c;适合反演土壤水分 IW模式是陆地上的主要采集模式 VVVH的极化方式适合观测陆地 有关各个参数的介绍&#xff0c;使用…
阅读更多...
Redis LFU缓存淘汰算法

Redis LFU缓存淘汰算法

前言 Redis 在 4.0 版本之前的缓存淘汰算法&#xff0c;只支持 random 和 lru。random 太简单粗暴了&#xff0c;可能把热点数据给淘汰掉&#xff0c;一般不会使用。lru 比 random 好一点&#xff0c;会优先淘汰最久没被访问的数据&#xff0c;但是它也有一个缺点&#xff0c;…
阅读更多...
JavaScript系列从入门到精通系列第二十篇：使用工厂方法创建JavaScript对象，JavaScript构造函数详解，JavaScript类概念的介绍

JavaScript系列从入门到精通系列第二十篇：使用工厂方法创建JavaScript对象，JavaScript构造函数详解，JavaScript类概念的介绍

文章目录 一&#xff1a;使用工厂方法创建对象 1&#xff1a;原始写法 2&#xff1a;工厂方式 3&#xff1a;结果验证 二&#xff1a;构造函数 1&#xff1a;什么是构造函数 2&#xff1a;构造函数和普通函数的区别 3&#xff1a;构造函数的执行流程 三&#xff1a;类…
阅读更多...
SpringBoot基础详解

SpringBoot基础详解

目录 SpringBoot自动配置 基于条件的自动配置 调整自动配置的顺序 纷杂的SpringBoot Starter 手写简单spring-boot-starter示例 SpringBoot自动配置 用一句话说自动配置&#xff1a;EnableAutoConfiguration借助SpringFactoriesLoader将标准了Configuration的JavaConfig类…
阅读更多...
RPC 接口测试技术 —— websocket 自动化测试实践！

RPC 接口测试技术 —— websocket 自动化测试实践！

WebSocket 是一种在单个 TCP 连接上进行全双工通信 (Full Duplex 是通讯传输的一个术语。通信允许数据在两个方向上同时传输&#xff0c;它在能力上相当于两个单工通信方式的结合。全双工指可以同时&#xff08;瞬时&#xff09;进行信号的双向传输&#xff08; A→B 且 B→A &…
阅读更多...
Spring()

Spring()

一、导学 二、 1.入门程序 spring快照版本是最新的版本&#xff0c;未发布。需要用到<repository></> 下面这个不需要配置仓库&#xff0c;直接写在依赖中就行 引入spring相关依赖 <?xml version"1.0" encoding"UTF-8"?> <proje…
阅读更多...
QT实现凸凹边形等距缩放

QT实现凸凹边形等距缩放

参考&#xff1a;https://blog.csdn.net/weixin_39383896/article/details/99615371和https://blog.csdn.net/qq_15821883/article/details/117421400 代码逻辑思路&#xff1a; 1、获取向量AB、BC的坐标。 2、计算向量AB、BC的长度。 3、根据点乘获取cosθ大小。 4、根据cosθ…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023