html好看的网站的代码网站加图标
说明
本系列内容目录：专栏：区块链入门到放弃查看目录
如果你还没有创建好项目请先查看：《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": [{