在Remix上编译和部署智能合约，本地使用vscode工具调用智能合约应用于前端界面
环境和工具
- win10
- Remix
- VScode
- Ganache-cli
- web3
实现步骤
Remix上编译和部署合约
- 创建新合约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);
}
}
- 写好合约内容之后，按照ganache-cli连接Metamask钱包里面步骤的内容操作。
- 在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，如果有就直接开始下面的步骤：
- 在项目根目录下新建一个
index.html文件，里面写入以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css">
//导入web3
<script src="./node_modules/web3/dist/web3.min.js"></script>
</head>
<body>
<div class="container">
<h1>Info Contract</h1>
<h2 id="info"></h2>
<label for="name" class="col-lg-2 control-label">Name</label>
<input id="name" type="text">
<label for="name" class="col-lg-2 control-label">Age</label>
<input id="age" type="text">
<button id="button">Update Info</button>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script>
//这里开始是用web3来调用合约的内容
if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider);
} else {
// set the provider you want from Web3.providers
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));//这里填写你的ganache-cli/ganache监听地址
}
var contractABI = ;//你的合约ABI地址
var contractAddress = "";//你的合约地址
//创建合约实例
var contract = new web3.eth.Contract(contractABI, contractAddress);
$("#button").click(function () {
//调用合约的写方法setInfo
contract.methods.setInfo($("#name").val(), $("#age").val())
.send({
from: '0x2f917e9aC2e0E73e056D3C0Ea250Bf8C68240333' })
.then(console.log);
//调用合约的读方法getInfo
contract.methods.getInfo().call((err, result) => {
if (!err) {
$("#info").html(result[0] + ' (' + result[1] + ' years old)');
console.log(result);
}
else {
console.log(err);
}
})
});
</script>
</body>
</html>
- 在index的同级目录下新建一个
index.css，里面写：
body {
background-color:#F0F0F0;
padding: 2em;
font-family: 'Raleway','Source Sans Pro', 'Arial';
}
.container {
width: 50%;
margin: 0 auto;
}
label {
display:block;
margin-bottom:10px;
}
input {
padding:10px;
width: 50%;
margin-bottom: 1em;
}
button {
margin: 2em 0;
padding: 1em 4em;
display:block;
}
#info {
padding:1em;
background-color:#fff;
margin: 1em 0;
}
最后用浏览器打开index.html页面，呈现的效果如图：
上面的例子来源于：
https://github.com/gitferry/mastering-ethereum/blob/master/web3-interact-with-Solidity/web3-interact-with-Solidity.md
因为原来的代码内容不适用了，所以我就在这篇文章的例子上做了一些修改。