一 下載前端代碼
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 nodejsnode
安裝完成後查看安裝node版本,
$ node -vpython
v8.11.2
三 安裝項目依賴包
cd frontend
npm installreact
注意
1 npm install時, 若是下載進度比較慢,報錯以下
「
[ ...........] - postinstall: sill install executeActions
[ ...........] extract:asynckit: sill pacote data for sha512-d7nZf78irx
[ ...........] extract:asynckit: sill pacote data for sha512-d7nZf78irx
」webpack
能夠運行 npm config set registry https://registry.npm.taobao.org
而後 編輯 ~/.npmrc 加入下面內容
registry=https://registry.npm.taobao.org
四 運行前端
npm run startgit
eos-todo@1.0.0 start /home/li/Documents/todo-eos/frontend
webpack-dev-server --config webpack.config.js --mode developmentgithub
(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.web
五 打開瀏覽器,訪問「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)npm
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 調用合約內方法json
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 來源:簡書 簡書著做權歸做者全部,任何形式的轉載都請聯繫做者得到受權並註明出處。