区块链-以太坊-第一个简单的Dapp（前端html与后端智能合约交互）

对应此博客的视频教学链接:https://pan.baidu.com/s/19VoCROL1HdmBLLm6BEsW1g1.打开cmd，切换到本地remix目录：cd remix-ide-master；然后使用npm run serve命令，这样就可以直接通过localhost:8080访问remix-solidity开发环境了，比起在线的稳定一点（要想在本地同步使用localhost:808..

是谁在学习

8277人浏览 · 2018-10-29 01:13:56

是谁在学习 · 2018-10-29 01:13:56 发布

对应此博客的视频教学链接: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；