当前位置：首页 > news >正文

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

news 2026/4/19 7:41:54

题记

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

准备ganache环境

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

准备智能合约

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

编写index.html文件

<!DOCTYPE html>

<html>

<head>

<title>Name Contract Demo</title>



<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文件 <!…...

编程日记 2023/10/22 20:09:04

数据异常值检测

数据异常值检测参考： 数据异常值的检测方法-基于Python 独家 | 每个数据科学家应该知道的五种检测异常值的方法（附Python代码） 异常检测主要方法总结 14种数据异常值检验的方法！ 14种数据异常值检验的方法浅谈数据挖掘中的…...

编程日记 2023/10/22 20:08:03

监听redis键失效事件实现延迟功能

用Redis实现延迟队列，我研究了两种方案，发现并不简单 SpringBoot实现Redis失效监听事件—KeyExpirationEventMessageListener Redis 监听过期的key（KeyExpirationEventMessageListener） 项目背景需求上说，需要延迟…...

编程日记 2023/10/22 20:07:01

使用UniApp实现视频数组自动下载与播放功能：一步步指导

🌷🍁 博主猫头虎带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》文章图文并茂🦕生动形象🦖简单易学！欢迎大家来踩踩~🌺 &a…...

编程日记 2023/10/22 20:06:00

C语言笔试面试必刷题

🎊【面经】专题正在持续更新中，内含C语言，数据结构，Linux，网络编程等✨，欢迎大家前往订阅本专题，获取更多详细信息哦🎏🎏🎏 🪔本系列专栏 - …...

编程日记 2023/10/22 20:04:59

window11安装Python环境

python环境安装访问Python官网:https://www.python.org/ 点击downloads按钮，在下拉框中选择系统类型(windows/Mac OS/Linux等) 选择下载最新版本的Python cmd命令如果出现版本号以及>>>则表示安装成功如果出现命令行中输入python出现如下错误可能…...

编程日记 2023/10/22 20:03:57

SpringBoot中的日志使用

