如何利用Truffle React框架构建完整的智能合约

如何利用Truffle React框架构建完整的智能合约

使用solidity的truffle框架开发智能合约,前端使用react框架,最终完成智能合约从前端到后端,从开发到部署的完整流程。

1. 版本需求

  • Truffle v5.0.28 (core: 5.0.28)
  • Solidity v0.5.0 (solc-js)
  • Node v8.11.2
  • Web3.js v1.0.0-beta.37

2. 项目初始化

  1. mkdir -p truffle
  2. cd truffle
  3. truffle unbox react

3. 合约编写、编译和部署

  1. Github truffle-react 目录下的文件拷贝出来。
  2. copy ./source/App.js to "./client/src/App.js"
  3. copy ./source/truffle-config.js to ./
  4. copy ./source/Migration.sol ./source/SimpleStorage.sol to "./contracts"
  5. copy ./source/1_initial_migration.js ./source/2_deploy_contracts.js to "./migrations"
  6. truffle develop (port: 8545)
  7. compile
  8. migrate (--reset)

4. 启动项目,查看效果

  1. cd client && npm start
  2. config metamask wallet to private chain on http://localhost:8545
  3. visit http://localhost:3000
  4. input number xxx in input box, then click "修改" button
  5. in wallet , click comfirm button
  6. in mainpage ,the The stored value is: xxx(you enter number above)

5. 总结

一个完整的覆盖前后端的DAPP实际上就两点,跟传统互联网项目的前后端类似。

合约编写、部署前端调用基于以太坊开发DAPP实际上比较简单,重点是在合约的逻辑性、安全性上。从这也可以看出来以太坊生态的强大和完整,便捷完备的开发语言、工具,确实是目前最牛的项目之一。

原文地址:https://blog.51cto.com/5249302/2424895

时间: 2024-08-29 14:22:53

如何利用Truffle React框架构建完整的智能合约的相关文章

使用Python truffle 构建完整的智能合约

使用Python truffle 构建完整的智能合约 使用solidity的truffle框架开发智能合约,使用Python调用合约. 1. 合约编写.编译和部署 git clone https://github.com/jamess010/AIonChain cd ./AIonChain && cd ./master/smartcontract truffle develop (port: 9545) compile migrate (--reset) 2. 使用 python 调用 安

用Solidity在Truffle上构建一个HelloWorld智能合约

原文地址:石匠的blog Truffle的环境安装在前文已经整理,这次用Solidity在Truffle写一个HelloWorld以太坊智能合约,并在testrpc上进行测试.当前的软件版本信息如下: Truffle v4.1.11 (core: 4.1.11) Solidity v0.4.24 (solc-js) 项目创建 打开Mac的terminal终端,创建一个新目录,并truffle项目初始化. > mkdir HelloWorld > cd HelloWorld > truff

win7下以太坊基于truffle+ganache开发环境搭建以及智能合约的部署调用

上一篇介绍的是以太坊下基于geth+remix-ide智能合约环境的搭建和部署运行,本篇介绍的是基于truffle+ganache. ganache相当于是geth的图形化操作界面,相对于纯指令操作的geth较为简单易上手,并且运行交易和生成区块的过程一目了然. [前期准备] 1.Node.js安装(这一点在上一篇文章中提到过,所以此处不做展示) 2.指令输入: npm install -g solc(安装智能合约) npm install -g ganache-cli (安装ganache开发

利用Laravel 5 框架构建 Pages 的管理功能

1. 路由 Laravel 中的路由,跟其他 PHP 框架一样,作用是把各种请求分流到各个控制器. 在 `learnlaravel5/app/Http/routes.php` 的末尾添加以下代码: Route::group(['prefix' => 'admin', 'namespace' => 'Admin'], function() { Route::get('/', '[email protected]'); }); 这表示创建了一个路由组. 1. `'prefix' => 'ad

利用Multipeer Connectivity框架进行WiFi传输-b

什么是Multipeer Connectivity? 在iOS7中,引入了一个全新的框架——Multipeer Connectivity(多点连接).利用Multipeer Connectivity框架,即使在没有连接到WiFi(WLAN)或移动网络(xG)的情况下,距离较近的Apple设备(iMac/iPad/iPhone)之间可基于蓝牙和WiFi(P2P WiFi)技术进行发现和连接实现近场通信. Multipeer Connectivity扩充的功能与利用AirDrop传输文件非常类似,可

React 框架和Webpack

基于HTML的前端界面开发正变得越来越复杂,其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上.而来自Facebook的React框架正是完全面向此问题的一个解决方案,按官网描述,其出发点为:用于开发数据不断变化的大型应用程序(Building large applications with data that changes over time).相比传统型的前端开发,React开辟了一个相当另类的途径,实现了前端界面的高效率高性能开发. 首先,对

当react框架遇上百度地图

百度地图官方文档的使用指导是这样说的:在页面中引入<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你获取的秘钥"></script>,然后就可以使用脚本中引入的BMap对象去调用各种API了 我遇到的问题: 我在入口文件--index.html引入上面那段脚本后,而在另外一个JS文件里访问BMap时候报错了,提示BMap is not

React框架为什么这么火:React的设计思想

原文链接:http://mp.weixin.qq.com/s?__biz=MzA5Njc3Njk5NA==&mid=2650528748&idx=1&sn=4d3093e963ce76c642eb0c5d9a97625b#rd React的起源 React来自于Facebook,是的,就是那个你们听说过但是打不开的网站.Facebook的开发者当时在开发一个广告系统,因为对当前所有的MVC框架不满意,所以就自己写了一个UI框架,于是就有了React.后来因为觉得实在是好用,所以在2

使用 SailingEase WinForm 框架构建复合式应用程序(插件式应用程序)

对于一些较小的项目,具备一定经验的开发人员应该能够设计和构建出便于进行维护和扩展的应用程序.但是,随着功能模块数量(以及开发维护这些部件的人员)的不断增加,对项目实施控制的难度开始呈指数级增长. SailingEase WinForm 框架为您提供了针对此问题提出的解决方案.在本文中,将对基于SailingEase WinForm 框架的复合应用程序的定义进行解释,并简要说明如何才能构建一个基于 SailingEase WinForm 框架功能的复合应用程序. 传统的单一应用程序 传统的单一应用