Servlet小小项目练习：表白墙页面的实现

妖狐艹你老母 2023-09-24 12:42 105阅读 0赞

下面我们将通过这个实例，去感受前后端交接的处理流程

首先我们先来看一个这样的html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>告白墙</title>
  8. </head>
  9. <body>
  10.     <!-- 通过内部样式style标签，引入CSS样式 -->
  11.     <style>
  12.         *{
  13.             /* 首先先去除浏览器样式 */
  14.             /* 将 内外边距设置为0,设置盒子模型为向内挤压 */
  15.             margin: 0;
  16.             padding: 0;
  17.             box-sizing: border-box;
  18.         }
  20.         .containner{
  21.             width: 100%;
  22.         }
  23.         h3{
  24.             /* 文本居中 */
  25.             text-align: center;
  26.             /* 上下边距为 20px，左右边距为0 */
  27.             padding: 20px 0;
  28.             font-size: 24px;
  29.         }
  31.         p{
  32.             text-align: center;
  33.             color: #666;
  34.             padding: 10px 0;
  35.         }
  37.         .row{
  38.             width: 400px;
  39.             height: 50px;
  40.             /* 上下外边距为零，左右外边距自适应 */
  41.             /* 就是元素水平居中操作 */
  42.             margin: 0 auto;
  43.             /* 弹性布局 */
  44.             display: flex;
  45.             /* 水平居中 */
  46.             justify-content: center;
  47.             /* 垂直居中 */
  48.             align-items: center;
  49.         }
  51.         .row span{
  52.             width: 60px;
  53.             font-size: 17px;
  54.         }
  55.         .row input{
  56.             width: 300px;
  57.             height: 40px;
  58.             line-height: 40px;
  59.             font-size: 20px;
  60.             text-indent: 0.5em;
  61.             outline: none;
  62.         }
  64.         .row #submit{
  65.             width: 360px;
  66.             height: 40px;
  67.             font-size: 20px;
  68.             line-height: 40px;
  69.             margin: 0 auto;
  70.             color: white;
  71.             background-color: orange;
  72.             border: none;
  73.             border-radius: 15px;
  74.             outline: none;
  75.         }
  76.         /* 当鼠标点击按钮的时候，会改变按钮颜色 */
  77.         .row #submit:active{
  78.             background-color: grey;
  79.         }
  80.     </style>
  81.     <div class="container">
  82.         <h3>表白墙</h3>
  83.         <p>输入后点击提交，会将信息显示在表格中</p>
  84.         <br>
  85.         <div class="row">
  86.             <span>谁: </span>
  87.             <input type="text">
  88.         </div>
  89.         <div class="row">
  90.             <span>对谁: </span>
  91.             <input type="text">
  92.         </div>
  93.         <div class="row">
  94.             <span>说什么: </span>
  95.             <input type="text">
  96.         </div>
  97.         <div class="row">
  98.             <button id="submit">提交</button>
  99.         </div>
  100.     </div>
  102.     <script>
  103.         let submitBtn = document.querySelector('#submit');
  104.         submitBtn.onclick = function(){
  105.             // 1、获取 3个input 文本框中的数据
  106.             let inputs = document.querySelectorAll('input');
  107.             let from = inputs[0].value;
  108.             let to = inputs[1].value;
  109.             let say = inputs[2].value;
  110.             if(from == ''|| to == '' || say == ''){
  111.                 // 用户填写的数据，并不完整。所以不提交。
  112.                 return;
  113.             }
  114.             // 2、生成一个新的 div，内容就是 三个 input 文本框的内容拼接
  115.             // 再把这个 元素，挂在DOM树上。
  116.             let newDiv = document.createElement('div');
  117.             newDiv.innerHTML = from + "对" + to +"说：" + say;
  118.             newDiv.className = 'row';
  119.             // 将新建节点，挂在 container 这个节点下面
  120.             let container = document.querySelector('.container');
  121.             container.appendChild(newDiv);
  122.         }
  123.     </script>
  124. </body>
  125. </html>

效果图

935eb1d46b5d4c39bd5665a6f93a091b.png

既然是前后端的交互我们就首先要搞清楚具体的流程

de645cd2da964bf191ae7fd021720c18.png

下面是我们的要达到的效果

