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

文章目录

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

• ---

  一、���备工作

  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('p');                        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('p');            row.className = 'row';            row.innerHTML = from+'对'+to+'说，'+message;            //3.把这个元素添加到DOM树上            let container = document.querySelector('.container');            container.appendChild(row);            //4.清空原来的输入框            for(let i=0; i