今天来把剩下的留言板,前端的部分完成吧
先看看 js 的 code
import Web3 from "web3";
import GuestbookArtifact from "../../build/contracts/Guestbook.json";
const App = {
web3: null,
account: null,
meta: null,
//初始化
start: async function() {
const { web3 } = this;
try {
const networkId = await web3.eth.net.getId();
const deployedNetwork = GuestbookArtifact.networks[networkId];
this.meta = new web3.eth.Contract(
GuestbookArtifact.abi,
deployedNetwork.address,
);
const accounts = await web3.eth.getAccounts();
this.account = accounts[0];
this.loadRandomWords();
} catch (error) {
console.error("Could not connect to contract or chain.");
}
},
//重新载入文字
loadRandomWords: async function(number) {
const { queryGuestbook, getSize } = this.meta.methods;
const count = await getSize().call()
const msgEl = document.getElementById("msg")
if (count == 0){
msgEl.innerHTML = "没有内容"
}else{
let random_num = Math.random() * count
const word = await queryGuestbook(parseInt(random_num)).call();
const msg = "内容:"+word[0]
+" <br /> 来源:"+word[1]
+" <br /> 时间:"+ formatTime(word[2])
msgEl.innerHTML = msg
}
},
//储存文字
saveWord: async function() {
const msg = document.getElementById("wordArea").value;
if (msg.length == 0){
alert("请留下文字喔")
return
}
let timestamp = new Date().getTime()
const { save } = this.meta.methods;
await save(msg, parseInt(timestamp / 1000)).send({ from: this.account });
this.loadRandomWords();
},
};
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
function formatTime(timestamp) {
let date = new Date(Number(timestamp * 1000))
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
let hour = date.getHours()
let minute = date.getMinutes()
let second = date.getSeconds()
let fDate = [year, month, day, ].map(formatNumber)
return fDate[0] + '年' + fDate[1] + '月' + fDate[2] + '日' + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
window.App = App;
window.addEventListener("load", function() {
if (window.ethereum) {
// use MetaMask's provider
App.web3 = new Web3(window.ethereum);
window.ethereum.enable(); // get permission to access accounts
} else {
console.warn(
"No web3 detected. Falling back to http://127.0.0.1:7545. You should remove this fallback when you deploy live",
);
// fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
App.web3 = new Web3(
new Web3.providers.HttpProvider("http://127.0.0.1:7545"),
);
}
App.start();
});
再来是 html code
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
</head>
<body class="container">
<h1>留言区:</h1>
<div id="msg"></div>
<a href="#" onclick="App.loadRandomWords()" class="btn btn-primary">更新</a>
<br/>
<br/>
<br/>
<textarea rows="3" cols="20" id="wordArea"></textarea>
<br/>
<br/>
<a href="#" onclick="App.saveWord()" class="btn btn-primary">送出</a>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="index.js"></script>
</html>
最後再像之前一样在 app
资料夹里下
npm run dev
去 http://127.0.0.1:8080
就会看到下面画面,留言板就完成了。
上面的 example 有完整版在我的 Github
<<: Day21-路由守卫(Navigation Guards)
在上一篇,我们介绍了登录档的结构和物理位置,现在你意识到他的存在,那今天就是接续前一篇最後的预告,我...
有时候我们希望使用者输入的资料符合我们想要的格式,因此我们可以做一些设定,当使用者输入的资料不符合格...
今日文章目录 需求说明 事前准备 遇到问题 参考资料 需求说明 下拉选单:选择番茄钟时间(分钟) ...
问题描述 资料库栏位型态里面设定的型态是varchar 但在php里面取值时(如下面程序码),有可能...
Hello大家, 真的把今年的国定假日都过完了... 有点哀伤! 下次的连续假期是跨年了, 让我们一...