当前位置: 首页 > news >正文

Web3 初学者的第一个实战项目:留言上链 DApp

目录

📌 项目简介:留言上链 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;
}

🧪 测试建议

  1. 用 Remix 部署合约到 Sepolia 测试网。

  2. 在前端代码中替换 contractAddress

  3. 用浏览器打开 index.html 文件(确保开启 Metamask)。

  4. 输入留言并发送,刷新查看链上内容。

http://www.xdnf.cn/news/370315.html

相关文章:

  • 协议路由与路由协议
  • 【图书管理系统】深度讲解:图书列表展示的后端实现、高内聚低耦合的应用、前端代码讲解
  • PXE_Kickstart_无人值守自动化安装系统
  • 物业企业绩效考核制度与考核体系
  • 前端弹性布局:用Flexbox构建现代网页的魔法指南
  • vue2 上传pdf,拖拽盖章,下载图片
  • 前端开发实战:用React Hooks优化你的组件性能
  • [C] 第10章 预处理命令
  • LeetCode热题100--240.搜索二维矩阵--中等
  • 达索MODSIM实施成本高吗?哪家服务商靠谱?
  • 思考:(linux) tmux 超级终端快速入门的宏观思维
  • Java—— 集合 List
  • 程序代码篇---Python视频流
  • JSON|cJSON 介绍以及具体项目编写
  • STM32CUBEIDE开发实战:ADC与UART应用
  • 网络原理(Java)
  • 使用python脚本连接SQL Server数据库导出表结构
  • 解决虚拟机挂起之后的网络问题
  • 鸿蒙系统使用ArkTS开发语言支持身份证阅读器、社保卡读卡器等调用二次开发SDK
  • 单片机-STM32部分:11、ADC
  • MCP项目实例 - client sever交互
  • Python+OpenCV打造AR/VR基础框架:从原理到实战的全链路解析
  • Kotlin高阶函数多态场景条件判断与子逻辑
  • Android 13 默认打开 使用屏幕键盘
  • macOS 15.4.1 Chrome不能访问本地网络
  • 深入解析C++11 auto 关键字:类型推导的现代实践
  • 青藏高原七大河流源区径流深、蒸散发数据集(TPRED)
  • PCB设计实践(十二)PCB设计电容选型:功能、材质、规则
  • C++发起Https连接请求
  • 两个数组的交集(暴力、set、哈希)