前端实现留言板

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

  • 使用HTML、CSS和JavaScript实现的留言板:这种方法的优点是简单易实现,不需要服务器支持,适用于小型的、静态的留言板。但是,由于所有数据都存储在客户端,所以如果用户清理了浏览器缓存或更换了设备,他们的留言可能会丢失。此外,这种方法也无法处理多个用户同时提交留言的情况,可能会导致数据的混乱。

  • 使用Node.js和Express框架实现的留言板:这种方法可以实现动态的、实时的留言板,用户可以在任何设备上访问他们的留言,且数据会永久保存在服务器上。然而,这种方法需要一定的服务器端编程知识,且如果服务器出现故障,留言板可能会无法使用。

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

使用HTML和JavaScript实现留言板

  1. 创建一个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>
  1. 创建一个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框架实现留言板

  1. 安装Node.js和npm(如果尚未安装)。

  2. 使用命令行创建一个新的项目文件夹,并在该文件夹中运行以下命令初始化项目:

npm init -y
  1. 安装Express框架:
npm install express
  1. 创建一个名为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}...`);
});
  1. 在项目文件夹中创建一个名为public的文件夹,然后在该文件夹中创建一个名为index.html的文件,将之前HTML文件中的代码复制到该文件中。

  2. 在项目文件夹中创建一个名为messages.txt的文件,用于存储留言。

  3. 修改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('留言已提交');}});
});
  1. 修改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);}});
});
  1. 修改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>`);}});
});
  1. 运行项目:
node app.js

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

使用Vue.js框架实现

  1. 安装Vue.js并创建一个新的项目。
  2. 在项目中创建一个名为MessageBoard.vue的组件。
  3. 在组件中添加一个表单和一个留言列表。
  4. 使用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框架实现

  1. 安装React和Create React App。
  2. 创建一个新的React应用。
  3. 在应用中创建一个名为MessageBoard.js的组件。
  4. 在组件中添加一个表单和一个留言列表。
  5. 使用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;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/175884.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法基础之食物链

食物链 核心思想&#xff1a;带权并查集 用距根节点和距离表示与根节点的关系 求距离 #include<iostream>using namespace std;const int N50010;int n,m;int p[N],d[N];//找到祖宗节点(路径压缩) 并求出对应距离int find(int x){if(p[x]!x){int up[x]; //保存旧父节点…

如何使用 Java 在Excel中创建下拉列表

下拉列表&#xff08;下拉框&#xff09;可以确保用户仅从预先给定的选项中进行选择&#xff0c;这样不仅能减少数据输入错误&#xff0c;还能节省时间提高效率。在MS Excel中&#xff0c;我们可以通过 “数据验证” 提供的选项来创建下拉列表&#xff0c;但如果要在Java程序中…

mysql账户密码获取

数据库安装目录 MySQL\data\mysql 里面的user.MYD文件&#xff0c;需要编译查看 数据库里的user表 库下面的user表拿到后&#xff0c;直接解密密码即可 网站配置文件 conn、config、data、sql、common 、inc这些文件 比如pikachu\inc目录下的config.inc.php文件的内容会显示…

uniapp的vue3的模版的setup函数内使用uniapp内置方法

