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

前端实现留言板

news 2026/2/10 3:14:22

留言板的主要使用场景是为用户提供一个在网站或应用上留言的平台，这样他们可以分享自己的想法、意见或建议。这些留言可以帮助开发者收集用户反馈，从而改进产品或服务。

使用HTML、CSS和JavaScript实现的留言板：这种方法的优点是简单易实现，不需要服务器支持，适用于小型的、静态的留言板。但是，由于所有数据都存储在客户端，所以如果用户清理了浏览器缓存或更换了设备，他们的留言可能会丢失。此外，这种方法也无法处理多个用户同时提交留言的情况，可能会导致数据的混乱。
使用Node.js和Express框架实现的留言板：这种方法可以实现动态的、实时的留言板，用户可以在任何设备上访问他们的留言，且数据会永久保存在服务器上。然而，这种方法需要一定的服务器端编程知识，且如果服务器出现故障，留言板可能会无法使用。

下面五种方法详细代码说明

使用HTML和JavaScript实现留言板

创建一个HTML文件，添加一个表单用于输入留言内容和一个按钮用于提交留言。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title>
</head>
<body><form id="messageForm"><label for="messageInput">留言内容：</label><textarea id="messageInput" rows="4" cols="50"></textarea><button type="submit">提交留言</button></form><div id="messageList"></div><script src="main.js"></script>
</body>
</html>

创建一个JavaScript文件（例如：main.js），编写代码实现留言板的交互功能。

document.getElementById('messageForm').addEventListener('submit', function (event) {event.preventDefault(); // 阻止表单默认提交行为var messageInput = document.getElementById('messageInput');var messageList = document.getElementById('messageList');// 创建一个新的留言元素var newMessage = document.createElement('p');newMessage.textContent = messageInput.value;// 将新的留言元素添加到留言列表中messageList.appendChild(newMessage);// 清空输入框messageInput.value = '';
});

使用Node.js和Express框架实现留言板

安装Node.js和npm（如果尚未安装）。
使用命令行创建一个新的项目文件夹，并在该文件夹中运行以下命令初始化项目：

npm init -y

安装Express框架：

npm install express

创建一个名为app.js的文件，编写代码实现留言板的后端功能。

const express = require('express');
const app = express();
const port = 3000;app.use(express.static('public')); // 设置静态文件夹为publicapp.get('/', (req, res) => {res.sendFile(__dirname + '/public/index.html');
});app.listen(port, () => {console.log(`留言板服务器正在监听端口${port}...`);
});

在项目文件夹中创建一个名为public的文件夹，然后在该文件夹中创建一个名为index.html的文件，将之前HTML文件中的代码复制到该文件中。
在项目文件夹中创建一个名为messages.txt的文件，用于存储留言。
修改app.js文件中的代码，实现留言的保存功能。

