5 DAPP前后端交互遇到的问题

参考之前大佬做的保存姓名、年龄的简单合约开发DAPP案例,在搭建好服务器跑的时候,一个是报错提示metamask不再支持inject web3了,还有一个报错是提示web3.eth.contract is not a function,后者大概率是更新换代后的web3语法问题,前面一个问题主要原因是什么呢?还有一堆警告。ab367fcd3dccc5a0543032b189c700c.png 合约源码:**pragma solidity ^0.4.24;

contract MeetingInfoContract{ string name; uint age; function setInfo(string _name,uint _age) public{ name = _name; age = _age; } function getInfo() public view returns(string,uint){ return(name,age); } }**

html源码:

<!DOCTYPE html>
<html lang="en">
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="main.css">
        <!--引入web3-->
        <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h1>First Dapp Demo</h1>
            <h2 id="info"></h2>
            <label>姓名:</label>
            <input type="text" id="name">
            <label>年龄:</label>
            <input type="text" id="age">
            <button id="button">更新</button>
        </div>

        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            <!--验证引入web3成功-->
            console.log("web3"+web3);
            <!--连接web3的provider或本地,其实本例中值得就是lite-server所创建的那个服务器环境-->
            if (typeof web3 !== 'undefined') {
              web3 = new Web3(web3.currentProvider);
            } else {
              // Set the provider you want from Web3.providers
                let web3 = new Web3(Web3.givenProvider || "ws://localhost:8545");
            }
            <!--此处中括号[]中的内容直接从remix中compile后的ABI处复制-->
            var infoContract = web3.eth.contract([
                {
                    "constant": false,
                    "inputs": [
                        {
                            "name": "_name",
                            "type": "string"
                        },
                        {
                            "name": "_age",
                            "type": "uint256"
                        }
                    ],
                    "name": "setInfo",
                    "outputs": [],
                    "payable": false,
                    "stateMutability": "nonpayable",
                    "type": "function"
                },
                {
                    "constant": true,
                    "inputs": [],
                    "name": "getInfo",
                    "outputs": [
                        {
                            "name": "",
                            "type": "string"
                        },
                        {
                            "name": "",
                            "type": "uint256"
                        }
                    ],
                    "payable": false,
                    "stateMutability": "view",
                    "type": "function"
                }
            ]);
            <!--此处的address单引号''中内容是从remix中deploy后的地址复制而来-->
            var info = infoContract.at('0xd5aabfcaed0186b7e7e7b5a4b8636923ee0186d7');

            <!--此处可以参考web3在github上的文档http://github.com/ethereum/web3.js-->
            <!--也就是web3.js提供的对于智能合约方法的操作与交互-->
            <!--getInfo方法是对上面的id="info"设置,result是从智能合约获得的结果-->
            info.getInfo(function(error,result){
                if(!error){
                    $("#info").html(result[0]+'('+result[1]+')years old');
                }
            });
            <!--这里setInfo对应智能合约的set方法,此处将html中的name和age设置到智能合约-->
            $("#button").click(function(){
                var name = $("#name").val();
                var age = $("#age").val();
                info.setInfo(name,age,function(error,result){
                    if(!error){
                        console.log("ok");
                    }
                });
            });
        </script>
    </body>
</html>
请先 登录 后评论

最佳答案 2021-10-15 09:28

现在使用 window.ethereum 作为prider

if (window.ethereum) {
  let privider  = window.ethereum;
  try {
    // Request account access
    await window.ethereum.enable();
  } catch (error) {
    // User denied account access...
    console.error("User denied account access")
  }
}

可参考:### Truffle & Web3.js 教程

请先 登录 后评论

其它 0 个回答

  • 1 关注
  • 0 收藏,2792 浏览
  • Devin Williams 提出于 2021-10-15 07:37