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

📜表白墙/留言墙初级Spring Boot项目（此篇博客的简略版，不带MyBatis数据库开发）

目录

1、项目前端页面及项目文件架构展示

1.1、项目前端页面展示：

1.2、项目文件架构展示：

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

3、然后，创建Spring Boot项目，导入下列依赖

4、编写前端页面

5、配置并连接数据库（数据库相关工作）

5.1、数据库分析及建库建表语句

5.2、连接数据库(yml文件)并配置相关配置

6、编写后端代码

6.1、数据库实体类(Model)

6.2、Controller —— 控制层

方法publishMessage处理逻辑：

方法getMessageInfo处理逻辑：

6.3、Service —— 业务逻辑层

6.4、Dao(此处命名为Mapper) —— 持久层

方法insertMessage处理逻辑：

方法selectAllMessage处理逻辑：

7、全部代码（超级全，含建库建表语句）含搭建教程：

依赖

建表：

yml配置文件书写

实体类：

Controller：

Service：

Dao(此处是Mapper)

前端：

---

1、项目前端页面及项目文件架构展示

1.1、项目前端页面展示：

1.2、项目文件架构展示：

此处用到了后端极其常见的三层架构

详细信息请看下面这个博客，其实如果是初学者的话，先简单按着SpringMVC的理解来也行，但两者是有区别的：

什么是SpringMVC？简单好理解！什么是应用分层？SpringMVC与应用分层的关系？ 什么是三层架构？SpringMVC与三层架构的关系？

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

讲解：

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

3、然后，创建Spring Boot项目，导入下列依赖

如何在idea中创建Springboot项目？ 手把手带你创建Springboot项目，稳！

导入下列依赖

4、编写前端页面

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

如图红框位置：

表白墙页面(messagewall.html)：

  
  
  
  
    .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;
    }
  




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

    谁: 
  
  

    对谁: 
  
  

    说什么: 
  
  
  




  // 页面加载时，请求后端，获取留言列表
  $.ajax({
    url: "/message/getMessageInfo",
    type: "get",
    success:function (message){
      for(var m of message){
        // 2. 拼接节点的 html
        var divE = "
"+ m.from +"对" + m.to + "说:" + m.message+"