一、准备工作

我们之前实现过这样一个表白墙，具体前端代码参考表白墙这篇文章

但是我们之前写的这个表白墙有一些问题：
1.如果我们刷新页面/重新开启，之前的数据就不见了
2.我们只能在单机操作，其他机器不能看见
于是我们现在就来解决这些问题，让服务器来存储用户提交的数据，当有新的浏览器打开该页面时，在从服务器获取数据，首先我们创建一个web项目，引入相关依赖
在这里插入图片描述
在src下创建webapp/WEB-INF/web.xml，并在pom.xml下面引入mysql依赖，servlet依赖和jackson依赖

    <dependencies>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.49</version>
        </dependency>
        
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.14.1</version>
        </dependency>
    </dependencies>

引入依赖之后记得刷新，
然后创建servelet类，并指明访问路径为message，具体实现我们后面在具体写

@WebServlet("/messagewell")
public class MessageWellServlet extends HttpServlet {

然后我们将我们之前写好的表白墙前端代码导入到webapp目录下，大家之前去我之前的文章里复制即可
在这里插入图片描述

二、前后端交互

既然我们想要进行前后端交互，就得约定好接口，前端给服务器发什么样的HTTP请求，服务器返回什么样的HTTP响应
1.页面加载，浏览器从服务器获取表白信息
前端请求： GET/message
响应： HTTP/1.1 200OK，返回json数组形式的数据

2.提交表白信息，浏览器将表白信息发送到服务器
前端请求：POST/message，发送json形式的数据
响应：HTTP/1.1 200OK

后端

在这里插入图片描述
我们前端提交数据后，使用json格式发给服务器，我们需要构建一个这样的类，然后使用jackson进行接收数据

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

我们来实现一下当前端提交数据时，我们服务器的处理

    List<Message> list = new ArrayList<>();
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        ObjectMapper objectMapper = new ObjectMapper();
        //将body中的内容进行读取
        Message message = objectMapper.readValue(req.getInputStream(),Message.class);
        //将获取到的message对象加入到成员变量list中
        list.add(message);
        //设置响应状态码
        resp.setStatus(200);
    }

有了doPost的基础，我们doGET方法就简单的多了，直接将list中的所有数据写回响应即可

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置响应格式
        resp.setContentType("application/json; charset=utf8");
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(resp.getWriter(),list);
    }

在这里插入图片描述
该方法是将java对象转成json字符串，并将其写入到响应中，如果大家觉得这个方法看起来费劲的话，大家也可以换一种方法

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置响应格式
        resp.setContentType("application/json; charset=utf8");
        ObjectMapper mapper = new ObjectMapper();
        //将java对象转成json字符串
        String jsonResp = mapper.writeValueAsString(list);
        resp.getWriter().write(jsonResp);
    }

前端

我们前端需要发送两部分请求：
1.post，当我们点击提交表白信息的时候发起
2.get，我们加载页面的时候发起

我们使用VScode打开前端代码，引入jquery依赖

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

在这里插入图片描述
然后我们使用ajax构造请求

我们看一下我们之前写的前端代码，当我们onclick提交时，我们只是构造了一个div加入到页面内，现在我们增加一下，让其提交给后端

我们将输入框读取到的数据，构建成一个js对象，但是我们body只能传输字符串不能传输对象，于是我们需要将对象转成一个json格式的字符串

   strBody = JSON.stringify(body);

            strBody = JSON.stringify(body);
            $.ajax({
                type: 'post',
                url: 'messagewell',
                data: strBody,
                contentType: "application/json; charset=utf8",
                success: function(body) {
                    console.log("数据提交成功");
                }
            });

然后使用ajax将数据提交给服务器，我们来测试一下当前代码，我们使用tomcat部署，并访问
在这里插入图片描述

然后我们点击提交，我们看到确认发送了一个HTTP请求

