当前位置：首页 > article >正文

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

article 2025/10/4 19:31:16

📌 项目简介：留言上链 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）。
输入留言并发送，刷新查看链上内容。

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

目录 📌 项目简介：留言上链 DApp（MessageBoard DApp） 🧠 技术栈 🔶 1. Solidity 智能合约代码（MessageBoard.sol） 🔷 2. 前端代码（index.html script.js…...

编程日记 2025/8/9 11:12:04

Jsp技术入门指南【十二】自定义标签

Jsp技术入门指南【十二】自定义标签前言一、什么是标签二、标签的类型有哪些？1. 空标签2. 带有属性的标签3. 带主体的标签三、自定义标签的部件3.1 自定义标签的四步骤3.2 标签处理程序3.3 自定义标签的开发及使用步骤第一步：创建标签助手类第二步&…...

编程日记 2025/9/20 7:54:21

Java—— 泛型详解

泛型概述泛型是JDK5中引入的特性，可以在编译阶段约束操作的数据类型，并进行检查。泛型的格式：<数据类型> 注意：泛型只能支持引用数据类型。泛型的好处没有泛型的时候，可以往集合中添加任意类型的数据&#x…...

编程日记 2025/10/3 1:39:22

GPT-4o, GPT 4.5, GPT 4.1, O3, O4-mini等模型的区别与联系

大模型时代浪潮汹涌，作为其中的领军者，OpenAI 其推出的系列模型以强大的能力深刻影响着整个行业，并常常成为业界其他公司对标和比较的基准。因此，深入了解 OpenAI 的大模型，不仅是为了使用它们，更是为了理解当前大模型的能力边界和发展趋势，这对于我们评估和选择其他各类…...

编程日记 2025/10/4 14:49:11

Harness: 全流程 DevOps 解决方案，让持续集成如吃饭般简单

引言在当今快速发展的软件开发世界中，高效的 DevOps 工具变得越来越重要。Harness 作为一个开源的运维平台，为开发和运维团队提供了从代码托管到 CI/CD 的全流程解决方案，同时实现自动化的开发环境和制品管理。这种集中化的工具可以显著减少运维难度，提高团队效率，真正解…...

编程日记 2025/7/20 3:53:36

Kubernetes生产实战(十二)：无工具容器网络连接数暴增指南

当线上容器突然出现TCP连接数暴涨，而容器内又没有安装任何调试工具时，如何快速定位问题？本文将分享一套经过大型互联网公司验证的排查方案，涵盖从快速应急到根因分析的全流程。一、快速锁定问题容器查看pod 连接数方式&#x…...

编程日记 2025/10/2 13:08:37

MySQL的Order by与Group by优化详解！

目录前言核心思想：让索引帮你“排好序”或“分好组”Part 1: ORDER BY 优化详解1.1 什么是 Filesort？为什么它慢？1.2 如何避免 Filesort？—— 利用索引的有序性1.3 EXPLAIN 示例 (ORDER BY) Part 2: GROUP BY 优化详解2.1 什么是…...

编程日记 2025/9/21 15:10:42

Spring MVC中跨域问题处理

在Spring MVC中处理跨域问题可以通过以下几种方式实现，确保前后端能够正常通信： 方法一：使用 CrossOrigin 注解适用于局部控制跨域配置，直接在Controller或方法上添加注解。示例代码： RestController CrossOrigin…...

编程日记 2025/6/19 4:36:18

软件测试——用例篇（3）

目录一、设计测试用例的具体方法 1.1等价类 1.1.1等价类概念介绍 1.1.2等价类分类 1.2边界值 1.2.1边界值分析法 1.2.2边界值分类 1.3正交法 1.3.1正交表 1.3.2正交法设计测试用例步骤 1.4判定表法 1.4.1判定表 1.4.2判定表方法设计测试用例 1.5 场景法 1.6错误…...

编程日记 2025/9/29 3:46:02

在 Win11 下安装 Wireshark 的详细步骤

目录一、了解 Wireshark1. 作用和功能2. 使用步骤二、下载安装包三、运行安装包四、使用 Wireshark1. 抓包2. 窗口介绍3. 过滤器（显示 / 捕获过滤器）4. 保存过滤后的报文1）显示过滤器表达式（了解）2）过滤表…...

