[区块链笔记12] 第一个DApp--demo-白红宇

[区块链笔记12] 第一个DApp--demo

阅读量：322 次

发布时间：2019-03-04

本文共 3857 字，大约阅读时间需要 12 分钟。

初始化项目
git clone https://github.com/truffle-box/bare-box

如果是linux环境需要truffle.json cp truffle-config.js truffle.js

编辑InfoContract.sol

pragma solidity ^0.4.23;contract Info {       string name;    uint age;    event doneEvent(string name, uint age);    function setInfo(string _name, uint _age) public {           name = _name;        age = _age;        emit doneEvent(name, age);    }    function getInfo() public view returns (string, uint) {           return (name, age);    }}

编译合约 truffle compile

打开Ganache，分配一个区块链网络

配置truffle.js文件， 127.0.0.1和7545端口

编辑一个2_info_migration.js文件

const Info = artifacts.require("Info");module.exports = function(deployer) {     deployer.deploy(Info);};

部署合约truffle migrate

npm init用npm初始化，因为后续要用npm 来install包

npm install truffle-contract安装truffle-contract,方便和智能合约交互

创建src和js和css文件夹,用于存放html和js和css文件

把web3.min.js和jquery.min.js和truffle-contract.min.js拷贝到js目录下

css目录下创建index.css,内容如下

body {   	background-color: #F0F0F0;}#info {   	padding: 20px;	background-color: #FFF;}#button {   	width: 100px;}

编辑src下的index.html

<!DOCTYPE html><html><head>	<meta charset="utf-8">	<title>Dapp demo</title>	<link rel="stylesheet" type="text/css" href="../css/index.css">	<script src="../js/web3.min.js"></script>	<script src="../js/jquery.min.js"></script>	<script src="../js/app.js"></script>	<script src="../js/truffle-contract.min.js"></script></head><body>	<div class="content">		<h1>Dapp demo</h1>		<h2 id="info"></h2>		<br />		<label>姓名: </label>		<input id="name" type="text">		<br />		<label>年龄: </label>		<input id="age" type="text">		<br /><br />		<button id="button">更新</button>		<h2 id="loader">正在加载</h2>	</div></body></html>

编辑app.js文件

App = {   	web3Provider: null,	contracts: {   },	init: function(){   		ethereum.enable();		return App.initWeb3();	},	initWeb3: function(){   		 		if (typeof web3 !=='undefined') {   			App.web3Provider = web3.currentProvider;			web3 = new Web3(App.web3Provider);			//web3.eth.defaultAccount = web3.eth.accounts[0];		} else {   			App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');			web3 = new Web3(App.web3Provider);		}		// ethereum.enable(function(){     //           web3.eth.getAccounts((error, accounts) => {     //                web3.eth.defaultAccount = accounts[0];  //                 console.log(accounts)  //           })  //       }) 		App.initContract();	},	initContract: function() {   		$.getJSON('../build/contracts/InfoContract.json', function(data) {   			App.contracts.InfoContract = TruffleContract(data);			App.contracts.InfoContract.setProvider(App.web3Provider);			App.watchChanged();			return App.getInfo();		});		App.bindEvents();					},	getInfo: function() {   		App.contracts.InfoContract.deployed().then(function(instance) {   			return instance.getInfo.call();		}).then(function(result) {   			$('#loader').hide();			$('#info').html(result[0] + '(' + result[1] + ')years old');		}).catch(function(error) {   			alert(error);		});	},		bindEvents: function() {   		$('#button').click(function() {   			$('#loader').show();			App.contracts.InfoContract.deployed().then(function(instance) {   				var message = {   from: "0x549697a9ca1D3D5a2068b165f6B5AC70Da6ef813", gas:500000};				return instance.setInfo.sendTransaction($('#name').val(), $('#age').val(), message);			}).then(function(result) {   				return App.getInfo();			}).catch(function(error) {   				alert(error);			});		});	},	watchChanged: function() {   		App.contracts.InfoContract.deployed().then(function(instance) {   			var infoEvent = instance.doneEvent();			infoEvent.watch(function(error, result) {   				$('#loader').hide();				$('#info').html(result.args.name + '(' + result.args.age + ')years old');			});		});	}}$(window).on('load', function() {   	App.init();});

开启服务器，接着就可以进行操作了

但是会报错，不知道啥原因。明白的大佬麻烦回复一下。
不过我不报太大希望了，之前一篇博客问的问题二百多个人访问，没有一个人回复的，真的很心累了。
第1个bug
在这里插入图片描述

在这里插入图片描述
第2个bug

转载地址：http://bknh.baihongyu.com/

你可能感兴趣的文章