开发 DApp 客户端

本文运用前端框架 React 创建了一个 TodoList 示例,并对其调用合约,进行添加数据操作。

注意:本文有运用到前端框架 React。如果有对于 React 不熟悉的用户,可以建议先学习 React

获取数据

在 todomvc 项目中,dapp/components/app.js 文件。通过 getTableRows() 方法来获取数据。

备注:config.js 配置文件已经在上一章 部署合约 里配置完成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const FIBOS = require('fibos.js');
const config = require('../config');

const fibosClient = FIBOS(config.client)

fibosClient.getTableRows(
true,
config.contract.sender,
config.contract.name,
'todos').then((data)=>{
this.setState({todos: data.rows}) //this setState 为React 改变视图层方法
}).catch((e) => {
console.error(e)
}
)

调用合约

在 todomvc 项目中,dapp/components/app.js 文件是我们是我们调用合约的地方。通过 contract() 方法来获取到合约。

1
fibosClient.contract(config.contract.name)

以插入数据为例,调用合约中暴露的 emplacetodo 方法,并传入 id、text、completed 三个参数。并将 authorization 配置为合约调用者的账户。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
fibosClient.contract(config.contract.name).then((contract) => {
contract.emplacetodo(
{
id: todo_id,
text,
completed: 0
},
{ authorization: [config.contract.sender] }
).then((res) => {
const todos = [
{
id: todo_id,
completed: 0,
text: text
},
...this.state.todos
]
this.setState({todos}) ///this setState 为React 改变视图层方法
}
)
.catch((err) => { console.log(err) })
})

结语

本文以添加数据为代码示例,更多的 todo 操作示例可以在 https://github.com/fengluo/fibos-todomvc下的 dapp 文件下学习!