博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
以太坊Truffle框架构建Dapp
阅读量:6277 次
发布时间:2019-06-22

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

想知道更多关于区块链技术知识,请百度【链客区块链技术问答社区】链客,有问必答!!

1.安装环境

通过node安装truffle,推荐在ubuntu 14.04下进行开发,window下可能会遇到各种问题。
$ npm install -g truffle  
我的node版本是
npm版本是
下载之后输入
$ truffle -v  我的版本是:

2.开始构建项目

首先准备一个目录存放项目
$ mkdir  "你的目录名"
$cd "你的目录名"       ---进入目录
接下来我们需要使用truffle框架来初始化一个项目
$truffle unbox webpack ---构建一个基于webpack的项目
这里要注意的是truffle为了增加开发的灵活性,不再初始化项目成web应用,如果你使用的是我这个版本,使用原来的truffle init指令生成的项目会缺少web相关文件,对于新手而言,为了更直观的看到开发效果建议选择webpack。
执行完上面的步骤,我们的项目就已经构建完成了

这里系统提示了相关指令,后面的步骤中我们也会用到。

3.项目解析

我的项目放在刚刚创建的zhao目录下,你的目录的名字是你先前取的。

app/   ---这也就是我们的项目的入口文件了,里面包括了用于合约交互的javascript,和用于显示前端的css等静态文件,合约交互后面会具体细说。
contracts/  ---看名字也知道是用来放合约代码的,默认会有三个合约,其中有一个叫metacoin的合约。
migrations/  --- 合约部署配置信息
node_modules/ ---项目需要的相关模块
test/ ---测试文件,暂时用不到这个
4.项目部署
接下来我们开始正式部署我们的应用
$truffle migrate  ---这个指令会编译并部署合约

可以看到报错了,这是因为我们还没有一个可以被部署的平台,其他老一点的教程里可能会要你用testrpc,但是这里我们只需要用truffle内置的测试平台就行了。

$truffle develop

输入指令后可以看到在终端运行了一个可以被部署的服务网络,默认端口号是9545,和testrpc一样会自动生成地址以供测试,接下来另开一个终端,cd进入项目目录,再次执行

$truffle migrate

发现还是连接不上,这是为什么呢?

原因是项目默认配置连接网络端口是7545,我们打开truffle.js修改配置即可

port端口改成9545,你应该还记得我们的测试服务就在9545,保存再次在终端输入

$truffle migrate

这次我们终于成功部署了合约。

5.项目开发
我们可以先试一试运行初始准备好了的项目,输入指令
$npm run dev

打开链接 :8080,可以看到

你可能会发现我和你的页面有些不一样,在You have META这里我的没有显示余额,你的页面上这个地方应该会看到有数字,为什么我的没有呢?f12打开控制台

会发现有这么一段话,这是说已经使用浏览器内置的web3接口,而你的页面应该是没有使用浏览器web3接口,而是自动从本地生成的,这是因为我下载了metamask,一个钱包插件,用来部署合约很便捷。

那么web3是干什么用的呢?

web3.js是以太坊提供的一个Javascript库,它封装了以太坊的JSON RPC API,提供了一系列与区块链交互的Javascript对象和函数,包括查看网络状态,查看本地账户、查看交易和区块、发送交易、编译/部署智能合约、调用智能合约等,其中最重要的就是与智能合约交互的API。
打开app/avascripts/app.js,直接移到最下面

这一段就是web3接口的引入部分,上面做了一个判断,如果检测到浏览器内置的web3接口就使用,否则在9545端口自行初始化一个,还记得9585端口上的服务吗?里面生成的地址可以供给web3调用,看到这里我们终于明白了这个web版的dapp是怎么和合约联系的了,所以要定制一个自己的web-dapp就可以通过这个对象作桥梁,搭建属于自己的dapp。

转载地址:http://bxgpa.baihongyu.com/

你可能感兴趣的文章
补交:最最原始的第一次作业(当时没有选上课,所以不知道)
查看>>
Vue实例初始化的选项配置对象详解
查看>>
PLM产品技术的发展趋势 来源:e-works 作者:清软英泰 党伟升 罗先海 耿坤瑛
查看>>
vue part3.3 小案例ajax (axios) 及页面异步显示
查看>>
浅谈MVC3自定义分页
查看>>
.net中ashx文件有什么用?功能有那些,一般用在什么情况下?
查看>>
select、poll、epoll之间的区别总结[整理]【转】
查看>>
CSS基础知识(上)
查看>>
PHP中常见的面试题2(附答案)
查看>>
26.Azure备份服务器(下)
查看>>
mybatis学习
查看>>
LCD的接口类型详解
查看>>
Spring Boot Unregistering JMX-exposed beans on shutdown
查看>>
poi 导入导出的api说明(大全)
查看>>
Mono for Android 优势与劣势
查看>>
将图片转成base64字符串并在JSP页面显示的Java代码
查看>>
js 面试题
查看>>
sqoop数据迁移(基于Hadoop和关系数据库服务器之间传送数据)
查看>>
腾讯云下安装 nodejs + 实现 Nginx 反向代理
查看>>
Javascript 中的 Array 操作
查看>>