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

DAPP实战篇：使用web3.js连接合约

news 来源：原创 2025/9/20 18:32:56

说明

本系列内容目录：专栏：区块链入门到放弃查看目录

如果你还没有创建好项目请先查看：《DApp实战篇：先用前端起个项目》，如果你还不知道web3.js是什么请先查看：《DApp实战篇：前端技术栈一览》。

安装

点此查看web3.js官方文档

打开项目根目录，并唤起终端：

键入web3.js安装命令：

npm install web3

之后回车安装即可。

再运行项目：

运行成功后会在浏览器中默认打开项目，如下：

开始开发

为了方便调试和可视化，我们先在页面上写一个连接合约按钮，代码如下：

<template><q-page class="flex flex-center"><q-btn color="primary" label="点击连接合约"></q-btn></q-page>
</template><script setup>
//
</script>

运行效果如下：

按钮思路

现在我们需要完成的是点击按钮就实现合约连接，如果报错则显示在按钮下面，如果连接成功则则按钮上面显示个连接成功。

修改UI

<template><q-page class="flex flex-center"><q-card class="text-center main-card"><q-card-section class="text-positive"><q-icon name="check" size="4em"></q-icon><h5 class="text-h5 font-weight-bold">连接成功</h5></q-card-section><q-card-section><q-btn size="lg" glossy push color="primary" label="点击连接合约"></q-btn></q-card-section><q-card-section class="text-small text-negative"> 连接失败，错误原因： </q-card-section></q-card></q-page>
</template><script>
import { defineComponent } from 'vue'
export default defineComponent({name: 'IndexPage',
})
</script>
<style>
.main-card {width: 450px;
}
</style>

运行如图：

定义两个变量来控制显示

目前我们的所有元素都是全部显示的，我们要实现的应该是如果连接成功则显示连接成功和隐藏按钮，如果连接失败则显示连接失败以及错误原因，因此再改一下：

