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

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

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

目录

项目前端页面展示： 

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

然后，创建一个SpringBoot项目

编写前端页面

编写后端代码

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

2、逻辑代码 

方法publishMessage处理逻辑：

方法getMessageInfo处理逻辑：

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

---

项目前端页面展示： 

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

讲解：

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

然后，创建一个SpringBoot项目

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

编写前端页面

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

如图红框位置：

表白墙页面(messagewall.html)：

  
  
  
  




  
留言板
  
输入后点击提交, 会将信息显示下方空白处
  

    谁: 
  
  

    对谁: 
  
  

    说什么: 
  
  
  

代码逻辑：

1.         从input输入框内获取from，to，message三个参数，向后端发送post请求并将参数发送过去，后端接收参数并保存，前端页面也将这段数据直接展示在页面上
2.         每次刷新页面，前端向后端发送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 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 getMessageInfo(){

        return messageInfos;
    }
}

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

方法publishMessage处理逻辑：

1. 接收前端传来的数据，自动将其封装为MessageInfo类型
2. 进行参数的校验，判断三个参数是否有空，若有空，返回false(失败)
3. 若参数正确，则添加留言，往集合中添加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;