表白墙/留言墙 —— 中级SpringBoot项目,MyBatis技术栈MySQL数据库开发,练手项目前后端开发(带完整源码) 全方位全步骤手把手教学

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS PostgreSQL,集群系列 2核4GB
简介: 本文是一份全面的表白墙/留言墙项目教程,使用SpringBoot + MyBatis技术栈和MySQL数据库开发,涵盖了项目前后端开发、数据库配置、代码实现和运行的详细步骤。

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):

<!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集合的所有数据,前端遍历集合,并将其展示在前端页面上

5、配置并连接数据库(数据库相关工作)

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

建库建表语句:

库在此处就不指定了,放你自己常用的库下或者新建都行

DROP TABLE IF EXISTS message_info;
CREATE TABLE `message_info` (
 `id` INT ( 11 ) NOT NULL AUTO_INCREMENT,
 `from` VARCHAR ( 127 ) NOT NULL,
 `to` VARCHAR ( 127 ) NOT NULL,
 `message` VARCHAR ( 256 ) NOT NULL,
 `delete_flag` TINYINT ( 4 ) DEFAULT 0 COMMENT '0-正常, 1-删除',
 `create_time` DATETIME DEFAULT now(),
 `update_time` DATETIME DEFAULT now() ON UPDATE now(),
PRIMARY KEY ( `id` )
) ENGINE = INNODB DEFAULT CHARSET = utf8mb4;

数据库分析:

你也可以输入 desc userinfo; 命令来在你的客户端查看建表的各字段信息,和我上面这张图表达的意思一样

解析如下:

  • id 整数类型的自增字段 作为主键
  • from 字符串类型 用于存储消息发送者信息
  • to 字符串类型 用于存储消息接收者信息
  • message 字符串类型 用于存储两者间发送的消息内容
  • delete_flag 小整数类型(0或1) 此处默认设置为0 用于标记信息是否被删除(0表示正常,1表示删除)
  • create_time DATETIME 类型 用于存储消息创建时间 默认为当前时间
  • update_time DATETIME 类型 用于存储消息更新时间 默认为当前时间,并且会在更新时自动更新为当前时间

字符集采用utf8mb4,自增主键是id

默认为...即若不主动设置,则为默认值

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

你的application文件后缀大概率是 .properties ,将其后缀改为 .yml 即可

yml配置如下:

spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/message?characterEncoding=utf8&useSSL=false
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  configuration: # 配置打印 MyBatis 日志
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    map-underscore-to-camel-case: true #配置驼峰⾃动转换
  # 配置 mybatis xml 的⽂件路径,在 resources/mapper 创建所有表的 xml ⽂件  classpath指的是resources
  mapper-locations: classpath:mapper/**Mapper.xml

mybatis下面不懂得还好,我都给注释了!如果是前几行不懂的话,那完蛋,你最好先稍微学习下mybatis,前六行的作用是连接数据库

第三行的ip地址、端口号、数据库库名以及第四行和第五行的信息根据自己实际情况修改!!!

6、编写后端代码

yml配置在上面

6.1、数据库实体类(Model)

为实现分层架构,定义Model层,其实Model层也算Dao层的一部分,然后将对应的实体类命名为MessageInfo

这其中的各个属性对应数据库中的各个字段

以下是全部代码:

import lombok.Data;
import java.util.Date;

@Data    // 组合注解,集成了@Getter @Setter @ToString 等注解
public class MessageInfo {
    private Integer id;
    private String from;
    private String to;
    private String message;
    private Date createTime;
    private Date updateTime;

}

6.2、Controller —— 控制层

注意,Controller层、Serbice层、Dao层密切相关,所以Controller代码里就行Service和Dao层的部分,不要慌,我的代码是绝对完整正确的!,跟着我的讲解走并且理解就行!

接收前端发送的请求,对请求进行处理,并响应数据

全部代码如下:

import com.example.messagewall_mybatis.model.MessageInfo;
import com.example.messagewall_mybatis.service.MessageService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

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

    @Autowired
    private MessageService messageService;

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

        // 添加留言
        messageService.addMessage(messageInfo);
        return true;
    }

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

        return messageService.getMessageInfo();
    }
}

下面这个注入了MessageService,该类里面都是对数据库进行增删改查的方法!

方法publishMessage处理逻辑:

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

方法getMessageInfo处理逻辑:

  • 调用Service中的getMessageInfo方法,从数据库中查询数据,并返回给前端

6.3、Service —— 业务逻辑层

处理具体的业务逻辑

全部代码如下:

import com.example.messagewall_mybatis.mapper.MessageMapper;
import com.example.messagewall_mybatis.model.MessageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class MessageService {
    @Autowired
    private MessageMapper messageMapper;
    public void addMessage(MessageInfo messageInfo) {
        messageMapper.insertMessage(messageInfo);
    }

    public List<MessageInfo> getMessageInfo() {
        return messageMapper.selectAllMessage();
    }
}

下面这个注入了MessageService,该接口里面都是实现对数据库进行增删改查的具体操作!

两个方法的定义逻辑:

  • Service层属于声明和调用,对数据库的具体操作在Mapper中
  • 可以看到,addMessage和getMessageInfo实际都是再次调用Mapper中的操作
  • addMessage 表示向数据库中添加信息
  • getMessageInfo 表示从数据库中查询所有的信息

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

负责数据访问操作,包括数据的增、删、改、查

全部代码如下:

import com.example.messagewall_mybatis.model.MessageInfo;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface MessageMapper {

    @Insert("insert into message_info(`from`,`to`,`message`) values (#{from},#{to},#{message})")
    public void insertMessage(MessageInfo messageInfo);

    @Select("select * from message_info where delete_flag=0")
    List<MessageInfo> selectAllMessage();
}

此处因为SQL语句过于简单,所以我选择了使用注解,当然,你使用XML当然也可以,按你的写作风格就行,但若你是初学者又刚好了解注解,那么按着我的来更方便一些!

方法insertMessage处理逻辑:

定义Insert注解,将messageInfo实体类中的from、to、message三个属性的值赋值给mossage_info表中对应的三个属性

方法selectAllMessage处理逻辑:

定义Select注解,查询message_info表中未被逻辑删除的数据,并将其放到集合中

至此,本项目就讲解完成了!

前路漫漫,数年磨剑只求一朝天下知!希望本篇博客给您进了些绵薄之力,感谢您的阅读!

7、全部代码(超级全,含建库建表语句)含搭建教程:

友情提示:若您是初学者,建议慢慢阅读博客,跟着步骤一步一步搭建项目,代码也是绝对正确的!

但同时也为时间紧迫者以及掌握了一些知识的人提供了快捷方案,直接把所有代码放在下面,并配上了简单的搭建教程(详细的在上面)

依赖

建表:

库自己指定就行

DROP TABLE IF EXISTS message_info;
CREATE TABLE `message_info` (
 `id` INT ( 11 ) NOT NULL AUTO_INCREMENT,
 `from` VARCHAR ( 127 ) NOT NULL,
 `to` VARCHAR ( 127 ) NOT NULL,
 `message` VARCHAR ( 256 ) NOT NULL,
 `delete_flag` TINYINT ( 4 ) DEFAULT 0 COMMENT '0-正常, 1-删除',
 `create_time` DATETIME DEFAULT now(),
 `update_time` DATETIME DEFAULT now() ON UPDATE now(),
PRIMARY KEY ( `id` )
) ENGINE = INNODB DEFAULT CHARSET = utf8mb4;

yml配置文件书写

spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/message?characterEncoding=utf8&useSSL=false
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  configuration: # 配置打印 MyBatis 日志
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    map-underscore-to-camel-case: true #配置驼峰⾃动转换
  # 配置 mybatis xml 的⽂件路径,在 resources/mapper 创建所有表的 xml ⽂件  classpath指的是resources
  mapper-locations: classpath:mapper/**Mapper.xml

实体类:

import lombok.Data;

import java.util.Date;

@Data    // 组合注解,集成了@Getter @Setter @ToString 等注解
public class MessageInfo {
    private Integer id;
    private String from;
    private String to;
    private String message;
    private Date createTime;
    private Date updateTime;

}

Controller:

import com.example.messagewall_mybatis.model.MessageInfo;
import com.example.messagewall_mybatis.service.MessageService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

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

    @Autowired
    private MessageService messageService;

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

        // 添加留言
        messageService.addMessage(messageInfo);
        return true;
    }

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

        return messageService.getMessageInfo();
    }
}

Service:

import com.example.messagewall_mybatis.mapper.MessageMapper;
import com.example.messagewall_mybatis.model.MessageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class MessageService {
    @Autowired
    private MessageMapper messageMapper;

    public void addMessage(MessageInfo messageInfo) {
        messageMapper.insertMessage(messageInfo);
    }

    public List<MessageInfo> getMessageInfo() {
        return messageMapper.selectAllMessage();
    }
}

Dao(此处是Mapper)

import com.example.messagewall_mybatis.model.MessageInfo;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface MessageMapper {

    @Insert("insert into message_info(`from`,`to`,`message`) values (#{from},#{to},#{message})")
    public void insertMessage(MessageInfo messageInfo);

    @Select("select * from message_info where delete_flag=0")
    List<MessageInfo> selectAllMessage();
}

前端:

<!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>

🧸欢迎您于百忙之中阅读这篇博客,📜希望这篇博客给您带来了一些帮助,祝您生活愉快!

相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
目录
相关文章
|
19天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
23天前
|
Java 关系型数据库 MySQL
如何将Spring Boot + MySQL应用程序部署到Pivotal Cloud Foundry (PCF)
如何将Spring Boot + MySQL应用程序部署到Pivotal Cloud Foundry (PCF)
42 5
|
1月前
|
分布式计算 关系型数据库 MySQL
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型 图像处理 光通信 分布式计算 算法语言 信息技术 计算机应用
57 8
|
1月前
|
SQL 前端开发 关系型数据库
SpringBoot使用mysql查询昨天、今天、过去一周、过去半年、过去一年数据
SpringBoot使用mysql查询昨天、今天、过去一周、过去半年、过去一年数据
64 9
|
2天前
|
存储 Oracle 关系型数据库
数据库传奇:MySQL创世之父的两千金My、Maria
《数据库传奇:MySQL创世之父的两千金My、Maria》介绍了MySQL的发展历程及其分支MariaDB。MySQL由Michael Widenius等人于1994年创建,现归Oracle所有,广泛应用于阿里巴巴、腾讯等企业。2009年,Widenius因担心Oracle收购影响MySQL的开源性,创建了MariaDB,提供额外功能和改进。维基百科、Google等已逐步替换为MariaDB,以确保更好的性能和社区支持。掌握MariaDB作为备用方案,对未来发展至关重要。
10 3
|
2天前
|
安全 关系型数据库 MySQL
MySQL崩溃保险箱:探秘Redo/Undo日志确保数据库安全无忧!
《MySQL崩溃保险箱:探秘Redo/Undo日志确保数据库安全无忧!》介绍了MySQL中的三种关键日志:二进制日志(Binary Log)、重做日志(Redo Log)和撤销日志(Undo Log)。这些日志确保了数据库的ACID特性,即原子性、一致性、隔离性和持久性。Redo Log记录数据页的物理修改,保证事务持久性;Undo Log记录事务的逆操作,支持回滚和多版本并发控制(MVCC)。文章还详细对比了InnoDB和MyISAM存储引擎在事务支持、锁定机制、并发性等方面的差异,强调了InnoDB在高并发和事务处理中的优势。通过这些机制,MySQL能够在事务执行、崩溃和恢复过程中保持
14 3
|
2天前
|
SQL 关系型数据库 MySQL
数据库灾难应对:MySQL误删除数据的救赎之道,技巧get起来!之binlog
《数据库灾难应对:MySQL误删除数据的救赎之道,技巧get起来!之binlog》介绍了如何利用MySQL的二进制日志(Binlog)恢复误删除的数据。主要内容包括: 1. **启用二进制日志**:在`my.cnf`中配置`log-bin`并重启MySQL服务。 2. **查看二进制日志文件**:使用`SHOW VARIABLES LIKE &#39;log_%&#39;;`和`SHOW MASTER STATUS;`命令获取当前日志文件及位置。 3. **创建数据备份**:确保在恢复前已有备份,以防意外。 4. **导出二进制日志为SQL语句**:使用`mysqlbinlog`
18 2
|
15天前
|
关系型数据库 MySQL 数据库
Python处理数据库:MySQL与SQLite详解 | python小知识
本文详细介绍了如何使用Python操作MySQL和SQLite数据库,包括安装必要的库、连接数据库、执行增删改查等基本操作,适合初学者快速上手。
101 15
|
9天前
|
SQL 关系型数据库 MySQL
数据库数据恢复—Mysql数据库表记录丢失的数据恢复方案
Mysql数据库故障: Mysql数据库表记录丢失。 Mysql数据库故障表现: 1、Mysql数据库表中无任何数据或只有部分数据。 2、客户端无法查询到完整的信息。
|
16天前
|
关系型数据库 MySQL 数据库
数据库数据恢复—MYSQL数据库文件损坏的数据恢复案例
mysql数据库文件ibdata1、MYI、MYD损坏。 故障表现:1、数据库无法进行查询等操作;2、使用mysqlcheck和myisamchk无法修复数据库。

推荐镜像

更多