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…...
浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义（Task Definition&…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO：支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题：MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者：Yanyuan Chen, Dexuan Xu, Yu Hu…...
Spring Boot 实现流式响应（兼容 2.7.x）
在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...
Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket（服务端和客户端都要）2. 绑定本地地址和端口&#x…...
Spring是如何解决Bean的循环依赖：三级缓存机制
1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间互相持有对方引用，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...
Golang——9、反射和文件操作
反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一：使用Read()读取文件2.3、方式二：bufio读取文件2.4、方式三：os.ReadFile读取2.5、写…...
用鸿蒙HarmonyOS5实现中国象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...
【WebSocket】SpringBoot项目中使用WebSocket
1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖，添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...