Javascript 发布与前端接口的智能合约_Javascript_Solidity_Smartcontracts_Truffle

Javascript 发布与前端接口的智能合约

javascript

Javascript 发布与前端接口的智能合约,javascript,solidity,smartcontracts,truffle,Javascript,Solidity,Smartcontracts,Truffle,实际上，我正在尝试编写一个简单的智能合约，前端从用户那里获取一个值，并将其保存在智能合约的变量中。我的项目的index.html部分是 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="I

实际上，我正在尝试编写一个简单的智能合约，前端从用户那里获取一个值，并将其保存在智能合约的变量中。我的项目的index.html部分是

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
    <title>Example</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    
  </head>
  <body>
     <div id="message"></div>
  <form method="POST">
    <div><input id= "message" name = "message" type= "text">
    </div>
    <div>
      <button type="button" id="register">Register</button>
        </div>
    </div>
  </form>

   
  
    <script src="js/bootstrap.min.js"></script>
    <script src="js/web3.min.js"></script>
    <script src="js/truffle-contract.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

我写的智能合约代码是

pragma solidity 0.5.16;

contract HelloWorld {
    string private message = "hello world";

    function getMessage() public view returns(string memory) {
        return message;
    }

    function setMessage(string memory newMessage) public {
        message = newMessage;
    }
}

当我运行truffle complie和truffle migrate命令时，没有显示任何错误，但当我运行'npm run dev'时，页面显示“Cannot GET/”

我不明白错误在哪里。请帮忙

是否有其他方法将前端连接到智能合约？

您的本地服务器找不到您的页面，因为它位于错误的目录中，或者本地服务器尚未安装。运行

npm安装--保存dev-lite服务器

。在package.json中，您应该有

"script": {
    "dev": "lite-server",
...
}

将index.html和App.js移动到您在项目根目录下创建的

src/

目录中。运行

npm运行dev

再次检查。它应该会起作用。如果您对带有react的易于使用的块菌盒感兴趣，我已经开发了带有react+Material UI的块菌盒。请看这里

谢谢！您可以告诉我与智能合约交互的其他方式吗？您可以使用truffle控制台，通过

truffle console

命令从控制台访问您的智能合约。在控制台中，您应该编写类似于

YourContract.deployed（）的内容。然后（函数（yourContractInstance）{app=yourcomponstance}）

。然后您可以使用

app

变量与合同交互。

"script": {
    "dev": "lite-server",
...
}