vue2使用方式直接在method同级使用就行,但是在vue3的setup函数内直接使用会报错,本人找了好久,发现vue3需要导入uniapp模块才能使用,具体如下 使用uniapp上拉加载更多方法 <script>import {onReachBottom} from dcloudio/uni-apponReachBottom(() > {console.log(&qu…

速通CSAPP(一)计算机系统漫游入门

CSAPP学习 前言 一门经典的计组课程&#xff0c;我却到了大四才学。 anyway&#xff0c;何时都不会晚。 博主参考的教程&#xff1a;本电子书信息 - 深入理解计算机系统&#xff08;CSAPP&#xff09; (gitbook.io)&#xff0c;非常感谢作者的整理。 诚然去看英文版可以学…

【开源】基于Vue和SpringBoot的木马文件检测系统

项目编号&#xff1a; S 041 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S041&#xff0c;文末获取源码。} 项目编号&#xff1a;S041&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 木马分类模块2.3 木…

软著项目推荐 深度学习中文汉字识别

文章目录 0 前言1 数据集合2 网络构建3 模型训练4 模型性能评估5 文字预测6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习中文汉字识别 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xf…

【Vue】Linux 运行 npm run serve 报错 vue-cli-service: Permission denied

问题描述 在Linux系统上运行npm run serve命令时&#xff0c;控制台报错&#xff1a; sudo npm run serve project50.1.0 serve vue-cli-service serve sh: 1: vue-cli-service: Permission denied错误截图如下&#xff1a; 原因分析 该错误是由于vue-cli-service文件权限不…

flutter开发实战-为ListView去除Android滑动波纹

flutter开发实战-为ListView去除Android滑动波纹 在之前的flutter聊天界面上&#xff0c;由于使用ScrollBehavior时候&#xff0c;当时忘记试试了&#xff0c;今天再试代码发现不对。这里重新记录一下为ListView去除Android滑动波纹的方式。 一、ScrollBehavior ScrollBehav…

线性转换函数S_RTR(SCL和ST代码)

模拟量转换函数S_ITR详细公式和算法源代码请查看下面文章链接: PLC模拟量输入 模拟量转换FC S_ITR_博途模拟量转换程序_RXXW_Dor的博客-CSDN博客文章浏览阅读5.4k次,点赞4次,收藏7次。模拟量采集、工业现场应用特别广泛、大部分传感器的测量值和输出信号都是线型关系,所以…

Rocky Linux 9.3 为 PowerPC 64 位带回云和容器镜像

RHEL 克隆版 Rocky Linux 9.3 今天发布了&#xff0c;作为红帽企业 Linux 发行版 CentOS Stream 和 Red Hat Enterprise Linux 的免费替代版本&#xff0c;现在可供下载。 Rocky Linux 9.3 是在 Rocky Linux 9.2 发布 6 个月之后发布的&#xff0c;它带回了 PowerPC 64 位 Lit…

4D雷达目标检测跟踪算法设计

1.算法流程 4D雷达点云跟踪处理沿用3D毫米波雷达的处理流程&#xff0c;如下图&#xff1a; 从接收到点云开始&#xff0c;先对点云做标定、坐标转换、噪点剔除、动静分离&#xff0c;再分别对动态目标和静态目标做聚类&#xff0c;然后根据聚类结果做目标的特征分析和检测等&a…

数据源网站汇总(持续更新)

数据源网站汇总 1、背景2、数据源网站汇总 1、背景 大数据是信息化发展到一定阶段的产物。随着信息技术和人类生产生活深度融合&#xff0c;互联网快速普及&#xff0c;全球数据呈现爆发增长、海量集聚的特点&#xff0c;对经济发展、社会进步、国家治理、人民生活都产生了重大…

leetcode42接雨水问题

接雨水 题目描述 题目分析 核心思想&#xff1a; 代码 java版本&#xff1a; package com.pxx.leetcode.trapRainWaterDoublePoniter;public class Solution1 {public int trap(int[] height) {if (height.length 0) {return 0;}int n height.length;int left 0;int righ…

LabVIEWL实现鸟巢等大型结构健康监测

LabVIEWL实现鸟巢等大型结构健康监测 管理国家地震防备和减灾的政府机构中国地震局(CEA)选择了七座新建的巨型结构作为结构健康监测(SHM)技术的测试台。这些标志性建筑包括北京2008年夏季奥运会场馆&#xff08;包括北京国家体育场和北京国家游泳中心&#xff09;、上海104层的…

Eureka简单使用做微服务模块之间动态请求

创建一个eureka模块,引入eureka 为启动项加上EnableEurekaServer注解 配置信息 orderService和userService的操作是一样的 这里以orderService为例: 引入eureka客户端 加上 LoadBalanced注解 配置 orderService和userService都配置好了之后 启动 这样我们在http://localhos…

Python实现FA萤火虫优化算法优化循环神经网络分类模型(LSTM分类算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 萤火虫算法&#xff08;Fire-fly algorithm&#xff0c;FA&#xff09;由剑桥大学Yang于2009年提出 , …

【读懂AUTOSAR】DoIP模块(1)-- 使用场景和链接的建立规范

引子 --什么是?为什么使用DoIP? DoIP就是通过IP进行诊断的意思(Diagnostic Over IP)。我们熟悉的诊断都是通过CAN总线的啊,为什么要通过IP?IP是什么? IP就是Internet Protocol,就是”互联网协议“啦! 那DoIP就是通过互联网进行的诊断喽,也可以叫做“基于以太网的诊…

uni-app中的onLoad不执行

问题 想在onLoad()中发请求获取数据&#xff0c;却发现onLoad()根本不会执行 原因 这个页面没有在pages.json中配置&#xff0c;不属于uni-app中的页面 uni-app的文档也做出了说明&#xff0c;组件是无法使用页面级的onLoad等生命周期的 解决方法 uni-app除支持页面生命周…

单片机学习11——矩阵键盘

矩阵键盘&#xff1a; 这个矩阵键盘可以接到P0、P1、P2、P3都是可以的。 使用矩阵键盘是能节省单片机的IO口。 P3.0 P3.1 P3.2 P3.3 称之为行号。 P3.4 P3.5 P3.6 P3.7 称之为列号。 矩阵键盘检测原理&#xff1a; 1、检查是否有键按下&#xff1b; 2、键的抖动处理&#xf…