用python实现todolist_基于EOS3.0实现todolist下篇-前端

一 下载前端代码

二 安装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

”

然后 编辑 ~/.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);

})

})

七 引用