探索ERC20代币：构建您的第一个去中心化应用

下面文章中会涉及到该资源中的代码，如果想要完整版代码可以私信我获取🌹

文章目录

  • 概要
  • 整体架构流程
  • 技术名词解释
    • ERC20
    • 智能合约
    • web3.js
  • 技术细节
    • ERC20合约部署
    • 创建前端界面
    • 前端与智能合约互连
    • 运行DAPP
  • 小结

概要

在加密货币世界中，ERC20代币是最常见的一种代币标准之一。它们在以太坊区块链上发挥着重要作用，被用于代币募资、去中心化交易所和其他金融应用中。本文将介绍ERC20代币的基础知识，并通过构建一个简单的去中心化应用（DApp）来展示如何与ERC20代币进行交互。

在这里插入图片描述

整体架构流程

  1. 智能合约开发：
    首先，需要开发一个符合ERC20标准的智能合约。这个智能合约定义了代币的基本功能，如转账、余额查询等。在开发过程中，需要考虑安全性、效率和合规性等方面的因素。

  2. 智能合约部署：
    将编写的智能合约部署到以太坊网络上。可以使用以太坊开发工具如Remix、Truffle或Hardhat来完成部署过程。部署智能合约后，会生成一个合约地址，用于与合约进行交互。

  3. 前端开发：
    创建一个前端界面，让用户可以与智能合约进行交互。前端界面可以使用HTML、CSS和JavaScript等技术来构建，并使用Web3.js或其他以太坊JavaScript库来与以太坊网络进行通信。

  4. 连接以太坊网络：
    在前端代码中，使用Web3.js库连接到以太坊网络。这样可以与部署的智能合约进行交互，例如调用合约的方法和获取合约的状态。

  5. 实现功能：
    在前端界面中实现ERC20代币的各种功能，如查看账户余额、转账代币、铸造和销毁代币等。用户可以通过界面与智能合约进行交互，并执行相应的操作。

  6. 测试和优化：
    在完成功能实现后，对DApp进行测试以确保其功能正常。可以使用自动化测试工具或手动测试来检查DApp的各个方面。同时，可以优化DApp的用户体验、性能和安全性，以提升用户满意度。

  7. 部署和推广：
    当DApp通过测试并且已经优化完毕后，可以将其部署到主网或测试网上。在部署之前，确保遵循安全最佳实践和合规要求。部署完成后，可以通过社交媒体、论坛等渠道推广DApp，吸引用户使用和参与。

  8. 持续维护：
    一旦DApp上线，就需要进行持续的维护和更新。监控DApp的性能和安全性，并及时解决出现的问题。同时，根据用户反馈和市场需求，不断优化和改进DApp，保持其竞争力和吸引力。

技术名词解释

ERC20

  • ERC20是以太坊区块链上的一种代币标准，全称为"Ethereum Request for Comment 20"。
  • 它是一种智能合约标准，定义了以太坊上可互操作的代币合约接口和规则。
  • 符合ERC20标准的代币具有一系列标准方法，如转账、查询余额、授权等，使得它们可以与其他智能合约和应用程序进行交互。

智能合约

  • 智能合约是一种在区块链上运行的自动化合约，它们包含了预先编写好的代码和规则。
  • 这些代码和规则可以自动执行，而不需要第三方进行干预，从而实现了可信的去中心化交易和业务逻辑。
  • 智能合约通常使用Solidity等编程语言编写，然后部署到区块链网络上。以太坊是最流行的智能合约平台之一。

web3.js

  • Web3.js是一个JavaScript库，用于与以太坊网络进行交互。
  • 它允许开发人员通过JavaScript代码与以太坊节点通信，例如发送交易、- 调用智能合约方法、查询区块链状态等。
    Web3.js提供了丰富的API和工具，使得以太坊开发更加简单和便捷。

技术细节

ERC20合约部署

首先进到remix网站开发以及部署智能合约，创建一个ERC20.sol文件和IERC20.sol文件，放入下面的代码，对ERC20.sol进行编译部署

编译：
在这里插入图片描述

部署：
在这里插入图片描述

ERC20.sol：

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.19;

import "./IERC20.sol";

