表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】

文章目录

• 一、准备工作
• 二、约定前后端交互接口
• 三、实现服务器端代码
• 四、调整前端页面代码
• 五、数据存入文件
• 六、数据存入数据库
• 

  ---

  一、���备工作

  1) 创建 maven 项目   2) 创建必要的目录 webapp, WEB-INF, web.xml；web.xml如下：

  
       Archetype Created Web Application
  

  3) 引入依赖（Servlet、Jackson）

  4) 把表白墙前端页面代码拷贝到 webapp 目录中

   

  二、约定前后端交互接口

  所谓 "前后端交互接口" 是进行 Web 开发中的关键环节。

  为了完成前后端交互，要约定两个交互接口：

  1.从服务器上获取到所有消息：

  请求: GET/message

  响应: JSON 格式

  {

         {from:"xxx" ，to:"xxx", message:"xxxxxx"}

          ..............

          .............

  }

  2.往服务器上提交数据

  请求: body 也为 JSON 格式    

  POST/message

   {from:"xxx" ，to:"xxx", message:"xxxxxx"}

  响应: JSON 格式

  {ok:1}

  三、实现服务器端代码

  //这个类表示一条消息的数据格式
  class Message{
          public String from;
          public String to;
          public String message;
  }
  @WebServlet("/message")
  public class MessageServlet extends HttpServlet {
      // 用于转换 JSON 字符串
      private ObjectMapper objectMapper = new ObjectMapper();
      // 用于保存所有的留言
      private List messageList = new ArrayList();
      //doGet方法用来从服务器上获取消息
      @Override
      protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
          resp.setContentType("application/json;charset=utf-8");
          //writeValue就是把messageList对象转换成json格式的字符串，并通过写入响应(resp.getWriter())返回
          objectMapper.writeValue(resp.getWriter(),messageList);
      }
      //doPost方法用来把客户端的数据提交到服务器
      @Override
      protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
          //readValue第一个参数可以支持一个字符串，也可以放inputStream对象;第二个参数是用来接收读取到的结果
          //返回值放到Message对象中
          //通过这个代码就完成了读取body，并且解析成json的过程
          Message message = objectMapper.readValue(req.getInputStream(),Message.class);
          messageList.add(message);
          resp.setContentType("application/json;charset=utf-8");
          resp.getWriter().write("{\"ok\":1}");
      }
  }

  四、调整前端页面代码

   
      
          //1.在页面加载的时候访问服务器，从服务器这边获取到消息列表，并展示出来
          function load(){
              $.ajax({
                  type:'GET',
                  url:'message',
                  success: function(data,status){
                      let container = document.querySelector('.container');
                      for(let message of data){
                          let row = document.createElement('div');
                          row.className = 'row';
                          row.innerHTML = message.from + '对' + message.to + '说： ' + message.message;
                          container.appendChild(row);
                      }
                  }
              });
          }
          load();
          //2.点击提交按钮的时候，把当前的数据构造成一个http请求，发送给服务器
          let submitButon = document.querySelector('#submit');
          submitButon.onclick = function(){
              //1.先获取到编辑框中的内容
              let edits = document.querySelectorAll('.edit');
              console.log(edits);
              let from = edits[0].value;
              let to = edits[1].value;
              let message = edits[2].value;
              console.log(from+'对'+to+'说,'+message);
              if(from == '' || to == '' || message == ''){
                  return;
              }   
              //2.根据内容构造html元素（.row里面包含用户输入的话
              let row = document.createElement('div');
              row.className = 'row';
              row.innerHTML = from+'对'+to+'说，'+message;
              //3.把这个元素添加到DOM树上
              let container = document.querySelector('.container');
              container.appendChild(row);
              //4.清空原来的输入框
              for(let i=0; i