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

前端实现留言板

news 2026/2/10 13:32:00

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

使用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

网络编程（Modbus进阶）

思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以高效率、强健性、易实现的特点成为工业控制系统的通信标准。包…...

编程新知 2026/2/9 2:42:51

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...

编程新知 2026/2/10 11:13:58

Unity3D中Gfx.WaitForPresent优化方案

前言在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...

编程新知 2026/2/7 17:31:44

ESP32读取DHT11温湿度数据

芯片：ESP32 环境：Arduino 一、安装DHT11传感器库红框的库，别安装错了二、代码注意，DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2026/1/30 8:46:45

cf2117E

原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置或，也可以在执行上述操作前执行一次删除任意和。求…...

编程新知 2026/2/4 15:29:40

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种低级字节码格式，可由高级语言（如 C、C、Rust&am…...

编程新知 2025/11/19 10:53:07

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”，物流的终极形态正在诞生想象这样的场景： 凌晨3点，某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径；AI视觉系统在0.1秒内扫描包裹信息；数字孪生平台正模拟次日峰值流量压力…...

编程新知 2026/2/1 2:49:30

大数据学习（132）-HIve数据分析

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。主要功能：服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2026/2/6 15:01:23

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/9/9 21:28:16

使用HTML和JavaScript实现留言板

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

使用Vue.js框架实现

使用React框架实现

相关文章：