contract ERC20 is IERC20 {
    uint public totalSupply;
    mapping(address => uint) public balanceOf;
    mapping(address => mapping(address => uint)) public allowance;
    string public name = "HJYCoin";
    string public symbol = "HJYC";
    uint8 public decimals = 0;

    function transfer(address recipient, uint amount) external returns (bool) {
        balanceOf[msg.sender] -= amount;
        balanceOf[recipient] += amount;
        emit Transfer(msg.sender, recipient, amount);
        return true;
    }

    function approve(address spender, uint amount) external returns (bool) {
        allowance[msg.sender][spender] = amount;
        emit Approval(msg.sender, spender, amount);
        return true;
    }  

    function transferFrom(
        address sender,
        address recipient,
        uint amount
    ) external returns (bool) {
        allowance[sender][msg.sender] -= amount;
        balanceOf[sender] -= amount;
        balanceOf[recipient] += amount;
        emit Transfer(sender, recipient, amount);
        return true;
    }

    function mint(uint amount) external {
        balanceOf[msg.sender] += amount;
        totalSupply += amount;
        emit Transfer(address(0), msg.sender, amount);
    }

    function burn(uint amount) external {
        balanceOf[msg.sender] -= amount;
        totalSupply -= amount;
        emit Transfer(msg.sender, address(0), amount);
    }
}

IERC20.sol：

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.19;

// https://github.com/OpenZeppelin/openzeppelin-contracts/blob/v3.0.0/contracts/token/ERC20/IERC20.sol
interface IERC20 {
    function totalSupply() external view returns (uint);

    function balanceOf(address account) external view returns (uint);

    function transfer(address recipient, uint amount) external returns (bool);

    function allowance(address owner, address spender) external view returns (uint);

    function approve(address spender, uint amount) external returns (bool);

    function transferFrom(
        address sender,
        address recipient,
        uint amount
    ) external returns (bool);

    event Transfer(address indexed from, address indexed to, uint value);
    event Approval(address indexed owner, address indexed spender, uint value);
}

创建前端界面

打开vscode，创建index.html文件

index.html：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="web3.min.js"></script>
        <link rel="stylesheet" href="index.css" />
        <title>ERC20 DAPP</title>
    </head>

    <body>
        <div class="center">
            <h1>ERC20 DAPP</h1>
            点击获取地址和余额:
            <button type="submit" class="enableEthereumButton">获取</button>
            <h3>账户地址: <span class="showAccount"></span></h3>
            <h3>账户余额: <span class="MyBalance"></span></h3>
            <h3>代币余额:<span class="tokenBalance"></span></h3>

            <hr>
            
            <!-- 转账代币 -->
            <h2>ERC20 代币交易</h2> 
                 <input type="text" id="address" placeholder="输入你的账户地址">
                <div></div>
                <input type="text" id="token" placeholder="输入发送的代币数量">
                <button type="submit" class="sendbutton">发送</button> 

            <!-- 铸造代币 -->
            <h2>铸造ERC20代币</h2>
            <form id="mintForm">
                <input type="text" id="mintAmount" placeholder="输入铸造的代币数量">
            </form>
            <button type="submit" class="mintEthereumButton">铸造</button>
            <h3>交易Status:<span id="mintStatus"></span></h3>
            <h3>交易Hash:<ol id="mintTransactions"></ol></h3>

            <!-- 销毁代币 -->
            <h2>销毁ERC20代币</h2>
            <form id="burnForm">
                <input type="text" id="burnAmount" placeholder="输入销毁的代币数量">
            </form>
            <button type="submit" class="burnEthereumButton">销毁</button>
            <h3>交易Status:<span id="burnStatus"></span></h3>
            <h3>交易Hash:<ol id="burnTransactions"></ol></h3>

        </div>
        <script type="text/javascript" src="app.js"></script>
    </body>
</html>

前端与智能合约互连

打开vscode，创建app.js文件

下面的contractERC20Abi在下图中复制过去
在这里插入图片描述

合约地址ERC20_address
在这里插入图片描述

app.js：

console.log("ERC20")

let accounts = [];
let web3 = new Web3(Web3.givenProvider || "http://localhost:8545");
console.log("web3===>", web3)

if (typeof window.ethereum !== 'undefined') {
    console.log('MetaMask is installed!');
}

console.log("isMetaMask:" + ethereum.isMetaMask)

//这里contractERC20Abi为上面ERC20合约编译得到的ABI
var contractERC20Abi = [...];

// ERC20_address为部署合约得到的合约地址
const ERC20_address = '...'
const contractERC20 = new web3.eth.Contract(contractERC20Abi, ERC20_address)
console.log('contractERC20:', contractERC20)

