后端代码练习3——留言板

最新推荐文章于 2024-08-16 20:21:37 发布

仲夏是荔枝味

最新推荐文章于 2024-08-16 20:21:37 发布

阅读量602

点赞数 9

分类专栏： java-ee进阶文章标签： spring spring boot java

本文链接：https://blog.csdn.net/2202_76101487/article/details/141218959

版权

java-ee进阶专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1. 需求

1、输入留言信息，点击提交。后端把数据存储起来。

2、页面展示输入的表白墙信息。

3、网页刷新后，原本在网页上的内容不会消失

页面如下：

2. 准备工作

把前端页面放在项目中，代码如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        .container {
            width: 350px;
            height: 300px;
            margin: 0 auto;
            /* border: 1px black solid; */
            text-align: center;
        }
 
        .grey {
            color: grey;
        }
 
        .container .row {
            width: 350px;
            height: 40px;
 
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
 
        .container .row input {
            width: 260px;
            height: 30px;
        }
 
        #submit {
            width: 350px;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
            margin: 10px;
            border-radius: 5px;
            font-size: 20px;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <h1>留言板</h1>
        <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
        <div class="row">
            <span>谁:</span> <input type="text" name="" id="from">
        </div>
        <div class="row">
            <span>对谁:</span> <input type="text" name="" id="to">
        </div>
        <div class="row">
            <span>说什么:</span> <input type="text" name="" id="say">
        </div>
        <input type="button" value="提交" id="submit" onclick="submit()">
        <!-- <div>A 对 B 说: hello</div> -->
    </div>
 
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
 
        function submit(){
            //1. 获取留言的内容
            var from = $('#from').val();
            var to = $('#to').val();
            var say = $('#say').val();
            if (from== '' || to == '' || say == '') {
                return;
            }
            //2. 构造节点
            var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
            //3. 把节点添加到页面上    
            $(".container").append(divE);
 
            //4. 清空输入框的值
            $('#from').val("");
            $('#to').val("");
            $('#say').val("");
            
        }
        
    </script>
</body>
 
</html>

3. 约定前后端交互接口

3.1 需求分析

后端需要提供两个服务：

（1）发布留言：用户输入完留言信息后，服务器要把留言信息保存起来。

（2）获取留言：页面展示，需要从后端获取到所有的留言信息。

3.2 接口定义

1、发布留言

url：/message/publish

param（参数）：from，to，say

return：true / false（成功或失败）

2、获取留言
url：/message/getList

param：无

返回结果：[{from1, to1, say1}, {from2, to2, say2}, {from3, to3, say3}.....]

4. 实现服务器代码

4.1 lombok介绍

我们创建一个对象，写一些属性，之后通常要写很多get和set方法来方便后期对象来设置和调用这些方法和属性，但是一个对象可能会有很多get和set方法，我们可以使用封装的手段，讲这些get和set方法封装起来，这里就可以使用到 lombok工具包，在创建项目的时候，直接勾选lombok工具包即可；

如果在创建项目的时候没有勾选Lombok，我们可以在pom.xml文件里面添加依赖；如下：

4.1.1 使用lombok

lombok是通过一些注解的方式，帮助我们消除一些冗长的代码，使代码看起来更简洁，例如上面的 MessageInfo对象，可以写成下面这种形式：

package com.example.zxslzw2014_8_11;

import lombok.Data;

@Data
public class MessageInfo {
    public string say;
    public String from;
    public String to;
}

4.1.2 原理解释

@Data注解会帮助我们自动生成一些方法，包含getter/setter，equals，toString等。启动项目后，生成target文件，里面会有MessageInfo对象，get和set方法都有，如图：

上面就是加了@Data注解之后，IDEA反编译的class文件。

说明：

上面代码不是真正的字节码文件，而是IDEA根据字节码进行反编译后的文件。

反编译是将可执行的程序代码转换为某种形式的高级编程语言，使其具有更易读的格式。反编译是一种逆向工程，它的作用与编译器的作用相反。

上面是我们执行了Spring项目，才生成的 MessageInfo.class文件，可以看出lombok是一款在编译期间生成代码的工具包。

java的运行原理图如下：

lombok的作用如下图所示：

4.2 更快捷的引入lombok依赖

上述引入lombok依赖，需要去找lombok的坐标，接下来介绍更简单引入依赖的方式：EditStarter。安装EditStarter，重启IDEA，在pom.xml文件里面点击右键选择generate：

当点击edit starters：

注意：不是所有依赖都可以在这里添加的，这个界面和SpringBoot创建项目界面一样；不在这里的依赖，还需要去Maven仓库查找坐标，添加依赖。

4.3 服务器代码实现

@RestController
@RequestMapping("/message")
public class MessageController {
    List<MessageInfo> messageInfos = new ArrayList<>();
 
    /**
     * 发布留言
     */
    @RequestMapping("/publish")
    public Boolean publish(MessageInfo messageInfo) {
        //参数校验
        if(!StringUtils.hasLength(messageInfo.getFrom())
            || !StringUtils.hasLength(messageInfo.getTo())
            || !StringUtils.hasLength(messageInfo.getSay())) {
            return false;
        }
        //存留言
        messageInfos.add(messageInfo);
        return true;
    }
    /**
     * 获取留言
     */
    @RequestMapping("/getList")
    public List<MessageInfo> getList() {
        return messageInfos;
    }
}

5. 修改前端页面代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>留言板</title>
  <style>
    .container {
      width: 350px;
      height: 300px;
      margin: 0 auto;
      /* border: 1px black solid; */
      text-align: center;
    }

    .grey {
      color: grey;
    }

    .container .row {
      width: 350px;
      height: 40px;

      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .container .row input {
      width: 260px;
      height: 30px;
    }

    #submit {
      width: 350px;
      height: 40px;
      background-color: orange;
      color: white;
      border: none;
      margin: 10px;
      border-radius: 5px;
      font-size: 20px;
    }
  </style>
</head>

<body>
<div class="container">
  <h1>留言板</h1>
  <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
  <div class="row">
    <span>谁:</span> <input type="text" name="" id="from">
  </div>
  <div class="row">
    <span>对谁:</span> <input type="text" name="" id="to">
  </div>
  <div class="row">
    <span>说什么:</span> <input type="text" name="" id="say">
  </div>
  <input type="button" value="提交" id="submit" onclick="submit()">
  <!-- <div>A 对 B 说: hello</div> -->
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
  $.ajax({
    url: "/message/getList",
    type: "get",
    success: function (messageInfos) {
      var finalHtml = "";
      for (var message of messageInfos) {
        finalHtml += '<div>' + message.from + ' 对 ' + message.to + ' 说: ' + message.say + '</div>';
      }
      $(".container").append(finalHtml);
    }
  });

  function submit() {
    //1. 获取留言的内容
    var from = $('#from').val();
    var to = $('#to').val();
    var say = $('#say').val();
    //参数校验
    if (from == '' || to == '' || say == '') {
      return;
    }
    //发送ajax请求
    $.ajax({
      url: "/message/publish",
      type: "post",
      data: {
        //不好理解
        // from: from,
        // to: to,
        // say: say
        from: $('#from').val(),
        to: $('#to').val(),
        say:$('#say').val()
      },
      success: function (result) {
        if (result) {
          //2. 构造节点
          var divE = "<div>" + from + "对" + to + "说:" + say + "</div>";
          //3. 把节点添加到页面上
          $(".container").append(divE);
          //4. 清空输入框的值
          $('#from').val("");
          $('#to').val("");
          $('#say').val("");
        } else{
          alert("输入不合法");
        }
      }
    });
  }

</script>
</body>

</html>

添加两个ajax请求，一个点击提交按钮，获取留言板写的信息并把信息放在页面上；一个是拿到服务器所有的留言信息，放在页面上。

6.运行测试

输入内容，点击提交，如图：

点击刷新之后发现，留言信息不回消失，如下所示：

因为此时的数据存储在服务器的内存中，如果重启服务器，上面的信息就会消失了。

ps：本次的内容就到这里了，如果对你有所帮助的话，就请一键三连哦！！！

本文的封面来自：bilibili苏杉杉的pv，侵权删 url：https://www.bilibili.com/video/BV1vo4y167eh/?spm_id_from=333.999.0.0&vd_source=866da5be2ef0ddd213b053523da53138
————————————————

电子签名：上嘉路