小试牛刀-区块链代币锁仓(Web页面)

Welcome to Code Block's blog

本篇文章主要介绍了

[区跨链代币锁仓(Web页面)]
❤博主广交技术好友，喜欢我的文章的可以关注一下❤

目录

1.编写目的

2.开发环境

3.实现功能

4.代码实现

4.1 必要文件

4.1.1 ABI Json文件(LockerContractABI.json)

4.2 代码详解

ABI初始化

4.1.1 MetaMask连接到网站

4.1.2 显示锁仓数量、地址数、时间

4.1.3 显示当前锁仓列表

4.1.4 显示锁仓历史记录

4.1.5 显示我的锁仓列表、

4.1.6 锁仓

 4.1.7 解锁

5.测试

5.1 测试截图

 5.2测试视频

6.页面源码

---

1.编写目的

        本篇文章是小试牛刀-区块链代币锁仓合约实战的后续,记录前端页面的开发过程,分享前端页面代码,加深对前端页面理解,同时希望能帮到需要实现相关功能的朋友。

2.开发环境

        该网页使用Vue("vue": "^3.3.11",)实现,与合约的交互使用了web3("web3": "^4.3.0")组件,使用VsCode作为开发集成IDE.

3.实现功能

1. MetaMask连到到网站
2. 显示锁仓数量
3. 显示锁仓人数
4. 显示链上时间
5. 显示当前锁仓列表
6. 显示锁仓历史记录
7. 显示我的锁仓列表
8. 创建锁仓并锁定指定时间
9. 超过锁仓时间后执行解锁

4.代码实现

4.1 必要文件

4.1.1 ABI Json文件(LockerContractABI.json)

        该文件是合约的ABI文件,是Json格式,其中为合约方法的名称和返回参数类型,web3.js组件只有通过这个ABI文件才能知道调用合约方法,以及返回的参数类型.(已在下载源码中包含.),同样可以通过这个链接进行下载.ABI文件

4.2 代码详解

ABI初始化

将ABI文件导入到使用的JS中.

import BabyBonkLoderABI from './LockerContractABI.json';
import BabyBonkABI from './BabyBonkContractABI.json'

然后通过以下代码对ABI文件进行初始化,这里lockerContractAddress变量为合约地址。accounts[0]即连接的MetaMusk地址.

    async initializeContract() {
      try {
        const accounts = await this.web3.eth.getAccounts();
        this.lockerContract = new this.web3.eth.Contract(BabyBonkLoderABI, this.lockerContractAddress, {
          from: accounts[0],
        });
        this.tokenContract=new this.web3.eth.Contract(BabyBonkABI,this.tokenContra