【JavaEE初阶系列】——520快到了 1.7w字详细教你做个JavaWeb表白墙项目

目录

🎓配置Maven项目

🎈引入相关依赖

🎈项目总结构

🎓约定前后端交互接口

🎓了解需求

🎓服务器代码

🎈创建Message类

🎓前端代码

🎓前后端交互部分

🎈主要思路

🚩提交信息

🍭让前端发起一个ajax请求

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

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

🍭总过程

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

🍭 页面加载时发起http请求

🍭处理请求并生成响应

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

 🎈全过程

🎈引入数据库

🚩添加信息save方法

 🚩查询信息load方法 

🎓完整代码

💻MessageServlet类

💻message_wall.html

💻pom.xml

💻dp.sql

💻web.xml

---

🎓配置Maven项目

🎈引入相关依赖

servlet依赖，jackson依赖，mysql依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>message_wall</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <!--引入依赖关系-->
    <dependencies>
        <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <!--设置json语言-->
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.15.0</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>

    </dependencies>

</project>

---

🎈项目总结构

---

🎓约定前后端交互接口

所谓“前后端交互接口”是进行web开发中的关键环节，具体来说：就是允许页面给服务器发送哪些HTTP请求，并且每种请求预期获得什么样的HTTP响应。

1.从服务器上获取全部信息

• 请求：GET
• 响应：JSON格式

2.向服务器提交信息

• 请求：JSON格式
• 响应：JSON格式

---

🎓了解需求

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

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

---

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

所以我们在实现前后端交互部分之后，我们需要引入数据库对数据进行保存，在下次访问该页面的时候，依旧存储了上述的信息。

---

🎓服务器代码

🎈创建Message类

class Message{
    public String from;
    public String to;
    public String message;

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

注意：@Setter和@Getter会自动生成所有的get和set方法 

---

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

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

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

---

🎓前端代码

大家有一定了解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. 构造新 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.用户填写的内容发送给服务器，服务器进行保存
            //$是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;

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

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

    @Override
    protected 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数组

    @Override
    protected 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 message
                    let 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.收到响应之后，构造一下页面内容

---

 🎈全过程

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

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

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

---

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

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

---

🎈引入数据库

• 1.引入数据库的依赖

  <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>

• 2.建库建表   建库建表，需要用到sql，都可以写到文件中，后续如果需要把表啥的往其他机器上迁移，建表操作就会比较方便。

• 3.编写数据库代码  JDBC

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

创建MysqlDataSource实例，设置URL，username，password属性

2.建立连接

提供getConnection方法和Mysql服务器建立连接

3.构造sql语句

4.执行语句

5.回收资源

提供close方法，用来释放必要的资源

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

---

🚩添加信息save方法

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

   private void save(Message message) throws SQLException {
        //通过这个方法，将数据存入到数据库中
  
        DataSource dataSource=new MysqlDataSource();//创建数据源

        //设置
    @Override
        ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/messageWall?            
    characterEncoding=utf8&useSSL=false");
        ((MysqlDataSource)dataSource).setUser("root");
        ((MysqlDataSource)dataSource).setPassword("105528clzyf.");
        
        //1.建立连接
        Connection connection=dataSource.getConnection();
        
        //2.构造sql
        String sql="insert into message values (?,?,?)";
        PreparedStatement preparedStatement= connection.prepareStatement(sql);
        preparedStatement.setString(1,"from");
        preparedStatement.setString(2,"to");
        preparedStatement.setString(3,"message");
        
        //3.执行sql
        preparedStatement.executeUpdate();
        
        //4.回收资源
        preparedStatement.close();
        connection.close();
    }

---

 🚩查询信息load方法 

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

