美文网首页以太坊区块链truffle-webpack开发入门
以太坊区块链Truffle-webpack开发入门 (一) 环境

以太坊区块链Truffle-webpack开发入门 (一) 环境

作者: 敲疯 | 来源:发表于2018-03-22 08:59 被阅读0次

    文章转到这里了,在这里更新后续文章

    本教程使用以太坊的truffle框架在testrpc环境中模拟

    系统:Mac OS (windows系统只作为参考)

    1. 首先安装nodejs

     到官网下载安装即可  http://nodejs.cn/download/

    安装之后在终端查看是否安装成功:

    $ node -v

    如顺利出现版本信息,就表示成功了(失败的可能性很小)

    2.cpm使用淘宝镜像

    安装nodejs中内置npm,但是国内使用不畅,需要使用淘宝镜像——cnpm

    打开终端执行下方命令

    $ npm install -g cnpm --registry=https://registry.npm.taobao.org

    *-g表示可以全局使用cnpm  详情查看:https://npm.taobao.org/

    3.安装智能合约框架truffle

    $ cnpm install -g truffle

    4.安装模拟环境testrpc

    $ cnpm install -g testrpc

    5.至于IDE工具 建议使用Visual Studio

    6.Clone项目代码

    找个地方 从git上clone代码 地址:  

      项目名为:blockChain

    $ git clone  https://github.com/trufflesuite/truffle-init-webpack  blockChain

    clone完成之后 进入项目 通过cnpm安装一些必要的库

    $ cd blockChain

    $ cnpm install

    7.开启模拟环境testrpc

    在6的基础上继续命令操作:

    $ testrpc

    *开启模拟环境不一定要在6的基础上(blockChain目录)中执行,由于后面还有其他操作需要在此执行,所以就不要关闭终端或切换目录了

    这个模拟环境开启之后 需要留意之后的打印信息:

    成功的标志是出现:

    Listening on localhost:8545

    不一定是 8545 这个端口,对这个端口留意一下,后面可能会用上

    8.编译(compile)和部署(deploy)合约

    $ truffle compile

    $ truffle deploy

    编译和部署过程只要不出现Error就表示成功了

    9.开启nodejs服务,用来服务前段页面的

    $ npm run dev

    *此处使用的是npm,也可以使用cnpm  此nodejs服务也可以不用,如果只开发合约部分,可以使用truffle的console调试,truffle的console后续会讲到

    开启成功之后打印信息中会有内容

    Project is running at http://localhost:8080/

    在浏览器中访问 http://localhost:8080/

    如果打开的页面跟下方图片差不多(我做了中文便于观察) 在“你当前拥有9726以太币”这个位置你的应该是: you have 10000 META

    如果1000没有显示出来,那你应该会碰到一个弹窗:

    如果有这个弹窗说明没有正确配置,解决弹窗:

    打开项目,打开下图中的文件:

    打开之后内容如下:

    找到这行代码:

    window.web3 = new Web3(new Web3.providers.HttpProvider

    检查这里面的地址 :http://127.0.0.1:8545 和第7步打印的地址和端口是否相同

    在第7步也提醒了诸位要注意这个端口 其实上面贴图代码里的端口是9545,这个截图是我改正之后的,在你的代码的这个位置把端口改为和第七步的端口一致就OK了

    *localhost 就是127.0.0.1   localhost:8545和127.0.0.1:8545一样的效果

    修改保存之后重复8,9步骤,再次打开网页输入第9步中打印的网络地址:localhost:8080

    如果还出现弹窗,检查app.js改动后是否保存

    成功的标志就是没有弹窗,页面信息中有 “you have 10000 META!”

    文章转到这里了,在这里更新后续文章

    相关文章

      网友评论

        本文标题:以太坊区块链Truffle-webpack开发入门 (一) 环境

        本文链接:https://www.haomeiwen.com/subject/ietnqftx.html