通过ganache与以太坊Dapp实现交互 —— 简单的例子

admin • • 区块链

通过ganache与以太坊Dapp实现交互 —— 简单的例子

准备条件：
环境：Centos7或者其他版本的linux
必备： 安装npm (推荐16.1.0版本) 以及ganache-cli

在dapp目录下的ganache目录启动ganache-cli
会输出下面的结果：

[root@ ganache]# ganache-cli
Ganache CLI v6.12.2 (ganache-core: 2.13.2)

Available Accounts
==================
(0) 0x0290510d6800238A3E087D862747e700a1a10D08 (100 ETH)
(1) 0x4012E2365946076cF48a06Ea43352E9e898D5DdD (100 ETH)
(2) 0x0B9FC57a3cfc6C50ceC7465acfD908f54753da47 (100 ETH)
(3) 0xBf032e66fD1f34671bd9D07E4a5f9835C4CE281f (100 ETH)
(4) 0xd3a57f27318C9D4C7800AdAD8b77d8018f6CD067 (100 ETH)
(5) 0x4b2842CB2597516b106958e481004f38972Bd900 (100 ETH)
(6) 0x23E9c6ef5B4a3434e14Ae612C11Ac62E4d5cFEc1 (100 ETH)
(7) 0x03B782000625ebE0cfAcbbC99D5405c1457332DE (100 ETH)
(8) 0xbbf5986b1FE9B11C5C698620D768b0477De746C4 (100 ETH)
(9) 0x76E5a724Db2a4aB395DA59b751A20813E1AB09d3 (100 ETH)

Private Keys
==================
(0) 0x3d036634781286f518e1d10c35f001752937cf94a56d33678d9ed08ee083f253
(1) 0x2670ccb6966d02d0e5fa4be32fbabfe37f830cb824a1ee8452243e85a11b92ef
(2) 0xfd6293f17fcb6c857f085613b5c79d8c3f5932b500952f5ceae985432f5a6ad4
(3) 0xaf19287c564f6daf205d75d952cf9a1f061856bef15316870f116f6104a56379
(4) 0x2c7b69b2323515002966cfd0156f93fd471a461d4103545c4e96799009b11231
(5) 0x7faedd0b5ec22e900ab5ba8900a68ae9bf019bfad8411715a8204d17e927cff8
(6) 0x86dffcb52b1a75437aa92bd234fcb5716a3357bf8888671e24790e7028916184
(7) 0x7ec139800df481b982a2a957db2f216e223d26b27e960517c66e4dbde8ecce98
(8) 0x8b9cdda2b00d936feb5fb6a2e1032033a8c86bd284b4466c6a3803789f77fa9a
(9) 0x5be3acee1332107fb29f0c7608f8266708b1ef6715aa8dd8a2ce06f4146a7d9b

HD Wallet
==================
Mnemonic:      slice debate rabbit comfort combine ancient section banner spring frame twice artefact
Base HD Path:  m/44'/60'/0'/0/{account_index}

Gas Price
==================
20000000000

Gas Limit
==================
6721975

Call Gas Limit
==================
9007199254740991

Listening on 127.0.0.1:8545

创建一个备用目录testdapp

mkdir testdapp

安装express

npm install express -g
npm install -g express-generator

创建工程

express -e MyDapp

先要进行一些安装

npm install

在MyDapp文件下会出现以下目录

[root@ MyDapp]# ls
app.js  node_modules  package-lock.json  routes   bin     package.json  public             views

启动我们的工程

npm start

登录游览器http://127.0.0.1:8545和http://127.0.0.1:3000查看效果
在这里插入图片描述
在这里插入图片描述

安装web3

[root@ MyDapp]# npm install web3 -save

此时可以发现多了node_modules和package-lock.json两个文件

[root@ MyDapp]# ls
app.js  bin  node_modules  package.json  package-lock.json  public  routes  views

我们进入到routes文件夹进行修改index.js

[root@  MyDapp]# cd routes
[root@  routes]# ls
index.js  users.js
[root@cfx routes]# vim index.js

修改index.js当中的代码

var express = require('express');
var router = express.Router();
var Web3 = require('web3');
var web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));

web3.eth.getAccounts().then(console.log);

/* GET home page. */
router.get('/', function(req, res, next) {
  web3.eth.getAccounts().then(function(accounts){
     var account = accounts[0];
     web3.eth.getBalance(account).then(function(balance){
        var amount = web3.utils.fromWei(balance,'ether');
        res.render('index',{account: account,balance: amount});

});
});
});

module.exports = router;

[root@ MyDapp]# ls
app.js  bin  node_modules  package.json  package-lock.json  public  routes  views
[root@ MyDapp]# vim app.js

修改app.js当中的代码

var ejs = require('ejs');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('.html',ejs.__express);
app.set('view engine', 'html');

在views文件下创建index.html文件,并将下面的html代码放入

[root@ MyDapp]# cd views
[root@ views]# ls
error.ejs  index.ejs
[root@ views]# vim index.html

<!DOCTYPE html>
<html>
  <head>
    <title>账户余额</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>账户是： <%= account %></h1>
    <h1>余额是： <%= balance %></h1>
  </body>
</html>

另启一个终端进入testdapp目录然后进到我们创建项目的MyDapp目录下
输入npm start命令，会输出下面的结果

[root@ MyDapp]# npm start

> [email protected] start
> node ./bin/www

[
  '0x0290510d6800238A3E087D862747e700a1a10D08',
  '0x4012E2365946076cF48a06Ea43352E9e898D5DdD',
  '0x0B9FC57a3cfc6C50ceC7465acfD908f54753da47',
  '0xBf032e66fD1f34671bd9D07E4a5f9835C4CE281f',
  '0xd3a57f27318C9D4C7800AdAD8b77d8018f6CD067',
  '0x4b2842CB2597516b106958e481004f38972Bd900',
  '0x23E9c6ef5B4a3434e14Ae612C11Ac62E4d5cFEc1',
  '0x03B782000625ebE0cfAcbbC99D5405c1457332DE',
  '0xbbf5986b1FE9B11C5C698620D768b0477De746C4',
  '0x76E5a724Db2a4aB395

打开浏览器，输入127.0.0.1:3000 即可看到ganache与web3交互的结果。
在这里插入图片描述

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>