5. Truffle框架前后端交互-1

本节主要讨论前端调用后台的合约,实现前后端交互

1.创建项目文件夹

 

2. 生成react前端模版

   官网:http://truffleframework.com/boxes/

    truffle unbox react

5. Truffle框架前后端交互-1_第1张图片

3. 通过Atom打开项目

   atom ./

4. 查看项目目录

5. Truffle框架前后端交互-1_第2张图片

5. 进入trffule控制台

5. Truffle框架前后端交互-1_第3张图片

6. 编译项目

7. 部署项目

5. Truffle框架前后端交互-1_第4张图片

8. 启动服务器

  打开一个终端,运行 npm start,如下显示

   5. Truffle框架前后端交互-1_第5张图片

9. 修改App.js代码

在页面刷新时就会弹出支付页面,直接改为return返回

5. Truffle框架前后端交互-1_第6张图片

 

9. 获取SimpleStorage合约实例,并修改值

  5. Truffle框架前后端交互-1_第7张图片  

 

10. 前端页面获取值

可以发现值已经可以显示出来了

5. Truffle框架前后端交互-1_第8张图片

下一节将讨论代码实现逻辑

关注公众号,并回复“区块链技术项目开发”,下载ppt和sol文件

 

 

 

 

 

   

你可能感兴趣的:(区块链技术实战,区块链技术,Truffle)