这里就证明我们提交表白信息这一前后端操作是正确的
接下来我们来实现当我们刷新页面时读取服务器数据，我们使用ajax发送GET请求

        //当我们页面加载时，给服务器发送GET请求，获取数据，添加到页面中
        $.ajax({
            type: 'get',
            url: 'messagewell',
            success: function(body) {
                //此数body就是一个js格式的字符串，但是我们这里需要js对象数组
                //jquery会帮我们将js对象字符串解析成js对象数组
                for(let message of body) {
                    let rowDiv = document.createElement('div');
                    rowDiv.className = 'row';
                    rowDiv.innerHTML = message.from + ' 对 ' + message.to + ' 说 ' + message.message;
                    containerDiv.appendChild(rowDiv);
                }
            }
        })

我们这里的body，jquery为我们将js格式字符串解析为js对象数组，我们需要创建div标签，将每个js对象的数据添加到里面，然后将div添加到页面即可
现在我们重启服务器来验证一下
在这里插入图片描述
我们先随便提交几条数据，然后我们来尝试一下刷新页面

我们刷新后，数据仍然在页面上，我们在刷新的同时，给服务器发送了一个GET请求

同样的服务器将所有的表白信息响应给我们的浏览器

这样一个服务器版本的表白墙就实现完成了，大家需要注意的是我们的数据是在内存中存放的，如果我们重启服务器之后，之前的数据就不见了，如果想要持久化存储就需要借助数据库了

三、数据库版本

我们这里只需要创建一张message信息表，表中有三个属性(from,to,message)
在这里插入图片描述
大家需要注意我们在创表过程中的一些问题，因为我们的from和to是我们mysql中的关键字，所以我们需要加上`，接下来我们就使用JDBC来和数据库进行交互操作
因为我们数据库连接操作和关闭资源需要频频使用，所以我们这里创建一个DBUtil工具类来简化操作

import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
import javax.sql.DataSource;
import java.sql.*;
//DButi作为工具类，供其他类使用
public class DBUtil {
    private static DataSource dataSource = new MysqlDataSource();
    static{
        //对datasuorce初始化
        ((MysqlDataSource)dataSource).setURL("jdbc:mysql://127.0.0.1:3306/zd?characterEncoding=utf8&useSSL=false");
        ((MysqlDataSource)dataSource).setUser("root");
        ((MysqlDataSource)dataSource).setPassword("自己的密码");
    }
    //通过该方法获取连接
    public static Connection getConnection() throws SQLException {
        return dataSource.getConnection();
    }

    public static void close(Connection connection, PreparedStatement statement,ResultSet resultSet) {
        if(resultSet != null) {
            try {
                resultSet.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if(statement != null) {
            try {
                statement.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if(connection != null) {
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

接下来我们在servlet类下实现两个方法，save()将我们前端提交的数据添加到数据库中，load()将我们数据库中的所有数据返回给前端

    public void save(Message message) {
        Connection connection = null;
        PreparedStatement statement = null;
        try {
            //获取连接
            connection = DBUtil.getConnection();
            //构造sql语句
            String sql = "insert into message values(?,?,?)";
            statement = connection.prepareStatement(sql);
            statement.setString(1,message.from);
            statement.setString(2,message.to);
            statement.setString(3,message.message);
            //执行sql
            statement.executeUpdate();
        }catch (SQLException e) {
            e.printStackTrace();
        }finally {
            //关闭连接
            DBUtil.close(connection,statement,null);
        }
    }
    public List<Message> load() {
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        List<Message> messageList = new ArrayList<>();
        try {
            //获取连接
            connection = DBUtil.getConnection();
            //构造sql语句
            String sql = "select * from message";
            statement = connection.prepareStatement(sql);
            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);
            }
        }catch (SQLException e) {
            e.printStackTrace();
        }finally {
            //关闭连接
            DBUtil.close(connection,statement,resultSet);
        }
        return messageList;
    }