//获取按钮
$(".enableEthereumButton").click(function () {
    getAccount()
})
//转账按钮
$(".sendbutton").click(function () {
    sendToken()
})

//铸造按钮
$(".mintEthereumButton").click(function () {
	event.preventDefault(); // 防止默认的表单提交行为

    const mintAmount = $("#mintAmount").val(); // 从输入字段获取要铸造的数量

    if (mintAmount) {
        mintTokens(mintAmount);
    } else {
        $("#mintStatus").text("请输入铸造的代币数量");
    }
})

//销毁按钮
$(".burnEthereumButton").click(function () {
	event.preventDefault(); // 防止默认的表单提交行为

    const burnAmount = $("#burnAmount").val(); // 从输入字段获取要销毁的数量

    if (burnAmount) {
        burnTokens(burnAmount);
    } else {
        $("#burnStatus").text("请输入销毁的代币数量");
    }
})
async function getAccount() {
    accounts = await ethereum.request({ method: 'eth_requestAccounts' });
    const account = accounts[0];
	accountBalance = await web3.eth.getBalance(account); 
    $(".showAccount").html(account);
	$(".MyBalance").html(web3.utils.fromWei(accountBalance, 'ether') + ' ETH');
    getBalance();
}

async function getBalance() {
    accounts = await ethereum.request({ method: 'eth_requestAccounts' });
    contractERC20.methods.balanceOf(accounts[0]).call({ from: accounts[0] }).then(
        function (result) {
            console.log('tokenBalance', result)
            $(".tokenBalance").html(web3.utils.fromWei(result, 'ether') + ' HJYETH')

        }
    );
} 

// 铸造代币函数
async function mintTokens(amount) {
    try {
        accounts = await ethereum.request({ method: 'eth_requestAccounts' });
		amuountETH = web3.utils.toWei(amount, 'ether');
        const result = await contractERC20.methods.mint(amuountETH).send({ from: accounts[0] });
        $("#mintStatus").text("铸造成功");
		$("#mintTransactions").append( result.transactionHash );
    } catch (error) {
        $("#mintStatus").text("铸造失败: " + error.message);
    }
}

// 销毁代币函数
async function burnTokens(amount) {
    try {
        accounts = await ethereum.request({ method: 'eth_requestAccounts' });
		amuountETH = web3.utils.toWei(amount, 'ether');
        const result = await contractERC20.methods.burn(amuountETH).send({ from: accounts[0] });
        $("#burnStatus").text("销毁成功");
		$("#burnTransactions").append( result.transactionHash);
    } catch (error) {
        $("#burnStatus").text("销毁失败: " + error.message);
    }
}


// 转账代币函数
async function sendToken() {
    _address = $('#address').val();
    TokenNum = $('#token').val();
    console.log('_address:', _address,'TokenNum', TokenNum)
    // getErc20($(".ErcAddress").html());
    accounts = await ethereum.request({ method: 'eth_requestAccounts' });
	TokenNumETH = web3.utils.toWei(TokenNum, 'ether');
    contractERC20.methods.transfer(_address,TokenNumETH).send({ from: accounts[0] }).then(
        function (result) {
            console.log('result', result)
            // $("#status").html(result.status)
            // $("#transactions").html(result.transactionHash)
            }
)} 


ethereum.on('accountsChanged', function (accounts) {
    console.log("accountsChanged");
    getAccount()
});

ethereum.on('chainChanged', (chainId) => {
    console.log("chainId", chainId);

});

运行DAPP

在index.html里面右键单击，再点击open with live server跳转到DAPP界面

在这里插入图片描述
在这里插入图片描述

启动geth私链，打开MetaMask小狐狸钱包，连接到geth网络，就可以进行界面中的各项操作了，例如：获取当前钱包账户地址，铸币，销毁，转账等操作

在这里插入图片描述

小结

通过构建一个简单的ERC20代币DApp，您可以深入了解以太坊智能合约和去中心化应用程序的开发过程。这个项目不仅可以帮助您学习以太坊开发的基础知识，还可以为您未来构建更复杂的DApp奠定基础。
希望本文能够帮助读者更好地了解区块链的DAPP含义，如果有任何疑问或者建议，欢迎留言讨论🌹

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/543892.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

地球上的七大洲介绍

地球上的七大洲介绍