const fs = require('fs');app.post('/message', (req, res) => {const message = req.body.message;fs.appendFile('messages.txt', message + '
', (err) => {if (err) {console.error(err);res.status(500).send('服务器错误');} else {res.send('留言已提交');}});
});

修改app.js文件中的代码，实现留言的获取功能。

app.get('/messages', (req, res) => {fs.readFile('messages.txt', 'utf8', (err, data) => {if (err) {console.error(err);res.status(500).send('服务器错误');} else {res.send(data);}});
});

修改app.js文件中的代码，实现留言的显示功能。

app.get('/', (req, res) => {fs.readFile('messages.txt', 'utf8', (err, data) => {if (err) {console.error(err);res.status(500).send('服务器错误');} else {res.send(`<h1>留言板</h1><p>${data}</p>`);}});
});

运行项目：

node app.js

现在，你可以在浏览器中访问http://localhost:3000查看留言板。

使用Vue.js框架实现

安装Vue.js并创建一个新的项目。
在项目中创建一个名为MessageBoard.vue的组件。
在组件中添加一个表单和一个留言列表。
使用Vue.js的指令和数据绑定功能实现留言的添加和显示。

代码示例：

<template><div><form @submit.prevent="addMessage"><input v-model="messageInput" placeholder="请输入留言"><button type="submit">提交</button></form><ul><li v-for="message in messages" :key="message">{{ message }}</li></ul></div>
</template><script>
export default {data() {return {messageInput: '',messages: [],};},methods: {addMessage() {this.messages.push(this.messageInput);this.messageInput = '';},},
};
</script>

使用React框架实现

安装React和Create React App。
创建一个新的React应用。
在应用中创建一个名为MessageBoard.js的组件。
在组件中添加一个表单和一个留言列表。
使用React的状态管理和事件处理功能实现留言的添加和显示。

代码示例：

import React, { useState } from 'react';function MessageBoard() {const [messageInput, setMessageInput] = useState('');const [messages, setMessages] = useState([]);const handleSubmit = (e) => {e.preventDefault();setMessages([...messages, messageInput]);setMessageInput('');};return (<div><form onSubmit={handleSubmit}><input value={messageInput} onChange={(e) => setMessageInput(e.target.value)} placeholder="请输入留言" /><button type="submit">提交</button></form><ul>{messages.map((message, index) => (<li key={index}>{message}</li>))}</ul></div>);
}export default MessageBoard;

前端实现留言板

留言板的主要使用场景是为用户提供一个在网站或应用上留言的平台，这样他们可以分享自己的想法、意见或建议。这些留言可以帮助开发者收集用户反馈，从而改进产品或服务。使用HTML、CSS和JavaScript实现的留言板：这种方法的优点是简单易实现&a…...

编程日记 2023/11/27 18:37:17

【二叉排序树（Binary Sort Tree）又称为二叉搜索树，二叉查找树，）二叉排序树的操作----插入生成删除】

文章目录二叉排序树（Binary Sort Tree）又称为二叉搜索树，二叉查找树，）二叉树的查找分析二叉排序树的操作----插入二叉排序树的操作----生成二叉排序树的操作----删除二叉排序树（Binary Sort Tree&#xf…...

编程日记 2023/11/27 18:36:16

Verilog基础：时序调度中的竞争（二）

相关阅读 Verilog基础https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 作为一个硬件描述语言，Verilog HDL常常需要使用语句描述并行执行的电路，但其实在仿真器的底层，这些并行执行的语句是有先后顺序…...

编程日记 2023/11/27 18:35:15

云原生周刊：Kubernetes 1.29 中的删除、弃用和主要更改｜ 2023.11.27

开源项目推荐 Orphaned ConfigMaps 该版本库包含一个脚本，用于识别 Kubernetes 命名空间中的孤立的配置映射。孤立的配置映射是指那些未被命名空间中的任何活动 Pod 或容器引用的配置映射。 Kubernetes Multi Cooker 该项目包含一个小型 Kubernetes 控制器&…...

编程日记 2023/11/27 18:34:13

深入理解计算机中的程序

目录程序的存储程序的编译过程各位宝宝好，我们这次从计算机底层来讲一下程序是如何存储，编译的程序的存储我们拿一个最简单的程序来举个例子： #include<stdio.h> int main() {printf("hello world");return 0; } …...

编程日记 2023/11/27 18:31:11

uniapp视频倍速播放插件，uniapp视频试看插件——sunny-video使用文档

sunny-video视频倍速播放器组件名：sunny-video 效果图 img1img2img3img4 平台差异说明目前已应用到APP（安卓、iOS）、微信（小程序、H5）其它平台未测试安装方式本组件符合easycom规范，HBuilderX 2.5…...

编程日记 2023/11/27 18:29:09

【微软技术栈】与其他异步模式和类型互操作

本文内容任务和异步编程模型 (APM)任务和基于事件的异步模式 (EAP)任务和等待句柄 .NET 中异步模式的简短历史记录： .NET Framework 1.0 引进了 IAsyncResult 模式，也称为异步编程模型 (APM) 或 Begin/End 模式。.NET Framework 2.0 增加了基于事件的…...

编程日记 2023/11/27 18:28:08

计算机毕业设计基于微信小程序的“共享书角”图书借还管理系统的设计与实现 Java实战项目附源码+文档+视频讲解

博主介绍：✌从事软件开发10年之余，专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…...

编程日记 2023/11/27 18:27:07

腾讯云CVM标准型SA5云服务器AMD EPYC Bergamo处理器

腾讯云服务器标准型SA5实例是最新一代的标准型实例，CPU采用AMD EPYC™ Bergamo全新处理器，采用最新DDR5内存，默认网络优化，最高内网收发能力达4500万pps。腾讯云百科txybk.com分享腾讯云标准型SA5云服务器CPU、内存、网络、性能、…...

编程日记 2023/11/27 18:26:05

网站要怎么进行维护和防御攻击

随着数字经济的不断发展，互联网各业都在稳步发展，但是很多站长搭建网站程序后也不知道怎么去维护网站的稳定和是否有漏洞后门等，为此德迅云安全专门为各大站长研发了网站监测产品知道网站表现：网站监测可以帮助您了解您的网站的…...

编程日记 2023/11/27 18:24:03

代码随想录二刷｜哈希表｜四数相加II

代码随想录二刷 ｜ 哈希表 ｜四数相加II 题目描述解题思路 & 代码实现题目描述 454.四数相加II 给你四个整数数组 nums1、nums2、nums3 和 nums4 ，数组长度都是 n ，请你计算有多少个元组 (i, j, k, l) 能满足： 0…...

编程日记 2023/11/27 18:23:01

Flutter | TextField长按时选项菜单复制、粘贴显示为英文问题解决

Flutter | TextField长按时选项菜单复制、粘贴显示为英文问题解决问题描述： 长按TextField后，显示剪切、复制等选项为英文，如下图所示，这是因为问未设置语言本地化，我们需要进行设置。首先在pubspec.yaml加入以下依赖…...

编程日记 2023/11/27 18:21:59

如何找出excel中两列数据中不同的值(IF函数的用法)

第一部分，举例： 例1： 如下图所示，A列和B列是需要比较的数据，C列为对比规则：IF(A2B2,"是","否") 示例图例2：给B列的成绩评等级 C列的规则： IF(B2>85,&qu…...

编程日记 2023/11/27 18:20:58

C# WPF上位机开发（掌握一点c#基础）

编程日记 2023/11/27 18:19:55

UIkit-UIAlertContent

简单Demo //注意！！！必须放在viewController的viewDidAppear里面，viewDidLoad里面不行 - (void)viewDidAppear:(BOOL)animated {// 创建 UIAlertControllerUIAlertController *alertController [UIAlertController alertControll…...

编程日记 2023/11/27 18:18:54

C语言-内存函数详解

文章目录 1. memcpy使用和模拟实现2. memmove使用和模拟实现3. memset函数的使用4. memcmp函数的使用 1. memcpy使用和模拟实现返回类型和参数： void * memcpy ( void * destination, const void * source, size_t num );1.函数memcpy从source的位置开始向后复制…...

编程日记 2023/11/27 18:17:53

超越噪音，让音乐重获新生：iZotope RX 10音频降噪修复软件

在音乐制作或者音频处理的过程中，噪音往往是一个让人头痛的问题。无论是环境噪音，还是设备产生的噪音，都会对音频质量产生重大影响。而现在，我们有了iZotope RX 10，这款专业的音频降噪修复软件，可以将你从噪…...

编程日记 2023/11/27 18:16:52

【兔子王赠书第9期】ChatGPT进阶：提示工程入门

文章目录写在前面ChatGPT推荐图书关键点编辑推荐内容简介推荐理由粉丝福利写在后面写在前面人类一直在寻找、制造并使用工具，以扩展我们的能力，适应我们的环境，甚至超越我们的生物限制。现在，我们正站在一个历史性的分水岭之…...

编程日记 2023/11/27 18:15:51

机器学习基础Matplotlib绘图

一、运行环境学习工具：jupyter-notebookpython版本：311系统：Win11 二、什么是matplotlib？ matplotlib是基于python生态开发的一个可视化绘图库，它的出现让python在数据分析及机器学习方面占了重要的一部分&#…...

编程日记 2023/11/27 18:13:49

【高效开发工具系列】PlantUML入门使用

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学…...

编程日记 2023/11/27 18:12:48

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目：3442. 奇偶频次间的最大差值 I 思路 ：哈希，时间复杂度0(n)。用哈希表来记录每个字符串中字符的分布情况，哈希表这里用数组即可实现。 C版本： class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2026/2/7 23:18:31

idea大量爆红问题解决

问题描述在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决就是如上所展示的问题，但是程序依然可以启动。问题解决…...

编程新知 2026/2/8 6:37:38

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...

编程新知 2025/10/6 4:03:40

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中，高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术，实现年省电费15%-60%，且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2026/1/29 17:06:33

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析：CodeRider、GitHub Copilot及其他随着人工智能技术的快速发展，AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者，分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2026/2/9 2:15:44

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求，并检查收到的响应。它以以下模式之一…...

编程新知 2026/1/29 8:51:33

Go 并发编程基础：通道（Channel）的使用

在 Go 中，Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式，用于在多个 Goroutine 之间传递数据，从而实现高效的并发编程。本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。一、Channel…...

编程新知 2025/12/4 8:54:35

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的固定位置监控相机，因为在使用过程中发现 Airsim 对外部监控相机的描述模糊，而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置，最后在源码示例中找到了，所以感…...

编程新知 2026/2/5 18:58:39

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35

使用HTML和JavaScript实现留言板

使用Node.js和Express框架实现留言板

使用Vue.js框架实现

使用React框架实现

相关文章：