初始化项目 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
