入门dapp想问问生成的html怎么变成这样了
#区块链 #ganache
入门dapp想问问生成的html怎么变成这样了
ganache连了，合约有，metamusk连上了网络对应，
别人是这样子的
<!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>Election Results</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">Election Results</h1>
<hr/>
<form onSubmit="App.castVote(); return false;">
<div class="form-group">
<label for="candidatesSelect">Select Candidate</label>
<select class="form-control" id="candidatesSelect">
</select>
</div>
<button type="submit" class="btn btn-primary">Vote</button>
<hr />
</form>
<br/>
<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">Votes</th>
</tr>
</thead>
<tbody id="candidatesResults">
</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>
app.js
var web3;
App = {
web3Provider: null,
contracts: {},
account: '0x0',
init: function() {
return App.initWeb3();
},
initWeb3: function() {
if (window.web3) { // Check web3 version
// If a web3 instance is already provided by Meta Mask.
App.web3Provider = window.web3.currentProvider;
web3 = new Web3(window.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("Election.json", function(election) {
// Instantiate a new truffle contract from the artifact
App.contracts.Election = TruffleContract(election);
// Connect provider to interact with contract
App.contracts.Election.setProvider(App.web3Provider);
return App.contracts.Election.at('0x1234567890abcdef').then(function(instance) {
// Do something with the instance
return App.render();
});
},
render: function() {
var electionInstance;
var loader = $("#loader");
var content = $("#content");
loader.show();
content.hide();
// Load account data
web3.eth.requestAccounts().then(function(accounts) {
App.account = accounts[0];
$("#accountAddress").html("Your Account: " + App.account);
});
// Load contract data
App.contracts.Election.deployed().then(function(instance) {
electionInstance = instance;
return electionInstance.candidatesCount();
}).then(function(candidatesCount) {
var candidatesResults = $("#candidatesResults");
candidatesResults.empty();
var candidatesSelect = $('#candidatesSelect');
candidatesSelect.empty();
for (var i = 1; i <= candidatesCount; i++) {
electionInstance.candidates(i).then(function(candidate) {
var id = candidate[0];
var name = candidate[1];
var voteCount = candidate[2];
// Render candidate Result
var candidateTemplate = "<tr><th>" + id + "</th><td>" + name + "</td><td>" + voteCount + "</td></tr>"
candidatesResults.append(candidateTemplate);
// Render candidate ballot option
var candidateOption = "<option value='" + id + "' >" + name + "</ option>"
candidatesSelect.append(candidateOption);
});
}
return electionInstance.voters(App.account);
}).then(function(hasVoted) {
// Do not allow a user to vote
if(hasVoted) {
$('form').hide();
}
loader.hide();
content.show();
}).catch(function(error) {
console.warn(error);
});
},
castVote: function() {
var candidateId = $('#candidatesSelect').val();
App.contracts.Election.deployed().then(function(instance) {
return instance.methods.vote(candidateId).send({ from: App.account });
}).then(function(result) {
// Wait for votes to update
$("#content").hide();
$("#loader").show();
}).catch(function(err) {
console.error(err);
});
}
引用 皆我百晓生 小程序回复内容作答：
这是一个简单的DApp的HTML页面，通过使用Bootstrap和一些自定义样式，实现了一个投票应用的前端界面。
在HTML中，引入了Bootstrap的CSS样式文件以及一些JavaScript库，包括jQuery、web3.js和truffle-contract.js。这些库用于与区块链交互，获取数据和执行交易。
在JavaScript代码中，使用了Web3库来初始化web3Provider并连接到MetaMask插件或本地的Ganache节点。然后，通过AJAX请求获取Election.json文件，该文件包含了与智能合约的交互逻辑。通过TruffleContract库实例化Election合约，并将web3Provider连接到合约。最后，调用App.render()函数来加载投票应用的界面和数据。
在render函数中，首先显示加载动画并隐藏内容部分。然后，加载当前用户的账户信息，并根据合约中的数据动态生成候选人列表和投票选项。如果用户已经投过票，则隐藏投票表单。最后，显示内容部分并隐藏加载动画。
另外，还包含了castVote函数，在用户提交投票时调用。它获取用户选择的候选人ID，并使用合约中的方法发送投票交易。
如果你想了解更多关于Web3和DApp开发的知识，可以参考相关的文档和教程。