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博客
展示图
发起交易
完成交易
后记
觉得有用可以点赞或收藏！
相关文章：
6.DApp-用Web3实现前端与智能合约的交互
题记 用Web3实现前端与智能合约的交互，以下是操作流程和代码。 准备ganache环境 文章地址：4.DApp-MetaMask怎么连接本地Ganache-CSDN博客 准备智能合约 文章地址： 2.DApp-编写和运行solidity智能合约-CSDN博客 编写index.html文件 <!…...
数据异常值检测
数据异常值检测 参考： 数据异常值的检测方法-基于Python 独家 | 每个数据科学家应该知道的五种检测异常值的方法（附Python代码） 异常检测主要方法总结 14种数据异常值检验的方法！ 14种数据异常值检验的方法 浅谈数据挖掘中的…...
监听redis键失效事件实现延迟功能
用Redis实现延迟队列，我研究了两种方案，发现并不简单 SpringBoot实现Redis失效监听事件—KeyExpirationEventMessageListener Redis 监听过期的key（KeyExpirationEventMessageListener） 项目背景 需求上说，需要延迟…...
使用UniApp实现视频数组自动下载与播放功能：一步步指导
🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学！欢迎大家来踩踩~🌺 &a…...
C语言笔试面试必刷题
🎊【面经】专题正在持续更新中，内含C语言，数据结构，Linux，网络编程等✨，欢迎大家前往订阅本专题，获取更多详细信息哦🎏🎏🎏 🪔本系列专栏 - …...
window11安装Python环境
python环境安装 访问Python官网:https://www.python.org/ 点击downloads按钮，在下拉框中选择系统类型(windows/Mac OS/Linux等) 选择下载最新版本的Python cmd命令如果出现版本号以及>>>则表示安装成功 如果出现命令行中输入python出现如下错误 可能…...
SpringBoot中的日志使用
SpringBoot的默认使用 观察SpringBoot的Maven依赖图 可以看出来，SpringBoot默认使用的日志系统是使用Slf4j作为门户，logback作为日志实现 编写一个测试代码看是否是这样 SpringBootTest class SpringbootLogDemoApplicationTests {//使用Slf4j来创建LOG…...
微信小程序中监听横屏竖屏
直接上代码 第一步：在你想要监听页面的json文件中添加此节点 "pageOrientation": "auto" 第二步：wx.onWindowResize() page（{ onLoad() {this.kstd()},kstd(){ // 监听屏幕旋转事件 wx.onWindowResize((res)>{// …...
云原生概述
1. 何谓云原生 云原生是一种构建和运行应用程序的方法，是一套技术体系和方法论。云原生（CloudNative）是一个组合词，CloudNative。Cloud表示应用程序位于云中，而不是传统的数据中心；Native表示应用程序从设…...
消失的它：网络层分片包中的第一个分片包去哪了？
在网络层IP包分片的过程中，遇到了大麻烦！ 主机A： IP地址：192.168.0.10/24 MAC地址：02:00:00:00:00:10 主机B： IP地址：192.168.0.20/24 MAC地址：02:00:00:00:00:20 MTU：1…...
LeetCode刷题---有效的括号
这里用到了栈的思想 栈(stack)是限定仅在表尾进行插入或者删除的线性表。对于栈来说，表尾端称为栈顶（top），表头端称为栈低（bottom）。不含元素的空表称为空栈。因为栈限定在表尾进行插入或者删除，…...
QT学习笔记-QT访问各种关系数据库笔记汇总
QT学习笔记-QT访问各种关系数据库笔记汇总 1、QT访问Oracle数据库2、QT访问SQLServer数据库3、QT访问MySQL数据库4、QT访问PostgreSQL数据库5、QT访问Access数据库6、QT多线程中访问数据库的要点 在使用QT进行应用开发过程中，不可避免的会涉及到访问关系数据库&…...
Shell脚本-常用命令
Shell 脚本 Shell 脚本（shell script），是一种为 shell 编写的脚本程序。 业界所说的 shell 通常都是指 shell 脚本，但读者朋友要知道，shell 和 shell script 是两个不同的概念。 由于习惯的原因，简洁起见&a…...
Flink之输出算子Redis Sink
Redis Sink Redis Sinkjedis实现添加依赖自定义Redis Sink使用Sink验证 开源 Redis Connector添加依赖自定义Redis SinkRedisCommandString数据类型示例Hash数据类型示例 使用SinkRedisStringSinkRedisHashSink 验证 Redis Sink 在新版Flink的文档中，并没有发现Redi…...
【数据结构】顺序表实现通讯录
前言 在上一节中我们实现了顺序表，现在我们将使用顺序表完成通讯录的实现。（注：本人水平有限，“小屎山”有些许bug，代码冗余且语无伦次，望谅解！😅） 文章目录 一、数据结构…...
JMeter 随机数生成器简介：使用 Random 和 UUID 算法
在压力测试中，经常需要生成随机值来模拟用户行为。JMeter 提供了多种方式来生成随机值，本文来具体介绍一下。 随机数函数 JMeter 提供了多个用于生成随机数的函数，其中最常用的是 __Random 函数。该函数可以生成一个指定范围内的随机整数或…...
vue3 更换 elemnt-ui / element-plus 版本npm命令
1. 安装 / 更换 element-ui 版本 [ 在 后面指定想要安装的版本 ] //卸载当前版本 npm uninstall element-ui //安装指定版本 npm i element-ui2.4.8 -S --legacy-peer-deps 2. 安装 / 更换 element-plus 版本 [ 在 后面指定想要安装的版本 ] npm install element-plus2.3…...
react.js 手写响应式 reactive
Redux 太繁琐，Mbox 很酷但我们可能没必要引入新的包，那就让我们亲自在 react.js 中通过代理实现一套钩子来达到类似 vue 的响应式状态： 实现 reactive hooks 代理类声明 代理状态的类应当提供可访问的状态，和订阅变化的接口。 …...
代码随想录打卡第四十六天|完全背包 ● 518. 零钱兑换 II ● 377. 组合总和 Ⅳ
完全背包理论 有N件物品和一个最多能背重量为W的背包。第i件物品的重量是weight[i]，得到的价值是value[i] 。每件物品都有无限个（也就是可以放入背包多次），求解将哪些物品装入背包里物品价值总和最大。 完全背包和01背包问题唯一…...
【BP-Adaboost预测】基于BP神经网络的Adaboost的单维时间序列预测研究（Matlab代码实现）
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
深入剖析AI大模型：大模型时代的 Prompt 工程全解析
今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指：像函数调用/返回一样轻量地完成任务切换。 举例说明： 当你在程序中写一个函数调用： funcA() 然后 funcA 执行完后返回&…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣（LeetCode） 思路 使用两个栈：一个存储重复次数，一个存储字符串 遍历输入字符串： 数字处理：遇到数字时，累积计算重复次数左括号处理：保存当前状态&a…...
ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入，一个是通过INMP441麦克风模块采集音频，一个是通过PCM5102A模块播放音频，那如果我们将两者结合起来，将麦克风采集到的音频通过PCM5102A播放，是不是就可以做一个扩音器了呢…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...