專欄：區塊鏈入門到放棄查看目錄-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