当前位置: 首页 > 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. 输入留言并发送,刷新查看链上内容。

相关文章:

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

目录 &#x1f4cc; 项目简介&#xff1a;留言上链 DApp&#xff08;MessageBoard DApp&#xff09; &#x1f9e0; 技术栈 &#x1f536; 1. Solidity 智能合约代码&#xff08;MessageBoard.sol&#xff09; &#x1f537; 2. 前端代码&#xff08;index.html script.js…...

Innovus 25.1 版本更新:助力数字后端物理设计新飞跃

在数字后端物理设计领域&#xff0c;每一次工具的更新迭代都可能为项目带来巨大的效率提升与品质优化。今天&#xff0c;就让我们一同聚焦 Innovus 25.1 版本&#xff08;即 25.10 版本&#xff09;的更新要点&#xff0c;探寻其中蕴藏的创新能量。 一、核心功能的强势进 AI…...

Git简介和发展

Git 简介 Git是一个开源的分布式版本控制系统&#xff0c;跨平台&#xff0c;支持Windows、Linux、MacOS。主要是用于项目的版本管理&#xff0c;是由林纳斯托瓦兹(Linux Torvalds)在2005年为Linux内核开发而创建。 起因 在2002年至2005年间&#xff0c;Linux内核开发团队使…...

adb 实用命令汇总

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ 基础adb命令 # 重启adb adb kill-server# 查看已连接的设备 adb devices# 进入命令行 adb shell# 使用 -s 参数来指定设备 adb -s <设备序列号> shell…...

DAX 权威指南1:DAX计算、表函数与计算上下文

参考《DAX 权威指南 第二版》 文章目录 二、DAX简介2.1 理解 DAX 计算2.2 计算列和度量值2.3 变量2.3.1 VAR简介2.3.2 VAR的特性 2.4 DAX 错误处理2.4.1 DAX 错误类型2.4.1.1 转换错误2.4.1.2 算术运算错误2.4.1.3 空值或 缺失值 2.4.2 使用IFERROR函数拦截错误2.4.2.1 安全地进…...

使用fdisk 、gdisk管理分区

用 fdisk 管理分区 fdisk 命令工具默认将磁盘划分为 mbr 格式的分区 命令&#xff1a; fdisk 设备名 fdisk 命令以交互方式进行操作的&#xff0c;在菜单中选择相应功能键即可 [rootlocalhost ~]# fdisk /dev/sda # 对 sda 进行分区 Command (m for help): # 进入 fdis…...

Python----神经网络(《Deep Residual Learning for Image Recognition》论文和ResNet网络结构)

一、论文 1.1、论文基本信息 标题&#xff1a;Deep Residual Learning for Image Recognition 作者&#xff1a;Kaiming He, Xiangyu Zhang, Shaoqing Ren, Jian Sun 单位&#xff1a;Microsoft Research 会议&#xff1a;CVPR 2016 主要贡献&#xff1a;提出了一种深度残…...

PostgreSQL 的 pg_collation_actual_version 函数

PostgreSQL 的 pg_collation_actual_version 函数 pg_collation_actual_version 是 PostgreSQL 中用于检查排序规则实际版本信息的函数&#xff0c;主要与 ICU (International Components for Unicode) 排序规则相关。 函数基本概念 函数定义 pg_collation_actual_version(…...

使用Simulink开发Autosar Nvm存储逻辑

文章目录 前言Autosar Nvm接口设计模型及接口生成代码及arxmlRTE接口mappingRTE代码分析总结 前言 之前介绍过Simulink开发Dem故障触发逻辑&#xff0c;本文接着介绍另外一个常用的功能-Nvm存储的实现。 Autosar Nvm接口 Autosar Nvm中一般在上电初始化的时调用Nvm_ReadAll获…...

嵌入式STM32学习——继电器

继电器模块引脚说明 VCC&#xff08;&#xff09;&#xff1a; 供电正极。连接此引脚到电源&#xff08;通常是直流电源&#xff09;&#xff0c;以提供继电器线圈所需的电流。 GND&#xff08;-&#xff09;&#xff1a; 地。连接此引脚到电源的负极或地。 IN&#xff08;或…...