97e29013aece4534814c1f9f7176f557.png

接下来让我们看看具体的代码怎么写

4d7b0ebf0ee24bf794c3c0ec5e7f9855.png

完整的servlet代码

  1. import com.fasterxml.jackson.databind.ObjectMapper;
  3. import javax.servlet.ServletException;
  4. import javax.servlet.annotation.WebServlet;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8. import java.io.IOException;
  9. import java.util.ArrayList;
  10. import java.util.List;
  12. // 我们后端用这个类来接收前端提交的数据
  13. class Message {
  14.     public String from;
  15.     public String to;
  16.     public String message;
  17. }
  18. // 这里只是把我们的数据存到了我们的内存中，服务器一重启，数据就没了
  19. @WebServlet("/message")
  20. public class MessageWallServlet extends HttpServlet{
  21.     // 因为前后端提交数据的格式是json，我们用jackson这个第三方库来接收处理前端传来的json类型的数据
  22.     private ObjectMapper objectMapper = new ObjectMapper(); // 又因为我们两个方法都有用到这个objectMapper这个类，我们把他放到
  23.     List<Message> messages = new ArrayList<>();
  24.     @Override // 这个接口用来前端从后端获取数据,并显示在页面上
  25.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  26.         // super.doGet(req, resp);
  27.         resp.setContentType("application/json; charset=utf-8");  // 设置返回的数据类型
  28.         // 把么message对象转成json格式的字符串
  30.         String body = objectMapper.writeValueAsString(messages);
  31.         resp.getWriter().write(body);  // 把json格式的数据写入返回响应的body当中
  33.     }
  35.     @Override // 这个接口用来后端接收从前端获取到的表单数据并储存起来
  36.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  37.         // super.doPost(req, resp);
  38.         Message message = objectMapper.readValue(req.getInputStream(), Message.class); // 读取数据到message对象当中
  39.         messages.add(message); // 最直接的办法就是把这个直接存到内存里
  40.         resp.setContentType("application/json; charset=utf-8"); // 设置返回的编码格式
  41.         // 因为前端给我的数据格式是json类型的，所以我们后端返回给前端的数据也是json类型的（为了统一格式）
  42.         resp.setStatus(200);
  43.         resp.getWriter().write("{\"ok\":1}");
  44.     }
  45. }