地球上的七大洲示意图&#xff1a; 1. 亚洲&#xff08;Asia&#xff09;&#xff1a;世界上最大的洲&#xff0c;面积约为44579000平方公里。亚洲地域辽阔&#xff0c;包括从北极圈到赤道的各种气候和地形。它拥有世界上最多的人口&#xff0c;也是世界上一些最古老文明的发源…
阅读更多...
【Linux】账号和权限管理

【Linux】账号和权限管理

目录 一、用户账号与组账号 二、添加用户账号-useradd 三、修改用户账号的属性-usermod 四、更改用户命令-passwd 五、删除用户账号-userdel 六、添加组账号-groupadd 七、添加删除组成员-gpasswd 八、删除组账号-groupdel 九、查询账号信息-groups、id、finger、w、w…
阅读更多...
REINFORCE及进阶算法讲解笔记

REINFORCE及进阶算法讲解笔记

REINFORCE 总结 估计VALUE-methods没有在理论上证明收敛&#xff0c;而policy-methods不需要估计value function。 本算法总结了过去的算法&#xff0c;将过去算法作为特例看待&#xff0c;证明了即使是结合函数估计和实际采样的value梯度都可以无偏估计&#xff0c;证明了某种…
阅读更多...
Java基础（一）--语法入门

Java基础（一）--语法入门

文章目录 第一章、语法入门一、Java简介1、JVM2、Java程序执行过程3、JDK4、JRE5、JDK、JRE和JVM三者关系 二、Java常量与变量1、标识符2、关键字3、保留字4、变量5、数据类型6、常量 三、运算符1、算术运算符2、赋值运算符3、关系运算符4、逻辑运算符5、条件运算符6、运算符的…
阅读更多...
Spring5深入浅出篇:Spring自定义类型转换器

Spring5深入浅出篇:Spring自定义类型转换器

Spring5深入浅出篇:Spring自定义类型转换器 类型转换器 首先要知道什么叫做类型转换器 ,我们通过配置的属性值是以字符串的形式为什么在查看对象成员变量时已经变成了int,这就是Spring的内置类型转换器帮我们做了自动类型转换. 作⽤&#xff1a;Spring通过类型转换器把配置⽂件…
阅读更多...
Leetcode二十三题：合并K个升序链表【22/1000 python】

Leetcode二十三题：合并K个升序链表【22/1000 python】

“合并K个升序链表”&#xff0c;这是一道中等难度的题目&#xff0c;经常出现在编程面试中。以下是该问题的详细描述、解题步骤、不同算法的比较、代码示例及其分析。 问题描述 给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中…
阅读更多...
数据结构书后习题

数据结构书后习题

p17 1&#xff0c; 个人解答&#xff1a; int DeleteMinElem(SqList &L,int &min) {int j 0;if (L.length 0){printf("error!");return 0;}int min L.data[0];for (int i 1; i < L.length; i){if (L.data[i] < min){min L.data[i];j i;}}L.dat…
阅读更多...
软考127-上午题-【软件工程】-McCabe度量法

软考127-上午题-【软件工程】-McCabe度量法

一、McCabe度量法 1-1、定义 McCabe 度量法是通过定义环路复杂度&#xff0c;建立程序复杂性的度量。 它基于一个程序模块的程序图中环路的个数。计算有向图G的环路复杂性的公式为&#xff1a; V(G) m - n 2 闭合区域 1 其中V(G)是有向图 G 中的环路个数&#xff0c;m 是…
阅读更多...
【C语言__结构体__复习篇3】

【C语言__结构体__复习篇3】

目录 前言 一、结构体基础知识 1.1 结构体的语法形式 1.2 创建结构体变量 1.3 结构体变量的初始化 1.4 点(.)操作符和箭头(->)操作符 二、匿名结构体 三、结构体自引用 四、结构体内存对齐 4.1 内存对齐的规则 4.2 出现结构体内存对齐的原因 4.3 修改默认对齐数 五、结…
阅读更多...
8：系统开发基础--8.1：软件工程概述、8.2：软件开发方法 、8.3：软件开发模型、8.4：系统分析

8：系统开发基础--8.1：软件工程概述、8.2：软件开发方法 、8.3：软件开发模型、8.4：系统分析

转上一节&#xff1a; http://t.csdnimg.cn/G7lfmhttp://t.csdnimg.cn/G7lfm 课程内容提要&#xff1a; 8&#xff1a;知识点考点详解 8.1&#xff1a;软件工程概述 1.软件的生存周期 2.软件过程改进—CMM Capability Maturity Model能力成熟度模型 3.软件过程改进—CMMI—…
阅读更多...
Jmeter配置服务器监控插件

