留言板——增添功能(持久化存储数据，使用MyBatis)

news2024/11/25 19:52:49

一、数据准备

二、引入MyBatis 和 MySQL驱动依赖

三、配置MySQL账号密码

四、编写后端代码

五、调整前端代码

六、测试

之前的代码：综合性练习（后端代码练习3）——留言板_在线留言板前后端交互-CSDN博客

一、数据准备

创建数据库表的SQL：

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;

ON UPDATE now()：当数据发生更新操作时，自动把该列的值设置为now()，now() 可以替换成其他获取时间的标识符，比如：CURRENT_TIMESTAMP()，LOCALTIME()等。

MySQL < 5.6.5时：

1、只有TIMESTAMP支持自动更新。

2、一个表只能有一列设置自动更新。

3、不允许同时存在两个列，其中一列设置了DEFAULT CURRENT_TIMESTAMP，另一个设置了ON UPADTE CURRENT_TIMESTAMP。

MySQL >= 5.6.5时：

1、TIMESTAMP 和 DATETIME都支持自动更新，且可以有多列。

二、引入MyBatis 和 MySQL驱动依赖

修改pom.xml文件，添加内容如下：

<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>3.0.3</version>
</dependency>
<dependency>
    <groupId>com.mysql</groupId>
    <artifactId>mysql-connector-j</artifactId>
    <scope>runtime</scope>
</dependency>

或者使用插件EditStarters，如图：

三、配置MySQL账号密码

application.yml配置信息如下：

# 数据库配置
spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/mybatis_test?characterEncoding=utf8&useSSL=false
    username: root
    password: 1234
    driver-class-name: com.mysql.cj.jdbc.Driver

mybatis:
  # 配置 mybatis xml 的文件路径，在 resources/mapper 创建所有表的 xml 文件
  mapper-locations: classpath:mybatis/**Mapper.xml
  configuration: # 配置打印 MyBatis日志
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    map-underscore-to-camel-case: true #配置驼峰自动转换

四、编写后端代码

MessageInfo 实体类：

@Data
public class MessageInfo {
    private String from;
    private String to;
    private String message;
    private Integer deleteFlag;
    private Date createTime;
    private Date updateTime;
}

controller代码：

@RestController
@RequestMapping("/message")
public class MessageController {
//    List<MessageInfo> messageInfos = new ArrayList<>();
    @Autowired
    MessageService messageService;
    /**
     * 发布留言
     */
    @RequestMapping("/publish")
    public Boolean publish(MessageInfo messageInfo) {
        //参数校验
        if(!StringUtils.hasLength(messageInfo.getFrom())
            || !StringUtils.hasLength(messageInfo.getTo())
            || !StringUtils.hasLength(messageInfo.getMessage())) {
            return false;
        }
        //存留言
//        messageInfos.add(messageInfo);
        Integer result = messageService.publishMessage(messageInfo);
        if(result > 0) {
            return true;
        }
        return false;
    }
    /**
     * 获取留言
     */
    @RequestMapping("/getList")
    public List<MessageInfo> getList() {
        return messageService.getMessageInfos();
    }
}

service代码：

@Service
public class MessageService {
    @Autowired
    MessageInfoMapper messageInfoMapper;
    public Integer publishMessage(MessageInfo messageInfo) {
        return messageInfoMapper.insertMessage(messageInfo);//插入信息
    }
    public List<MessageInfo> getMessageInfos() {
        return messageInfoMapper.selectAllList();//获取信息
    }
}

mapper代码：

@Mapper
public interface MessageInfoMapper {
    /**
     * 发布留言
     */
    @Insert("insert into message_info (`from`, `to`, `message`) values (#{from}, #{to}, #{message})")
    Integer insertMessage(MessageInfo messageInfo);
    /**
     * 获取列表
     */
    @Select("select * from message_info")
    List<MessageInfo> selectAllList();
}

五、调整前端代码

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/getList",
            type: "get",
            success: function (messageInfos) {
                var finalHtml = "";
                for (var message of messageInfos) {
                    finalHtml += '<div>' + message.from + ' 对 ' + message.to + ' 说: ' + message.message + '</div>';
                }
                $(".container").append(finalHtml);
            }
        });

        function submit() {
            //1. 获取留言的内容
            var from = $('#from').val();
            var to = $('#to').val();
            var say = $('#say').val();
            //参数校验
            if (from == '' || to == '' || say == '') {
                return;
            }
            //发送ajax请求
            $.ajax({
                url: "/message/publish",
                type: "post",
                data: {
                    //不好理解
                    // from: from,
                    // to: to,
                    // say: say
                    from: $('#from').val(),
                    to: $('#to').val(),
                    message:$('#say').val()
                },
                success: function (result) {
                    if (result) {
                        //2. 构造节点
                        var divE = "<div>" + from + "对" + to + "说:" + say + "</div>";
                        //3. 把节点添加到页面上    
                        $(".container").append(divE);
                        //4. 清空输入框的值
                        $('#from').val("");
                        $('#to').val("");
                        $('#say').val("");
                    } else{
                        alert("输入不合法");
                    }
                }
            });
        }

    </script>
</body>

</html>