一号建站,门户网站推广介绍方案,长沙网站制作公司哪家好,南京做网站南京乐识好题记 用Web3实现前端与智能合约的交互#xff0c;以下是操作流程和代码。
准备ganache环境 文章地址#xff1a;4.DApp-MetaMask怎么连接本地Ganache-CSDN博客
准备智能合约 文章地址#xff1a; 2.DApp-编写和运行solidity智能合约-CSDN博客
编写index.html文件 !…题记 用Web3实现前端与智能合约的交互以下是操作流程和代码。
准备ganache环境 文章地址4.DApp-MetaMask怎么连接本地Ganache-CSDN博客
准备智能合约 文章地址 2.DApp-编写和运行solidity智能合约-CSDN博客
编写index.html文件 !DOCTYPE html html head titleName Contract Demo/title !--导入web3库-- script srchttps://cdn.jsdelivr.net/npm/web31.5.2/dist/web3.min.js/script script // 检查Metamask是否已安装 if (typeof window.ethereum ! undefined) { console.log(Metamask已安装); } // 设置Web3.js提供者为Metamask const provider window.ethereum; const web3 new Web3(provider); // 请求Metamask连接到以太坊网络 provider.request({ method: eth_requestAccounts }) .then(() { console.log(Metamask已连接到以太坊网络); }) .catch((err) { console.error(无法连接到以太坊网络, err); }); function setName() { // 合约地址 const contractAddress 0x32FDC4E86421143b1c27dE49542Bc8ECE2B162a0; // 合约ABI const contractABI [ { inputs: [ { internalType: string, name: _name, type: string } ], name: setName, outputs: [], stateMutability: nonpayable, type: function }, { inputs: [], name: getName, outputs: [ { internalType: string, name: , type: string } ], stateMutability: view, type: function } ]; const contract new web3.eth.Contract(contractABI, contractAddress); const name document.getElementById(name).value; // 替换为您的账户地址web3.eth.defaultAccount const fromAddress 0x4e8eB4d1C203929074A3372F3703E556820fEA57; //contract.methods.setName(name).send({from: fromAddress}) contract.methods.setName(name).send({from: fromAddress}) .on(transactionHash, function(hash){ console.log(Transaction Hash:, hash); }) .on(receipt, function(receipt){ console.log(Transaction Receipt:, receipt); }) .on(error, function(error){ console.error(Error:, error); }); } function getName() { // 合约地址 const contractAddress 0x32FDC4E86421143b1c27dE49542Bc8ECE2B162a0; // 合约ABI const contractABI [ { inputs: [ { internalType: string, name: _name, type: string } ], name: setName, outputs: [], stateMutability: nonpayable, type: function }, { inputs: [], name: getName, outputs: [ { internalType: string, name: , type: string } ], stateMutability: view, type: function } ]; const contract new web3.eth.Contract(contractABI, contractAddress); contract.methods.getName().call() .then(function(result) { console.log(Name:, result); document.getElementById(nameValue).innerText result; }) .catch(function(error) { console.error(Error:, error); }); } /script /head body h1设置姓名/h1 label forname姓名:/label input typetext idname button οnclicksetName()设置姓名/button br button οnclickgetName()得到姓名/button br span idnameValue/span /body /html !DOCTYPE html
html
headtitleName Contract Demo/title!--导入web3库--script srchttps://cdn.jsdelivr.net/npm/web31.5.2/dist/web3.min.js/scriptscript// 检查Metamask是否已安装if (typeof window.ethereum ! undefined) {console.log(Metamask已安装);}// 设置Web3.js提供者为Metamaskconst provider window.ethereum;const web3 new Web3(provider);// 请求Metamask连接到以太坊网络provider.request({ method: eth_requestAccounts }).then(() {console.log(Metamask已连接到以太坊网络);}).catch((err) {console.error(无法连接到以太坊网络, err);});function setName() {// 合约地址const contractAddress 0x32FDC4E86421143b1c27dE49542Bc8ECE2B162a0; // 合约ABIconst contractABI [{inputs: [{internalType: string,name: _name,type: string}],name: setName,outputs: [],stateMutability: nonpayable,type: function},{inputs: [],name: getName,outputs: [{internalType: string,name: ,type: string}],stateMutability: view,type: function}]; const contract new web3.eth.Contract(contractABI, contractAddress);const name document.getElementById(name).value;// 替换为您的账户地址web3.eth.defaultAccountconst fromAddress 0x4e8eB4d1C203929074A3372F3703E556820fEA57; //contract.methods.setName(name).send({from: fromAddress})contract.methods.setName(name).send({from: fromAddress}).on(transactionHash, function(hash){console.log(Transaction Hash:, hash);}).on(receipt, function(receipt){console.log(Transaction Receipt:, receipt);}).on(error, function(error){console.error(Error:, error);});}function getName() {// 合约地址const contractAddress 0x32FDC4E86421143b1c27dE49542Bc8ECE2B162a0; // 合约ABIconst contractABI [{inputs: [{internalType: string,name: _name,type: string}],name: setName,outputs: [],stateMutability: nonpayable,type: function},{inputs: [],name: getName,outputs: [{internalType: string,name: ,type: string}],stateMutability: view,type: function}]; const contract new web3.eth.Contract(contractABI, contractAddress);contract.methods.getName().call().then(function(result) {console.log(Name:, result);document.getElementById(nameValue).innerText result;}).catch(function(error) {console.error(Error:, error);});}/script
/head
bodyh1设置姓名/h1label forname姓名:/labelinput typetext idnamebutton onclicksetName()设置姓名/buttonbrbutton onclickgetName()得到姓名/buttonbrspan idnameValue/span
/body
/html执行程序 使用vscode的Live Server打开网页 参考这篇文章的执行方法1.Vue-在独立页面实现Vue的增删改查-CSDN博客
展示图 发起交易 完成交易 后记 觉得有用可以点赞或收藏