   private void save(Message message) throws SQLException {
        //通过这个方法，将数据存入到数据库中
        DataSource dataSource=new MysqlDataSource();//创建数据源

        //设置
    @Override
        ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/messageWall?            
        characterEncoding=utf8&useSSL=false");
        ((MysqlDataSource)dataSource).setUser("root");
        ((MysqlDataSource)dataSource).setPassword("105528clzyf.");
        
        //1.建立连接
        Connection connection=dataSource.getConnection();
        
        //2.构造sql
        String sql="insert into message values (?,?,?)";
        PreparedStatement preparedStatement= connection.prepareStatement(sql);
        preparedStatement.setString(1,"from");
        preparedStatement.setString(2,"to");
        preparedStatement.setString(3,"message");
        
        //3.执行sql
        preparedStatement.executeUpdate();
        
        //4.回收资源
        preparedStatement.close();
        connection.close();
    }

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

---

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

 

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

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

---

🎓完整代码

💻MessageServlet类

import com.fasterxml.jackson.databind.ObjectMapper;
import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
import com.sun.deploy.security.JarSignature;

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;

import static com.sun.deploy.security.JarSignature.load;
import static com.sun.deploy.util.SessionState.save;

class Message{
    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 {
    private ObjectMapper objectMapper=new ObjectMapper();
    //private List<Message> messageList=new ArrayList<>();
    DataSource dataSource=new MysqlDataSource();//创建数据源

    //设置
    @Override
    public 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.");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException, IOException {
        //读取前端发来的数据
        Message message=objectMapper.readValue(req.getInputStream(),Message.class);
        System.out.println("收到的请求message"+message);

        //将存储的信息保存到一个链表中
       // messageList.add(message);
        //TODO插入数据库
        try {
            save(message);
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }

        //返回响应
        resp.setStatus(200);
        resp.getWriter().write("ok");
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //通过这个方法来处理消息列表的get请求,直接返回数据即可
        resp.setStatus(200);
        resp.setContentType("application/json;charset=utf8");
        //TODO从数据库中查询
        List<Message> messageList=null;
        try {
            messageList=load();
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }

        //从messageList中取出Message对象利用ObjectMapper类的write方法进行从对象转换成字符串操作，并做出响应
        String respJson=objectMapper.writeValueAsString(messageList);//
        resp.getWriter().write(respJson);
    }

    private void save(Message message) throws SQLException {
        //通过这个方法，将数据存入到数据库中

        //1.建立连接
        Connection connection=dataSource.getConnection();

        //2.构造sql
        String sql="insert into message values (?,?,?)";
        PreparedStatement preparedStatement= connection.prepareStatement(sql);
        preparedStatement.setString(1,"from");
        preparedStatement.setString(2,"to");
        preparedStatement.setString(3,"message");

        //3.执行sql
        preparedStatement.executeUpdate();

        //4.回收资源
        preparedStatement.close();
        connection.close();
    }

    private List<Message> load() throws SQLException {
        //通过这个方法 ，从数据库中读取到message

        //1.建立连接
        Connection connection=dataSource.getConnection();

        //2.构造SQL
        String sql="select * from message";
        PreparedStatement statement=connection.prepareStatement(sql);

        //3.执行sql
        ResultSet 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.返回messageList
        return messageList;
    }


}

---

💻message_wall.html

<!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>

    <!--前端引入第三方库-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</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>
        // 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示. 
        // 点击的时候, 获取到三个输入框中的文本内容
        // 创建一个新的 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.用户填写的内容发送给服务器，服务器进行保存
            //$是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);
                }
            })
        }
        //直接在script里面写的js代码，就是在页面加载时被执行到的
        //发起了一个get请求，从服务器获取数据
        //get请求不需要body，也就不需要上述data和contentType属性了
        $.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 message
                    let 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);
                }
            }
        });
    </script>
</body>

</html>

---

💻pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>message_wall</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <!--引入依赖关系-->
    <dependencies>
        <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <!--设置json语言-->
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.15.0</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>

    </dependencies>

</project>

---

💻dp.sql

create database if not exists messageWall charset utf8;
use messageWall;

drop table if exists message;

create table  if not exists message('from' varchar(1024),'to' varchar(1024),message varchar(1024));

---

💻web.xml

<!DOCTYPE web-app PUBLIC
        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
    <display-name>Archetype Created Web Application</display-name>
</web-app>

---

开心就是最大的意义。