如何使用HyperledgeFabric網(wǎng)絡react.js來構建Web應用程序
在本節(jié)中，我們將介紹如何通過RESTful API將HyperledgeFabric網(wǎng)絡與Web應用程序集成，并使用react.js作為前端。本教程中構建的Web應用程序僅是保單持有者應用程序。
應用執(zhí)行
在繼續(xù)下面操作步驟時，請按照第一節(jié)內(nèi)容進行搭建后，再繼續(xù)以下操作。
在insurance_application文件夾中，運行以下命令以創(chuàng)建保單持有人Web應用程序的框架：
npx create-react-app policyholder_app
cd policyholder_app
打開src/app.js并刪除函數(shù)app返回中的代碼，只需添加hello world作為占位符，這樣app.js文件現(xiàn)在看起來如下
import React from ‘react’;
import ‘。/App.css’;
funcTIon App（） {
return （
《p》Hello World《/p》
）;
}
export default App;
用以下內(nèi)容替換src / App.css中的代碼：
* {
box-sizing： border-box;
margin： 0;
padding： 0;
}
body {
font-family： Arial， HelveTIca， sans-serif;
line-height： 1.4;
background： #5B5B5B;
font-family： monospace;
font-size： 150%
}
a {
color： #333;
text-decoraTIon： none;
font-family： monospace;
}
.container {
padding： 0 1rem;
}
.btn {
display： inline-block;
border： none;
background： #555;
color： #fff;
padding： 7px 20px;
cursor： pointer;
}
.btn:hover {
background： #666;
}
React應用程序的默認端口號是3000，因此需要更改它以使其不與REST API端口沖突。要執(zhí)行此操作，請將package.json的scripts部分更改為以下內(nèi)容以創(chuàng)建端口3001：
“scripts”： {
“start”： “PORT=3001 react-scripts start”，
“build”： “react-scripts build”，
“test”： “react-scripts test”，
“eject”： “react-scripts eject”
}，
此外，我們需要在文件的底部添加一個代理，該代理將連接到Hyperledger Composer Network，因此只需在結束大括號之前添加以下行：
“proxy”： “http://localhost:3000/”
在此文件夾中創(chuàng)建以下新文件夾src/components和以下新文件header.js。這將為我們的應用程序創(chuàng)建一個簡單的標題，其中包含指向主頁的鏈接：
import React， { Component } from ‘react’
import { Link } from ‘react-router-dom’;
class Header extends Component {
render（） {
return （
《header style={headerStyle}》
《h1 style={TItleStyle}》Policyholder Blockchain Insurance《/h1》
《Link style={linkStyle} to=“/”》Home《/Link》
《/header》
）
}
}
const headerStyle = {
background： ‘#333’，
color： ‘#fff’，
textAlign： ‘right’，
padding： ‘10px’
}
const linkStyle = {
color： ‘#fff’，
textDecoration： ‘none’
}
const titleStyle = {
textAlign： ‘left’
}
export default Header;
現(xiàn)在修改app.js，以便導入：
import { BrowserRouter as Router， Route } from ‘react-router-dom’;
import Header from ‘。/components/Header’
它實現(xiàn)了組件Header.js，如下所示：
《Router》
《Header/》
《/Router》
App.js現(xiàn)在看起來應該是這樣的：
import React from ‘react’;
import { BrowserRouter as Router， Route } from ‘react-router-dom’;
import ‘。/App.css’;
import Header from ‘。/components/Header’
function App（） {
return （
《Router》
《Header/》
《/Router》
）;
}
export default App;
您可能需要安裝react-router-dom：
npm install --save react-router-dom
此外，您可能還需要安裝react-responsive-modal：
npm install react-responsive-modal --save
現(xiàn)在運行應用程序以通過從policyholder_app文件夾運行以下命令來測試所有工作正常
npm start
如果一切正常，應用程序應如下所示：
創(chuàng)建一個與Blockchain RESTful API連接的函數(shù)。使用以下代碼創(chuàng)建src / Connection.js：
function search（query， cb） {
return new Promise（ （resolve，reject） =》 {
return fetch（`api/${query}`， {
accept： “application/json”
}）
.then（parseJSON）
.then（data =》 resolve（data））;
}）
}
function create（type， data）{
return new Promise（（resolve， reject） =》 {
return fetch（`api/${type}`， {
headers： {
‘Accept’： ‘a(chǎn)pplication/json’，
‘Content-Type’： ‘a(chǎn)pplication/json’
}，
method： ‘post’，
body： JSON.stringify（data）
}）
.then（parseJSON）
.then（（） =》 resolve（））
}）
}
function parseJSON（response） {
return response.json（）;
}
const Connection = { search， create };
export default Connection;
在components文件夾中創(chuàng)建一個類組件Homepage.js. 這將顯示主頁上的所有組件：
import React， { Component } from ‘react’
class Homepage extends Component {
render（） {
return （
《div》
《/div》）;
}
}
//PropTypes
Homepage.propTypes = {
}
export default Homepage
要導入用戶資產(chǎn)并在主頁上顯示它們，需要另一個類組件。創(chuàng)建一個類組件usersassets.js并包含以下代碼：
import React， { Component } from ‘react’
import PropTypes from ‘prop-types’;
import UserAssetsItems from ‘。/UserAssetsItems’
class UserAssets extends Component {
render（） {
return （
《div》
{this.props.assets.map（（asset） =》 （
《UserAssetsItems key={asset.id} asset={asset}/》
））}
《/div》
）}
}
//PropTypes
UserAssets.propTypes = {
assets： PropTypes.array.isRequired
}
export default UserAssets
這將需要以props數(shù)組的形式傳遞資產(chǎn)。要顯示資源，請使用map循環(huán)遍歷數(shù)組，并將項目傳遞給名為UserAssetsItems.js的類組件。
創(chuàng)建單獨處理資產(chǎn)的類組件UserAssetsItems.js。這只是創(chuàng)建一張具有資產(chǎn)類型和價值的卡片。請注意，我已經(jīng)在這里完成了內(nèi)聯(lián)樣式，但如果您更喜歡使用CSS，則可以使用CSS執(zhí)行此操作。
import React， { Component } from ‘react’
import PropTypes from ‘prop-types’;
class UserAssetsItems extends Component {
render（） {
let assetStyle = {
card： {
display： ‘inline-block’，
background： ‘#333’，
width： ‘350px’，
height： ‘160px’，
textAlign： ‘left’，
padding： ‘20px’，
margin： ‘20px’，
border： ‘5px solid #333’，
color： ‘white’
}
}
return （
《div style = { assetStyle.card }》
《p》Description： {this.props.asset.assetType}《/p》
《p》 Value： {this.props.asset.value}《/p》
《/div》
）
}
}
//PropTypes
UserAssetsItems.propTypes = {
asset： PropTypes.object.isRequired
}
export default UserAssetsItems
通過在文件頂部添加以下行，將userassetsitems導入到userassets
import UserAssetsItems from ‘。/UserAssetsItems’
將UserAssets導入主頁并更新主頁代碼，如下所示。這只是顯示用戶資產(chǎn)并為其設置樣式。現(xiàn)在主頁還要求將資產(chǎn)數(shù)組作為prop傳遞，以便將其傳遞給UserAssets.js
import React， { Component } from ‘react’
import UserAssets from ‘。/UserAssets’
import PropTypes from ‘prop-types’;
class Homepage extends Component {
render（） {
let style = {
UserAssetsStyle： {
position： ‘relative’，
top： ‘10px’，
width： ‘58%’，
borderRight： ‘1px solid black’，
}
}
return （
《div》
《div style = { style.UserAssetsStyle }》
《UserAssets assets = { this.props.assets } /》
《/div》
《/div》）;
}
}
//PropTypes
Homepage.propTypes = {
assets： PropTypes.array.isRequired
}
export default Homepage
回到app.js中，添加一個狀態(tài)，以便包括用戶的名稱和一個空的資產(chǎn)數(shù)組，如下所示：
state = {
name： “joe”，
assets： ［］
}
該名稱將用作硬編碼值，因為該網(wǎng)站尚未登錄。
通過在文件頂部添加以下行，將connection.js導入app.js。
import Connection from ‘。/Connection’
為了能夠獲取用戶資產(chǎn)，需要在執(zhí)行此操作的區(qū)塊鏈網(wǎng)絡中創(chuàng)建查詢。因此，在文件夾risk-analysis-tutorial中，將以下行添加到將返回用戶資產(chǎn)的queries.qry：
query selectAssetByPolicyholder {
description： “Select an asset based on the owner”
statement：
SELECT org.acme.riskanalysis.PrivateAsset
WHERE （policyholder == _$policyholder）
}
現(xiàn)在將package.json更新到版本4并重新部署您的網(wǎng)絡：
composer archive create --sourceType dir --sourceName 。 -a risk-analysis-tutorial@0.0.4.bna
composer network install --card PeerAdmin@hlfv1 --archiveFile risk-analysis-tutorial@0.0.4.bna
composer network upgrade -c PeerAdmin@hlfv1 -n risk-analysis-tutorial -V 0.0.4
運行composer rest服務器
composer-rest-server -c admin@risk-analysis-tutorial -n never -u true -w true
向App.js添加一個函數(shù)以從區(qū)塊鏈網(wǎng)絡中檢索用戶資產(chǎn)，如下所示：
getAssets = （） =》 {
// Search for the users assets
Connection.search（‘queries/selectAssetByPolicyholder？policyholder=resource%3Aorg.acme.riskanalysis.Policyholder%23’ + this.state.name）
.then（data =》 {
//store the assets in the assets array
this.setState（{
assets： data
}）
// Retrieve the user object from the state
let user = this.state.user
// Add the number of assets to the object
user.numAssets = this.state.assets.length
// Update the state
this.setState（{
user
}）
let assets = this.state.assets
for （let i = 0; i 《 assets.length; i++） {
// Set insurance status
if （assets［i］.insuranceCompany == null） {
assets［i］.insured = false
}
else {
assets［i］.insured = true
}
}
// Update the state
this.setState（{
assets： assets
}）
}）
}
通過將以下行添加到文件頂部，將主頁導入App.js
import Homepage from ‘。/components/Homepage’
既然我們有了這些資產(chǎn)，就可以將它們傳遞到我們的主頁，所以在app.js中的路由器中添加以下行，將這些資產(chǎn)作為props傳遞。
《Route exact path={“/”} render={props =》 （
《React.Fragment》
《h1》My Assets《/h1》
《Homepage assets={this.state.assets} /》
《/React.Fragment》
）}
/》
您的完整app.js文件現(xiàn)在應該如下所示：componentwillmount（）：
import React， { Component } from ‘react’;
import { BrowserRouter as Router， Route } from ‘react-router-dom’;
import ‘。/App.css’;
import Header from ‘。/components/Header’
import Connection from ‘。/Connection’
import Homepage from ‘。/components/Homepage’
class App extends Component {
state = {
name： “joe”，
assets： ［］
}
componentWillMount（） {
this.getAssets（）
}
getAssets = （） =》 {
// Search for the users assets
Connection.search（‘queries/selectAssetByPolicyholder？policyholder=resource%3Aorg.acme.riskanalysis.Policyholder%23’ + this.state.name）
.then（data =》 {
//store the assets in the assets array
this.setState（{
assets： data
}）
// Retrieve the user object from the state
let user = this.state.user
// Add the number of assets to the object
user.numAssets = this.state.assets.length
// Update the state
this.setState（{
user
}）
let assets = this.state.assets
for （let i = 0; i 《 assets.length; i++） {
// Set insurance status
if （assets［i］.insuranceCompany == null） {
assets［i］.insured = false
}
else {
assets［i］.insured = true
}
}
// Update the state
this.setState（{
assets： assets
}）
}）
}
render（） {
return （
《Router》
《Header /》
《Route exact path={“/”} render={props =》 （
《React.Fragment》
《h1》My Assets《/h1》
《Homepage assets={this.state.assets} /》
《/React.Fragment》
）}
/》
《/Router》
）;
}
}
export default App;
如果一切正常，您應該在Web應用程序中看到以下內(nèi)容。 注意此處顯示的資產(chǎn)是本教程第1部分中創(chuàng)建的資產(chǎn)。
為了可以添加新資產(chǎn)，我們需要App.js中的一個函數(shù)來實現(xiàn)這一點，所以在App.js中創(chuàng)建AddAsset函數(shù)：
addAsset = （assetType， value， durationInMonths） =》 {
// Create the data object
const data = {
“$class”： “org.acme.riskanalysis.CreateNewAsset”，
“policyholder”： “org.acme.riskanalysis.Policyholder#” + this.state.name，
“assetType”： assetType，
“value”： Number（value），
“durationInMonths”： Number（durationInMonths）
}
// Send this data to the Hyperledger Network
Connection.create（‘CreateNewAsset’， data）
.then（（err） =》 {
if （err） {
console.log（err）
}
// Get the new asset
this.getAssets（）
}）
}
下載文檔
