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

题记

        用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提供者为Metamaskconst 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'; // 合约ABIconst 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.defaultAccountconst 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'; // 合约ABIconst 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.mzph.cn/news/110105.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java学生通讯录管理系统

设计要求 本课程设计&#xff0c;涉及输入输出、GUI设计、数据库操作等本课程重要概念和编程技能&#xff0c;全面巩固和加深学生对java程序设计的相关概念的理解&#xff0c;全面强化java编程技能&#xff0c;培养学生综合运用所学知识和技能分析问题和解决问题的能力。培养学…

Linux命令(102)之less

linux命令之less 1.less介绍 linux命令less是一个文本文件查看工具&#xff0c;它以一种交互的方式&#xff0c;逐页地显示文本文件的内容&#xff0c;并且可以在文件中进行搜索等定位 2.less用法 less [参数] filename less参数 参数说明-N显示每行的行号-i忽略搜索时的大…

Windows工业三防平板全功能NFC近距离感应一维/二维扫描

Windows系统工业三防平板电脑是一种在智慧工厂仓储物流、MES数采、车载设备、设备检测、自动化控制等领域广泛应用的先进设备。此外&#xff0c;它还在公共服务领域&#xff0c;如高速交通、物流运输、电力检测、公务执法、银行金融、船舶装备、户外勘测、建筑工程、汽车检测、…

测试中Android与IOS分别关注的点

目录 1、自身不同点 2、测试注重点 3、其他测试点 主要从本身系统的不同点、系统造成的不同点、和注意的测试点做总结 1、自身不同点 研发商&#xff1a;Adroid是google公司做的手机系统&#xff0c;IOS是苹果公司做的手机系统   开源程度&#xff1a;Android是开源的&a…

[晕事]今天做了件晕事24;GCC -W

gcc的编译选项&#xff0c;有几个比较让人搞混&#xff1a; -w Inhibit all warning messages. &#xff1b; 这个是禁止所有的警告消息 -W的含义是&#xff1a;-Wextra&#xff1b;着-W是建议不要再使用了&#xff0c;因为字面意思与含义不符。而且&#xff1a;https://www.…

【已解决】pyinstaller 将程序打包成 exe 文件后,无法保存视频或者保存的视频为空文件

这里写自定义目录标题 问题描述解决方法方法一方法二 参考 问题描述 使用pyinstaller将python程序打包为exe文件&#xff0c;其中包含保存视频的代码。直接运行脚本时&#xff0c;程序能够正确的保存视频。但是通过pyinstaller打包成exe文件后&#xff0c;exe文件无法保存视频…

网工记背命令(6)----链路聚合配置

目录 1.配置手工负载分担模式链路聚合 2.配置LACP模式的链路聚合 3.HUAWEI设备与C厂商设备对接 链路聚合&#xff08;Link Aggregation&#xff09;是将多条物理链路捆绑在一起成为一条逻辑链路&#xff0c;从而增加链路带 宽的技术。 常用配置命令 1、执行命令 interface …

笙默考试管理系统-MyExamTest----codemirror(35)

笙默考试管理系统-MyExamTest----codemirror&#xff08;35&#xff09; 目录 一、 笙默考试管理系统-MyExamTest 二、 笙默考试管理系统-MyExamTest 三、 笙默考试管理系统-MyExamTest 四、 笙默考试管理系统-MyExamTest 五、 笙默考试管理系统-MyExamTest 笙默考试…

大数据Hadoop、HDFS、Hive、HBASE、Spark、Flume、Kafka、Storm、SparkStreaming这些概念你是否能理清?

1.Hadoop Hadoop是大数据开发的重要框架&#xff0c;是一个由Apache基金会所开发的分布式系统基础架构&#xff0c;其核心是HDFS和MapReduce&#xff0c;HDFS为海量的数据提供了存储&#xff0c;MapReduce为海量的数据提供了计算&#xff0c;在Hadoop2.x时 代&#xff0c;增加…

