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

这篇具有很好参考价值的文章主要介绍了通过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查看效果
通过ganache与以太坊Dapp实现交互 —— 简单的例子
通过ganache与以太坊Dapp实现交互 —— 简单的例子

安装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

> mydapp@0.0.0 start
> node ./bin/www

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

打开浏览器,输入127.0.0.1:3000 即可看到ganache与web3交互的结果。
通过ganache与以太坊Dapp实现交互 —— 简单的例子文章来源地址https://www.toymoban.com/news/detail-455567.html

到了这里,关于通过ganache与以太坊Dapp实现交互 —— 简单的例子的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ganache私链部署智能合约+本地网络Dapp

    参考自(3条消息) 区块链投票应用:使用solidity+truffle+metamsk开发Dapp应用_一袋芋头的博客-CSDN博客下载了项目示例webpack之后   我们需要将里面的其他合约都删除,也可以直接删除这两个文件夹里的内容  然后就可以开始正片了(当然,你得先前就安装好环境) 开启ganache私链,

    2024年02月08日
    浏览(43)
  • Web3通过 MetaMask简单演示对ganache虚拟环境账号进行管理操作

    上文 Web3通过ganache运行起一个本地虚拟区块链 我们通过ganache在本地运行起了一个虚拟的区块链环境 那么 接下来 我们就要用 MetaMask 来管理这个东西了 如果您还没有安装 可以访问文章Web3 将 MetaMask添加入谷歌浏览器 扩展程序中和Web3开发准备工作 手把手带你创建自己的 Meta

    2024年02月10日
    浏览(63)
  • 以太坊 – 部署智能合约到Ganache

    目录 1. Ganache本地区块链 1.1 主界面 1.2 设置 2. 开发智能合约 2.1 初始化项目 2.2 添加package.json文件 2.3 添加智能合约源文件 2.4 编译项目 3. 部署智能合约到Ganache 3.1 更新配置文件 3.2 创建迁移脚本  3.3 执行迁移命令 首先启动Ganache,创建本地的以太坊区块链网络。 本地

    2024年02月16日
    浏览(53)
  • 6.DApp-用Web3实现前端与智能合约的交互

    题记         用Web3实现前端与智能合约的交互,以下是操作流程和代码。 准备ganache环境         文章地址:4.DApp-MetaMask怎么连接本地Ganache-CSDN博客  准备智能合约          文章地址: 2.DApp-编写和运行solidity智能合约-CSDN博客 编写index.html文件          !DOCTYPE htm

    2024年02月08日
    浏览(41)
  • 在前端页面上应用智能合约实现合约交互例子

    在Remix上编译和部署智能合约,本地使用vscode工具调用智能合约应用于前端界面 win10 Remix VScode Ganache-cli web3 创建新合约 InfoContract.sol 并写入以下内容: 写好合约内容之后,按照ganache-cli连接Metamask钱包里面 步骤 的内容操作。 在remix中进入DeployRun模块,选择Enviroment为Injected W

    2023年04月08日
    浏览(38)
  • 区块链DAPP开发 以太坊智能合约框架有哪些

    Truffle 是一个在以太坊进行 DApp 开发的世界级开发环境、测试框架。 使用 Truffle 开发有一以下优点: 内置智能合约编译,链接,部署和二进制(文件)管理。 可快速开发自动化智能合约测试框架。 可脚本化、可扩展的部署和迁移框架。 可管理多个不同的以太坊网络,可部署

    2024年02月02日
    浏览(49)
  • Web3通过ganache运行起一个本地虚拟区块链

    通过文章 Web3开发准备工作 手把手带你创建自己的 MetaMask 账号大家简单的对网络 有了个比较模糊的概念 不同的网络连接这不同的区块链 那么 我们就要搞清楚 我们切换不同的网络 我们的数字资产是不一样的 在这里 我们需要先安装一个插件工具 ganache 我们先在本地创建一个

    2024年02月11日
    浏览(41)
  • 以太坊主网络和ropsten网络区别,Remix IDE Environment;javascript VM 和injected web3区别;Web3.0是什么;ganache是什么

    目录 以太坊的测试网络 Ropsten Kovan Rinkeby Remix IDE Environment javascript VM 和injected web3区别

    2023年04月08日
    浏览(38)
  • 如何实现两个电脑之间通过以太网(网线)实现文件互传

    本帖目的:介绍如何通过以太网(网线)连接两台电脑,通过文件夹共享的方式,实现两台电脑之间的文件互传。 本帖以笔者实际工作上遇到的场景为例进行介绍,两台电脑分别是一台办公台式机和一台笔记本调试机,目的是将台式机上的某个文件发送到调试机上。受限于公

    2024年02月22日
    浏览(42)
  • Android Studio 接入OpenCV最简单的例子 : 实现灰度图效果

    上文 我们在Windows电脑上实现了人脸功能,接下来我们要把人脸识别的功能移植到 Android 上。 那么首先第一步,就是要创建一个 Native 的 Android 项目,并且配置好 OpenGL ,并能够调用成功。 这里我们使用的是 openCV-4.8.0 ,官网下载地址 : https://opencv.org/releases/ 也可以直接下载我

    2024年02月12日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包