表白墙/留言墙 —— 初级SpringBoot项目，练手项目前后端开发(带完整源码) 全方位全步骤手把手教学

dream_ready

已于 2023-10-30 18:56:49 修改

阅读量2.1k

点赞数 52

文章标签： spring boot 后端 java 前端 spring intellij-idea java-ee

于 2023-10-30 18:37:14 首次发布

本文链接：https://blog.csdn.net/dream_ready/article/details/134124872

版权

本文详细介绍了一个使用SpringBoot和前端开发的简单项目，涉及前后端交互接口设计、实体类MessageInfo的创建、session验证及Ajax请求的使用。项目包括前端页面展示、后端数据处理和所需包导入。

摘要由CSDN通过智能技术生成

🧸欢迎来到dream_ready的博客，📜相信你对这篇博客也感兴趣o (ˉ▽ˉ；)

用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证（带前后端源码）全方位全流程超详细教程

1、封装实体类 —— MessageInfo(单独创建一个.Java文件)

2、逻辑代码

方法publishMessage处理逻辑：

方法getMessageInfo处理逻辑：

后端项目代码中需要导入的包代码

项目前端页面展示：

首先，定义前后端交互接口

讲解：

此项目注重前后端信息的交互，舍去了登录的操作
提交留言 —— 点击提交后，前端从输入框获取三个参数的值，向后端发送这MessageInfo的三个参数的值，后端接收后保存
查看所有留言 —— 前端发送无参的请求，后端向前端返回一个List集合，前端遍历集合将数据展示到前端页面上

然后，创建一个SpringBoot项目

如何创建一个SpringBoot项目 —— 超详细教程

编写前端页面

在resource目录下的static目录下创建表白墙的html页面，此处我将其命名为 messagewall.html

如图红框位置：

表白墙页面(messagewall.html)：

<!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/getMessageInfo",
    type: "get",
    success:function (message){
      for(var m of message){
        // 2. 拼接节点的 html
        var divE = "<div>"+ m.from +"对" + m.to + "说:" + m.message+"</div>";
        //3. 把节点添加到页面上
        $(".container").append(divE);
      }
    }
  });
  function submit(){
    //1. 获取留言的内容
    var from = $('#from').val();
    var to = $('#to').val();
    var say = $('#say').val();
    if (from== '' || to == '' || say == '') {
      return;
    }
    // 发送请求
    $.ajax({
      url: "/message/publish",
      type: "post",
      data: {
        "from": from,
        "to": to,
        "message": say
      },
      success: function(result){
        if(result){
          // 添加成功
          // 2. 拼接节点的 html
          var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
          //3. 把节点添加到页面上
          $(".container").append(divE);

          //4. 清空输入框的值
          $('#from').val("");
          $('#to').val("");
          $('#say').val("");
        }else{
          // 添加失败
          alert("留言发布成功")
        }
      }
    });

  }

</script>
</body>

</html>

代码逻辑：

从input输入框内获取from，to，message三个参数，向后端发送post请求并将参数发送过去，后端接收参数并保存，前端页面也将这段数据直接展示在页面上
每次刷新页面，前端向后端发送get请求，后端响应回封装成List集合的所有数据，前端遍历集合，并将其展示在前端页面上

编写后端代码

1、封装实体类 —— MessageInfo(单独创建一个.Java文件)

内部三个参数，分别对应from，to，message三个参数，用来定义成集合中泛型对应的类型，存放前端传来的数据

@Data    // 组合注解，集成了@Getter @Setter @ToString 等注解
public class MessageInfo {
    private String from;
    private String to;
    private String message;

}

2、逻辑代码

创建Class文件，我将其命名为MessageController.Java

以下是全部代码：

@RequestMapping("/message")
@RestController
public class MessageController {

    private List<MessageInfo> messageInfos = new ArrayList<>();

    @RequestMapping("/publish")
    public Boolean publishMessage(MessageInfo messageInfo){
        // 进行参数的校验
        if(!StringUtils.hasLength(messageInfo.getFrom())
        || !StringUtils.hasLength(messageInfo.getTo())
        || !StringUtils.hasLength(messageInfo.getMessage())){
            return false;
        }

        // 添加留言
        messageInfos.add(messageInfo);
        return true;
    }

    @RequestMapping("/getMessageInfo")
    public List<MessageInfo> getMessageInfo(){

        return messageInfos;
    }
}

private List<MessageInfo> messageInfos = new ArrayList<>();定义了一个存放MessageInfo类型的集合来存放表白墙内的数据

方法publishMessage处理逻辑：

接收前端传来的数据，自动将其封装为MessageInfo类型
进行参数的校验，判断三个参数是否有空，若有空，返回false(失败)
若参数正确，则添加留言，往集合中添加messageInfo，并返回true

方法getMessageInfo处理逻辑：

向后端返回集合MessageInfo，集合中存放所有的表白墙数据

后端项目代码中需要导入的包代码

（可以手动导入我的，也可以自己导入，放在各自文件的最上面）

MessageInfo.Java：

import lombok.Data;

MessageController.Java：

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;