<template><q-page class="flex flex-center"><q-card class="text-center main-card"><q-card-section class="text-positive" v-if="isConnected"><q-icon name="check" size="4em"></q-icon><h5 class="text-h5 font-weight-bold">连接成功</h5></q-card-section><q-card-section v-if="!isConnected"><q-btn size="lg" glossy push color="primary" label="点击连接合约"></q-btn></q-card-section><q-card-section class="text-small text-negative" v-if="errorMessage !== ''">连接失败，错误原因：</q-card-section></q-card></q-page>
</template><script>
import { defineComponent } from 'vue'
export default defineComponent({name: 'IndexPage',data: function () {return {isConnected: false, //是否连接成功errorMessage: '', //是否报错}},
})
</script>
<style>
.main-card {width: 450px;
}
</style>

修改完成运行如图：

连接合约

我们先定义一个连接合约的函数，并将其绑定到按钮上：

<template><q-page class="flex flex-center"><q-card class="text-center main-card"><q-card-section class="text-positive" v-if="isConnected"><q-icon name="check" size="4em"></q-icon><h5 class="text-h5 font-weight-bold">连接成功</h5></q-card-section><q-card-section v-if="!isConnected"><!-- 点击连接 --><q-btn @click="connect" size="lg" glossy push color="primary" label="点击连接合约"></q-btn></q-card-section><q-card-section class="text-small text-negative" v-if="errorMessage !== ''">连接失败，错误原因：</q-card-section></q-card></q-page>
</template><script>
import { defineComponent } from 'vue'
export default defineComponent({name: 'IndexPage',data: function () {return {isConnected: false, //是否连接成功errorMessage: '', //是否报错}},methods: {// 定义连接函数connect: function () {},},
})
</script>
<style>
.main-card {width: 450px;
}
</style>

之后开始编码连接：

web3方法：

new web3.eth.Contract(jsonInterface[, address][, options])

1.jsonInterface

ABI对象：至于什么是abi可以查看《基础知识补充篇：认识智能合约的ABI》。

2.address

合约地址。

3.options

其他参数，目前用不到。

连接USDT合约

点此前往区块链浏览器查看合约

这里我们连接eth链的usdt合约，参数如下：

address：0xdac17f958d2ee523a2206206994597c13d831ec7

abi json 如下：

[{"constant": true,"inputs": [],"name": "name","outputs": [{"name": "","type": "string"}],"payable": false,"stateMutability": "view","type": "function"},{"constant": false,"inputs": [{"name": "_upgradedAddress","type": "address"}],"name": "deprecate","outputs": [],"payable": false,"stateMutability": "nonpayable","type": "function"},{"constant": false,"inputs": [{

DAPP实战篇：使用web3.js连接合约

说明本系列内容目录：专栏：区块链入门到放弃查看目录如果你还没有创建好项目请先查看：《DApp实战篇：先用前端起个项目》，如果你还不知道web3.js是什么请先查看：《DApp实战篇：前端技术栈一览》。安装点此查看web3.js官方文档打开项目根目录，并唤起终端：键入w…...

编程日记 2025/9/20 18:32:56

用 Python 构建一个简单的本地视频流媒体服务器

你是否曾经想过在本地网络上轻松地将电脑上的视频分享给手机或平板电脑观看？也许你下载了一部电影，想在客厅的智能电视上播放，却不想费力地拷贝文件。今天，我们将深入分析一个 Python 脚本，它使用 wxPython 创建图形用…...

编程日记 2025/9/20 18:31:59

汇丰xxx

1. Spring Boot 的了解，解决什么问题？ 我的理解： Spring Boot 是一个基于 Spring 框架的快速开发脚手架，它简化了 Spring 应用的初始搭建和开发过程。解决的问题： 简化配置： 传统的 Spring 应用需要大量的…...

编程日记 2025/9/10 18:33:30

ruby基础语法

以下是 Ruby 基础语法的简明总结，适合快速入门： 一、变量与常量局部变量小写字母或下划线开头，作用域为当前代码块。 name "Alice" _age 20实例变量以开头，属于对象实例。 name "Bob"类变量以开头…...

编程日记 2025/9/7 13:29:46

智体OS-V3.1版：新增了rt-datalink底层数据链通讯，实现【无网络】本机使用

##智体OS-V3.1版本发布更新简介 dtns.os智体OS-V3.1版：新增了rt-datalink底层数据链通讯（使用本地局域网的websocket端口通讯），解决了本机【无网络】正常使用的问题。更新内容 dtns.connector支持使用新的rt-datalink与智体…...

编程日记 2025/9/18 15:02:18

Windows系统安装Git以及Git常用命令介绍

本文主要介绍Windows系统安装Git的方法，以及Git常用命令介绍。一、下载Git 官网： Git - Downloads (git-scm.com) 根据自己的系统选择我的是64位的Windows系统，选择对应的安装包，点击后开始下载等待下载完成二、安装Git 双…...

编程日记 2025/9/15 21:49:29

HTML 开发者的智能助手：通义灵码在 VSCode 中的应用

引言在 HTML 开发领域，提高编码效率和质量是每位开发者追求的目标。通义灵码，作为一款由阿里云技术团队开发的智能编码助手，能够通过其强大的 AI 能力，为 HTML 开发者提供包括代码自动补全、智能注释、代码优化等多方面的支持。…...

编程日记 2025/9/10 20:52:47

MySQL随机获取记录之方法（The Method of Randomly Obtaining Records in MySQL）

MySQL中如何随机获取一条记录随机获取一条记录是在数据库查询中常见的需求，特别在需要展示随机内容或者随机推荐的场景下。在 MySQL 中，有多种方法可以实现随机获取一条记录，每种方法都有其适用的情况和性能特点。在本文中，我们将…...

编程日记 2025/9/11 21:33:13

Ubuntu 下 nginx-1.24.0 源码分析 - ngx_core_module-CSDN博客定义在 src\core\nginx.c ngx_module_t ngx_core_module {NGX_MODULE_V1,&ngx_core_module_ctx, /* module context */ngx_core_commands, /* module directives */…...

编程日记 2025/9/18 22:44:30

41--华为IPSec主备链路实验：当加密隧道遇上“双保险“

🚦 华为IPSec主备链路实验：当加密隧道遇上"双保险" “如果你的IPSec隧道只有一条路，那就像走钢丝不系安全带——刺激但危险！” —— 本文将用华为设备打造主备双加密通道，结合IP-link智能检测，让…...

编程日记 2025/9/20 4:51:12

Reactive编程框架与工具

文章目录 6.2 后端 Reactive 框架6.2.1 Spring WebFlux核心架构核心组件实际应用高级特性性能优化适用场景与限制 6.2.2 Akka（Actor模型）Actor模型基础基本用法高级特性响应式特性实现性能优化实际应用场景优势与挑战 6.2.3 Vert.x（事件驱动&…...

编程日记 2025/9/9 1:33:53

vi/vim常用快捷键

那么今天我们继续昨天没有介绍完的vi编辑器,来看看常用的一些快捷键,方便我们对文件的编辑. 1.拷贝当前行yy,拷贝当前行向下的5行5yy,并粘贴(输入p) 2.删除当前行dd,删除当前行向下的5行5d 3.在文件中查找某个单词[命令模式/关键字,回车查找,输入n就是查找下一个] ⭐️&…...

编程日记 2025/9/15 18:37:51

初始JavaEE篇 —— SpringBoot 统一功能处理

找往期文章包括但不限于本期文章中不懂的知识点： 个人主页：我要学编程程(ಥ_ಥ)-CSDN博客所属专栏：JavaEE 目录前言拦截器基本使用拦截器的路径配置统一数据返回格式统一异常处理前言在实际开发中，某些功能需要强…...

编程日记 2025/9/20 10:37:11

Spring AI Alibaba 文档检索使用

一、文档检索 (Document Retriever)简介 1、核心概念文档检索（DocumentRetriever）是一种信息检索技术，旨在从大量未结构化或半结构化文档中快速找到与特定查询相关的文档或信息。文档检索通常以在线(online)方式运行。 DocumentRetriever通…...

编程日记 2025/9/18 11:49:59

遍历算法及其应用详解

李升伟整理什么是遍历？ 遍历是指按照某种规则或顺序，系统地访问数据结构（如树、图等）中的每个节点一次且仅一次的过程。遍历是算法设计中的基本操作，用于访问、检查或修改数据结构中的所有元素。主要遍历算法 1…...

编程日记 2025/9/19 8:48:23

.NET-EFCore基础知识

.NET EF Core（Entity Framework Core）是微软开发的一款开源的对象关系映射（ORM）框架，用于在.NET 应用程序中与数据库进行交互。以下是一些.NET EF Core 的基础知识： 1. 什么是 EF Core EF Core 是.NET 平…...

编程日记 2025/9/9 12:28:27

R语言基础包可视化（一：axis函数）

R语言基础包可视化（一：axis函数）背景axis函数（坐标轴函数）各参数的图片示例hadj和padjline和poslty,lwd,lwd.ticksgap.axis总结背景之前在介绍正态Q-Q图的过程中，画过标准正态分布的随机数、分数数、分布函数、密度函数的图像，相关的文章连接参考此处：R语言正态Q-Q图…...

编程日记 2025/9/11 17:42:25

Axure疑难杂症：垂直菜单折叠与展开（玩转垂直菜单）

亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！课程主题：垂直菜单折叠与展开主要内容：折叠与展开效果应用场景：PC后台菜单、动态下拉菜单、商品分类选择等折叠与展开场景案例展示：案例视频：垂直菜单折叠与展开效果正文内容：关于垂直菜单的折叠与…...

编程日记 2025/9/18 12:39:36

docker 中跑faster-whisper 教程（1050显卡）

之前我本地机器运行faster-whisper 会报错类似 Could not load library libcudnn_ops_infer.so.8github 上也有类似的情况 ：https://github.com/SYSTRAN/faster-whisper/issues/516#issuecomment-2785038635 缺少.so.8 文件，我通过以下方式，…...

编程日记 2025/9/19 1:49:51

MySQL 在 CentOS 7 环境安装完整步骤

1. 卸载已有环境（MariaDB/旧版MySQL） 1.停止 MariaDB 服务 systemctl stop mariadb.service 2.检查并卸载 MariaDB/MySQL 安装包 rpm -qa | grep mariadb # 检查 MariaDB 相关包 rpm -qa | grep mysql # 检查 MySQL 相关包 sudo yum remo…...

编程日记 2025/9/11 11:18:26

下一代智能爬虫框架：ScrapeGraphAI 详解

更多内容请见：爬虫和逆向教程-专栏介绍和目录文章目录一、ScrapeGraphAI 概述1.1 ScrapeGraphAI介绍1.2 核心特点1.3 工作流程1.4 关键模块1.5 对比传统爬虫框架1.6 安装二、基础操作2.1 自定义解析规则2.2 数据后处理2.3 分布式爬取三、高级功能3.1 多步骤交互采集3.2 动态…...

编程日记 2025/9/15 20:01:46

C++-ffmpeg-2-3-工厂模式封装SDL-9-7

1.接口设计 2.窗口渲染器和材质初始化 3.渲染Draw并测试渲染YUV 4.渲染画面随窗口大小自动缩放并抗锯齿 5.清理接口和接收窗口退出事件 1.接口设计：原则主要的实现步骤： main的流程： 1打开文件 yuv_file.open("400_300_25.yuv&quo…...

编程日记 2025/9/19 8:20:06

下载极客漫画——Beautiful Soup实用案例

文章目录一、背景介绍二、实现思路三、效果图四、构思五、实现细节 1. 第一步下载网页 2. 寻找和下载漫画图像 3. 保存图像，找到前⼀张漫画六、完整代码七、程序输出八、附录九、总结一、背景介绍 XKCD网站是一个关于浪漫、隐喻、数字、以及…...

编程日记 2025/9/10 8:07:16

【大模型理论篇】SWIFT: 可扩展轻量级的大模型微调基础设施

1. 背景大模型(LLM)和多模态大模型(MLLM)利用基于Transformer的架构获得了很迅速的发展。为满足对这些模型的训练和轻量级微调需求，目前已有一些开源框架，如LLaMA-Factory、Firefly、FastChat、Axolotl和LMFlow等。但这些框架在支持的模型、技术和功能上…...

编程日记 2025/9/4 20:47:05

利用 schedule 模块在每日上午每 3 秒执行任务

一、schedule 模块基础原理与功能概述 schedule 模块维护了一个任务队列，每个任务都关联着一个特定的时间触发器和对应的执行函数。当系统时间到达任务设定的触发时间时，模块会从队列中取出相应的任务并执行其关联的函数。这种设计模式使得开发者无需过多关注底层的时间处理…...

编程日记 2025/9/9 17:52:34

ruby超高级语法

以下是 Ruby 中一些极度硬核的语法和底层特性，涉及元编程的深渊、虚拟机原理、语法黑魔法等，适用于追求极限的 Ruby 开发者： 一、语法核弹级操作 1. 动态修改继承链 class A; def foo; "A"; end end class B; def foo; "B…...

编程日记 2025/9/10 19:35:26

Java Stream API：现代化集合处理的艺术

Java Stream API：现代化集合处理的艺术引言在Java 8中引入的Stream API彻底改变了我们处理集合数据的方式。它不仅仅是一个新的工具集，更代表了一种声明式、函数式的编程范式。本文将深入探讨Java Stream的核心概念、使用场景和最佳实践。一、什么是Stream？ Stream（…...

编程日记 2025/9/18 16:49:01

ruby高级语法

以下是 Ruby 高级语法的详细总结，涵盖元编程、模式匹配、闭包、并发模型等核心主题： 一、元编程（Metaprogramming） 1. 动态定义方法 class DynamicClass# 使用 define_method 动态定义方法["foo", "bar"].e…...

编程日记 2025/9/9 18:08:39

特权FPGA之UART串口

0.简介通用异步收发器(Universal Asynchronous Receiver／Transmitter，UART)可以和各种标准串行接口，如RS 232和RS 485等进行全双工异步通信，具有传输距离远、成本低、可靠性高等优点。一般UART由专用芯片如8250，1645…...

编程日记 2025/9/19 17:21:53

oracle 索引失效

在 Oracle 11g 中，索引失效的常见原因包括函数修改列、隐式类型转换、统计信息过时等，解决方法需结合版本特性（如虚拟列、索引跳跃扫描）。通过执行计划分析、统计信息维护和合理使用提示（Hints）&#xff0c…...

编程日记 2025/9/9 9:48:58

MySQL查看binlog执行情况

因数据丢失，被要求使用binlog查看执行SQL的具体情况。拿到数据库压缩包，解压缩获得文件和文件夹若干。如图，有17个binlog文件，目标数据库名应为corr。已知这个数据库是安装在windows下，版本8.0. 先下载一个mysq…...

编程日记 2025/9/11 12:19:39

kotlin，Android，jetpack compose，日期时间设置

AI生成，调试出来学习，这些小组件会用了，就可以组合一个大点的程序了。 package com.example.mydatetimeimport android.app.AlertDialog import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.co…...

编程日记 2025/9/3 7:21:02

sql-labs靶场 less-2

文章目录 sqli-labs靶场less 2 联合注入 sqli-labs靶场每道题都从以下模板讲解，并且每个步骤都有图片，清晰明了，便于复盘。 sql注入的基本步骤注入点注入类型字符型：判断闭合方式 （‘、"、’、“”&#xf…...

编程日记 2025/9/20 4:39:41

ssh密钥连接远程服务器并用scp传输文件

ssh密钥连接远程服务器私钥的权限必须是600chmod 600 id_rsa连接时在命令中加上私钥的地址ssh -i PATH_to_id_rsa usernameip -p port scp -P port -i PATH_to_id_rsa file usernameip:PATH...

编程日记 2025/8/17 23:42:53

【锂电池SOH预测】PSO-BP锂电池健康状态预测，锂电池SOH预测（Matlab完整源码和数据）

预测效果基于PSO-BP算法的锂电池健康状态预测研究一、引言 1.1 研究背景与意义在当今社会，锂电池凭借其高能量密度、长寿命及环境友好等特性，在现代能源系统中占据着举足轻重的地位。从消费电子领域如智能手机、笔记本电脑，到动力领域中…...

编程日记 2025/9/15 21:51:23

找搭子系统搭子经济新风口基于精准匹配的社交新生态探索

一、市场前景：为什么现在需要"找搭子"？ 孤独经济爆发超60%年轻人存在"精准陪伴"需求（2024社交报告） 传统社交App无法满足"非婚恋、非熟人"的中间态需求线下活动复苏剧本杀/飞盘等兴趣活动年增…...

编程日记 2025/9/20 14:43:22

《Spring Boot+策略模式：企业级度假订单Excel导入系统的架构演进与技术实现》

前言在数字化时代背景下，订单管理系统的高效性与灵活性成为企业竞争力的核心要素。本文档详细剖析了一个基于策略模式的度假订单导入系统，通过分层架构设计实现了多源异构数据的标准化处理。系统以 Spring Boot 为核心框架，结合 MyBatis …...

编程日记 2025/9/15 17:02:57

软件需求分析习题汇编

需求工程练习题一、选择题 1. 软件需求规格说明书的内容不应包括对（ ）的描述。 A. 主要功能B. 算法的详细过程C. 用户界面及运行环境D. 软件的性能 *正确答案:*B:算法的详细过程; 2. 需求分析最终结果是产生（ ） A. 项目开发…...

编程日记 2025/9/11 3:39:40

51单片机的汇编伪指令

目录一、ORG 汇编起始地址命令 1、功能 2、语法格式 3、使用示例 4、注意事项二、END 汇编终止命令 1、功能 2、语法格式 3、使用示例 4、注意事项三、EQU 赋值命令 1、功能 2、语法格式 3、使用示例 4、注意事项四、BIT 位定义命令 1、功能 2、语法格式…...

编程日记 2025/9/12 12:07:35

深入探究Python的re模块及其在爬虫中的应用

深入探究Python的re模块及其在爬虫中的应用一、引言在Python的强大生态系统中，re模块作为处理正则表达式的核心工具，发挥着举足轻重的作用。正则表达式是一种描述文本模式的强大语言，能够高效地进行字符串的匹配、查找、替换等操作。无论…...

编程日记 2025/9/14 4:35:50

aosp13增加摄像头控制功能实现

A13中，可以要求做一个开关来控制摄像头是否可用，约束所有使用摄像头的应用。思路：设置中增加开关设置一个属性值，在摄像头调用实现层增该值判断即可一开关的开发： 设置-安全中增加开关选项代码部分&#x…...

编程日记 2025/9/9 17:41:36

Kotlin 之 vararg 参数向下传递的几种方式

在 Kotlin 中，vararg 参数是一种特殊的参数类型，用于表示可变数量的参数。vararg 参数是否可以向下传递，需要根据目标方法的参数类型来决定。 1、目标方法参数也是vararg类型，可直接向下传递在 method 方法中，通过 …...

编程日记 2025/9/15 1:10:03

Kotlin学习

kotlin android 开源,Kotlin开源项目集合_晚安呼-华为开发者空间干货来袭，推荐几款开源的Kotlin的Android项目...

编程日记 2025/9/18 12:35:14

AI写程序:图片批量重命名工具 - 自动化整理您的图片库

图片批量重命名工具 - 自动化整理您的图片库 GitHub项目地址: https://github.com/dependon/renameImage 项目介绍这是一个基于Python开发的图形界面工具，用于批量重命名文件夹中的图片文件。它能够递归处理选定文件夹及其所有子文件夹中的图片，按照…...

编程日记 2025/9/11 13:37:45

git命令自动拉去远程分支到本地

是的，可以通过 Git 命令自动拉取远程分支并在本地创建同名分支。以下是几种方法： 方法 1：直接拉取远程分支并创建同名本地分支 git fetch origin <远程分支名> # 拉取远程分支 git checkout -b <本地分支名> origin/<远程分…...

编程日记 2025/9/9 12:56:29

[创业之路-364]：穿透表象：企业投资的深层逻辑与误区规避

前言： 透过现象看本质企业一生与人生相似看企业如同看人三岁看大，七岁看老三十年河东，三十年河西企业也有品行、文化、气质、性格、赚钱、生命周期与赚钱曲线投资公司的目的是未来赚钱，赚未来赚钱。投资创业中的企业主要看…...

编程日记 2025/9/18 10:54:23

UE5 蓝图里的声音

文章目录支持的格式设置循环播放在场景中放置音频设置音频的衰减与不衰减在UI动画中播放声音使用蓝图节点播放声音按钮本身就可以播放声音支持的格式支持：WAV 不支持：MP3 设置循环播放双击音频，打开音频设置，勾选Looping …...

编程日记 2025/9/12 11:21:25

Spring Boot 邮件发送配置遇到的坑：解决 JavaMailSenderImpl 未找到的错误

在使用 Spring Boot 开发时，我们经常需要通过邮件发送功能来实现某些业务逻辑。为了方便快速集成，Spring Boot 提供了一个非常好用的 spring-boot-starter-mail 模块，帮助我们轻松发送邮件。但是，在配置过程中可能会遇到一些问题&…...

编程日记 2025/9/8 13:57:20

路由表的最终地址 root 路由跟踪,最终到哪里去

在路由跟踪（如tranceroute或trancert命令）中，最终地址是目标主机或服务器的IP地址或域名所对应的实际网络地址；路由跟踪的目的是显示数据包从本地主机到目标主机所经过的每一跳路由器或网络节点，而最终地址是数据包要到达的目标设备。 1.路由跟踪的最终地址目标主机：路…...

编程日记 2025/9/15 11:07:31

Docker面试全攻略（一）：镜像打包、容器运行与高频问题解析

引言在云原生和微服务架构盛行的今天，Docker 已成为后端开发的必备技能。本文从面试高频考点出发，系统梳理 Docker 镜像构建、容器运行的核心知识点，助你轻松应对 Docker 相关的技术面试！一、Docker 镜像构建核心（面试必问） 1. Dockerfile 核心命令与参数 FROM：基…...

编程日记 2025/9/10 1:29:04

说明

安装