如何ETH以太坊智能合约做一个简单的DAPP
2024-05-11 14:15:34
目标：
1、使用etherjs
2、链接MetaMask钱包
3、查询链状态、账号状态、转账、调用合同读函数、调用合同写函数
环境：
1、kovan以太坊测试链上发布合约。合约地址：0xB6b0ab2e6205212FD2A4017bD0A4710b11EA55eb
2、nodejs lite-server web服务器测试。
3、安装Google chrome metamask钱包
智能合约代码：InfoContract.sol
// SPDX-License-Identifier: MIT
pragma solidity 0.8.7;contract InfoContract {string public fName = "azq";uint public age= 47;function setInfo(string memory _fName,uint _age) public returns(bool){fName = _fName;age = _age;return true;}function getInfo() public view returns(string memory,uint){return(fName,age);}
}代码实例：index.html
<!DOCTYPE html>
<html><head><script src="/myscript.js"></script></head><script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"type="text/javascript"></script><!-- <script src="https://cdn.ethers.io/lib/ethers-5.2.esm.min.js"type="text/javascript"></script> --><!-- <script type="module">import { ethers } from "https://cdn.ethers.io/lib/ethers-5.2.esm.min.js";</script> -->
<body onload="f1()"><h2>区块链查询</h2><h3>网络id:<span id="chainId"></span></h3>
<h3>ens地址:<span id="ensAddress"></span></h3>
<h3>网络名:<span id="chainname"></span></h3>
<h3>区块数:<span id="blockNumber"></span></h3>
<form action="" name="myform"><input type="text" id = "inputChainId" value=1>
</form>
<br><button class="queryChain" onclick="queryChain()">查询区块链</button>
<h2>查询账户余额</h2><h3>区块数：<span class= "blockNumber"></span></h3>
<h3>账户余额：<span id="balance"></span></h3>
<h3>格式化余额：<span id="formatBalance"></span></h3><form action="" name="myform"><input type="text" id = "inputCount" value="0xFdF04BcFA232E8D2fBacBb0fb95B092273e8acF8">
</form>
<br><!-- <button id = "button" onclick="f1()">连接钱包</button> -->
<button class="buttonclass" onclick="queryCount()">查询账户</button><h2>获取当前账号</h2>
<h2>Account: <span class="showAccount"></span></h2>
<button class="enableEthereumButton">获取当前账号</button><h2>转账</h2>
<form action="" name="myform"><span>地址：</span><input type="text" id ="inputAddress" value="0x1895626b720Ca74B9F265334aCE49F790Eea4dA1"><span>金额：</span><input type="text" id ="inputNumber" value = 0>
</form>
<button class="buttonclass" onclick="transFunction()">确认转账</button><h2>调用合同写函数</h2>
<form action="" name="myform"><span>姓名：</span><input type="text" id ="inputName" value=""><span>年龄：</span><input type="text" id ="inputAge" value = 0>
</form>
<button class="buttonclass" onclick="writeContractFunction()">调用</button><h2>调用kovan合同只读函数getinfo</h2>
<h3>kovan链合同地址<br>0xB6b0ab2e6205212FD2A4017bD0A4710b11EA55eb<br>的getinfo函数返回值：<span id= "getInforeturns"></span></h3>
<button class="buttonclass" onclick="queryContractFunction()">调用</button><script>async function queryCount(){const provider = new ethers.providers.Web3Provider(window.ethereum);const signer = provider.getSigner();strCount = document.getElementById("inputCount").value;balance = await provider.getBalance(strCount);document.getElementById("balance").innerHTML = balance;blockNumber = await provider.getBlockNumber();document.querySelector(".blockNumber").innerHTML = blockNumber;formatBalance = ethers.utils.formatEther(balance);document.getElementById("formatBalance").innerHTML = formatBalance;}async function queryContractFunction(){const provider = new ethers.providers.Web3Provider(window.ethereum);const signer = provider.getSigner();// const tx = signer.sendTransaction({// to: "0x1895626b720Ca74B9F265334aCE49F790Eea4dA1",// value: ethers.utils.parseEther("0.002")// });// 币安测试链智能合约地址 //const infoAddress = "0x1B307050d688adabE14414C43f4825D1ab751878";// kavan智能合约地址 //0x6426E8dEF3651af00BBAe83C35538a5d94171306//0x982F1399D6bDcf700bf995BE2d2a4394a8D273E6//0xB6b0ab2e6205212FD2A4017bD0A4710b11EA55ebconst infoAddress = "0xB6b0ab2e6205212FD2A4017bD0A4710b11EA55eb";const infoAbi = [{"inputs": [],"name": "getInfo","outputs": [{"internalType": "string","name": "","type": "string"},{"internalType": "uint256","name": "","type": "uint256"}],"stateMutability": "view","type": "function"},{"inputs": [{"internalType": "string","name": "_fName","type": "string"},{"internalType": "uint256","name": "_age","type": "uint256"}],"name": "setInfo","outputs": [{"internalType": "bool","name": "","type": "bool"}],"stateMutability": "nonpayable","type": "function"}];const infoContract = new ethers.Contract(infoAddress, infoAbi, provider);ddd = await infoContract.getInfo();document.getElementById("getInforeturns").innerHTML = ddd;}async function writeContractFunction(){const provider = new ethers.providers.Web3Provider(window.ethereum);const signer = provider.getSigner();// const tx = signer.sendTransaction({// to: "0x1895626b720Ca74B9F265334aCE49F790Eea4dA1",// value: ethers.utils.parseEther("0.002")// });// 币安测试链智能合约地址 //const infoAddress = "0x1B307050d688adabE14414C43f4825D1ab751878";// kavan智能合约地址 //0x6426E8dEF3651af00BBAe83C35538a5d94171306//0x982F1399D6bDcf700bf995BE2d2a4394a8D273E6//0xB6b0ab2e6205212FD2A4017bD0A4710b11EA55ebconst infoAddress = "0xB6b0ab2e6205212FD2A4017bD0A4710b11EA55eb";const infoAbi = [{"inputs": [],"name": "getInfo","outputs": [{"internalType": "string","name": "","type": "string"},{"internalType": "uint256","name": "","type": "uint256"}],"stateMutability": "view","type": "function"},{"inputs": [{"internalType": "string","name": "_fName","type": "string"},{"internalType": "uint256","name": "_age","type": "uint256"}],"name": "setInfo","outputs": [{"internalType": "bool","name": "","type": "bool"}],"stateMutability": "nonpayable","type": "function"}];const infoContract = new ethers.Contract(infoAddress, infoAbi, provider);const strName = document.getElementById("inputName").value;const numAge = document.getElementById("inputAge").value;let infoWithSigner = infoContract.connect(signer);tx = infoWithSigner.setInfo(strName,numAge);}async function transFunction(){const provider = new ethers.providers.Web3Provider(window.ethereum);const signer = provider.getSigner();// 币安测试链智能合约地址 //const infoAddress = "0x1B307050d688adabE14414C43f4825D1ab751878";// kavan智能合约地址 //0x6426E8dEF3651af00BBAe83C35538a5d94171306//0x982F1399D6bDcf700bf995BE2d2a4394a8D273E6//0xB6b0ab2e6205212FD2A4017bD0A4710b11EA55ebconst infoAddress = "0xB6b0ab2e6205212FD2A4017bD0A4710b11EA55eb";const infoAbi = [{"inputs": [],"name": "getInfo","outputs": [{"internalType": "string","name": "","type": "string"},{"internalType": "uint256","name": "","type": "uint256"}],"stateMutability": "view","type": "function"},{"inputs": [{"internalType": "string","name": "_fName","type": "string"},{"internalType": "uint256","name": "_age","type": "uint256"}],"name": "setInfo","outputs": [{"internalType": "bool","name": "","type": "bool"}],"stateMutability": "nonpayable","type": "function"}];const infoContract = new ethers.Contract(infoAddress, infoAbi, provider);const strAddress = document.getElementById("inputAddress").value;const sumNumber = document.getElementById("inputNumber").value;const tx = signer.sendTransaction({to: strAddress,value: ethers.utils.parseEther(sumNumber)});}async function writeContractFunction(){const provider = new ethers.providers.Web3Provider(window.ethereum);const signer = provider.getSigner();// const tx = signer.sendTransaction({// to: "0x1895626b720Ca74B9F265334aCE49F790Eea4dA1",// value: ethers.utils.parseEther("0.002")// });// 币安测试链智能合约地址 //const infoAddress = "0x1B307050d688adabE14414C43f4825D1ab751878";// kavan智能合约地址 //0x6426E8dEF3651af00BBAe83C35538a5d94171306//0x982F1399D6bDcf700bf995BE2d2a4394a8D273E6//0xB6b0ab2e6205212FD2A4017bD0A4710b11EA55ebconst infoAddress = "0xB6b0ab2e6205212FD2A4017bD0A4710b11EA55eb";const infoAbi = [{"inputs": [],"name": "getInfo","outputs": [{"internalType": "string","name": "","type": "string"},{"internalType": "uint256","name": "","type": "uint256"}],"stateMutability": "view","type": "function"},{"inputs": [{"internalType": "string","name": "_fName","type": "string"},{"internalType": "uint256","name": "_age","type": "uint256"}],"name": "setInfo","outputs": [{"internalType": "bool","name": "","type": "bool"}],"stateMutability": "nonpayable","type": "function"}];const infoContract = new ethers.Contract(infoAddress, infoAbi, provider);const strName = document.getElementById("inputName").value;const numAge = document.getElementById("inputAge").value;let infoWithSigner = infoContract.connect(signer);tx = infoWithSigner.setInfo(strName,numAge);}async function queryChain(){//window.alert("bbbbb");//balance = await provider.getBalance("ethers.eth")//const provider = new ethers.providers.JsonRpcProvider(window.ethers);const provider = new ethers.providers.Web3Provider(window.ethereum);//window.alert("provider");const signer = provider.getSigner();blockNumber = await provider.getBlockNumber();let strChainId = document.getElementById("inputChainId").value;strNetwork = ethers.providers.getNetwork(Number(strChainId));document.getElementById("chainId").innerHTML = strNetwork.chainId;document.getElementById("ensAddress").innerHTML = strNetwork.ensAddress;document.getElementById("chainname").innerHTML = strNetwork.name;document.getElementById("blockNumber").innerHTML = blockNumber;}</script></body>
</html>
js代码：myscript.js
function f1(){//document.getElementById("demo").innerHTML = "hahaha";//检测Metamask钱包if (typeof window.ethereum !== 'undefined') {console.log('MetaMask is installed!');//window.alert("MetaMask is installed!")}else{//window.alert("Please install MetaMask")}// if (ethereum.isMetaMask) {// window.alert("MetaMask is installed2!")// }const ethereumButton = document.querySelector('.enableEthereumButton');const showAccount = document.querySelector('.showAccount');const showbutton = document.querySelector('.buttonclass');//const showbutton = document.querySelector('.buttonclass');showbutton.addEventListener('click', () => {//showbutton.innerHTML = "已经链接";});ethereumButton.addEventListener('click', () => {getAccount();});async function getAccount() {const accounts = await ethereum.request({ method: 'eth_requestAccounts' });//const balance = await ethereum.request({method: 'eth_balance'});ethereum.on('accountsChanged', function (accounts) {// Time to reload your interface with accounts[0]!window.alert("log0");});const account = accounts[0];showAccount.innerHTML = account ;}}
如何ETH以太坊智能合约做一个简单的DAPP相关推荐
- 以太坊智能合约部署——一个简单的投票系统
首先在Remix上进行测试 代码如下 pragma solidity ^0.4.16;/// @title Voting with delegation. contract Ballot {// Th ...
- truffle （ETH以太坊智能合约集成开发工具） 入门教程
truffle (ETH以太坊智能合约集成开发工具) 入门教程 前言 在你了解区块链开发之前,你有必要了解区块链的一些基础知识,什么是DApp,DApp与传统app的区别, 什么是以太坊,以太坊中的智 ...
- 以太坊智能合约开发 | 一个资深技术专家的心路历程
原创: 杨镇 一块链习社区 微信号yikuailianxishequ 本文作者杨镇, 以太坊黄皮书中译者,资深以太坊专家.曾独立中译了以太坊 Homestead 官方文档,Solidity 官方文档中 ...
- 区块链项目实战 - 使用以太坊/智能合约solidity，全栈开发区块链借贷记账小应用，含完整源码
本文使用区块链平台以太坊+智能合约实现一个区块链记账的功能,具体为: 借款人和贷款人以及数额被记录在区块链中.使用区块链地址来表示借款人或者贷款人. 若一个借款人多次向一个贷款人借钱,更新所有的数额之 ...
- 使用Remix编译和部署以太坊智能合约
链客,专为开发者而生,有问必答! 此文章来自链客区块链技术问答社区,未经允许拒绝转载. 使用Remix编译和部署以太坊智能合约 Remix 是一个开源的 Solidity 智能合约开发环境,提供基本的 ...
- 教程 | 以太坊智能合约编程之菜鸟教程
教程 | 以太坊智能合约编程之菜鸟教程 译注:原文首发于ConsenSys开发者博客,原作者为Eva以及ConsenSys的开发团队.如果您想要获取更多及时信息,可以访问ConsenSys首页点击左下 ...
- 【以太坊智能合约】Embark Framework 开发基础篇
在之前的文章中,我们看到了使用Solidity开发以太坊智能合约的所有基本知识.我们使用了以太坊钱包,我们能够轻松设置小型产品开发环境.我们会发现开始的时候很不错,但是如果我们想要更深入的话呢?我们要 ...
- 以太坊智能合约编程之带菜鸟入门教程
手把手带你走上智能合约编程之路 译注:原文首发于ConsenSys开发者博客,原作者为Eva以及ConsenSys的开发团队.如果您想要获取更多及时信息,可以访问ConsenSys首页点击左下角New ...
- Python开发以太坊智能合约指南（web3.py）
在以太坊上获得一个基本的智能合约是一个很简单的事,只需google查询"ERC20代币教程",你会发现有关如何做到这一点的大量信息.以编程方式与合约交互完全是另一回事,如果你是一个 ...
最新文章
- thinkphp模型中的获取器和修改器（根据字段名自动调用模型中的方法）
- Struts2自定义Result处理JSON
- 微博如何发订阅消息_微信订阅号或将大变天，微博8年前就这么干了...
- linux红帽6架设apache,linux Redhat6.5 中 编译安装apache
- 应用高斯分布来解决异常检测问题（一）
- L1-053 电子汪 (10 分)—团体程序设计天梯赛
- 数二计算机考研大纲2016,2016数二考研大纲.doc
- winp 使用 lib文件 h文件的引入
- TCP-IP学习笔记11--无线通信- 无线通信的种类 点对点通信协议
- 产品经理常用的三款工具
- el-input 正则，非负数且只有一个小数点
- OSPF中LSA相关内容
- html怎么安装系统,一键重装系统_MBR分区一键安装系统教程-爱纯净
- pythoon_interview_redit
- vscode中添加好看字体的方法
- 期刊投稿状态_SCI期刊投稿各种状态详解
- 英语六级常考核心词汇02
- 重磅！再扩大产能！辉瑞新冠口服药组成之一，歌礼利托那韦口服片要年产5.3亿片；卫材中国推出含长效抗菌剂除菌喷雾 | 美通社头条...
- 【渝粤教育】电大中专计算机职业素养 (3)作业 题库
- 从股票市场选择配对的股票：共同趋势模型与套利定价理论
热门文章
- 新sakura博客园皮肤配置,NewSakura
- 隐藏标签页 chrome_如何在Google Chrome浏览器中折叠和隐藏标签组
- 【JavaWeb】简易表白墙的设计
- wps控件属性怎么用_WPS表格怎么使用列表框控件?
- Python+Vue计算机毕业设计影楼管理系统tym07（源码+程序+LW+部署）
- 使用hutool工具类实现map和bean相互转换
- SwiftUI Macaw 如何修复Expression was too complex to be solved in reasonable time
- 【sdx12】sdx12开启和关闭ZRAM swap方法
- PS软件的画笔怎么调出圆圈？
- 用ESP8266制作一个WiFi干扰器