三、编写前端代码 💫
这里面的get和POST方法，和后端的相互对应，前端发出post，后端去接收，并且，在服务器的日志上显示，前端的GET，被后端进行的保存，只要服务器没有关闭，就会一致保存你的记录（前端编写的就是说，让记录保存在页面上，你下次打开页面（但是服务器未关闭的情况下），就会出现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表白墙</title> <style> /* * 通配符选择器, 是选中页面所有元素 */ * { /* 消除浏览器的默认样式. */ margin: 0; padding: 0; box-sizing: border-box; } .container { width: 600px; margin: 20px auto; } h1 { text-align: center; } p { text-align: center; color: #666; margin: 20px 0; } .row { /* 开启弹性布局 */ display: flex; height: 40px; /* 水平方向居中 */ justify-content: center; /* 垂直方向居中 */ align-items: center; } .row span { width: 80px; } .row input { width: 200px; height: 30px; } .row button { width: 280px; height: 30px; color: white; background-color: orange; /* 去掉边框 */ border: none; border-radius: 5px; } /* 点击的时候有个反馈 */ .row button:active { background-color: grey; } </style> </head> <body> <div class="container"> <h1>表白墙</h1> <p>输入内容后点击提交, 信息会显示到下方表格中</p> <div class="row"> <span>谁: </span> <input type="text"> </div> <div class="row"> <span>对谁: </span> <input type="text"> </div> <div class="row"> <span>说: </span> <input type="text"> </div> <div class="row"> <button id="submit">提交</button> </div> <!-- <div class="row"> xxx 对 xx 说 xxxx </div> --> </div> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> // 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示. // 点击的时候, 获取到三个输入框中的文本内容 // 创建一个新的 div.row 把内容构造到这个 div 中即可. let containerDiv = document.querySelector('.container'); let inputs = document.querySelectorAll('input'); let button = document.querySelector('#submit'); button.onclick = function() { // 1. 获取到三个输入框的内容 let from = inputs[0].value; let to = inputs[1].value; let msg = inputs[2].value; if (from == '' || to == '' || msg == '') { return; } // 2. 构造新 div let rowDiv = document.createElement('div'); rowDiv.className = 'row message'; rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg; containerDiv.appendChild(rowDiv); // 3. 清空之前的输入框内容 for (let input of inputs) { input.value = ''; } // 4. 把用户输入的数据, 构造出 HTTP 请求, 发送给服务器. let body = { //后三个变量是三个输入框的内容，前面的是字符串，后面的是变量名字 from: from, to: to, message: msg }; //1.ajax会根据输入的参数构造出http请求，发给服务器 //2.服务器会执行对应的doPost方法 $.ajax({ type: 'post', //url;'message'这个和下面写法相同，只不过是相对路径还是绝对路径，相对路径的基准路径，就是html所在路径，写了相对路径message,相当于在message基础上，再加一层/messageWall/message // url: '',/Users/lcl/messageWall/src/main/java/MessageServlet.java url: 'message', contentType: 'application/json; charset=utf-8', //js,中对象虽然和json非常相似，但是仍然是两个不同的东西，js标准库，提供了JSON.stringify方法，把js对象转换成json字符串(writeValueAsString) //还提供了JSON.parse,把json字符串转换成js对象（readValue) data: JSON.stringify(body), //3.响应回来之后，执行刚才设计好的success回调函数 success: function(body) { // 预期 body 中返回 ok console.log(body); } }); } //页面加载的时候，发送一个GET请求给服务器，从服务器拿到提交过的数据 $.ajax({ type:'get', url:'message', success:function (body) { //此时也需要把这个json字符串，反向转换回js对象数组，但是实际上，jQuery自动帮我们做好了这里的解析操作( resp.setContentType("application/json; charset=utf8");由于这个操作，服务器返回响应，所以它会转换成js对象数组)，此时形参body,已经是js的对象数组了，不需要我们使用JSON.parse进行解析 //此时就可以直接按照数组的方式来操作body,每个元素都是js对象 //1.遍历数组，取出每个js对象 //2.根据这里的js对象构造出页面元素，显示到页面上 //经典的循环，定义变量使用let，而不是int，js表示数字是number类型，包含了int和double //刚创建出的div,还需要加入到页面才能显示出来 //这个可以根据选择器，找到那个元素（相当于去派出所） let container=document.querySelector('.container'); for(let i=0;i<body.length;i++){ let message=body[i]; //此处message对象，就形如 /*{ from:"" to:"" message:"" }*/ // 构造出html元素，使用浏览器提供的api //html中的每个元素，同时都可以映射js中的一个对象 //通过对象的属性，也就能获取到页面的内容 //修改对象的属性，也就能更新页面的内容,这样也被叫做"文档对象模型"（文档html,js对象） let div=document.createElement('div'); //设置一个css的类，应用到css样式了 div.className='row'; //给div标签设置内容，此处显示一行文本,终点理解前后端交互流程 div.innerHTML=message.from+"对"+message.to+"说:"+message.message; //上户口的意思 container.appendChild(div); } } }) </script> </body> </html>
最后你连接的过程可能有几个误区.
1.你的前端页面不是说你在vs打开，而是说你的页面在服务器开始启动的时候，就已经被上传到TOMCAT上了，这时候你就需要在浏览器搜索，你设置的这个东西
这里有人会疑惑，messageWall是什么，后面那个是你的前端名字，前面那个是你的url路径，你可以自己去设置,Context path(这个）
2.静态页面（html,css)需要放到webapp目录下面（不是WEB-INF)
