一 下载前端代码

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开发实践的更多相关文章

  1. EOS 开发终极神器-vscode (你绝对找不到的干货)

    https://eosfans.io/topics/323 前言:最近一直苦于EOS开发没有好用的IDE,用了很多,试了很多,都让人觉得有些差强人意.于是乎笔者在经过,长时间的查找实践中,终于找到了e ...

  2. ETH&EOS开发资源及工具集合(完整汇总版)

    ETH&EOS开发资源及工具集合(完整汇总版) 3113 ETH开发资源篇 一.开发语言 ·         Solidity - 官方推荐以太坊智能合约开发语言,也是目前最为主流的智能合约语 ...

  3. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  4. Android游戏开发实践(1)之NDK与JNI开发03

    Android游戏开发实践(1)之NDK与JNI开发03 前面已经分享了两篇有关Android平台NDK与JNI开发相关的内容.以下列举前面两篇的链接地址,感兴趣的可以再回顾下.那么,这篇继续这个小专 ...

  5. TFS 2015 敏捷开发实践 – 在Kanban上运行一个Sprint

    前言:在 上一篇 TFS2015敏捷开发实践 中,我们给大家介绍了TFS2015中看板的基本使用和功能,这一篇中我们来看一个具体的场景,如何使用看板来运行一个sprint.Sprint是Scrum对迭 ...

  6. Android游戏开发实践(1)之NDK与JNI开发01

    Android游戏开发实践(1)之NDK与JNI开发01 NDK是Native Developement Kit的缩写,顾名思义,NDK是Google提供的一套原生Java代码与本地C/C++代码&q ...

  7. Android游戏开发实践(1)之NDK与JNI开发02

    Android游戏开发实践(1)之NDK与JNI开发02 承接上篇Android游戏开发实践(1)之NDK与JNI开发01分享完JNI的基础和简要开发流程之后,再来分享下在Android环境下的JNI ...

  8. vue 2.0 开发实践总结之疑难篇

    续上一篇文章:vue2.0 开发实践总结之入门篇 ,如果没有看过的可以移步看一下. 本篇文章目录如下: 1.  vue 组件的说明和使用 2.  vuex在实际开发中的使用 3.  开发实践总结 1. ...

  9. Redis的Python实践,以及四中常用应用场景详解——学习董伟明老师的《Python Web开发实践》

    首先,简单介绍:Redis是一个基于内存的键值对存储系统,常用作数据库.缓存和消息代理. 支持:字符串,字典,列表,集合,有序集合,位图(bitmaps),地理位置,HyperLogLog等多种数据结 ...

随机推荐

  1. java 网站源码 六套模版 兼容手机平板PC freemaker 静态引擎 在线编辑模版

    官网 http://www.fhadmin.org/ 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的ht ...

  2. OpenID Connect Core 1.0(五)使用授权码流验证(下)

    3.1.2.6 验证错误响应(Authentication Error Response) 验证错误响应是一个OAuth 2.0授权错误响应消息,是RP发送授权请求的消息,由OP授权终结点的响应返回. ...

  3. SaltStack 自动化工具

    1.服务端安装master: # yum -y install salt-master # yum -y install salt-minion 2.客户端安装minion: # yum -y ins ...

  4. activiti获取流程图中的所有信息包括变量名

    今天在看activiti的变量的时候,都是由用户来设置变量,我们在后台写代码通过变量设置或取一些参数的时候,非常的不方便. 比如:设置变量的时候通过页面设置 设置之后,我们如何动态的给这个变量设置参数 ...

  5. Oracle分析函数(一)

    (一)分析函数语法 function_name(<argument>,<argument>...) over(<partition by clause><or ...

  6. Mac 模拟慢速网络

    作为开发者,为了提升用户体验,有时需要模拟不同环境的网络.Mac环境下模拟慢速网络可以使用苹果官方提供的工具:Network Link Conditioner. 1.点击苹果开发者网站提供的下载页面, ...

  7. C++练习 | 二分练习

    Codeforces 371C : Hamburgers #include<bits/stdc++.h> using namespace std; char B='B',S='S',C=' ...

  8. linux学习笔记一:远程连接linux服务器

    环境介绍:win7电脑,通过VM虚拟出linux系统,安装centOS7 通过Xshell连接linux,ftp访问服务器资源. 遇到的问题,ftp连不上linux 解决:linux上安装ftp服务 ...

  9. CDH部署(以5.7.5为例)

    博客园首发,转载请注明出处https://www.cnblogs.com/tzxxh/p/9120020.html 一.准备工作(下面的内容括号内写master的表示仅在master节点执行,all代 ...

  10. 20155316 2016-2017-2 《Java程序设计》第3周学习总结

    教材学习内容总结 类:创建类.使用类 基本类类型与类类型 数组 封装的概念 重载 类语法 static成员 教材学习中的问题和解决过程 1.既然数组在JAVA中就是对象,那么int[] 是否是一个类呢 ...