devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

项目3-留言板

作者：Monodyee | 2024-03-26 08:45:23

赞

踩

项目3-留言板

1.创建项目

记得将project type改为maven

 将需要的包引入其中

 更改版本号

 

引入MYSQL相关包记得进行配置！！！

  1. spring:
  2.   datasource:
  3.     url: jdbc:mysql://127.0.0.1:3306/mycnblog?characterEncoding=utf8&useSSL=false
  4.     username: root
  5.     password: root
  6.     driver-class-name: com.mysql.cj.jdbc.Driver

2.前端页面的存放及测试

2.1 前端页面的存放 

放到该路径下！！！ 

2.2 前端页面的测试

启动服务器，测试接口!!!

成功！！！

3.用户接口定义 

需求分析
后端需要提供两个服务
1. 提交留言: 用户输⼊留⾔信息之后, 后端需要把留⾔信息保存起来（传参）
2. 展⽰留言: 页面展示时, 需要从后端获取到所有的留⾔信息（相应）

接⼝定义
1. 获取全部留⾔
全部留⾔信息, 我们⽤List来表⽰, 可以⽤JSON来描述这个List数据.
请求:

GET /message/getList 

响应: JSON 格式

[
 {
 "from": "⿊猫",
 "to": "⽩猫",
 "message": "喵"
 },{
 "from": "⿊狗",
 "to": "⽩狗",
 "message": "汪"
 },
 //...
]

浏览器给服务器发送⼀个 GET /message/getList 这样的请求, 就能返回当前⼀共有哪些留⾔
记录. 结果以 json 的格式返回过来

2. 发表新留言
请求: body 也为 JSON 格式 

POST /message/publish
{
 "from": "⿊猫",
 "to": "⽩猫",

 "message": "喵"
}

响应: JSON 格式.

{
 ok: 1
}

我们期望浏览器给服务器发送⼀个 POST /message/publish 这样的请求, 就能把当前的留⾔提交给服务器.

4.服务器代码的实现 

4.1 留言对象类

  1. package com.example.demo.model;
  2.  
  3. import lombok.Data;
  4.  
  5. @Data
  6. public class MessageInfo {
  7.     private String from;
  8.     private String to;
  9.     private String message;
  10. }

规范代码，使用三层架构！！！

使⽤List<MessageInfo> 来存储留⾔板信息

4.2 Controller类，主要代码 

  1. package com.example.demo;
  2.  
  3. import com.example.demo.model.MessageInfo;
  4. import org.springframework.util.StringUtils;
  5. import org.springframework.web.bind.annotation.RequestMapping;
  6. import org.springframework.web.bind.annotation.RestController;
  7.  
  8. import java.util.ArrayList;
  9. import java.util.List;
  10.  
  11. @RestController
  12. @RequestMapping("/message")
  13. public class controller {
  14.     private List<MessageInfo> messageInfos=new ArrayList<>();//存放前端返回的数据
  15.  
  16.     //将所有存放的数据返回
  17.     @RequestMapping("/getList")
  18.     public List<MessageInfo> getList() {
  19.         return messageInfos;
  20.     }
  21.  
  22.     //留言板相关操作，需要验证留言板操作是否正确，不为空时才能提交正确
  23.     @RequestMapping("/publish")
  24.     public boolean publish(MessageInfo messageInfo) {
  25.         System.out.println(messageInfo);
  26.         if (StringUtils.hasLength(messageInfo.getFrom())
  27.                 && StringUtils.hasLength(messageInfo.getTo())
  28.                 && StringUtils.hasLength(messageInfo.getMessage())) {
  29.             messageInfos.add(messageInfo);
  30.             return true;
  31.         }
  32.         return false;
  33.     }
  34. }

4.3 测试接口

先添加数据，再获取数据，即先测试/publish接口再测试/getList接口

 

测试成功！！！接口正确！！！

5.前后端交互 

