专栏：区块链入门到放弃查看目录-CSDN博客文章浏览阅读396次。为了方便查看将本专栏的所有内容列出目录，按照顺序查看即可。后续也会在此规划一下后续内容，因此如果遇到不能点击的，代表还没有更新。声明：文中所出观点大多数源于笔者多年开发经验所总结，如果你想要知道区块链更多知识如区块链底层实现、区块链专业术语等等，请网上查阅更专业的资料。笔者本专栏只是为了方便一些没有区块链经验和相关知识的开发者以入门使用。https://blog.csdn.net/qq_22502303/article/details/147022618?spm=1001.2014.3001.5502

说明

在《DAPP实战篇：使用web3.js实现前端输入钱包地址查询该地址的USDT余额——前端篇-CSDN博客》一文中我们完成了UI的开发，现在开始使用web3.js进行连接合约并查询地址余额。

开始

思路说明

quasar dev 运行项目，打开链接：http://localhost:9000/#/check-balance/web3

页面如下：

我们需要实现的思路是，假设用户没有连接合约，则显示连接合约按钮，如果用户已经连接合约了则输入地址查询钱包。

连接合约

修改文件 src/pages/check-balance/web3.vue 代码如下：

<template><q-page class="flex flex-center"><q-card class="main-card"><q-card-section><h1 class="text-h4 font-weight-bold">查询余额</h1></q-card-section><q-card-section><q-input outlined v-model="address" label="请输入钱包地址" /&g