Flume 简介及基本使用

1.Flume简介 Apache Flume 是一个分布式,高可用的数据收集系统。它可以从不同的数据源收集数据,经过聚合后发送到存储系统中,通常用于日志数据的收集。Flume 分为 NG 和 OG (1.0 之前) 两个版本,NG 在 OG 的基础上进行了完全的重构,是目前使用最为广泛的版本。下面的介绍均…

【计算机网络笔记】计算机网络性能(2)——时延带宽积、丢包率、吞吐量/率

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 系列文章目录时延带宽积丢包率吞吐量/率&am…

前端开发规范的区别(Commonjs、AMD、CMD、ES6模块化)

commonjs规范 &#xff08;Node.js&#xff09;: CommonJS 主要运行于服务器端&#xff0c;该规范指出&#xff0c;一个单独的文件就是一个模块&#xff0c;其内部定义的变量是属于这个模块的&#xff0c;不会对外暴露&#xff0c;也就是说不会污染全局变量。 Node.js为主要实…

Spring 数据校验:Validation

文章目录 Spring Validation概述实验一&#xff1a;通过Validator接口实现实验二&#xff1a;Bean Validation注解实现实验三&#xff1a;基于方法实现校验实验四&#xff1a;实现自定义校验 Spring Validation概述 在开发中&#xff0c;我们经常遇到参数校验的需求&#xff0…

migration 与navicat

Migration和Navicat是两个不同类型的产品&#xff0c;各自在特定场景下有各自的优势。 Migration主要针对的是数据的迁移或复制&#xff0c;从一个数据库迁移到另一个数据库&#xff0c;或者从一个环境复制到另一个环境。它主要关注的是数据的迁移和复制过程&#xff0c;不提供…

wrk HTTP打流测试工具

安装 git clone https://gitee.com/mirrors/wrk.git 参数 -c, --connections <N> Connections to keep open,需要模拟的连接数 -d, --duration <T> Duration of test,测试的持续时间 -t, --threads <N> Number of threads to use,需要模拟的线程…

【FPGA零基础学习之旅#15】串口接收模块设计与验证(工业环境)

&#x1f389;欢迎来到FPGA专栏~串口接收模块设计与验证&#xff08;工业环境&#xff09; ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;FPGA学习之旅 文章作者技术和水平有限&#xff0c;如…

【Python学习笔记】对象、方法

1. 对象方法定义 对象通常都拥有属于自己的 方法&#xff08;英文叫 method &#xff09;。 对象的方法其实可以看成是对象所拥有的函数。也就是说 这个方法&#xff0c;是属于这个对象的函数。 调用对象的方法&#xff0c;和调用函数差不多&#xff0c;只要在前面加上 所属…

html5 文字自动省略,html中把多余文字转化为省略号的实现方法方法

单行文本&#xff1a; .box{width: 200px;background-color: aqua;text-overflow: ellipsis;overflow: hidden;white-space: nowrap; }多行文本 1.利用-webkit-line-clamp属性 .box{width: 200px;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-l…

Grammarly安装到word里 2023/10/18

时间&#xff1a;2023/10/18 问题有很多种&#xff0c;我提供一个解决方法&#xff0c;下载对的版本&#xff0c;不要下载 for windows系统&#xff08;起码我的是不嵌入在word里的&#xff09;&#xff0c;要下载for Microsoft office。官网目前可能在推for windows,所以直接下…

Angular知识点系列(5)-每天10个小知识

目录 41. Angular的路由守卫42. 处理文件的上传和下载43. Angular的动画系统44. 使用第三方库和选择评估45. 性能优化46. AOT和JIT编译47. 处理响应式布局和适配不同屏幕尺寸48. Angular的国际化&#xff08;i18n&#xff09;49. Angular的PWA开发50. 使用Angular Material或其…