修改前端代码

1. 添加 load 函数, ⽤于在⻚⾯加载的时候获取数据（一进来就直接执行这个接口）

相当于Java中的定义函数，定义了需要调用才行。

  1. load();
  2. function load() {
  3.  $.ajax({
  4.  type: "get",
  5.  url: "/message/getList",
  6.  success: function (result) {
  7. for (var message of result) {
  8.  var divE = "<div>" + message.from + "对" + message.to + "说:" + m
  9.  $(".container").append(divE);
  10.  }
  11.  }
  12.  });
  13. }

2.点击提交按钮出发的submit()

  1.         function submit(){
  2.             //1. 获取留言的内容
  3.             var from = $('#from').val();
  4.             var to = $('#to').val();
  5.             var say = $('#say').val();
  6.             if (from== '' || to == '' || say == '') {
  7.                 return;
  8.             }
  9.             $.ajax({
  10.                 type: "post",
  11.                 url: "/message/publish",
  12.                 data: {
  13.                     from: form,
  14.                     to: to,
  15.                     message: say
  16.                     // 注意变量要与前端定义一致，否则前端拿不到变量数据
  17.                 },
  18.                 success: function(result){
  19.                     if(result==true){
  20.                         //添加成功
  21.                         //2. 构造节点
  22.                         var divE = "<div>" + from + "对" + to + "说:" + say + "</div>";
  23.                         //3. 把节点添加到页面上
  24.                         $(".container").append(divE);
  25.                         //4. 清空输入框的值
  26.                         $('#from').val("");
  27.                         $('#to').val("");
  28.                         $('#say').val("");
  29.                     }else{
  30.                         alert("你输入有误哦!!!")
  31.                     }
  32.                 }
  33.             });
  34.         }

5.1 测试

前端代码测试无反应，开始排除错误！！！

前端和后端接口测试无误！！

考虑前后端交互有问题！！！

经过检查右侧拼写有误

同时我发现我们输入空值没有反应

我们发现是由于我们加入了该语句

删除，重新测试！！！

成功！！！

完整前端代码

  1. <!DOCTYPE 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.         <!-- <div>A 对 B 说: hello</div> -->
  63.     </div>
  64.  
  65.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  66.     <script>
  67.         load();
  68.         function load() {
  69.             $.ajax({
  70.                 type: "get",
  71.                 url: "/message/getList",
  72.                 success: function(result) {
  73.                     for (var message of result) {
  74.                         var divE = "<div>" + message.from + "对" + message.to + "说:" + message.message+"<div>";
  75.                         $(".container").append(divE);
  76.                         // 想在class底下添加这条语句
  77.                     }
  78.                 }
  79.             });
  80.         }
  81.         function submit(){
  82.             //1. 获取留言的内容
  83.             var from = $('#from').val();
  84.             var to = $('#to').val();
  85.             var say = $('#say').val();
  86.             $.ajax({
  87.                 type: "post",
  88.                 url: "/message/publish",
  89.                 data: {
  90.                     from: from,
  91.                     to: to,
  92.                     message: say
  93.                     // 注意变量要与前端定义一致，否则前端拿不到变量数据
  94.                 },
  95.                 success: function(result){
  96.                     if(result==true){
  97.                         //添加成功
  98.                         //2. 构造节点
  99.                         var divE = "<div>" + from + "对" + to + "说:" + say + "</div>";
  100.                         //3. 把节点添加到页面上
  101.                         $(".container").append(divE);
  102.                         //4. 清空输入框的值
  103.                         $('#from').val("");
  104.                         $('#to').val("");
  105.                         $('#say').val("");
  106.                     }else{
  107.                         alert("你输入有误");
  108.                     }
  109.                 }
  110.             });
  111.         }
  112.         
  113.     </script>
  114. </body>
  115.  
  116. </html>

5.2 前端修饰

未完！！！ 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/315838
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号