编程日记 2025/10/2 9:48:39

AI编程：使用Trae1小时做成的音视频工具，提取音频并识别文本

背景在上个月，有网页咨询我怎么才能获取视频中的音频并识别成文本，我当时给他的回答是去问一下AI，让AI来给你答案。他觉得我在敷衍他，大骂了我一顿，大家觉得我的回答对吗？ 小编心里委屈，我…...

编程日记 2025/9/19 22:52:36

区块链技术中的Java SE实战：从企业级应用到5大核心问题解析

区块链技术中的Java SE实战：从企业级应用到5大核心问题解析问题1：如何在Java SE中实现区块链的基本数据结构？ 回答1： 区块链的核心数据结构是链式区块，每个区块包含数据、哈希值以及前一个区块的哈希值。以下是一个…...

编程日记 2025/9/26 0:13:43

RTC实时时钟DS1337S/PT7C4337WEX国产替代FRTC1337S

NYFEA徕飞公司的FRTC1337S串行实时时钟是一种低功耗时钟/日历，被设计成可以无缝替代市场上流行的DS1337S和PT7C4337WEX(SOP8)两种型号, 具有两个可编程的时钟闹钟和一个可编程方波输出。地址和数据通过2线双向总线串行传输。时钟/日历提供秒、分钟、小时、天、日期…...

编程日记 2025/9/20 11:32:41

Vue3.5 企业级管理系统实战（十七）：角色管理

本篇主要探讨角色管理功能，其中菜单权限这里先不实现，后续在菜单管理中再进行实现。接口部分依然是使用 Apifox mock 的。 1 角色 api 在 src/api/role.ts 中添加角色相关 api，代码如下： //src/api/role.ts import service fro…...

编程日记 2025/9/30 1:52:21

QTableWidget实现多级表头、表头冻结效果

最终效果： 实现思路：如果只用一个表格的话写起来比较麻烦，可以考虑使用两个QTableWidget组合，把复杂的表头一个用QTableWidget显示，其他内容用另一个QTableWidget。 #include "mainwindow.h" #include &qu…...

编程日记 2025/9/30 13:09:56

A2A大模型协议及Java示例

A2A大模型协议概述 1. 协议作用 A2A协议旨在解决以下问题： 数据交换：不同应用程序之间的数据格式可能不一致，A2A协议通过定义统一的接口和数据格式解决这一问题。模型调用：提供标准化的接口，使得外部应用可以轻松调…...

编程日记 2025/9/27 6:06:17

单脉冲前视成像多目标分辨算法——论文阅读

单脉冲前视成像多目标分辨算法 1. 论文的研究目标及实际意义1.1 研究目标1.2 实际问题与产业意义2. 论文的创新方法及公式解析2.1 核心思路2.2 关键公式与模型2.2.1 单脉冲雷达信号模型2.2.2 匹配滤波输出模型2.2.3 多目标联合观测模型2.2.4 对数似然函数与优化2.2.5 MDL准则目…...

编程日记 2025/9/25 11:15:16

CMake 入门实践

CMake 入门实践第一章概念与基础项目1.1 CMake 基础认知1.2 最小 CMake 项目1.3 构建流程验证第二章多文件项目管理2.1 项目结构2.2 源码示例2.3 CMake 配置第三章库文件管理实战3.1 项目结构3.2 核心配置3.3 接口设计第四章构建类型与编译优化4.1 构建类型配置4.2 构建…...

编程日记 2025/9/30 15:52:48

异地多活单元化架构下的微服务体系

治理服务间的跨IDC调用，而数据库层面还是要跨IDC 服务注册中心拆开、金融要求，距离太远，异地备库，如果延迟没读到数据就可能有资损，IDC3平时不能用，IDC1挂了还是有数据同步问题，IDC3日常维护…...

编程日记 2025/9/29 9:54:45

HarmonyOS NEXT——DevEco Studio的使用（还没写完）

一、IDE环境的搭建 Windows环境运行环境要求为保证DevEco Studio正常运行，建议电脑配置满足如下要求： 操作系统：Windows10 64位、Windows11 64位内存：16GB及以上硬盘：100GB及以上分辨率：1280*8…...

