目錄
📌 項目簡介：留言上鏈 DApp（MessageBoard DApp）
🧠 技術棧
🔶 1. Solidity 智能合約代碼（MessageBoard.sol）
🔷 2. 前端代碼（index.html + script.js）
📄 index.html
📜 script.js
💅 style.css
🧪 測試建議
📌 項目簡介：留言上鏈 DApp（MessageBoard DApp）
-
用戶可以輸入留言，點擊按鈕后信息將上鏈保存。
-
展示所有用戶的留言。
-
使用以太坊測試網部署合約。
🧠 技術棧
-
Solidity（智能合約）
-
Ethers.js（前端與鏈交互）
-
HTML/CSS/JS（簡單前端）
-
Remix + Metamask + 測試網（部署）
🔶 1. Solidity 智能合約代碼（MessageBoard.sol）
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.18;contract MessageBoard {struct Message {address sender;string content;uint256 timestamp;}Message[] public messages;event NewMessage(address indexed sender, string content, uint256 timestamp);function postMessage(string calldata _content) public {messages.push(Message(msg.sender, _content, block.timestamp));emit NewMessage(msg.sender, _content, block.timestamp);}function getMessages() public view returns (Message[] memory) {return messages;}function getMessageCount() public view returns (uint256) {return messages.length;}
}
部署提示：使用 Remix IDE，連接 Metamask 錢包選擇測試網（如 Sepolia），部署后復制合約地址。
🔷 2. 前端代碼（index.html + script.js）
📄 index.html
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><title>留言上鏈 DApp</title><script src="https://cdn.jsdelivr.net/npm/ethers/dist/ethers.min.js"></script><link rel="stylesheet" href="style.css" />
</head>
<body><h1>留言上鏈 DApp</h1><textarea id="messageInput" placeholder="請輸入留言內容"></textarea><br /><button onclick="postMessage()">發送留言</button><button onclick="loadMessages()">刷新留言</button><div id="messageList"></div><script src="script.js"></script>
</body>
</html>
📜 script.js
const contractAddress = "你的合約地址";
const contractABI = [// 僅保留必要的 ABI 函數"function postMessage(string _content)","function getMessages() view returns (tuple(address sender, string content, uint256 timestamp)[])"
];let provider, signer, contract;async function init() {if (typeof window.ethereum !== 'undefined') {provider = new ethers.providers.Web3Provider(window.ethereum);await provider.send("eth_requestAccounts", []);signer = provider.getSigner();contract = new ethers.Contract(contractAddress, contractABI, signer);loadMessages();} else {alert("請安裝 Metamask 插件");}
}async function postMessage() {const message = document.getElementById("messageInput").value;if (!message) return alert("請輸入內容");const tx = await contract.postMessage(message);await tx.wait();alert("留言已上鏈！");loadMessages();
}async function loadMessages() {const messages = await contract.getMessages();const list = document.getElementById("messageList");list.innerHTML = "";messages.forEach((msg) => {const div = document.createElement("div");const time = new Date(msg.timestamp * 1000).toLocaleString();div.innerText = `🗨? ${msg.content}\n👤 ${msg.sender}\n🕒 ${time}`;div.style.margin = "12px";list.appendChild(div);});
}window.onload = init;
💅 style.css
body {font-family: sans-serif;max-width: 600px;margin: 0 auto;padding: 20px;
}
textarea {width: 100%;height: 80px;margin-bottom: 10px;
}
button {margin-right: 10px;
}
🧪 測試建議
-
用 Remix 部署合約到 Sepolia 測試網。
-
在前端代碼中替換
contractAddress。 -
用瀏覽器打開
index.html文件（確保開啟 Metamask）。 -
輸入留言并發送，刷新查看鏈上內容。
