对应此博客的视频教学链接:https://pan.baidu.com/s/19VoCROL1HdmBLLm6BEsW1g
1.打开cmd,切换到本地remix目录:cd remix-ide-master;然后使用npm run serve命令,这样就可以直接通过localhost:8080访问remix-solidity开发环境了,比起在线的稳定一点(要想在本地同步使用localhost:8080的方式,可以参考https://my.oschina.net/ruoli/blog/1796803?tdsourcetag=s_pctim_aiomsg第5步);
2.打开已经安装好的metamask,直接输入密码登录(用于连接虚拟以太网、支付虚拟以太币);
(其中metamask的安装无法翻墙的话建议使用如下方法:直接下载官网的类似于这样文件名metamask-chrome-4.16.0.zip直接解压后,用chrome的扩展程序打开开发者模式添加就好了,当然也可以采用https://www.jianshu.com/p/cdb9e082d059这里的第一小段说的直接去官网下,这个链接内容还讲到了metamask的基本使用)
3.在浏览器输入localhost:8080打开remix,输入【智能合约InfoContract.sol】,编译(compile),compile后进入选择run可以选择injected web3,这样metamask会自动和当前remix连接;
【InfoContract.sol】:
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);
}
}
4.本地需要准备好【前端代码index.html】,其中引入web3;
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/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
web3 = new Web3(new Web3.providers.HttpProvider("http://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('0xe7ef61f62ccfb9551291a45dc2856210dd676f86');
<!--此处可以参考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>
但由于metamask的保护,所以需要建立连接(搭建本地服务器:方法不止lite-server一个)才能使web3生效:此处使用再开一个cmd然后按照https://blog.csdn.net/alabadazi/article/details/53334161提到的lite-server比较简单,其中我全局的安装方式install -g才成功;安装完成后运行lite-server,会自动(如果不自动就自己打开对应端口)打开localhost:3000,然后启动index.html;
5.可以直接在浏览器中更新数据,可以在remix处(智能合约)getInfo看到变化;也可以在智能合约(remix)中setInfo,前端也会变化;当然这其中会消耗虚拟以太币,本例中都经过metamask;