我们已经学习了Http以及Servlet类的相关知识
今天我们来实操一下,实现一个简单的既有前端又有后端的网站–表白墙
之前在学习前端的时候已经写过了表白墙的前端代码,存在两个问题
1.页面重启,数据丢失
2.数据只是在本地的,别人看不见
那么这样的问题我们要咋样解决呢?
引入后端服务器解决即可
涉及到两个交互:
🐷1.当用户打开表白墙页面的时候,需要从服务器加载当前已经提交的表白墙数据
🐷2.当用户新增一个表白的时候,也会把数据提交给服务器,让服务器持久化保存
首先我们要把写好的前端页面放到webapp目录下
明确前后端交互接口
网页给服务器发啥样的请求,服务器给网页返回啥样的响应
显而易见,是http请求了,我们就要使用ajax构造http请求
1.页面加载完毕之后,需要给服务器发请求,获取当前的留言数据都有啥
2.用户点击提交的时候,告诉服务器.当前用户发了的消息是啥
🧊在前后端交互的过程中涉及到的关键问题是:
请求是啥样子的,响应时啥样子的,这些格式是由程序员来规定的,也就是约定前后端交互接口
下面是一份典型的约定方式(也可以按照别的方式来约定,这个不是唯一的)
接口一:页面获取当前所有的留言信息
请求:
GET/message
响应:HTTP/1.1 200 OK Content-Type:applicatoin/json
[
{
from:“从哪里来”,
to:“到哪里去”,
message:“消息是啥”
},
{
from:“从哪里来”,
to:“到哪里去”,
message:“消息是啥”
},
{
from:“从哪里来”,
to:“到哪里去”,
message:“消息是啥”
},
{ from:“从哪里来”,
to:“到哪里去”,
message:“消息是啥”
}
]
json中使用[]表示数组,[]的每个元素,是一个{}json对象,每个人对象里,又有三个属性from,to,message
接口二:提交一条新消息给服务器
请求: POST/message
Content-Type:application/json
{
from:“从哪来”,
to:“到哪去”,
message:“消息是啥”
}
响应:HTTP/1.1 200 OK
接口二,服务器要将收到的请求的body转换成Message对象,然后把这个Message保存起来
🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻
现在我们来写代码
第一步当然是要创建一个maven项目了
然后把前端静态页面放到webapp目录下
然后根据我们规定的交互格式,编写前端代码
<!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> <!-- 引入jquery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <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"> <button id="revert">撤销</button> </div> <!-- <div class="row"> xxx 对 xx 说 xxxx </div> --> </div> <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.通过ajax构造post请求,把新的消息提交给服务器 let body={ from: from, to:to, message: msg };//这是一个js对象 $.ajax({ type:'post', url: 'message', contentType:"application/json; charset=utf8", data:JSON.stringify(body),//js对象转成一个json格式字符串 success: function(body){ //响应成功返回之后,调用到回调 console.log("消息发送给服务器成功"); } }); } let revertButton = document.querySelector('#revert'); revertButton.onclick = function() { // 删除最后一条消息. // 选中所有的 row, 找出最后一个 row, 然后进行删除 let rows = document.querySelectorAll('.message'); if (rows == null || rows.length == 0) { return; } containerDiv.removeChild(rows[rows.length - 1]); } //在页面加载的时候,希望能从服务器获取到所有的消息,并显示在网页中 $.ajax({ type:'get', url:'message',//URL都是是使用相对路径的写法,相对路径意味着工作路径就是当前文件所在的路径 //当前文件路径是/message_wall/,所以此时请求就是/message_wall/message success: function(body){ //body是收到的响应的正文部分,我们之前已经约定是json格式 //后端代码的响应中Content-type是application/json,此时的jQuery会把body的json格式自动转化为js对象 //就不用jQuery.parse了 //现在的body已经是js对象数组了 //闲杂就需要遍历这个数组,取出每个元素,构造HTML标签,添加到html页面上 let container=document.querySelector('.container'); for(let message of body){ let rowDiv=document.createElement('div'); rowDiv.className="row"; rowDiv.innerHTML=message.from+"对"+message.to+"说"+message.message; container.appendChild(rowDiv); } } }); </script> </body> </html>
注意代码里的JSON.stringify方法,这个方法是把js对象转换成json格式的字符串
JSON.parse是把json格式字符串转换成js对象
上一期我们刚见过用jackson完成Java对象和json字符串的转化
objectMapper.writeValue把Java对象转换成json格式字符串
objectMapper.readValue把json字符串转换成Java对象
👀🍬🍬这里的URL是相对路径的写法,也就是说URL都是是使用相对路径的写法,相对路径意味着工作路径就是当前文件所在的路径,当前文件路径是/message_wall/,所以此时请求就是/message_wall/message
💖body是收到的响应的正文部分,我们之前已经约定是json格式
后端代码的响应中Content-type是application/json,此时的jQuery会把body的json格式自动转化为js对象,就不用jQuery.parse了,现在的body已经是js对象数组了
现在就需要遍历这个数组,取出每个元素,构造HTML标签,添加到html页面上
后端要用到jackson,所以要引入jackson依赖
在未添加数据库的时候,服务器保存的数据是是放在ArrayList,也就是内存中,进程重启,内存数据就没了
所以我们把数据要存储到硬盘中
1.写到文件里
2.写到数据库中
我们采用第二种方法,采用JDBC编程
1.引入jdbc依赖
2.建库建表
然后现在编写后端代码
import com.fasterxml.jackson.databind.ObjectMapper; import com.mysql.jdbc.jdbc2.optional.MysqlDataSource; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.sql.DataSource; import java.io.IOException; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; /** * Created with IntelliJ IDEA. * Description: * User: WHY * Date: 2023-06-06 * Time: 17:56 */ class Message{ //属性必须设置public public String from; public String to; public String message; @Override public String toString() { return "Message{" + "from='" + from + '\'' + ", to='" + to + '\'' + ", message='" + message + '\'' + '}'; } } @WebServlet("/message") public class MessageServlet extends HttpServlet { //解析要使用json的这个类 private ObjectMapper objectMapper=new ObjectMapper(); //消息存起来 //private List<Message> messageList=new ArrayList<>(); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //通过这个方法来处理"获取所有留言信息" //需要返回json 字符串数组,jackson直接帮我们处理好了格式 List<Message> messageList=load(); String respString =objectMapper.writeValueAsString(messageList); //通过这一步就把message对象变成了json数组 resp.setContentType("application/json; charset=utf8"); resp.getWriter().write(respString); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //通过这个方法来处理"提交的新消息" //解析json格式的body为Message对象 //第一个参数是获取请求的body ,第二个参数写的是要转成啥样的对象 Message message= objectMapper.readValue(req.getInputStream(),Message.class); save(message); System.out.println("消息提交成功 message="+ message); //响应body为空,不需要额外处理,默认为200 } //这个方法用来往数据库存一条记录 private void save(Message message) { DataSource dataSource=new MysqlDataSource(); ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/why?characterEncoding=utf8&useSSL=false"); ((MysqlDataSource)dataSource).setUser("root"); ((MysqlDataSource)dataSource).setPassword("1111"); try{ Connection connection=dataSource.getConnection(); String sql="insert into message values(?,?,?)";//占位符 //设置占位符内容 PreparedStatement statement=connection.prepareStatement(sql); statement.setString(1,message.from); statement.setString(2,message.to); statement.setString(3,message.message); //执行sql statement.executeUpdate(); statement.close(); connection.close(); }catch(SQLException e){ e.printStackTrace(); } } //这个方法用来从数据库查询所有记录 private List<Message> load() { List<Message> messageList=new ArrayList<>(); DataSource dataSource=new MysqlDataSource(); ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/why?characterEncoding=utf8&useSSL=false"); ((MysqlDataSource)dataSource).setUser("root"); ((MysqlDataSource)dataSource).setPassword("1111"); try{ Connection connection=dataSource.getConnection(); String sql="select *from message";//占位符 //设置占位符内容 PreparedStatement statement=connection.prepareStatement(sql); //执行sql ResultSet resultSet= statement.executeQuery(); //遍历结果集 while(resultSet.next()){ Message message=new Message(); message.from=resultSet.getString("from"); message.to=resultSet.getString("to"); message.message=resultSet.getString("message"); messageList.add(message); } resultSet.close(); statement.close(); connection.close(); }catch(SQLException e){ e.printStackTrace(); } return messageList; } }
编写完成,我们运行代码,看结果
此时重启服务器,依旧存在
总结:一个网站的实现步骤
1.约定前后端交互接口
2.实现服务器代码(通常会操作数据库)
3.实现客户端代码(通常使用ajax构造请求,并使用一些js的webapi操作页面内容)
这就是写网站的套路
这里为什么没有出现跨域问题呢?
因为是自己访问自己,我们来抓包看看
这个是ajax的域名
这个是页面的域名
🌼两个域名一致,当然不会出现跨域问题了~~~
