【JavaEE初阶系列】——利用Servlet API实现表白墙网站(1.6w字深刻了解前后端交互逻辑)

🎓准备工作

🎓了解前端部分知识(主要JS）

🎓前后端交互部分

🎈主要思路

🚩提交信息

🍭让前端发起一个ajax请求

🍭服务器读取上述请求，并计算出响应

🍭回到前端代码，处理服务器返回的响应

🍭总过程

🚩拿数据回到客户端页面并显示

🍭 页面加载时发起http请求

🍭处理请求并生成响应

🍭将响应信息构造成页面元素

🎈全过程

🎈引入数据库

🎓完整代码

💻MessageServlet类

💻message_wall.html

💻pom.xml

💻dp.sql

💻web.xml

🎓准备工作

我们在学习生涯中，我们要从最简单的开始做起，只有一个页面。

最终是这种效果图。我们要对这个页面进行一系列的前后端交互操作。

但是这里的数据都是浏览器的内存中保存的，刷新页面/关闭页面，东西都没有了。咱们希望表白墙里的数据，能够长期存在，不同的浏览器/页面中，都可以看到同一份数据。——这就需要引入服务器和后台代码。

此处，服务器要实现的功能，主要是两个方面：

1.页面加载的时候，网页要从服务器这里获取到当前表白数据（让网页端给服务器发起http请求，服务器返回响应里就带着刚才的这些数据）
2.点击提交的时候，网页就要把用户输入的信息，发送到服务器这边，服务器负责保存。

在一个网站中，服务器起到的最主要的效果，往往就是“存储数据”，因此服务器这边往往也就需要能够提供两种风格的接口，存数据，取数据。

🎓了解前端部分知识(主要JS）

大家有一定了解html和css，我这里主要带你们了解js方面的代码。

js的操作就是就是将文本框里面的内容在点击提交按钮之后，会自动创建一个div标签，在其下显示出来。

并且提交之后，会清空文本框里面的内容。

🎓前后端交互部分

使用服务器，目的是为了能够在服务器这边存储用户提交的信息，并且能够把信息获取下来。

服务器这边就需要给网页提供两个http接口。

1》获取消息网页加载的时候，给服务器发起一个ajax请求

请求：GET /message
响应: HTTP/1.1 200 OK
Content-Type:application/json

(注意：这里的请求和响应是自己设定的，等以后工作了，会商讨出最终的格式）

2》提交信息用户点击提交按钮的时候，ajax给服务器发一个请求，目的是为了把用户在输入框输入的内容，发送给服务器。

请求：POST /message
Content-Type:application/json

{

from:'张三'

to:'李四'

message:'我喜欢你很久了'

}

响应: HTTP/1.1 200 OK

正式编写代码之前，一定要把前后端交互的接口给确定下来。这个就是后续编写代码的依据。

编写前端代码：构造http请求（请求是啥样的？）解析http响应（响应是啥样的？）
编写后端代码：解析http请求（请求是啥样的？）构造http响应（响应式是啥样的？）

先写前端代码，发送请求
再写后端代码，解析请求，构造响应
再写前端代码，解析响应

将上述的网页放到webapp目录里，tomcat这样的一个项目，可以包含一些html，css，js这些内容都是在webapp目录中的。

🎈主要思路

让客户端把用户输入的数据给提交给服务器，用户点击提交按钮的时候会触发一个ajax请求。

请求格式:

POST /message

Content-Type:application/json

{

from:'张三',

to:'李四',

message:'我喜欢你很久了'

}

响应格式：

HTTP/1.1 200 OK

页面加载的时候，从服务器这边获取到之前保存的信息，页面加载的时候，发起一个ajax请求。

请求格式:

GET /message

响应格式：

HTTP/1.1 200 OK

Content-Type: application/json

[

{

from:'张三',

to:'李四',

message:'我喜欢你很久了'

}]

🚩提交信息

🍭让前端发起一个ajax请求

使用ajax，需要先引入jquery这个库

jquery网站点击进去即可。

用户填写的内容发送给服务器，服务器进行保存。

我们看到js对象转换成json字符串，我们想到ObjectMapper类，调用了writeValueAsString方法。将对象转换成json字符串。

上述代码在点击按钮的回调函数中，在点击按钮之后进行调用。

        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. 构造新 divlet 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.用户填写的内容发送给服务器，服务器进行保存//$是jquery提供的全局变量， ajax是&一个方法//参数是js对象，这里面有很多属性let requestBody = {"from": from,  //from里面变量的值，就是第一个输入框的内容“张三”"to": to,      //to变量的值，就是第二个输入框的内容 “李四”"message": msg  //message变量的值，就是第三个输入框的内容“我喜欢你”};//上述body是一个js对象，还需要转成字符串let jsonString = JSON.stringify(requestBody);$.ajax({type: 'post',url: 'message',contentType: 'application/json;charset=utf8',data: jsonString,success: function (responseBody) {//这个回调就是收到响应之后要执行的代码了console.log("responseBody: " + responseBody);}})}

🍭服务器读取上述请求，并计算出响应

需要使用jackson读取到前端这里的数据，并且进行解析。

class Message{public String from;public String to;public String message;@Overridepublic String toString() {return "Message{" +"from='" + from + '\'' +", to='" + to + '\'' +", message='" + message + '\'' +'}';}
}

要确保java代码中类的属性的名字和json中的属性的名字保持一致。

    @Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//读取前端发来的数据，保存到服务器中Message message=objectMapper.readValue(req.getInputStream(),Message.class);System.out.println("请求中收到的message"+message);//存储数据(服务器中存储数据)//可以使用一个集合类，把所有收到的message都存在内存中//保存到内存中，并非是一个非常合理的做法，一旦重启服务器，数据就丢失了//相比之下，存储到数据库中，更科学（持久化存储）messageList.add(message);//返回响应resp.setStatus(200);resp.getWriter().write("ok");
//        resp.setContentType("application/json");
//        resp.getWriter().write("{ ok: true }");}

🍭回到前端代码，处理服务器返回的响应

此处success回调函数，不是立即执行的，而是在浏览器收到服务器返回的成功这样的响应的时候才会执行到function，这个函数的第一个参数，就是响应数据的responsebody中的内容。

为了和请求对应上，一般服务器返回的数据，也会按照json数据来组织。

🍭总过程

用户在浏览器中输入数据，服务器获取到messageWall.html网页的数据，也就是服务器收到了请求(from to message三个参数），服务器收到了请求之后，浏览器就收到了响应，返回ok。

服务器收到的请求

浏览器收到的响应

我们用fidder软件进行抓包，看看我们的请求报文和响应报文是否和ajax发出的请求一样

请求报文

上述请求报文中地址是 http://127.0.0.1:8080/message_wall/message

和ajax中写的是一个相对路径，最终发送的请求，会被转换成绝对路径，就是把相对路径前面，拼上当前html所在的context path中。

响应报文：

🚩拿数据回到客户端页面并显示

当前已经把数据提交给服务器保存了，目前还需要能够把服务器的数据拿回到客户端页面上，并显示。

为什么还要从服务器拿消息呢？

1.当前页面上显示的数据，也是在浏览器内存中保存到饿，刷新页面/关闭了重新打开，之前的数据就没了
2.其他的客户端打开页面也是有数据的。

页面加载的时候，发起这个get请求

请求：

GET /message

响应:

HTTP/1.1 200 ok

Content-Type:application/json

🍭 页面加载时发起http请求

1>客户端在页面加载的时候，发起了一个http请求

🍭处理请求并生成响应

服务器收到的每条信息，都转成Message对象，放到上述List中，返回的结果，也就是这个List的数据，需要把List里的每个Message取出来，转成json字符串，最终拼到一起，得到了响应结果。

jackson本身就支持List类型转换成json数组

    @Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//通过这个方法来处理消息列表的get请求,直接返回数据即可resp.setStatus(200);resp.setContentType("application/json;charset=utf8");String respJson=objectMapper.writeValueAsString(messageList);//resp.getWriter().write(respJson);}

jackson看到了messageList是一个List类型，转成的json字符串就是一个json数组[],jackson自动遍历List里的每个元素，把每个元素，分别都转成json字符串。

🍭将响应信息构造成页面元素

客户端收到响应，就需要针对响应数据进行解析处理，把响应中的信息，构造成页面元素，并显示出来。

 $.ajax({type: 'get',url: 'message',success: function (body) {//拿到container这个元素let containerDiv = document.querySelector('.container');//类选择器 获取到html中 <div class="container">//处理服务器返回的响应数据（json格式的数据了）for (let i = 0; i < body.length; i++) {//body时一个数组，此时对message也就是js对象//这个message对象里，有三个属性 from to messagelet message = body[i];//根据message对象构造成html片段，把这个片段显示到网页上  //此时得到了div标签let div = document.createElement('div');//还需要往里面设置一些属性  class="row"  <div class="row"></div>div.className = 'row';//给这个div里设置内容//此时就得到了  <div class="row">张三 对 李四 说 我喜欢你</div>div.innerHTML = message.from + " 对 " + message.to + " 说: " + message.message;//把div添加到containerDiv的末尾containerDiv.appendChild(div);}}});

每次收到响应了之后我们都需要创建一个div标签里面保存信息，依次往后插入div。

最终构造成了这个效果。

前端主要的工作就是：

1.发送ajax请求

2.收到响应之后，构造一下页面内容

🎈全过程

但是我们在刷新页面之后内容都没有了，所以我们在页面加载的时候就发出http请求，我们就需要在将数据存储到messageList中，并且将数据返回给浏览器(处理请求并生成响应），然后将响应信息构造成页面元素。

所以之后我们点击提交按钮，发送信息给服务器，这个数据保存到messageList中了之后，会给messageList中每个Message对象取出来转换成json字符串，并生成响应，将响应信息由ajax来构造成页面元素，显示在页面中。

当我们结束进程之后，再进入网页，曾经的表白墙表白的信息，都烟消云散了。

这时候我们需要引入数据库来永久保存，不管我们关闭进程之后，下一次进程再次启动访问这个网页得时候，我们依旧能看到我们曾经写过的表白信息。

🎈引入数据库

1.引入数据库的依赖
  <dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.47</version></dependency>
2.建库建表 建库建表，需要用到sql，都可以写到文件中，后续如果需要把表啥的往其他机器上迁移，建表操作就会比较方便。

3.编写数据库代码 JDBC

1.创建数据源（设置路径，用户名以及密码登录mysql服务器）

2.建立连接

3.构造sql语句

4.执行语句

5.回收资源

我们需要对之前的代码进行改动，我们就不需要创建MessageList列表了，我们可以将数据插入到数据库中。

doPost方法

我们将数据存储到数据库中，就是用save方法存储替代了用MessageList集合类保存。

doGet方法

将数据库中存储的数据，进行查询操作，load方法实现查询操作。

1.创建数据源

设置url user passerword

DataSource dataSource=new MysqlDataSource();//创建数据源//设置@Overridepublic void init() throws ServletException {((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/messageWall?characterEncoding=utf8&useSSL=false");((MysqlDataSource)dataSource).setUser("root");((MysqlDataSource)dataSource).setPassword("105528clzyf.");}

2.建立连接Connection类

3.构造sql语句

并且预先准备语句，三个？代表的参数利用setString代表

4.回收资源

   private void save(Message message) throws SQLException {//通过这个方法，将数据存入到数据库中//1.建立连接Connection connection=dataSource.getConnection();//2.构造sqlString sql="insert into message values (?,?,?)";PreparedStatement preparedStatement= connection.prepareStatement(sql);preparedStatement.setString(1,"from");preparedStatement.setString(2,"to");preparedStatement.setString(3,"message");//3.执行sqlpreparedStatement.executeUpdate();//4.回收资源preparedStatement.close();connection.close();}

 private List<Message> load() throws SQLException {//通过这个方法 ，从数据库中读取到message//1.建立连接Connection connection=dataSource.getConnection();//2.构造SQLString sql="select * from message";PreparedStatement statement=connection.prepareStatement(sql);//3.执行sqlResultSet resultSet=statement.executeQuery();//4.遍历结果结合List<Message> messageList=new ArrayList<>();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);}//5.回收资源resultSet.close();statement.close();connection.close();//6.返回messageListreturn messageList;}

用ResultSet对象来存储每个Message对象，然后依次遍历，并插入到messageList中。

我们提前在数据库中新增几个元素，为了后续打开页面之后直接就出现了这几个数据。

当我们还没有任何输入数据时，此时就已经显示了该四个数据，也就是在数据库中提前增加好的。后续如果用户输入之后，就可以继续在后面创建div标签显示在页面了。

此时我们就可以看到，输入张三李四我也爱你，此时就会在上面四个数据后面添加了新元素。