Why the following codes doesn't work all together?
(为什么以下代码不能一起使用?)
It doesn't show any data in the HTML interface.(它在HTML界面中不显示任何数据。)
It's a blockchain.(这是一个区块链。)
Ethereum The two things that it does are, through HTML form and JavaScript, a function here adds an artifact in blockchain (with properties that are entered by the user through HTML interface), and with another HTML form, the state of the artifact is changed (by the user through HTML interface).(以太坊它做的两件事是通过HTML表单和JavaScript,这里的一个函数在区块链中添加了一个工件(具有用户通过HTML界面输入的属性),而另一个HTML表单则改变了工件的状态。 (由用户通过HTML界面)。)
historicalArtifact.sol
(historyArtifact.sol)
pragma solidity ^0.4.2;
contract historicalArtifacts {
// Model a historical artifact
struct Artifact {
uint id;
string name;
string object;
string state;
}
///////////////////////
//struct Action {
// @dev Instant of time when the Action is done.
// uint timestamp;
// @dev Block when the Action is done.
// uint blockNumber;
// }
//////////////////////
// Store accounts that submitted
mapping(address => bool) public submitters;
// Read/write artifacts
mapping(uint => Artifact) public artifacts;
// Store artifacts count
uint public artifactsCount;
// //sumbmit event
event updatedEvent (
uint indexed _artifactId
);
function historicalArtifacts () public {
addArtifact("Historical Artifact 1","sss","ss");
addArtifact("Historical Artifact 2","sss","ss");
}
function addArtifact (string _name,string _object, string _state) public {
artifactsCount ++;
artifacts[artifactsCount] = Artifact(artifactsCount,_name, _object, _state);
}
//uint value;
// mapping (uint256 => Artifact) public datamatching;
// function getData(uint256 id) returns (uint, string, string, string){
// return (datamatching[id].id, datamatching[id].name, datamatching[id].object ,datamatching[id].state);
// }
// function storedata (uint _id, string _state) private {
// action.timestamp = now;
// action.blockNumber = block.number;
// var artifactdata = datamatching[value];
// artifactdata.state = state;
// }
function updateState (uint _artifactId, string _artifactstate) public {
// require that they haven't submitted before
//require(!submitters[msg.sender]);
// require a valid historical artifact
require(_artifactId > 0 && _artifactId <= artifactsCount);
// record that submitter has submitted
submitters[msg.sender] = true;
// update artifact location
artifacts[_artifactId].state= _artifactstate ; //
updatedEvent(_artifactId);
}
}
App.js
(App.js)
App = {
web3Provider: null,
contracts: {},
account: '0x0',
init: function() {
return App.initWeb3();
},
initWeb3: function() {
if (typeof web3 !== 'undefined') {
// If a web3 instance is already provided by Meta Mask.
App.web3Provider = web3.currentProvider;
web3 = new Web3(web3.currentProvider);
} else {
// Specify default instance if no web3 instance provided
App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
web3 = new Web3(App.web3Provider);
}
return App.initContract();
},
initContract: function() {
$.getJSON("historicalArtifacts.json", function(historicalArtifacts) {
// Instantiate a new truffle contract from the artifact
App.contracts.historicalArtifacts = TruffleContract(historicalArtifacts);
// Connect provider to interact with contract
App.contracts.historicalArtifacts.setProvider(App.web3Provider);
App.listenForEvents();
return App.render();
});
},
listenForEvents: function() {
App.contracts.historicalArtifacts.deployed().then(function(instance) {
instance.updatedEvent({}, {
fromBlock: 0,
toBlock: 'latest'
}).watch(function(error, event) {
console.log("event triggered", event)
// Reload when a new state is recorded
App.render();
});
});
},
render: function() {
var historicalArtifactsInstance;
var loader = $("#loader");
var content = $("#content");
loader.show();
content.hide();
// Load account data
web3.eth.getCoinbase(function(err, account) {
if (err === null) {
App.account = account;
$("#accountAddress").html("Your Account: " + account);
}
});
// Load contract data
App.contracts.historicalArtifacts.deployed().then(function(instance) {
historicalArtifactsInstance = instance;
return historicalArtifactsInstance.artifactsCount();
}).then(function(artifactsCount) {
var artifactsResults = $("#artifactsResults");
artifactsResults.empty();
var artifactsSelect = $('#artifactsSelect');
artifactsSelect.empty();
for (var i = 1; i <= artifactsCount; i++) {
historicalArtifactsInstance.artifacts(i).then(function(artifact) {
var id = artifacts[0];
var name = artifacts[1];
var object = artifacts[2];
var state = artifacts[3];
// Render artifact Result
var artifactTemplate = "<tr><th>" + id + "</th><td>" + name + "</td><td>" + Object Type + "</td></tr>" + Current State + "</td></tr>";
artifactsResults.append(artifactTemplate);
// Render artifact ballot option
var artifactOption = "<option value='" + id + "' >" + name + "</ option>";//
artifactsSelect.append(artifactOption);
});
}
return historicalArtifactsInstance.submitters(App.account);
}).then(function(hasUpdated) {
// Do not allow a user to update
if(hasUpdated) {
$('form').hide();
}
loader.hide();
content.show();
}).catch(function(error) {
console.warn(error);
});
},
castUpdate: function() {
var artifactId = $('#artifactsSelect').val();
var artifactstate = $('#cstate').val();
App.contracts.historicalArtifacts.deployed().then(function(instance) {
return instance.updateState(artifactId, artifactstate ,{ from: App.account });
}).then(function(result) {
// Wait for state to update
$("#content").hide();
$("#loader").show();
}).catch(function(err) {
console.error(err);
});
}
};
addha: function() {
var name = $('#aName').val();
var object = $('#aObject').val();
var state = $('#aState').val();
App.contracts.historicalArtifacts.deployed().then(function(instance) {
return instance.addArtifact(name, object , state, { from: App.account });
}).then(function(result) {
// Wait for state to update
$("#content").hide();
$("#loader").show();
}).catch(function(err) {
console.error(err);
});
}
};
$(function() {
$(window).load(function() {
App.init();
});
});
index.html
(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Historical Artifacts</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="width: 650px;">
<div class="row">
<div class="col-lg-12">
<h1 class="text-center">Historical Artifacts</h1>
<hr/>
<br/>
<div id="content">
<h4 id="aName"></h4>
<h4 id="aObject"></h4>
<h4 id="aState"></h4>
<hr/>
<form role="form" onSubmit="App.addha(); return false;">
<div class="form-group" style="display:inline;">
<div class="input-group">
<input class="form-control input-lg" id="aName" placeholder="Historical Artifact Name">
</input>
<input class="form-control input-lg" id="aObject" placeholder="Historical Artifact Object">
</input>
<input class="form-control input-lg" id="aState" placeholder="Historical Artifact State">
</input>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary btn-lg">Add Historical Artifact</button>
</span>
</div>
</div>
</form>
</div>
<div id="loader">
<p class="text-center">Loading...</p>
</div>
<div id="content" style="display: none;">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Object type</th>
<th scope="col">Current State</th>
</tr>
</thead>
<tbody id="artifactsResults">
</tbody>
</table>
<hr/>
<p id="accountAddress" class="text-center"></p>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/web3.min.js"></script>
<script src="js/truffle-contract.js"></script>
<script src="js/app.js"></script>
</body>
<form onSubmit="App.castUpdate(); return false;">
<div class="form-group">
<label for="artifactsSelect">Select Historical Artifact</label>
<select class="form-control" id="artifactsSelect">
</select>
<input type="text" id="cstate" placeholder="State"><br>
<?php $hstate = $_post['cstate'] ?>
</div>
<button type="submit" class="btn btn-primary">Update</button>
<hr />
</form>
</html>
ask by Solb translate from so
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…