编程日记 2025/9/19 2:12:54

《Python星球日记》第46天：决策树与随机森林

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）专栏：《Python星球日记》，限时特价订阅中ing 目录一、前言二、决策树算法原理1. 决策树简介2. 决策树的分裂准则(1) 信息熵与信息增益(2) 基尼不纯…...

编程日记 2025/6/4 1:08:20

Windows系统Jenkins企业级实战

目标在Windows操作系统上使用Jenkins完成代码的自动拉取、编译、打包、发布工作。实施 1.安装Java开发工具包（JDK） Jenkins是基于Java的应用程序，因此需要先安装JDK。可以从Oracle官网或OpenJDK下载适合的JDK版本。推荐java17版本&#x…...

编程日记 2025/9/23 12:18:16

C# 方法(ref局部变量和ref返回)

>本章内容: 方法的结构方法体内部的代码执行局部变量局部常量控制流方法调用返回值返回语句和void方法局部函数参数值参数引用参数引用类型作为值参数和引用参数输出参数参数数组参数类型总结方法重载命名参数可选参数栈帧递归 ref局部变量和ref返回 …...

编程日记 2025/9/28 5:47:25

C# 引用类型作为值参数与引用参数的区别

在编程中，我们常常需要处理引用类型对象，而将引用类型对象作为参数传递给方法时，有值参数和引用参数这两种方式，它们在方法内部操作时会产生不同的结果。下面就来详细分析这两种情况。引用类型对象作为值参数传递当我们把引用…...

编程日记 2025/6/12 19:45:51

滑动窗口，438找出字符串中所有字母的异位词

1.题目 2.解析这道题我们用滑动窗口来实现，加上哈希表和vector容器的使用来实现这道题目，每次滑动之后我们都对其和答案进行比较，如果全部相等我们返回left，不相等继续滑动即可。本质就是我们把p中相同数量的字母框起来&#…...

编程日记 2025/9/29 19:50:35

「国产嵌入式仿真平台：高精度虚实融合如何终结Proteus时代？」——从教学实验到低空经济，揭秘新一代AI赋能的产业级教学工具

引言：从Proteus到国产平台的范式革新在高校嵌入式实验教学中，仿真工具的选择直接影响学生的工程能力培养与创新思维发展。长期以来，Proteus作为经典工具占据主导地位，但其设计理念已难以满足现代复杂系统教学与国产化技术需求。…...

编程日记 2025/9/25 22:33:21

《Python星球日记》第52天：反向传播与优化器

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 目录一、引言二、反向传播算法原理简述1. 什么是反向传播？2. 从数学角度…...

编程日记 2025/10/2 18:07:31

Java常用类概述

Java常用类概述一、字符串三剑客1. String（不可变字符串）2. StringBuilder（可变，线程不安全）3. StringBuffer（可变，线程安全） 二、日期时间类（重点掌握新版API&#xff…...

编程日记 2025/10/1 21:54:06

在现代Web应用中集成 PDF.js (pdfjs-dist 5.2 ESM): 通过 jsdelivr 实现动态加载与批注功能的思考

PDF 文档在现代 Web 应用中越来越常见，无论是作为文档预览、报告展示还是在线编辑的载体。Mozilla 的 PDF.js 是一个功能强大的 JavaScript 库，它使得在浏览器端渲染和显示 PDF 文件成为可能，无需依赖原生插件。本文将深入探讨如何在你的项…...

编程日记 2025/8/16 20:33:19

C++STL——priority_queue

优先队列前言优先队列仿函数头文件前言本篇主要讲解优先队列及其底层实现。优先队列优先队列的本质就是个堆，其与queue一样，都是容器适配器，不过优先队列是默认为vector实现的。priority_queue的接口优先队列默认为大根堆。仿函数 …...

编程日记 2025/9/30 15:31:43

📌 项目简介：留言上链 DApp（MessageBoard DApp）

🧠 技术栈

🔶 1. Solidity 智能合约代码（MessageBoard.sol）

🔷 2. 前端代码（index.html + script.js）

📄 index.html

📜 script.js

💅 style.css

🧪 测试建议

相关文章：

📄 `index.html`

📜 `script.js`

💅 `style.css`