• 简易留言板

    目录

    前端实现

    数据库的使用

    创建数据表

    创建项目

    连接数据库

    后端实现

    接口定义

    持久层

    业务逻辑层

    控制层

    前端代码完善

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

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

    前端实现

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>简易留言板title>
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script>
    8.     <style>
    9.         .container {
    10.             margin: 20px;
    11.         }
    12.  
    13.         .submit {
    14.             width: 150px;
    15.             height: 40px;
    16.             background-color: #ffb3a7;
    17.             color: white;
    18.             border: none;
    19.             margin: 10px;
    20.             border-radius: 5px;
    21.             font-size: 20px;
    22.         }
    23.     style>
    24. head>
    25. <body>
    26.     <div class="container">
    27.         <h1>简易留言板h1>
    28.         <form id="messageForm">
    29.             <label for="author">作者：label>
    30.             <input type="text" id="author" required><br>
    31.             <label for="content">内容：label><br>
    32.             <textarea id="content" rows="4" cols="50" required>textarea><br>
    33.             <button type="submit" class="submit">发布留言button>
    34.         form>
    35.     div>
    36.     
    37.     <script>
    38.         // 监听表单提交事件
    39.         $('#messageForm').submit(function(event) {
    40.             event.preventDefault(); // 阻止表单默认提交行为
    41.             var author = $('#author').val();
    42.             var content = $('#content').val();
    43.             if (author && content) {
    44.                 //构造节点
    45.                 var divE = '
      ' + author + '留言:' + content;
    46.                 // 将节点添加到页面上
    47.                 $('.container').append(divE);
    48.                 // 清空表单输入框
    49.                 $('#author').val('');
    50.                 $('#content').val('');
    51.             }else {
    52.                 alert('作者和内容不能为空！');
    53.             }
    54.         });
    55.     script>
    56. body>
    57. html>

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

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

    数据库的使用

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

    创建数据表

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

    此时，创建出表 message_info

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

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

    创建项目

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

    连接数据库

    1. spring:
    2.   datasource:
    3.     url: jdbc:mysql://127.0.0.1:3306/mybatis_test?characterEncoding=utf8&useSSL=false
    4.     username: root
    5.     password: 123123
    6.     driver-class-name: com.mysql.cj.jdbc.Driver
    7. mybatis:
    8.   configuration: #打印 MyBatis 日志
    9.     map-underscore-to-camel-case: true #驼峰字段转换

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

    后端实现

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

    1. package com.example.messageboard.model;
    2.  
    3. import lombok.Data;
    4.  
    5. import java.util.Date;
    6.  
    7. @Data
    8. public class MessageInfo {
    9.     private Integer id;
    10.     private String author;
    11.     private String message;
    12.     private Integer deleteFlag;
    13.     private Date createTime;
    14.     private Date updateTime;
    15. }

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

    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"

        }

    ]

    持久层

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

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

    1. package com.example.messageboard.mapper;
    2.  
    3. import com.example.messageboard.model.MessageInfo;
    4. import org.apache.ibatis.annotations.Insert;
    5. import org.apache.ibatis.annotations.Mapper;
    6. import org.apache.ibatis.annotations.Select;
    7.  
    8. import java.util.List;
    9.  
    10. @Mapper
    11. public interface MessageInfoMapper {
    12.     @Insert("insert into message_info (`author`, `message`) values (#{author}, #{message})")
    13.     Integer addMessage(MessageInfo messageInfo);
    14.  
    15.     @Select("select `id`, `author`, `message`,`delete_flag`, `create_time`, `update_time` from message_info where delete_flag = 0")
    16.     List queryAll();
    17. }

    业务逻辑层

    处理具体的业务逻辑

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

    1. package com.example.messageboard.service;
    2.  
    3. import com.example.messageboard.mapper.MessageInfoMapper;
    4. import com.example.messageboard.model.MessageInfo;
    5. import org.springframework.beans.factory.annotation.Autowired;
    6. import org.springframework.stereotype.Service;
    7.  
    8. import java.util.List;
    9.  
    10. @Service
    11. public class MessageInfoService {
    12.     @Autowired
    13.     private MessageInfoMapper messageInfoMapper;
    14.  
    15.     public int addMessage(MessageInfo messageInfo) {
    16.         return messageInfoMapper.addMessage(messageInfo);
    17.     }
    18.  
    19.     public List queryAll() {
    20.         return messageInfoMapper.queryAll();
    21.     }
    22. }

    控制层

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

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

    查询留言：返回留言列表

    1. package com.example.messageboard.controller;
    2.  
    3. import com.example.messageboard.model.MessageInfo;
    4. import com.example.messageboard.service.MessageInfoService;
    5. import lombok.extern.slf4j.Slf4j;
    6. import org.springframework.beans.factory.annotation.Autowired;
    7. import org.springframework.util.StringUtils;
    8. import org.springframework.web.bind.annotation.RequestMapping;
    9. import org.springframework.web.bind.annotation.RestController;
    10.  
    11. import java.util.List;
    12.  
    13. @RequestMapping("/message")
    14. @RestController
    15. @Slf4j
    16. public class MessageInfoController {
    17.     @Autowired
    18.     private MessageInfoService messageInfoService;
    19.  
    20.     /**
    21.      * 发布留言
    22.      * @param messageInfo
    23.      * @return
    24.      */
    25.     @RequestMapping("/publish")
    26.     public boolean publish(MessageInfo messageInfo){
    27.         log.info("接收到参数messageInfo: {}", messageInfo);
    28.         //参数校验
    29.         if(!StringUtils.hasLength(messageInfo.getAuthor()) 
    30.                 || !StringUtils.hasLength(messageInfo.getMessage())){
    31.             return false;
    32.         }
    33.         int result = messageInfoService.addMessage(messageInfo);
    34.         if(result > 0){
    35.             return true;
    36.         }
    37.         return false;
    38.     }
    39.  
    40.     /**
    41.      * 获取留言列表
    42.      * @return
    43.      */
    44.     @RequestMapping("/getList")
    45.     public List getList(){
    46.         return messageInfoService.queryAll();
    47.     }
    48. }

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

    我们首先测试添加留言：

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

    结果正确

    我们再测试显示留言：

    结果正确 

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

    前端代码完善

    1.     html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>简易留言板title>
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script>
    8.     <style>
    9.         .container {
    10.             margin: 20px;
    11.         }
    12.  
    13.         .submit {
    14.             width: 150px;
    15.             height: 40px;
    16.             background-color: #ffb3a7;
    17.             color: white;
    18.             border: none;
    19.             margin: 10px;
    20.             border-radius: 5px;
    21.             font-size: 20px;
    22.         }
    23.     style>
    24. head>
    25. <body>
    26.     <div class="container">
    27.         <h1>简易留言板h1>
    28.         <form id="messageForm">
    29.             <label for="author">作者：label>
    30.             <input type="text" id="author" required><br>
    31.             <label for="content">内容：label><br>
    32.             <textarea id="content" rows="4" cols="50" required>textarea><br>
    33.             <button type="submit" class="submit">发布留言button>
    34.         form>
    35.     div>
    36.     
    37.     <script>
    38.         //获取留言
    39.         $.ajax({
    40.             url: '/message/getList',
    41.             method: 'GET',
    42.             success: function(messageInfos) {
    43.                 // console.log(messageInfos);
    44.                 var divE = "";
    45.                 for(var message of messageInfos){
    46.                     divE += '
      ' + message.author + '留言:' + message.message;
    47.                 }
    48.                 $('.container').append(divE);
    49.                 
    50.             },
    51.             error: function(error) {
    52.                 console.error('获取留言列表时发生错误:', error);
    53.             }
    54.         });
    55.  
    56.         // 监听表单提交事件
    57.         $('#messageForm').submit(function(event) {
    58.             event.preventDefault(); // 阻止表单默认提交行为
    59.             var author = $('#author').val();
    60.             var content = $('#content').val();
    61.             if (author && content) {
    62.                 // 发送 AJAX 请求保存留言
    63.                 $.ajax({
    64.                     url: '/message/publish',
    65.                     method: 'POST',
    66.                     data: { author: author, message: content },
    67.                     success: function(result) {
    68.                         console.log(result);
    69.                         //构造节点
    70.                         var divE = '
      ' + author + '留言:' + content;
    71.                         // 将节点添加到页面上
    72.                         $('.container').append(divE);
    73.                         // 清空表单输入框
    74.                         $('#author').val('');
    75.                         $('#content').val('');
    76.  
    77.                     },
    78.                     error: function(error) {
    79.                         console.error('保存留言时发生错误:', error);
    80.                     }
    81.                 });
    82.             } else {
    83.                 alert('作者和内容不能为空！');
    84.             }
    85.         });
    86.     script>
    87. body>
    88. html>

    最后，我们进行测试：

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

  • 相关阅读:
    CentOS7安装jdk
    基于JAVA开发的在线双人联机坦克大战小游戏
    git 相关指令总结（持续更新中......）
    iperf带宽探测工具
    Spring—Bean的装配方式—基于注解的七种装配方式
    Genesis公链：夯实Web 3.0发展底座
    【代码随想录】day45
    测试工程师面试攻略：教你如何描述项目经验
    uniapp onPageScroll监听页面滚动不起作用？解决方案
    UML类图
  • 原文地址：https://blog.csdn.net/2301_76161469/article/details/138719221