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

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

	
		
        
		
	
	
		

			
First Dapp Demo
			

			姓名：
			

			年龄：
			

			更新
		
		
		
		
	

但由于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；