更换内存条会影响电脑的IP地址吗?——全面解析

在日常电脑维护和升级过程中&#xff0c;许多用户都会遇到需要更换内存条的情况。与此同时&#xff0c;不少用户也担心硬件更换是否会影响电脑的网络配置&#xff0c;特别是IP地址的设置。本文将详细探讨更换内存条与IP地址之间的关系&#xff0c;帮助读者理解这两者之间的本质…...

AWS SNS:解锁高并发消息通知与系统集成的云端利器

导语 在分布式系统架构中&#xff0c;如何实现高效、可靠的消息通知与跨服务通信&#xff1f;AWS Simple Notification Service&#xff08;SNS&#xff09;作为全托管的发布/订阅&#xff08;Pub/Sub&#xff09;服务&#xff0c;正在成为企业构建弹性系统的核心组件。本文深度…...

【Java ee初阶】网络编程 TCP

TCP的socket api 两个核心的类 ServerSocket 创建一个这样的对象&#xff0c;就相当于打开了一个socket文件。 这个socket对象是给服务器专门使用的 这个类本身不负责发送接收。 主要负责“建立连接” Socket 创建一个这样的对象&#xff0c;也就相当于打开了一个socket文…...

达索MODSIM实施成本高吗?哪家服务商靠谱?

在数字化转型的浪潮中&#xff0c;越来越多的制造企业开始关注达索系统的MODSIM技术。记得去年参加行业峰会时&#xff0c;一位来自汽车零部件企业的技术总监向我倾诉了他的困扰&#xff1a;"我们都知道MODSIM能提升研发效率&#xff0c;但听说实施成本很高&#xff0c;又…...

ISP接口隔离原则

任何层次的软件设计如果依赖了它并不需要的东西&#xff0c;就会带来意料之外的麻烦。ISP强调使用多个特定的接口&#xff0c;而不是一个总接口&#xff0c;避免依赖不需要的接口。即不需要则不应该知道。 ISP特点 降低耦合度&#xff1a;客户端只依赖它需要的接口&#xff0…...

AI Agent(8):安全与伦理考量

引言 AI Agent作为具有一定自主性的智能系统,其行为可能产生深远影响。确保这些系统安全、可靠、符合伦理标准,并遵守相关法规,不仅是技术挑战,也是社会责任。 随着AI Agent能力的增强,其潜在风险也在增加,从数据泄露到决策偏见,从自主性滥用到责任归属不清,这些问题…...

Python3虚拟环境与包管理:项目隔离的艺术

Python3虚拟环境与包管理 为什么需要虚拟环境&#xff1f;虚拟环境工具&#xff1a;你的岛屿建设者一、使用venv创建虚拟环境创建虚拟环境激活虚拟环境退出虚拟环境 二、 包管理&#xff1a;岛上的补给系统2.1 pip&#xff1a;Python的包安装工具基本用法依赖管理 2.2 高级包管…...

23、DeepSeekMath论文笔记(GRPO)

DeepSeekMath论文笔记 0、研究背景与目标1、GRPO结构GRPO结构PPO知识点**1. PPO的网络模型结构****2. GAE&#xff08;广义优势估计&#xff09;原理****1. 优势函数的定义**2.GAE&#xff08;广义优势估计&#xff09; 2、关键技术与方法3、核心实验结果4、结论与未来方向关键…...

Python自动化-python基础(下)

六、带参数的装饰器 七、函数生成器 运行结果&#xff1a; 八、通过反射操作对象方法 1.添加和覆盖对象方法 2.删除对象方法 通过使用内建函数: delattr() # 删除 x.a() print("通过反射删除之后") delattr(x, "a") x.a()3 通过反射判断对象是否有指定…...

用Python绘制动态彩色ASCII爱心:技术深度与创意结合

引言 在技术博客的世界里&#xff0c;代码不仅仅是解决问题的工具&#xff0c;更可以是表达创意的媒介。今天我将分享一个独特的Python爱心代码项目&#xff0c;它结合了数学之美、ASCII艺术和动态效果&#xff0c;展示了Python编程的无限可能。这个项目不仅能运行展示出漂亮的…...

