以太坊Truffle框架构建Dapp

Bertha 。 2022-03-07 11:58 270阅读 0赞

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

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

打开链接 [http://localhost][http_localhost]: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_localhost]: http://localhost