SpringBoot的默认使用观察SpringBoot的Maven依赖图可以看出来，SpringBoot默认使用的日志系统是使用Slf4j作为门户，logback作为日志实现编写一个测试代码看是否是这样 SpringBootTest class SpringbootLogDemoApplicationTests {//使用Slf4j来创建LOG…...

编程日记 2023/10/22 20:02:56

微信小程序中监听横屏竖屏

直接上代码第一步：在你想要监听页面的json文件中添加此节点 "pageOrientation": "auto" 第二步：wx.onWindowResize() page（{ onLoad() {this.kstd()},kstd(){ // 监听屏幕旋转事件 wx.onWindowResize((res)>{// …...

编程日记 2023/10/22 20:01:54

云原生概述

1. 何谓云原生云原生是一种构建和运行应用程序的方法，是一套技术体系和方法论。云原生（CloudNative）是一个组合词，CloudNative。Cloud表示应用程序位于云中，而不是传统的数据中心；Native表示应用程序从设…...

编程日记 2023/10/22 20:00:53

消失的它：网络层分片包中的第一个分片包去哪了？

在网络层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…...

编程日记 2023/10/22 19:59:52

LeetCode刷题---有效的括号

这里用到了栈的思想栈(stack)是限定仅在表尾进行插入或者删除的线性表。对于栈来说，表尾端称为栈顶（top），表头端称为栈低（bottom）。不含元素的空表称为空栈。因为栈限定在表尾进行插入或者删除&#xff0c…...

编程日记 2023/10/22 19:58:51

QT学习笔记-QT访问各种关系数据库笔记汇总

QT学习笔记-QT访问各种关系数据库笔记汇总 1、QT访问Oracle数据库2、QT访问SQLServer数据库3、QT访问MySQL数据库4、QT访问PostgreSQL数据库5、QT访问Access数据库6、QT多线程中访问数据库的要点在使用QT进行应用开发过程中，不可避免的会涉及到访问关系数据库&…...

编程日记 2023/10/22 19:57:49

Shell脚本-常用命令

Shell 脚本 Shell 脚本（shell script），是一种为 shell 编写的脚本程序。业界所说的 shell 通常都是指 shell 脚本，但读者朋友要知道，shell 和 shell script 是两个不同的概念。由于习惯的原因，简洁起见&a…...

编程日记 2023/10/22 19:56:47

Flink之输出算子Redis Sink

Redis Sink Redis Sinkjedis实现添加依赖自定义Redis Sink使用Sink验证开源 Redis Connector添加依赖自定义Redis SinkRedisCommandString数据类型示例Hash数据类型示例使用SinkRedisStringSinkRedisHashSink 验证 Redis Sink 在新版Flink的文档中，并没有发现Redi…...

编程日记 2023/10/22 19:54:45

【数据结构】顺序表实现通讯录

前言在上一节中我们实现了顺序表，现在我们将使用顺序表完成通讯录的实现。（注：本人水平有限，“小屎山”有些许bug，代码冗余且语无伦次，望谅解！😅） 文章目录一、数据结构…...

编程日记 2023/10/22 19:52:43

JMeter 随机数生成器简介：使用 Random 和 UUID 算法

在压力测试中，经常需要生成随机值来模拟用户行为。JMeter 提供了多种方式来生成随机值，本文来具体介绍一下。随机数函数 JMeter 提供了多个用于生成随机数的函数，其中最常用的是 __Random 函数。该函数可以生成一个指定范围内的随机整数或…...

编程日记 2023/10/22 19:51:43

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…...

编程日记 2023/10/22 19:50:41

react.js 手写响应式 reactive

Redux 太繁琐，Mbox 很酷但我们可能没必要引入新的包，那就让我们亲自在 react.js 中通过代理实现一套钩子来达到类似 vue 的响应式状态： 实现 reactive hooks 代理类声明代理状态的类应当提供可访问的状态，和订阅变化的接口。 …...

编程日记 2023/10/22 19:49:40

代码随想录打卡第四十六天|完全背包 ● 518. 零钱兑换 II ● 377. 组合总和 Ⅳ

完全背包理论有N件物品和一个最多能背重量为W的背包。第i件物品的重量是weight[i]，得到的价值是value[i] 。每件物品都有无限个（也就是可以放入背包多次），求解将哪些物品装入背包里物品价值总和最大。完全背包和01背包问题唯一…...

编程日记 2023/10/22 19:48:40

【BP-Adaboost预测】基于BP神经网络的Adaboost的单维时间序列预测研究（Matlab代码实现）

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/10/22 19:47:38

Qwen2-VL-2B-Instruct实战落地：法律文书图片与结构化案情摘要的语义一致性验证

Qwen2-VL-2B-Instruct实战落地：法律文书图片与结构化案情摘要的语义一致性验证 1. 项目背景与价值在法律文书处理领域，经常需要验证图片形式的文书内容与结构化案情摘要之间的一致性。传统方法依赖人工比对，效率低下且容易出错。Qwen2-VL-…...

编程新知 2026/4/19 6:30:41

HunyuanVideo-Foley 开发环境搭建：使用MobaXterm高效管理远程Linux服务器

HunyuanVideo-Foley 开发环境搭建：使用MobaXterm高效管理远程Linux服务器 1. 为什么选择MobaXterm 对于Windows开发者来说，管理远程Linux服务器一直是个头疼的问题。传统的PuTTY虽然能用，但功能单一；Xshell虽然强大，…...

编程新知 2026/4/19 5:25:01

MATLAB代码实现锂电P2D模型，参数灵活可调并附详细注释解析，电化学与热耦合模型深度解析及...

matlab锂电P2D模型代码，参数可修改加详细注释，电化学热耦合模型，有实例一、工具box概述 LIONSIMBA是一款基于Matlab开发的锂离子电池仿真工具box，以有限体积法为核心，实现了锂离子电池设计、仿真与控制的全流程支持。其…...

编程新知 2026/4/19 5:13:10

UWPHook完整指南：轻松将Windows商店游戏整合到Steam平台

UWPHook完整指南：轻松将Windows商店游戏整合到Steam平台【免费下载链接】UWPHook 🔗 Add your Windows Store or UWP games to Steam 项目地址: https://gitcode.com/gh_mirrors/uw/UWPHook 你是否购买了Xbox Game Pass订阅，却发现这…...

编程新知 2026/4/19 4:43:04

别再只懂03/06功能码了！Modbus协议在智慧农业中的7个高级应用与避坑指南

别再只懂03/06功能码了！Modbus协议在智慧农业中的7个高级应用与避坑指南当清晨的阳光洒向连片的温室大棚，土壤湿度传感器悄然唤醒灌溉系统，风机根据二氧化碳浓度自动调节转速——这些看似简单的农业自动化场景背后，往往隐藏着工业…...

编程新知 2026/4/19 3:07:09

Godot逆向工程工具GDSDecomp：游戏资源解构与重构的深度解析

Godot逆向工程工具GDSDecomp：游戏资源解构与重构的深度解析【免费下载链接】gdsdecomp Godot reverse engineering tools 项目地址: https://gitcode.com/GitHub_Trending/gd/gdsdecomp 在游戏开发与维护的生命周期中，资源包的管理与逆向分析一直…...

编程新知 2026/4/19 0:49:37