【C++】红黑树

1.红黑树的概念 是一种二叉搜索树&#xff0c;在每个节点上增加一个存储位表示节点的颜色&#xff0c;Red或black&#xff0c;通过对任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;确保没有一条路径会比其他路径长出俩倍&#xff0c;是接近平衡的。 2.红黑树…...

链表头插法的优化补充、尾插法完结!

头插法的优化补充 这边我们将考虑到可以将动态创建链表&#xff0c;和插入新链表到链表头前方&#xff0c;成为新链表头的方法分开&#xff0c;使其自由度上升&#xff0c;在创建完链表后&#xff0c;还可以添加链表元素到成为新的链表头。 就是说可以单独的调用这个insertHea…...

Java多线程(超详细版!!)

Java多线程(超详细版&#xff01;&#xff01;) 文章目录 Java多线程(超详细版&#xff01;&#xff01;)1. 线程 进程 多线程2.线程实现2.1线程创建2.1.1 继承Thread类2.1.2 实现runnable接口2.1.2.1 思考&#xff1a;为什么推荐使用runnable接口&#xff1f;2.1.2.1.1 更高的…...

超详细fish-speech本地部署教程

本人配置&#xff1a; windows x64系统 cuda12.6 rtx4070 一、下载fish-speech模型 注意&#xff1a;提前配置好git&#xff0c;教程可在自行搜索 git clone https://gitclone.com/github.com/fishaudio/fish-speech.git cd fish-speech 或者直接进GitHub中下载也可以 …...

Flink和Spark的选型

在Flink和Spark的选型中&#xff0c;需要综合考虑多个技术维度和业务需求&#xff0c;以下是在项目中会重点评估的因素及实际案例说明&#xff1a; 一、核心选型因素 处理模式与延迟要求 Flink&#xff1a;基于事件驱动的流处理优先架构&#xff0c;支持毫秒级低延迟、高吞吐的…...

解锁 DevOps 新境界 :使用 Flux 进行 GitOps 现场演示 – 自动化您的 Kubernetes 部署

前言 GitOps 是实现持续部署的云原生方式。它的名字来源于标准且占主导地位的版本控制系统 Git。GitOps 的 Git 在某种程度上类似于 Kubernetes 的 etcd&#xff0c;但更进一步&#xff0c;因为 etcd 本身不保存版本历史记录。毋庸置疑&#xff0c;任何源代码管理服务&#xf…...

【从零实现JsonRpc框架#1】Json库介绍

1.JsonCpp第三方库 JSONCPP 是一个开源的 C 库&#xff0c;用于解析和生成 JSON&#xff08;JavaScript Object Notation&#xff09;数据。它提供了简单易用的接口&#xff0c;支持 JSON 的序列化和反序列化操作&#xff0c;适用于处理配置文件、网络通信数据等场景。 2.Jso…...

使用FastAPI和React以及MongoDB构建全栈Web应用02 前言

Who this book is for 本书适合哪些人阅读 This book is designed for web developers who aspire to build robust, scalable, and efficient web applications. It caters to a broad spectrum of developers, from those with foundational knowledge to experienced prof…...

JavaScript中的数据类型

目录 前言 基本类型 Number 特殊的数值NaN Infinity和-Infinity String Boolean Undefined null Symbol Undefined和Null的区别 引用类型 Object&#xff08;对象&#xff09; Array&#xff08;数组&#xff09; Function&#xff08;函数&#xff09; 函数声…...

AI 助力,轻松进行双语学术论文翻译!

在科技日新月异的今天&#xff0c;学术交流中的语言障碍仍然是科研工作者面临的一大挑战。尤其是对于需要查阅大量外文文献的学生、科研人员和学者来说&#xff0c;如何高效地理解和翻译复杂的学术论文成为了一大难题。然而&#xff0c;由Byaidu团队推出的开源项目PDFMathTrans…...

第3.2.3节 Android动态调用链路的获取

3.2.3 Android App动态调用链路 在Android应用中&#xff0c;动态调用链路指的是应用在运行时的调用路径。这通常涉及到方法调用的顺序和调用关系&#xff0c;特别是在应用的复杂逻辑中&#xff0c;理解这些调用链路对于调试和性能优化非常重要。 1&#xff0c;动态调用链路获…...

【Android】文件分块上传尝试

【Android】文件分块上传 在完成一个项目时&#xff0c;遇到了需要上传长视频的场景&#xff0c;尽管可以手动限制视频清晰度和视频的码率帧率&#xff0c;但仍然避免不了视频大小过大的问题&#xff0c;且由于服务器原因&#xff0c;网络不太稳定。这个时候想到了可以将文件分…...

大模型中的三角位置编码实现

Transformer中嵌入表示 位置编码的实现 import torch import math from torch import nn# 词嵌入位置编码实现 class EmbeddingWithPosition(nn.Module):"""vocab_size:词表大小emb_size: 词向量维度seq_max_len: 句子最大长度 (人为设定&#xff0c;例如GPT2…...

深入详解人工智能数学基础——微积分中的自动微分及其在PyTorch中的实现原理

🧑 博主简介:CSDN博客专家、CSDN平台优质创作者,高级开发工程师,数学专业,10年以上C/C++, C#, Java等多种编程语言开发经验,拥有高级工程师证书;擅长C/C++、C#等开发语言,熟悉Java常用开发技术,能熟练应用常用数据库SQL server,Oracle,mysql,postgresql等进行开发应用…...

【Linux学习笔记】系统文件IO之重定向原理分析

【Linux学习笔记】系统文件IO之重定向原理分析 &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;Linux学习笔记 文章目录 【Linux学习笔记】系统文件IO之重定向原理分析前言一. 系统文件I/01.1 一种传递标志位的方法1.2 hello.c写文件:1.3 he…...

《React Native与Flutter:社交应用中用户行为分析与埋点统计的深度剖析》

React Native与Flutter作为两款备受瞩目的跨平台开发框架&#xff0c;正深刻地影响着应用的构建方式。当聚焦于用户行为分析与埋点统计时&#xff0c;它们各自展现出独特的策略与工具选择&#xff0c;这些差异和共性不仅关乎开发效率&#xff0c;更与社交应用能否精准把握用户需…...

Cesium高度参考系统

🌍 Cesium高度参考系统趣味探索 🚀 高度参考系统形象比喻 想象一下,你正在玩一个积木游戏: CLAMP_TO_GROUND:积木被"强力胶水"粘在桌面上,无论桌面高低起伏如何 RELATIVE_TO_GROUND:积木放在"微型支架"上,始终保持离桌面固定距离 NONE:积木漂…...

海纳思(Hi3798MV300)机顶盒遇到海思摄像头

海纳思机顶盒遇到海思摄像头&#xff0c;正好家里有个海思Hi3516的摄像头模组开发板&#xff0c;结合机顶盒来做个录像。 准备工作 海纳斯机顶盒摄像机模组两根网线、两个电源、路由器一块64G固态硬盘 摄像机模组和机顶盒都接入路由器的LAN口&#xff0c;确保网络正常通信。 …...

[python] 类

一 介绍 具有相同属性和行为的事物的通称,是一个抽象的概念 三要素: 类名,属性&#xff0c;方法 格式: class 类名: 代码块 class Pepole:name "stitchcool"def getname(self):return self.name 1.1 创建对象(实例化) 格式: 对象名 类名() p1 Pepole()…...

Python中的事件循环是什么?事件是怎么个事件?循环是怎么个循环

在Python异步编程中&#xff0c;事件循环&#xff08;Event Loop&#xff09;是核心机制&#xff0c;它通过单线程实现高效的任务调度和I/O并发处理。本文将从事件的定义、循环的运行逻辑以及具体实现原理三个维度展开分析。 一、事件循环的本质&#xff1a;协程与任务的调度器…...

单片机-STM32部分:11、ADC

飞书文档https://x509p6c8to.feishu.cn/wiki/OclUwlkifiRKR2k6iLbczn5tn8g STM32的ADC是一种逐次逼近型模拟数字转换器。 是用于将模拟形式的连续信号转换为数字形式的离散信号的一类设备。 逐次逼近型ADC的原理图下&#xff1a; STM32f103系列有3个ADC&#xff0c;精度为12…...

【含文档+PPT+源码】基于微信小程序的社区便民防诈宣传系统设计与实现

项目介绍 本课程演示的是一款基于微信小程序的社区便民防诈宣传系统设计与实现&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含&#xff1a;项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本套…...

Laravel 安全:批量赋值 fillable 与 guarded

Laravel 的模型中有两个 protected 字段 fillable 与 guarded&#xff0c;注意&#xff1a;必须是 protected 以上开放程度。 我们经常通过提交表单进行数据的增删改&#xff0c;为了方便的进行数据批量修改操作 Laravel 提供了批量赋值机制&#xff1a; 假如我们想要在数据库…...

[杂谈随感-13]: 人的睡眠,如何布置床的位置比较有安全?感?

睡眠环境中的床位布置直接影响心理安全感与睡眠质量&#xff0c;需从空间防御性、人体感知机制及环境心理学多维度综合设计。 以下基于科学原理与实践案例&#xff0c;系统解析床位布置的核心策略&#xff1a; 一、空间防御性布局&#xff1a;构建心理安全边界 背靠实体墙&a…...

协议路由与路由协议

协议路由”和“路由协议”听起来相似&#xff0c;但其实是两个完全不同的网络概念。下面我来分别解释&#xff1a; 一、协议路由&#xff08;Policy-Based Routing&#xff0c;PBR&#xff09; ✅ 定义&#xff1a; 协议路由是指 根据预设策略&#xff08;策略路由&#xff0…...

内网穿透系列三:开源本地服务公网映射工具 tunnelmole

以下是对 tunnelmole 简要介绍&#xff1a; tunnelmole 是一款开源的内网穿透工具&#xff0c;一行命令就能把本地http服务映射成公网可访问的链接提供公共免费的网络服务&#xff0c;直接下载运行命令即可使用&#xff0c;也支持自行配置搭建私有客户端、服务端参考开源地址&…...

发行基础:本地化BUG导致审核失败

1、早上收到邮件&#xff0c;Steam客服说本地化功能找不到&#xff0c;无法切换多国语言&#xff0c;所以正式版V1.0程序未通过。 大脑瞬间有要爆炸的感觉&#xff0c;测试后发现V1以及demo都存在同样问题。 属于重大BUG&#xff0c;需要立即解决&#xff0c;最高优先级。 2、…...

QB/T 1649-2024 聚苯乙烯泡沫塑料包装材料检测

聚苯乙烯泡沫塑料包装材料是指以可发行聚苯乙烯珠粒为原料&#xff0c;经加热预发泡后在模具中加热成型而制得&#xff0c;具有闭孔结构的聚苯乙烯泡沫塑料包装材料。 QB/T 1649-2024聚苯乙烯泡沫塑料包装材料检测项目&#xff1a; 测试项目 测试标准 外观 QB/T 1649 气味…...

【Day 24】HarmonyOS端云一体化开发:云函数

一、端云开发核心架构 1. 技术栈对比 维度传统开发模式HarmonyOS端云一体化方案优势 开发工具需独立配置前后端环境DevEco Studio统一开发端云代码降低60%环境搭建时间部署流程手动部署服务器与数据库一键部署至AGC Serverless免运维&#xff0c;自动弹性伸缩通信安全需自行实…...

大模型(LLMs)强化学习——RLHF及其变种

大模型&#xff08;LLMs&#xff09;强化学习——RLHF及其变种面 一、介绍一下 LLM的经典预训练Pipeline&#xff1f;二、预训练&#xff08;Pre-training&#xff09;篇 具体介绍一下 预训练&#xff08;Pre-training&#xff09;&#xff1f;三、有监督微调&#xff08;Sup…...