简易留言板

2024-05-12 11:36
文章标签 简易 留言板

本文主要是介绍简易留言板，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

前端实现

数据库的使用

创建数据表

创建项目

连接数据库

后端实现

接口定义

持久层

业务逻辑层

控制层

前端代码完善

留言板是一个常见的功能，在本篇文章中，将实现一个简易的留言板：

页面中能够显示所有留言内容，当点击发布留言后，内容会在下方空白处进行显示

前端实现

在这里，使用的是 HTML、CSS 和 JavaScript 实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简易留言板</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><style>.container {margin: 20px;}.submit {width: 150px;height: 40px;background-color: #ffb3a7;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
</head>
<body><div class="container"><h1>简易留言板</h1><form id="messageForm"><label for="author">作者：</label><input type="text" id="author" required><br><label for="content">内容：</label><br><textarea id="content" rows="4" cols="50" required></textarea><br><button type="submit" class="submit">发布留言</button></form></div><script>// 监听表单提交事件$('#messageForm').submit(function(event) {event.preventDefault(); // 阻止表单默认提交行为var author = $('#author').val();var content = $('#content').val();if (author && content) {//构造节点var divE = '<div>' + author + '留言:' + content;// 将节点添加到页面上$('.container').append(divE);// 清空表单输入框$('#author').val('');$('#content').val('');}else {alert('作者和内容不能为空！');}});</script>
</body>
</html>

当我们点击提交后，留言内容显示在下方空白处

当我们进行刷新时，数据就会丢失，要想数据不丢失，需要将数据存储在数据库中

数据库的使用

要想使用数据库存储数据，我们首先需要创建数据表

创建数据表

DROP TABLE IF EXISTS message_info;
CREATE TABLE `message_info` (`id` INT ( 11 ) NOT NULL AUTO_INCREMENT,`author` VARCHAR ( 127 ) NOT NULL,`message` VARCHAR ( 256 ) NOT NULL,`delete_flag` TINYINT ( 4 ) DEFAULT 0 COMMENT '0-正常, 1-删除',`create_time` DATETIME DEFAULT now(),`update_time` DATETIME DEFAULT now() ON UPDATE now(),
PRIMARY KEY ( `id` ) 
) ENGINE = INNODB DEFAULT CHARSET = utf8mb4;

此时，创建出表 message_info

虽然当前实现的留言板不涉及更新和删除操作，但在这里仍然创建了字段 delete_flag、update_flag，若后续增加了相关功能，则不需要再对数据表进行修改

接下来我们使用 MyBatis 来实现数据的操作

创建项目

我们首先创建SpringBoot工程，并引入MyBatis 和 MySQL驱动依赖

连接数据库

spring:datasource:url: jdbc:mysql://127.0.0.1:3306/mybatis_test?characterEncoding=utf8&useSSL=falseusername: rootpassword: 123123driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:configuration: #打印 MyBatis 日志map-underscore-to-camel-case: true #驼峰字段转换

连接好数据库后，我们就可以开始编写后端代码了

后端实现

我们首先创建留言对象 MessageInfo 类

package com.example.messageboard.model;import lombok.Data;import java.util.Date;@Data
public class MessageInfo {private Integer id;private String author;private String message;private Integer deleteFlag;private Date createTime;private Date updateTime;
}

根据留言板的需求可看出，后端需要提供两个服务：

1. 添加留言：用户输入留言信息后，后端需要将留言信息存到数据库中

2. 显示留言：页面展示时，需要从后端获取到所有的留言信息

接口定义

添加留言

[URL]

POST /message/publish

[请求参数]

author=ppp&message=ppp

[响应]

true //添加成功

false //添加失败

显示留言

[URL]

GET /message/getList

[请求参数]

无

[响应]

返回留言列表

[

    {

        "id": 1,

        "author": "aa",

        "message": "aa",

        "deleteFlag": 0,

        "createTime": "2024-05-11T09:42:59.000+00:00",

        "updateTime": "2024-05-11T09:42:59.000+00:00"

    },

    {

        "id": 2,

        "author": "aa",

        "message": "aa",

        "deleteFlag": 0,

        "createTime": "2024-05-11T09:52:01.000+00:00",

        "updateTime": "2024-05-11T09:52:01.000+00:00"

    },

    {

        "id": 3,

        "author": "aa",

        "message": "aa",

        "deleteFlag": 0,

        "createTime": "2024-05-11T09:52:15.000+00:00",

        "updateTime": "2024-05-11T09:52:15.000+00:00"

    }

]

持久层

将应用程序的数据持久化到数据库中，并提供对数据库的访问操作

实现向数据库中添加留言和从数据库中查询所有留言：

package com.example.messageboard.mapper;import com.example.messageboard.model.MessageInfo;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;import java.util.List;@Mapper
public interface MessageInfoMapper {@Insert("insert into message_info (`author`, `message`) values (#{author}, #{message})")Integer addMessage(MessageInfo messageInfo);@Select("select `id`, `author`, `message`,`delete_flag`, `create_time`, `update_time` from message_info where delete_flag = 0")List<MessageInfo> queryAll();
}

业务逻辑层

处理具体的业务逻辑

由于留言板的功能简单，不需要进行其他的处理，因此，我们直接调用messageInfoMapper的方法并返回即可

package com.example.messageboard.service;import com.example.messageboard.mapper.MessageInfoMapper;
import com.example.messageboard.model.MessageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class MessageInfoService {@Autowiredprivate MessageInfoMapper messageInfoMapper;public int addMessage(MessageInfo messageInfo) {return messageInfoMapper.addMessage(messageInfo);}public List<MessageInfo> queryAll() {return messageInfoMapper.queryAll();}
}

控制层

接收前端发送的请求，对请求进行处理，并响应数据

添加留言：进行参数校验，校验通过后添加留言 

查询留言：返回留言列表

package com.example.messageboard.controller;import com.example.messageboard.model.MessageInfo;
import com.example.messageboard.service.MessageInfoService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.List;@RequestMapping("/message")
@RestController
@Slf4j
public class MessageInfoController {@Autowiredprivate MessageInfoService messageInfoService;/*** 发布留言* @param messageInfo* @return*/@RequestMapping("/publish")public boolean publish(MessageInfo messageInfo){log.info("接收到参数messageInfo: {}", messageInfo);//参数校验if(!StringUtils.hasLength(messageInfo.getAuthor()) || !StringUtils.hasLength(messageInfo.getMessage())){return false;}int result = messageInfoService.addMessage(messageInfo);if(result > 0){return true;}return false;}/*** 获取留言列表* @return*/@RequestMapping("/getList")public List<MessageInfo> getList(){return messageInfoService.queryAll();}
}

后端代码编写完成后，我们运行程序，并进行测试：

我们首先测试添加留言：

分别测试 添加成功、未输入昵称、未输入留言三种情况下的添加：

结果正确

我们再测试显示留言：

结果正确 

接下来，我们来完善客户端代码

前端代码完善

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简易留言板</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><style>.container {margin: 20px;}.submit {width: 150px;height: 40px;background-color: #ffb3a7;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
</head>
<body><div class="container"><h1>简易留言板</h1><form id="messageForm"><label for="author">作者：</label><input type="text" id="author" required><br><label for="content">内容：</label><br><textarea id="content" rows="4" cols="50" required></textarea><br><button type="submit" class="submit">发布留言</button></form></div><script>//获取留言$.ajax({url: '/message/getList',method: 'GET',success: function(messageInfos) {// console.log(messageInfos);var divE = "";for(var message of messageInfos){divE += '<div>' + message.author + '留言:' + message.message;}$('.container').append(divE);},error: function(error) {console.error('获取留言列表时发生错误:', error);}});// 监听表单提交事件$('#messageForm').submit(function(event) {event.preventDefault(); // 阻止表单默认提交行为var author = $('#author').val();var content = $('#content').val();if (author && content) {// 发送 AJAX 请求保存留言$.ajax({url: '/message/publish',method: 'POST',data: { author: author, message: content },success: function(result) {console.log(result);//构造节点var divE = '<div>' + author + '留言:' + content;// 将节点添加到页面上$('.container').append(divE);// 清空表单输入框$('#author').val('');$('#content').val('');},error: function(error) {console.error('保存留言时发生错误:', error);}});} else {alert('作者和内容不能为空！');}});</script>
</body>
</html>

最后，我们进行测试：

所有留言信息成功显示，且新添加的留言信息也在下方成功显示 

这篇关于简易留言板的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/982511。

相关文章

python实现简易SSL的项目实践

python实现简易SSL的项目实践

《python实现简易SSL的项目实践》本文主要介绍了python实现简易SSL的项目实践,包括CA.py、server.py和client.py三个模块,文中通过示例代码介绍的非常详细,对大家的学习... 目录运行环境运行前准备程序实现与流程说明运行截图代码CA.pyclient.pyserver.py参
阅读更多...
使用PyQt实现简易文本编辑器

使用PyQt实现简易文本编辑器

《使用PyQt实现简易文本编辑器》这篇文章主要为大家详细介绍了如何使用PyQt5框架构建一个简单的文本编辑器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录分析主窗口类 (MyWindow)菜单操作语法高亮 (SyntaxHighlighter)运行程序主要组件代码图示分析实现
阅读更多...
5分钟获取deepseek api并搭建简易问答应用

5分钟获取deepseek api并搭建简易问答应用

《5分钟获取deepseekapi并搭建简易问答应用》本文主要介绍了5分钟获取deepseekapi并搭建简易问答应用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需... 目录1、获取api2、获取base_url和chat_model3、配置模型参数方法一：终端中临时将加
阅读更多...
用Java打造简易计算器的实现步骤

用Java打造简易计算器的实现步骤

《用Java打造简易计算器的实现步骤》：本文主要介绍如何设计和实现一个简单的Java命令行计算器程序,该程序能够执行基本的数学运算（加、减、乘、除）,文中通过代码介绍的非常详细,需要的朋友可以参考... 目录目标：一、项目概述与功能规划二、代码实现步骤三、测试与优化四、总结与收获总结目标：简单计算器，设计
阅读更多...
如何用Python绘制简易动态圣诞树

如何用Python绘制简易动态圣诞树

《如何用Python绘制简易动态圣诞树》这篇文章主要给大家介绍了关于如何用Python绘制简易动态圣诞树,文中讲解了如何通过编写代码来实现特定的效果,包括代码的编写技巧和效果的展示,需要的朋友可以参考... 目录代码：效果：总结 代码：import randomimport timefrom math
阅读更多...
通过C#和RTSPClient实现简易音视频解码功能

通过C#和RTSPClient实现简易音视频解码功能

《通过C#和RTSPClient实现简易音视频解码功能》在多媒体应用中,实时传输协议（RTSP）用于流媒体服务,特别是音视频监控系统,通过C#和RTSPClient库,可以轻松实现简易的音视... 目录前言正文关键特性解决方案实现步骤示例代码总结最后前言在多媒体应用中，实时传输协议（RTSP）用于流媒体服
阅读更多...
海龟绘图简易教程|Turtle for Python

海龟绘图简易教程|Turtle for Python

turtle 是 python 内置的一个比较有趣味的模块，俗称 海龟绘图，它是基于 tkinter 模块打造，提供一些简单的绘图工具，海龟作图最初源自 20 世纪 60 年代的 Logo 编程语言，之后一些很酷的 Python 程序员构建了 turtle 库，让其他程序员只需要 import turtle，就可以在 Python 中使用海龟作图。 原文链接|海龟绘图简易教程 1. 基本
阅读更多...
使用jetty和mongodb做个简易文件系统

使用jetty和mongodb做个简易文件系统

使用jetty和mongodb做个简易文件系统 - ciaos 时间 2014-03-09 21:21:00   博客园-所有随笔区 原文   http://www.cnblogs.com/ciaos/p/3590662.html 主题  MongoDB  Jetty  文件系统 依赖库： 1，jetty（提供http方式接口） 2，mongodb的java驱动（访问mo
阅读更多...
HarmonyOS】ArkTS学习之基于TextTimer的简易计时器的elapsedTime最小时间单位问题

HarmonyOS】ArkTS学习之基于TextTimer的简易计时器的elapsedTime最小时间单位问题

本文旨在纪录自己对TextTimer使用过程的疑惑问题 我在查看教程时候，发现很多博客在onTimer(event: (utc: number, elapsedTime: number) => void) 这里提到elapsedTime：计时器经过的时间，单位为毫秒。我不清楚是否为版本问题。 在我查看version11和version10的api时候，说的都是设置格式的最小单位。 经过个人检验的
阅读更多...
Vue初学-简易计算器

Vue初学-简易计算器

最近在学习Vue的指令，做了一个简易计算器，比较适合刚入门的人参考学习。用到的知识点有： 1.插值表达式 2.v-model，双向绑定+、-、*、/、**等操作符 3.v-show，控制操作数2是否显示，乘方时不显示操作数2 4.methods选项，定义了calculate ()方法，实现各种运算 5.watch选项，监听selected的值的变化。 下面是程序的执行效果： 如果选择的是**乘
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2