博客
关于我
[区块链笔记12] 第一个DApp--demo
阅读量:327 次
发布时间:2019-03-04

本文共 3396 字,大约阅读时间需要 11 分钟。

初始化项目

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

	
Dapp demo

Dapp demo

正在加载

编辑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/

你可能感兴趣的文章
mysql 常见问题
查看>>
MYSQL 幻读(Phantom Problem)不可重复读
查看>>
mysql 往字段后面加字符串
查看>>
mysql 快照读 幻读_innodb当前读 与 快照读 and rr级别是否真正避免了幻读
查看>>
MySQL 快速创建千万级测试数据
查看>>
mysql 快速自增假数据, 新增假数据,mysql自增假数据
查看>>
MySql 手动执行主从备份
查看>>
Mysql 批量修改四种方式效率对比(一)
查看>>
mysql 批量插入
查看>>
Mysql 报错 Field 'id' doesn't have a default value
查看>>
MySQL 报错:Duplicate entry 'xxx' for key 'UNIQ_XXXX'
查看>>
Mysql 拼接多个字段作为查询条件查询方法
查看>>
mysql 排序id_mysql如何按特定id排序
查看>>
Mysql 提示:Communication link failure
查看>>
mysql 插入是否成功_PDO mysql:如何知道插入是否成功
查看>>
Mysql 数据库InnoDB存储引擎中主要组件的刷新清理条件:脏页、RedoLog重做日志、Insert Buffer或ChangeBuffer、Undo Log
查看>>
mysql 数据库中 count(*),count(1),count(列名)区别和效率问题
查看>>
mysql 数据库备份及ibdata1的瘦身
查看>>
MySQL 数据库备份种类以及常用备份工具汇总
查看>>
mysql 数据库存储引擎怎么选择?快来看看性能测试吧
查看>>