[区块链笔记12] 第一个DApp--demo
初始化项目
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
<html>
<head>
<meta charset="utf-8">
<title>Dapp demotitle>
<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 demoh1>
<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
![[区块链笔记12] 第一个DApp--demo_第1张图片](http://img.e-com-net.com/image/info8/286bb78eb3e44ed19fe4e8de8bf22d6f.jpg)
![[区块链笔记12] 第一个DApp--demo_第2张图片](http://img.e-com-net.com/image/info8/5ba7614776fb4413989d82e6eb563a6e.jpg)
第2个bug
![[区块链笔记12] 第一个DApp--demo_第3张图片](http://img.e-com-net.com/image/info8/7aebcf72ab0645b5aea14d38ae891878.jpg)