• 6.DApp-用Web3实现前端与智能合约的交互

    题记

            用Web3实现前端与智能合约的交互，以下是操作流程和代码。

    准备ganache环境

            文章地址：4.DApp-MetaMask怎么连接本地Ganache-CSDN博客 

    准备智能合约 

            文章地址： 2.DApp-编写和运行solidity智能合约-CSDN博客

    编写index.html文件

            

        Name Contract Demo

       

       

       

       

    设置姓名

       

       

       

       

       

       

        

    1. html>
    2. <html>
    3. <head>
    4.     <title>Name Contract Demotitle>
    5.     
    6.     <script src="https://cdn.jsdelivr.net/npm/web3@1.5.2/dist/web3.min.js">script>
    7.     <script>
    8.     // 检查Metamask是否已安装
    9.     if (typeof window.ethereum !== 'undefined') {
    10.     console.log('Metamask已安装');
    11.     }
    12.   
    13.     // 设置Web3.js提供者为Metamask
    14.     const provider = window.ethereum;
    15.     const web3 = new Web3(provider);
    16.   
    17.     // 请求Metamask连接到以太坊网络
    18.     provider.request({ method: 'eth_requestAccounts' })
    19.     .then(() => {
    20.       console.log('Metamask已连接到以太坊网络');
    21.     })
    22.     .catch((err) => {
    23.       console.error('无法连接到以太坊网络', err);
    24.     });
    25.   
    26.     function setName() {
    27.     // 合约地址
    28.     const contractAddress = '0x32FDC4E86421143b1c27dE49542Bc8ECE2B162a0'; 
    29.     // 合约ABI
    30.     const contractABI = [
    31. 	{
    32. 		"inputs": [
    33. 			{
    34. 				"internalType": "string",
    35. 				"name": "_name",
    36. 				"type": "string"
    37. 			}
    38. 		],
    39. 		"name": "setName",
    40. 		"outputs": [],
    41. 		"stateMutability": "nonpayable",
    42. 		"type": "function"
    43. 	},
    44. 	{
    45. 		"inputs": [],
    46. 		"name": "getName",
    47. 		"outputs": [
    48. 			{
    49. 				"internalType": "string",
    50. 				"name": "",
    51. 				"type": "string"
    52. 			}
    53. 		],
    54. 		"stateMutability": "view",
    55. 		"type": "function"
    56. 	}
    57.     ]; 
    58.     const contract = new web3.eth.Contract(contractABI, contractAddress);
    59.     const name = document.getElementById('name').value;
    60.     // 替换为您的账户地址web3.eth.defaultAccount
    61.     const fromAddress = '0x4e8eB4d1C203929074A3372F3703E556820fEA57'; 
    62.     //contract.methods.setName(name).send({from: fromAddress})
    63.  
    64.     contract.methods.setName(name).send({from: fromAddress})
    65.     .on('transactionHash', function(hash){
    66.         console.log('Transaction Hash:', hash);
    67.     })
    68.     .on('receipt', function(receipt){
    69.         console.log('Transaction Receipt:', receipt);
    70.     })
    71.     .on('error', function(error){
    72.         console.error('Error:', error);
    73.     });
    74.     }
    75.  
    76.     function getName() {
    77.     // 合约地址
    78.     const contractAddress = '0x32FDC4E86421143b1c27dE49542Bc8ECE2B162a0'; 
    79.     // 合约ABI
    80.     const contractABI = [
    81. 	{
    82. 		"inputs": [
    83. 			{
    84. 				"internalType": "string",
    85. 				"name": "_name",
    86. 				"type": "string"
    87. 			}
    88. 		],
    89. 		"name": "setName",
    90. 		"outputs": [],
    91. 		"stateMutability": "nonpayable",
    92. 		"type": "function"
    93. 	},
    94. 	{
    95. 		"inputs": [],
    96. 		"name": "getName",
    97. 		"outputs": [
    98. 			{
    99. 				"internalType": "string",
    100. 				"name": "",
    101. 				"type": "string"
    102. 			}
    103. 		],
    104. 		"stateMutability": "view",
    105. 		"type": "function"
    106. 	}
    107.     ]; 
    108.     const contract = new web3.eth.Contract(contractABI, contractAddress);
    109.     contract.methods.getName().call()
    110.     .then(function(result) {
    111.         console.log('Name:', result);
    112.         document.getElementById('nameValue').innerText = result;
    113.     })
    114.     .catch(function(error) {
    115.         console.error('Error:', error);
    116.     });
    117.     }
    118.     script>
    119. head>
    120. <body>
    121.     <h1>设置姓名h1>
    122.     <label for="name">姓名:label>
    123.     <input type="text" id="name">
    124.     <button onclick="setName()">设置姓名button>
    125.     <br>
    126.     <button onclick="getName()">得到姓名button>
    127.     <br>
    128.     <span id="nameValue">span>
    129. body>
    130. html>

    执行程序 

           使用vscode的Live Server打开网页

           参考这篇文章的执行方法：1.Vue-在独立页面实现Vue的增删改查-CSDN博客 

    展示图 

    发起交易 

    完成交易 

     后记

            觉得有用可以点赞或收藏！

  • 相关阅读:
    主机jvisualvm连接到tomcat服务器查看jvm状态
    elasticsearch常用接口和基本操作
    Redis的RDB持久化
    90后小伙以这196道MySQL面试题，实力吊打面试官，生生挤进大厂
    .NET应用系统的国际化-整体设计思路
    SpringBoot 项目使用 Sa-Token 完成登录认证
    使用 Gin 框架实现 HTTP 路由注册的 Go 语言工具函数详解
    zabbix监控项
    ansible中的hostvars
    [JS高级程序设计] ES6 新增的集合对象总结
  • 原文地址：https://blog.csdn.net/m0_70819559/article/details/133892708