前端代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>表白墙</title>
  8.     <style>
  9.         * {
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container {
  16.             width: 800px;
  17.             margin: 10px auto;
  18.         }
  20.         .container h2 {
  21.             text-align: center;
  22.             margin: 30px 0px;
  23.         }
  25.         .row {
  26.             height: 50px;
  27.             display: flex;
  28.             justify-content: center;
  29.             margin-top: 5px;
  30.             line-height: 50px;
  31.         }
  33.         .row span {
  34.             height: 50px;
  35.             width: 100px;
  36.             line-height: 50px;
  37.         }
  39.         .row input {
  40.             height: 50px;
  41.             width: 300px;
  42.             line-height: 50px;
  43.         }
  45.         .row button {
  46.             width: 400px;
  47.             height: 50px;
  48.             color: white;
  49.             background-color: orange;
  50.             border: none;
  51.             border-radius: 10px;
  52.         }
  54.         .row button:active {
  55.             background-color: grey;
  56.         }
  57.     </style>
  58. </head>
  59. <body>
  60. <!-- 这是一个顶层容器, 放其他元素 -->
  61. <div class="container">
  62.     <h2>表白墙</h2>
  63.     <div class="row">
  64.         <span>谁</span>
  65.         <input type="text" id="from">
  66.     </div>
  68.     <div class="row">
  69.         <span>对谁</span>
  70.         <input type="text" id="to">
  71.     </div>
  73.     <div class="row">
  74.         <span>说什么</span>
  75.         <input type="text" id="message">
  76.     </div>
  78.     <div class="row">
  79.         <button>提交</button>
  80.     </div>
  81. </div>
  83. <!-- 引入ajax相关的内容，我们可以通过ajax构造get请求和post请求 -->
  84. <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
  85. <script>
  86.         let container = document.querySelector('.container');
  87.         let fromInput = document.querySelector('#from');
  88.         let toInput = document.querySelector('#to');
  89.         let messageInput = document.querySelector('#message');
  90.         let button = document.querySelector('button');
  91.         button.onclick = function() {
  92.             // 1. 把用户输入的内容获取到.获取输入框的对象
  93.             let from = fromInput.value;
  94.             let to = toInput.value;
  95.             let message = messageInput.value;
  96.             if (from == '' || to == '' || message == '') {
  97.                 return;
  98.             }
  99.             // 2. 构造一个 div, 把这个 div 插入到 .container 的末尾
  100.             let newDiv = document.createElement('div');
  101.             newDiv.className = 'row';
  102.             newDiv.innerHTML = from + " 对 " + to + " 说: " + message;
  103.             // 3. 把 div 挂在 container 里面
  104.             container.appendChild(newDiv);
  105.             // 4. 把之前的输入框内容进行清空
  106.             fromInput.value = '';
  107.             toInput.value = '';
  108.             messageInput.value = '';
  110.             // 5. [新的步骤] 需要把刚才输入框里取到的数据, 构造成 POST 请求, 交给后端服务器!
  111.             // 这里创建出了js一个对象，js对象中的每个方法和属性都是通过键值对这样的形式来表达的，键值对之间采用逗号进行分割，键和值之间用冒号来分割
  112.             // json中的键要求是字符串的形式
  113.             let messageJson = {
  114.                 "from": from,
  115.                 "to": to,
  116.                 "message": message
  117.             };
  118.             // 客户端也就是我们通过ajax发起的请求，这个请求通过网络发给我们的tomcat服务器，进而就会调用我们也就是后端的doxxx方法
  119.             // 之后也就是我们后端通过resp.getWriter.writer构造出http响应，通过我们的tomcat服务器传给我们的客户端，客户端这里收到数据就会触发客户端的代码（ajax的回调success函数）
  120.             $.ajax({
  121.                 type: 'post',
  122.                 // 相对路径的写法
  123.                 url: 'message',
  124.                 contentType: 'application/json;charset=utf8',
  125.                 // 绝对路径的写法
  126.                 // url: '/MessageWall/message',
  127.                 data: JSON.stringify(messageJson),
  128.                 success: function(body) {
  129.                     alert("提交成功!");
  130.                 },
  131.                 error: function() {
  132.                     // 会在服务器返回的状态码不是 2xx 的时候触发这个 error.
  133.                     alert("提交失败!");
  134.                 }
  135.             });
  136.         }
  137.         // 这个函数在页面加载的时候调用. 通过这个函数从服务器获取到当前的消息列表. 
  138.         // 并且显示到页面上. 
  139.         function load() {
  140.             $.ajax({
  141.                 type: 'get',
  142.                 url: 'message',
  143.                 success: function(body) {
  144.                     // 此处得到的 body 已经是一个 js 对象的数组了. 
  145.                     // ajax 自动帮我们进行类型转换了. 
  146.                     // 本来服务器返回的是 JSON 格式的字符串, ajax 会自动的根据 Content-Type 为 application/json
  147.                     // 对响应的 body 进行解析, 解析成 js 对象. 
  148.                     // 遍历数组的元素, 把内容构造到页面上. 
  149.                     let container = document.querySelector('.container');
  150.                     for (let message of body) {
  151.                         let newDiv = document.createElement('div');
  152.                         newDiv.className = 'row';
  153.                         newDiv.innerHTML = message.from + " 对 " + message.to + " 说 " + message.message;
  154.                         container.appendChild(newDiv);
  155.                     }
  156.                 }
  157.             })
  158.         }
  160.         // 函数调用写在这里, 就表示在页面加载的时候来进行执行. 
  161.         load();
  162.         // 整个前后端交互的流程，大致是我们打开这个html页面或者说刷新页面，就会调用我们的load函数，
  163.         //load函数中的ajax构造了一个get请求，发送给tomcat服务器，进而调用我们后端servlet代码中的doGet方法
  164.         // 我们通过doGet方法返回一个http响应，并通过tomcat服务器把响应传给客户端，
  165.         // 客户端接收到数据后就会调用ajax的回调函数succes函数，把数据显示在页面上
  168.     </script>
  169. </body>
  170. </html>

发表评论

表情：
评论列表 （有 0 条评论，105人围观）

还没有评论，来说两句吧...

相关阅读