在前端页面上应用智能合约实现合约交互例子

在Remix上编译和部署智能合约，本地使用vscode工具调用智能合约应用于前端界面

环境和工具

• win10
• Remix
• VScode
• Ganache-cli
• web3

实现步骤

Remix上编译和部署合约

1. 创建新合约InfoContract.sol并写入以下内容：

pragma solidity ^0.5.0;

contract InfoContract {
   
    
   string fName;
   uint age;
   
   function setInfo(string memory _fName, uint _age) public {
   
       fName = _fName;
       age = _age;
   }
   
   function getInfo() public view returns (string memory, uint) {
   
       return (fName, age);
   }   
}

2. 写好合约内容之后，按照ganache-cli连接Metamask钱包里面步骤的内容操作。
3. 在remix中进入Deploy&Run模块，选择Enviroment为Injected Web3，让部署的地址是第二步设置的账户的metamask钱包的地址，整个步骤就是：
   a.修改环境Enviroment
   b.编译合约
   c.部署合约

VScode编写html界面和web3库调用合约

需要确保项目里面有web3库，如果没有则按照这篇文章描述的以下步骤进行安装：

进入项目，打开项目终端使用 node.js 的包管理工具 npm 初始化项目，创建package.json 文件，其中保存了项目需要的相关依赖环境。
npm init
一路按回车直到项目创建完成。最后，运行下面命令安装web.js：
npm install web3
注意： 在实际安装过程中我发现web3在安装完成后并没有 /node_modules/web3/dist/we3.min.js 文件，这个问题在 issue#1041中有体现，但官方好像一直没解决。不过可以在这里下载所需的文件，解压后将dist文件夹的内容拷贝到 /node_modules/web3路径下。

也可以使用npm list -g --depth 0命令查看是否全局安装过web3，如果有就直接开始下面的步骤：

1. 在项目根目录下新建一个index.html文件，里面写入以下内容：