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

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

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

目录

项目前端页面展示:

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

然后,创建一个SpringBoot项目

编写前端页面

编写后端代码

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

2、逻辑代码

方法publishMessage处理逻辑:

方法getMessageInfo处理逻辑:

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


项目前端页面展示:

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

讲解:

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

然后,创建一个SpringBoot项目

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

编写前端页面

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

如图红框位置:

表白墙页面(messagewall.html):

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>

代码逻辑:

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

编写后端代码

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

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

java 复制代码
@Data    // 组合注解,集成了@Getter @Setter @ToString 等注解
public class MessageInfo {
    private String from;
    private String to;
    private String message;

}

2、逻辑代码

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

以下是全部代码:

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处理逻辑:

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

方法getMessageInfo处理逻辑:

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

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

(可以手动导入我的,也可以自己导入,放在各自文件的最上面)

MessageInfo.Java:

java 复制代码
import lombok.Data;

MessageController.Java:

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;
相关推荐
monkey_meng4 分钟前
【Rust Iterator 之 fold,map,filter,for_each】
开发语言·后端·rust
运维&陈同学7 分钟前
【kafka01】消息队列与微服务之Kafka详解
运维·分布式·后端·微服务·云原生·容器·架构·kafka
木子七9 分钟前
vue3-setup中使用响应式
前端·vue
日拱一卒无有尽, 功不唐捐终入海12 分钟前
html转成图片
spring·maven
神仙别闹15 分钟前
基于Java实现的(GUI)华容道小游戏
java·gui
JosieBook17 分钟前
【面试题】2025年百度校招Java后端面试题
java·开发语言·网络·百度
请你打开电视看看18 分钟前
观察者模式
java·观察者模式·设计模式
廖子默18 分钟前
提供html2canvas+jsPDF将HTML页面以A4纸方式导出为PDF后,内容分页时存在截断的解决思路
前端·pdf·html
Mr.朱鹏21 分钟前
设计模式之策略模式-工作实战总结与实现
java·spring·设计模式·kafka·maven·策略模式·springbbot
Moment21 分钟前
毕业半年,终于拥有了两个近 500 star 的开源项目了 🤭🤭🤭
前端·后端·开源