eos开发实践
一 下载前端代码
git clone https://github.com/baidang201/eos-todo
二 安装nodejs
sudo apt-get install python-software-properties
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs
安装完成后查看安装node版本,
$ node -v
v8.11.2
三 安装项目依赖包
cd frontend
npm install
注意
1 npm install时, 如果下载进度比较慢,报错如下
“
[ ...........] - postinstall: sill install executeActions
[ ...........] \ extract:asynckit: sill pacote data for sha512-d7nZf78irx
[ ...........] \ extract:asynckit: sill pacote data for sha512-d7nZf78irx
”
可以运行 npm config set registry https://registry.npm.taobao.org
然后 编辑 ~/.npmrc 加入下面内容
registry=https://registry.npm.taobao.org
四 运行前端
npm run start
eos-todo@1.0.0 start /home/li/Documents/todo-eos/frontend
webpack-dev-server --config webpack.config.js --mode development
(node:17274) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks
instead
ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from ./dist
ℹ 「wdm」: Hash: 9552624317d8b15cd9f3
Version: webpack 4.6.0
Time: 15143ms
Built at: 2018-06-04 22:34:00
Asset Size Chunks Chunk Names
bundle.js 2.63 MiB main [emitted] main
Entrypoint main = bundle.js
[./node_modules/eosjs/lib/index.js] 8.26 KiB {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/react-hot-loader/patch.js] 40 bytes {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.75 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^./log$] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {main} [built]
[0] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx 64 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.66 KiB {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.31 KiB {main} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.03 KiB {main} [built]
[./src/index.jsx] 8.44 KiB {main} [built]
+ 651 hidden modules
ℹ 「wdm」: Compiled successfully.
五 打开浏览器,访问“localhost:8080”
image.png
注意
运行前端,报错“已拦截跨源请求:同源策略禁止读取位于 http://172.17.0.2:8888/v1/chain/get_code 的远程资源。”
=》(原因:CORS 头缺少 'Access-Control-Allow-Origin')
跨域请求问题,要设置config.ini, 把access-control-allow-origin access-control-allow-headers 属性做如下修改(config.ini目录/home/li/.local/share/eosio/nodeos/config/config.ini)
access-control-allow-origin = *
access-control-allow-headers = Origin, X-Requested-With, Content-Type, Authorization, X-Custom-Header
六 总结
1 eosjs在react的使用
《1 导入eosjs库
《2 生成eosjs对象
《3 加载合约
《4 调用合约内方法
import EOS from 'eosjs'
const EOS_CONFIG = {
contractName: "bytemaster", // Contract name,who create contract
contractSender: "bytemaster", // User executing the contract (should be paired with private key),who run contract
clientConfig: {
keyProvider: ['5Ke4aKjY9PGZJnxNV54REsGUqQqRZNpJKr6unnkWLmU1oTT16Cw'], // Your private key
httpEndpoint: 'http://127.0.0.1:8888' // EOS http endpoint
}
}
let eosjs = EOSJS.Localnet(EOSJS_CONFIG, clientConfig)
eos.js.contract(EOS_CONFIG.contractName)
.then((contract) = >{
console.log(EOS_CONFIG.contractName + 'load contract ok!')
eosjs.getTableRows({
"scope": EOS_CONFIG.contractName,
"code": EOS_CONFIG.contractName,
"table": "todos",
"json": true
})
.then(result = >{
console.log(EOS_CONFIG.contractName + 'read data ok!')
let rows = result.rows
let len = rows.length
for (let i = 0; i < len; i++) {
var id = result.rows[i].id
//...
}
})
.catch((err) = >{
console.error(e);
})
})
七 引用
https://steemit.com/eos/@eos-asia/part-2-building-a-to-do-list-with-eos-or-working-with-persistent-data-in-eos 《Part 2: Building a To-do list with EOS》
https://mp.weixin.qq.com/s/QVzKIrhYpw7JdrWe38TEJw《[EOS智能合约]第二节:用EOS开发一个To-do List小应用》
https://github.com/eosasia/eos-todo 《todolis前端源码》
https://github.com/EOSIO/eosjs 《EOSJS前端源码,及使用简介》
作者:剑有偏锋
链接:https://www.jianshu.com/p/745548d36ccc
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
eos开发实践的更多相关文章
- EOS 开发终极神器-vscode (你绝对找不到的干货)
https://eosfans.io/topics/323 前言:最近一直苦于EOS开发没有好用的IDE,用了很多,试了很多,都让人觉得有些差强人意.于是乎笔者在经过,长时间的查找实践中,终于找到了e ...
- ETH&EOS开发资源及工具集合(完整汇总版)
ETH&EOS开发资源及工具集合(完整汇总版) 3113 ETH开发资源篇 一.开发语言 · Solidity - 官方推荐以太坊智能合约开发语言,也是目前最为主流的智能合约语 ...
- 《JavaScript设计模式与开发实践》整理
最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...
- Android游戏开发实践(1)之NDK与JNI开发03
Android游戏开发实践(1)之NDK与JNI开发03 前面已经分享了两篇有关Android平台NDK与JNI开发相关的内容.以下列举前面两篇的链接地址,感兴趣的可以再回顾下.那么,这篇继续这个小专 ...
- TFS 2015 敏捷开发实践 – 在Kanban上运行一个Sprint
前言:在 上一篇 TFS2015敏捷开发实践 中,我们给大家介绍了TFS2015中看板的基本使用和功能,这一篇中我们来看一个具体的场景,如何使用看板来运行一个sprint.Sprint是Scrum对迭 ...
- Android游戏开发实践(1)之NDK与JNI开发01
Android游戏开发实践(1)之NDK与JNI开发01 NDK是Native Developement Kit的缩写,顾名思义,NDK是Google提供的一套原生Java代码与本地C/C++代码&q ...
- Android游戏开发实践(1)之NDK与JNI开发02
Android游戏开发实践(1)之NDK与JNI开发02 承接上篇Android游戏开发实践(1)之NDK与JNI开发01分享完JNI的基础和简要开发流程之后,再来分享下在Android环境下的JNI ...
- vue 2.0 开发实践总结之疑难篇
续上一篇文章:vue2.0 开发实践总结之入门篇 ,如果没有看过的可以移步看一下. 本篇文章目录如下: 1. vue 组件的说明和使用 2. vuex在实际开发中的使用 3. 开发实践总结 1. ...
- Redis的Python实践,以及四中常用应用场景详解——学习董伟明老师的《Python Web开发实践》
首先,简单介绍:Redis是一个基于内存的键值对存储系统,常用作数据库.缓存和消息代理. 支持:字符串,字典,列表,集合,有序集合,位图(bitmaps),地理位置,HyperLogLog等多种数据结 ...
随机推荐
- mysql数据库锁简介
本篇介绍有关数据库锁相关的知识,关于数据库事务及隔离级别参见<数据库事务ACID特性及隔离级别>这篇文. 乐观锁 乐观锁最常用的实现方式是用数据版本(Version)记录机制.数据版本 ...
- Kubernetes(一)--简介
一.什么是kubernetes(K8s)? Kubernetes作为容器编排生态圈中重要一员,是Google大规模容器管理系统borg的开源版本实现,吸收借鉴了google过去十年间在生产环境上所学到 ...
- .net core 实践笔记(三)--封装底层
前言: 有了前面的工作,简单的架子基本搭建起来了,因为条件有限,只能先测试SqlServer的了,源码放出来,也希望有兴趣的伙伴可以一起改善,相信可以成为未来进阶架构师的第一步,自己有小项目的时候可以 ...
- 使用 runtime 实现字符串转方法,并传递参数
利用runtime的动态机制实现字符串转方法并传递参数 使用 SEL 关键字引用方法声明,使用 methodForSelector 寻找方法实现, 使用函数指针调用方法. - (void)action ...
- 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )
测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示: input固定底部设计图.png 点击底部input输入框唤 ...
- js(jQuery)tips
一:页面加上$(function(){***内容***})与不加的区别 1.这个是DOM加载完之后再加载JS代码,你的JS如果放在文档后面可能一样,但是如果你要是把JS放在head里面就有差别了(放在 ...
- 【Memcached】原理、体系架构、基本操作及路由算法
1. 什么是Memcached 要了解Memcached首先要到官网上去看官方对它的描述.Memcached的官网网站是:http://memcached.org/,官方对Memcached的描述如下 ...
- 记一次学习PHP中的错误
今天学习PHP时,回想起一段代码 <?php> $i = true; $o = true; $p = false; if($i or $o and $p){ echo '输出为'.'tru ...
- etl是什么
ETL (数据仓库技术) ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract).交互转换(transform).加载(load)至目的 ...
- Golang Gin 项目包依赖管理 godep 使用
Golang Gin 项目包依赖管理 godep 使用 标签(空格分隔): Go 在按照github.com/tools/godep文档go get完包以后,调整项目结构为$GOPATH/src/$P ...