Jmeter配置服务器监控插件

1.安装插件管理器 插件官网地址&#xff1a;JMeter Plugins :: JMeter-Plugins.org 点击 Plugins Manager,如上图所示&#xff0c; &#xff0c;点击jar file下载“plugins-manager.jar”&#xff0c;下载后放到“jmeter\lib\ext”目录下&#xff0c;重启jmeter。 2.安装资源…
阅读更多...
LeetCode 94 二叉树的中序遍历

LeetCode 94 二叉树的中序遍历

题目描述 二叉树的中序遍历 给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,3,2]示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[]示例 3&#xff1a; 输入…
阅读更多...
Composite 组合

Composite 组合

意图 将对象组合成树形结构以表示“部分-整体”的层级结构。Composite使得用户对单个对象和组合对象的使用具有一致性。 结构 其中&#xff1a; Component为组合中的对象声明接口&#xff1b;在适当情况下实现所有类共有接口的默认行为&#xff1b;声明一个接口用于访问和管…
阅读更多...
Spring Boot（二）— 自定义Spring Boot Starter

Spring Boot（二）— 自定义Spring Boot Starter

在Spring Boot中&#xff0c;自定义Spring Boot Starter是一个常见且强大的功能&#xff0c;它允许开发者为特定的功能或库创建自己的自动配置&#xff0c;从而简化集成过程。 1 前置知识 Spring Boot的事件为应用的启动和关闭提供了详细的上下文信息&#xff0c;使得开发者能…
阅读更多...
OSI七层网络模型 —— 筑梦之路

OSI七层网络模型 —— 筑梦之路

在信息技术领域&#xff0c;OSI七层模型是一个经典的网络通信框架&#xff0c;它将网络通信分为七个层次&#xff0c;每一层都有其独特的功能和作用。为了帮助记忆这七个层次&#xff0c;有一个巧妙的方法&#xff1a;将每个层次的英文单词首字母组合起来&#xff0c;形成了一句…
阅读更多...
腾讯云优惠券详细介绍及领券步骤详解

腾讯云优惠券详细介绍及领券步骤详解

随着云计算技术的不断发展和普及&#xff0c;越来越多的企业和个人开始选择使用云服务来满足自身的需求。腾讯云作为国内领先的云服务提供商&#xff0c;以其稳定、高效、安全的服务赢得了广大用户的信赖。为了回馈广大用户&#xff0c;腾讯云经常推出各种优惠活动&#xff0c;…
阅读更多...
【JS】数组交换位置

【JS】数组交换位置

公式 arr.splice(oldIndex, delCount, ...arr.splice(newIndex, delCount, arr[oldIndex])) arr - 操作的数组delCount - 删除的数组个数oldIndex - 交换位置的数组下标1newIndex - 交换位置的数组下标2...arr - 提取数组里的元素 splice删除元素时&#xff0c;返回一个数组&a…
阅读更多...
利用计算机视觉算法提取裂纹相关特征参数信息

利用计算机视觉算法提取裂纹相关特征参数信息

ABCnutter/CrackFeature: &#x1f680;使用计算机视觉相关算法提取裂缝的骨架&#xff08;矢量化&#xff09;、轮廓【支持提前修复断裂裂缝】&#xff0c;以及几何特征参数&#xff08;长度、宽度、面积和主要方向&#xff09;【欢迎Star】。主要流程以及相关算法如下&#x…
阅读更多...
异构超图嵌入的图分类 笔记

异构超图嵌入的图分类 笔记

1 Title Heterogeneous Hypergraph Embedding for Graph Classification&#xff08;Xiangguo Sun , PictureHongzhi Yin , PictureBo Liu , PictureHongxu Chen , PictureJiuxin Cao , PictureYingxia Shao , PictureNguyen Quoc Viet Hung&#xff09;【WSDM 2021】 2 Co…
阅读更多...
1038: 顺序表中重复数据的删除

1038: 顺序表中重复数据的删除

解法&#xff1a; #include<iostream> #include<vector> #include<algorithm> using namespace std; int main() {int n, k;cin >> n;vector<int> arr(n);for (auto& x : arr) cin >> x;cin >> k;int sum 0;for (auto x : arr…
阅读更多...
最新文章

Copyright @ 2022~2023