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

    目录

    一、数据准备

    二、引入MyBatis 和 MySQL驱动依赖

    三、配置MySQL账号密码

    四、编写后端代码

    五、调整前端代码

    六、测试

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

    一、数据准备

            创建数据库表的SQL：

    1. DROP TABLE IF EXISTS message_info;
    2. CREATE TABLE `message_info` (
    3.         `id` INT ( 11 ) NOT NULL AUTO_INCREMENT,
    4.         `from` VARCHAR ( 127 ) NOT NULL,
    5.         `to` VARCHAR ( 127 ) NOT NULL,
    6.         `message` VARCHAR ( 256 ) NOT NULL,
    7.         `delete_flag` TINYINT ( 4 ) DEFAULT 0 COMMENT '0-正常, 1-删除',
    8.         `create_time` DATETIME DEFAULT now(),
    9.         `update_time` DATETIME DEFAULT now() ON UPDATE now(),
    10. PRIMARY KEY ( `id` ) 
    11. ) 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文件，添加内容如下：

    1. <dependency>
    2.     <groupId>org.mybatis.spring.bootgroupId>
    3.     <artifactId>mybatis-spring-boot-starterartifactId>
    4.     <version>3.0.3version>
    5. dependency>
    6. <dependency>
    7.     <groupId>com.mysqlgroupId>
    8.     <artifactId>mysql-connector-jartifactId>
    9.     <scope>runtimescope>
    10. dependency>

            或者使用插件EditStarters，如图：

    三、配置MySQL账号密码

            application.yml配置信息如下：

    1. # 数据库配置
    2. spring:
    3.   datasource:
    4.     url: jdbc:mysql://127.0.0.1:3306/mybatis_test?characterEncoding=utf8&useSSL=false
    5.     username: root
    6.     password: 1234
    7.     driver-class-name: com.mysql.cj.jdbc.Driver
    8.  
    9. mybatis:
    10.   # 配置 mybatis xml 的文件路径，在 resources/mapper 创建所有表的 xml 文件
    11.   mapper-locations: classpath:mybatis/**Mapper.xml
    12.   configuration: # 配置打印 MyBatis日志
    13.     log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    14.     map-underscore-to-camel-case: true #配置驼峰自动转换

    四、编写后端代码

            MessageInfo 实体类：

    1. @Data
    2. public class MessageInfo {
    3.     private String from;
    4.     private String to;
    5.     private String message;
    6.     private Integer deleteFlag;
    7.     private Date createTime;
    8.     private Date updateTime;
    9. }

            controller代码：

    1. @RestController
    2. @RequestMapping("/message")
    3. public class MessageController {
    4. //    List messageInfos = new ArrayList<>();
    5.     @Autowired
    6.     MessageService messageService;
    7.     /**
    8.      * 发布留言
    9.      */
    10.     @RequestMapping("/publish")
    11.     public Boolean publish(MessageInfo messageInfo) {
    12.         //参数校验
    13.         if(!StringUtils.hasLength(messageInfo.getFrom())
    14.             || !StringUtils.hasLength(messageInfo.getTo())
    15.             || !StringUtils.hasLength(messageInfo.getMessage())) {
    16.             return false;
    17.         }
    18.         //存留言
    19. //        messageInfos.add(messageInfo);
    20.         Integer result = messageService.publishMessage(messageInfo);
    21.         if(result > 0) {
    22.             return true;
    23.         }
    24.         return false;
    25.     }
    26.     /**
    27.      * 获取留言
    28.      */
    29.     @RequestMapping("/getList")
    30.     public List getList() {
    31.         return messageService.getMessageInfos();
    32.     }
    33. }

            service代码：

    1. @Service
    2. public class MessageService {
    3.     @Autowired
    4.     MessageInfoMapper messageInfoMapper;
    5.     public Integer publishMessage(MessageInfo messageInfo) {
    6.         return messageInfoMapper.insertMessage(messageInfo);//插入信息
    7.     }
    8.     public List getMessageInfos() {
    9.         return messageInfoMapper.selectAllList();//获取信息
    10.     }
    11. }

            mapper代码：

    1. @Mapper
    2. public interface MessageInfoMapper {
    3.     /**
    4.      * 发布留言
    5.      */
    6.     @Insert("insert into message_info (`from`, `to`, `message`) values (#{from}, #{to}, #{message})")
    7.     Integer insertMessage(MessageInfo messageInfo);
    8.     /**
    9.      * 获取列表
    10.      */
    11.     @Select("select * from message_info")
    12.     List selectAllList();
    13. }

    五、调整前端代码

            messageWall.html代码如下：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>留言板title>
    8.     <style>
    9.         .container {
    10.             width: 350px;
    11.             height: 300px;
    12.             margin: 0 auto;
    13.             /* border: 1px black solid; */
    14.             text-align: center;
    15.         }
    16.  
    17.         .grey {
    18.             color: grey;
    19.         }
    20.  
    21.         .container .row {
    22.             width: 350px;
    23.             height: 40px;
    24.  
    25.             display: flex;
    26.             justify-content: space-between;
    27.             align-items: center;
    28.         }
    29.  
    30.         .container .row input {
    31.             width: 260px;
    32.             height: 30px;
    33.         }
    34.  
    35.         #submit {
    36.             width: 350px;
    37.             height: 40px;
    38.             background-color: orange;
    39.             color: white;
    40.             border: none;
    41.             margin: 10px;
    42.             border-radius: 5px;
    43.             font-size: 20px;
    44.         }
    45.     style>
    46. head>
    47.  
    48. <body>
    49.     <div class="container">
    50.         <h1>留言板h1>
    51.         <p class="grey">输入后点击提交, 会将信息显示下方空白处p>
    52.         <div class="row">
    53.             <span>谁:span> <input type="text" name="" id="from">
    54.         div>
    55.         <div class="row">
    56.             <span>对谁:span> <input type="text" name="" id="to">
    57.         div>
    58.         <div class="row">
    59.             <span>说什么:span> <input type="text" name="" id="say">
    60.         div>
    61.         <input type="button" value="提交" id="submit" onclick="submit()">
    62.         
    63.     div>
    64.  
    65.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script>
    66.     <script>
    67.         $.ajax({
    68.             url: "/message/getList",
    69.             type: "get",
    70.             success: function (messageInfos) {
    71.                 var finalHtml = "";
    72.                 for (var message of messageInfos) {
    73.                     finalHtml += '
      ' + message.from + ' 对 ' + message.to + ' 说: ' + message.message + '
      '      ;
    74.                 }
    75.                 $(".container").append(finalHtml);
    76.             }
    77.         });
    78.  
    79.         function submit() {
    80.             //1. 获取留言的内容
    81.             var from = $('#from').val();
    82.             var to = $('#to').val();
    83.             var say = $('#say').val();
    84.             //参数校验
    85.             if (from == '' || to == '' || say == '') {
    86.                 return;
    87.             }
    88.             //发送ajax请求
    89.             $.ajax({
    90.                 url: "/message/publish",
    91.                 type: "post",
    92.                 data: {
    93.                     //不好理解
    94.                     // from: from,
    95.                     // to: to,
    96.                     // say: say
    97.                     from: $('#from').val(),
    98.                     to: $('#to').val(),
    99.                     message:$('#say').val()
    100.                 },
    101.                 success: function (result) {
    102.                     if (result) {
    103.                         //2. 构造节点
    104.                         var divE = "
      " + from + "对" + to + "说:" + say + "
      "      ;
    105.                         //3. 把节点添加到页面上    
    106.                         $(".container").append(divE);
    107.                         //4. 清空输入框的值
    108.                         $('#from').val("");
    109.                         $('#to').val("");
    110.                         $('#say').val("");
    111.                     } else{
    112.                         alert("输入不合法");
    113.                     }
    114.                 }
    115.             });
    116.         }
    117.  
    118.     script>
    119. body>
    120.  
    121. html>

    六、测试

            现在数据库的message_info表内容如下：

            浏览器访问：http://127.0.0.1:8080/messagewall.html，页面如下：

            

            往输入框填写内容，如图：

                    

            点击提交：

            

            重启服务器后，再次访问改页面，数据也不会丢失，因为我们把数据放进数据库里了，进行了持久化存储。

  • 相关阅读:
    SQL Server数据库理论篇（进行时......）
    Springboot项目打jar包的两种方式 + 本地测试jar包是否可以启动
    go post 请求 --chatGPT
    高防服务器中的秒解服务器什么意思？
    Ambari安装部署—基础软件环境说明
    Lombok依赖
    maven-mvnd使用步骤，新版Maven，构建速度大幅提升
    MongoDB UPDATE使用$setOnInsert为新插入数据设置默认值
    JAVA毕设项目客服管理系统（Vue+Mybatis+Maven+Mysql+sprnig+SpringMVC）
    通过Shell脚本自动安装Hive&JDBC测试&提供CDH5网盘地址
  • 原文地址：https://blog.csdn.net/cool_tao6/article/details/139333752