情人节到了，手把手教你做一个表白墙，附有详细步骤

时间：2023-06-22

◕‿◕之前博主已经写过一个表白墙页面版的了，上次的比较简单，只是单纯地使用前端知识来完成的，有兴趣的可以看一下
前端简易实现表白墙正因为只是利用前端知识来实现的，即所有数据在浏览器关闭后会丢失。这次，我们带领大家实现一个可以前后端交互的表白墙，这种表白墙的数据可以存储在服务器上，因此可以实现持久化保存~下面，让我们开始吧！

服务器版本表白墙
 配置Maven项目
1、创建Maven项目2、引入依赖3、构造目录  约定前后端交互接口 实现服务器端代码 调整前端页面代码 将数据进行持久化存储
1、将数据写入文件中2、将数据保存到数据库中
（1）引入数据库jar包（2）建库建表（3）和数据库建立连接 3、总结

 配置Maven项目 1、创建Maven项目

首先我们需要新建一个Maven项目，保存路径根据自己情况设置就行，其他的不用修改，这一步比较简单，就不细说了

2、引入依赖

我们需要在pom.xm中引入两个依赖，一个是Servlet依赖，一个是Jackon依赖：

<?xml version="1.0" encoding="UTF-8"?> 4.0.0 org.example messagewall 1.0-SNAPSHOT javax.servlet javax.servlet-api 3.1.0 provided com.fasterxml.jackson.core jackson-databind 2.13.1

3、构造目录

我们构造如图所示的版本的目录结构即可，然后在web.xml中加上如下内容：

Archetype Created Web Application

 约定前后端交互接口

所谓 “前后端交互接口” 是进行 Web 开发中的关键环节，具体来说：就是允许页面给服务器发送哪些 HTTP 请求，并且每种请求预期获取什么样的 HTTP 响应。此步是网页开发中最关键最有难度的步骤，要好好学哦！

第一个交互接口：当页面这里用户点击提交的时候,就要给服务器发送一个请求，把这次留言的信息传给服务器第二个交互接口：当页面加载的时候，就需要给服务器发送一个请求，把之前已经保存在服务器上的信息获取下来，展示到页面上

接口格式可以约定如下：

 实现服务器端代码

在约定好前后端交互的接口后，我们就可以创建一个类来实现服务器端的代码了。
相关代码如下（附有注释）

 调整前端页面代码

当前服务器已经准备好接收浏览器的请求了，那么接下来我们就需要修改前端代码来真的构造出这个请求。
具体需求：

在页面加载的时候，访问服务器，从服务器这边获取到消息列表，并展示出来点击提交按钮的时候，把当前的数据构造成一个HTTP请求，发送给服务器

具体思路：
要想进行这个前后端交互的过程，我们就需要使用到ajax，因此，我们需要引入jQuery来确保能使用ajax，然后我们就可以编写相关代码了。
完整的html代码如下：

document

表白墙

输入后点击提交, 会将信息显示在表格中
谁: 对谁: 说什么:

写完后用Smart Tomcat进行打包部署后，我们在表白墙中输入内容后就可以保存到服务器中，这样在页面刷新时就不会丢失了：

当前服务器是把数据给保存到了messageList变量中，变量就是位于内存中，此时此刻，一旦程序重启(服务器重启)，内存中的东西就没了，那么如何让做到让服务器重启后数据还能不丢失呢？此时此刻我们就需要对数据进行持久化存储了

 将数据进行持久化存储 1、将数据写入文件中

使数据进行持久化存储有两种方法，其中一种就是将数据写入文件中，此时我们就要用到前面的文件操作相关知识了。
相关代码如下（注意改动位置）

class Message {//表示其中一条请求的Jackon数据格式 public String from; public String to; public String message;}@WebServlet("/message")public class MessageServlet extends HttpServlet { private ObjectMapper objectMapper = new ObjectMapper(); //此处填要保存文件的路径 private String filePath = "此处填自己希望把文件保存的位置的路径即可"; // 这个方法用来处理, 从服务器获取到消息数据 @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("application/json;charset=utf-8"); } // 这个方法用来处理, 从客户端提交数据给服务器 @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { Message message = objectMapper.readValue(req.getInputStream(), Message.class); // 在这里, 要进行一个 "写文件" 操作 save(message); resp.setContentType("application/json;charset=utf-8"); resp.getWriter().write("{"ok": 1}"); } private void save(Message message) { System.out.println("向文件中写入数据!"); try (FileWriter fileWriter = new FileWriter(filePath, true)) { // 写入文件的格式也有很多方式、可以直接写 json, 也可以使用行文本(每个记录占一行, 字段之间使用分隔符区分) fileWriter.write(message.from + "t" + message.to + "t" + message.message + "n"); } catch (IOException e) { e.printStackTrace(); } }}

注意：
其中append中的参数设置为true的作用是将文件的打开方式设置为追加写的方式打开（使用输出流对象的时候），这样不会清空文件原有的内容，而是直接往最后来拼接
验证程序：

当我们在页面中输入数据并提交后，可以看到编译器中已经提示向文件中写入数据了
我们打开文件，同样可以看到已经保存好的数据，此时表示我们的数据已经可以持久化保存了，但当我们刷新页面后，可以看到页面上仍然没有任何东西：
原因是此时我们只实现了将数据保存，而没有实现当页面刷新后把保存好的数据加载出来，那么我们只需要把文件中的数据加载回来显示到响应中即可。
我们需要构建一个load方法：

import com.fasterxml.jackson.databind.ObjectMapper;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 java.io.*;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.util.ArrayList;import java.util.List;class Message {//表示其中一条请求的Jackon数据格式 public String from; public String to; public String message;}@WebServlet("/message")public class MessageServlet extends HttpServlet { private ObjectMapper objectMapper = new ObjectMapper(); //此处填要保存文件的路径 private String filePath = "此处填自己希望把文件保存的位置的路径即可"; // 这个方法用来处理, 从服务器获取到消息数据 @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("application/json;charset=utf-8"); List messageList = load(); objectMapper.writevalue(resp.getWriter(), messageList); } private List load() { // 这个方法负责读文件, 把读到的数据获取到之后, 放到 List 中 List messageList = new ArrayList<>(); System.out.println("从文件加载!"); //此处我们需要按行读取、FileReader 本身不支持、需要套上一层BufferedReader //当然这里使用 Scanner 也行 try (BufferedReader bufferedReader = new BufferedReader(new FileReader(filePath))) { while (true) { String line = bufferedReader.readLine(); if (line == null) { break; } // 如果读取到 line 的内容, 就把 line 解析成一个 Message 对象 String[] tokens = line.split("t"); Message message = new Message(); message.from = tokens[0]; message.to = tokens[1]; message.message = tokens[2]; messageList.add(message); } } catch (IOException e) { e.printStackTrace(); } return messageList; } // 这个方法用来处理, 从客户端提交数据给服务器 @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { Message message = objectMapper.readValue(req.getInputStream(), Message.class); // 在这里, 要进行一个 "写文件" 操作 save(message); resp.setContentType("application/json;charset=utf-8"); resp.getWriter().write("{"ok": 1}"); } private void save(Message message) { System.out.println("向文件中写入数据!"); try (FileWriter fileWriter = new FileWriter(filePath, true)) { // 写入文件的格式也有很多方式、可以直接写 json, 也可以使用行文本(每个记录占一行, 字段之间使用分隔符区分) fileWriter.write(message.from + "t" + message.to + "t" + message.message + "n"); } catch (IOException e) { e.printStackTrace(); } }}

接下来我们使用Smart Tomcat重新打包部署程序，打开页面后刷新一下，就可以看到之前已经保存在文件中的数据了：

2、将数据保存到数据库中

除了将数据写入文件进行保存，我们也可以把数据保存到数据库中。

（1）引入数据库jar包

在使用数据库进行保存时，首先我们就需要先引入数据库的jar包，方法为从Maven的中央仓库中引入

mysql mysql-connector-java 5.1.47

（2）建库建表

引入jar包后，我们就可以写相关代码了，但在这之前，我们应该先在mysql中创建相关的数据库和数据表：

create table message(`from` varchar(1024),`to` varchar(1024),`message` varchar(1024));

注意，由于from和to为数据库中的关键字，为了防止冲突，应该加上反引号

（3）和数据库建立连接

有了数据库和数据表后，我们就可以开始编写相关代码了，首先我们应该先和数据库建立好连接，此时我们应该先创建一个DBUtil类，编写相关代码：

import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;import javax.sql.DataSource;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;public class DBUtil { private static final String URL = "此处填自己的数据库路径"; private static final String USERNAME = "填自己数据库用户名"; private static final String PASSWORD = "填自己数据库密码"; private static volatile DataSource dataSource = null; public static DataSource getDataSource() { if (dataSource == null) { synchronized (DBUtil.class) { if (dataSource == null) { dataSource = new MysqlDataSource(); ((MysqlDataSource)dataSource).setURL(URL); ((MysqlDataSource)dataSource).setUser(USERNAME); ((MysqlDataSource)dataSource).setPassword(PASSWORD); } } } return dataSource; } public static Connection getConnection() throws SQLException { return getDataSource().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(); } } }}

然后可以编写相关JDBC代码了（从数据库中读取相关数据和写入相关数据）

import com.fasterxml.jackson.databind.ObjectMapper;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 java.io.*;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.util.ArrayList;import java.util.List;class Message { public String from; public String to; public String message;}@WebServlet("/message")public class MessageServlet extends HttpServlet { private ObjectMapper objectMapper = new ObjectMapper(); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("application/json;charset=utf-8"); List messageList = load(); objectMapper.writevalue(resp.getWriter(), messageList); } private List load() { List messageList = new ArrayList<>(); System.out.println("从数据库读取数据!"); Connection connection = null; PreparedStatement statement = null; ResultSet resultSet = null; try { connection = DBUtil.getConnection(); 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; } // 这个方法用来处理, 从客户端提交数据给服务器 @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { Message message = objectMapper.readValue(req.getInputStream(), Message.class); // 在这里, 要进行一个 "写文件" 操作 save(message); resp.setContentType("application/json;charset=utf-8"); resp.getWriter().write("{"ok": 1}"); } private void save(Message message) { System.out.println("向数据库中写入数据!"); Connection connection = null; PreparedStatement statement = null; try { // 1、先和数据库建立连接 connection = DBUtil.getConnection(); // 2、构造拼装 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); // 3、执行 SQL int ret = statement.executeUpdate(); if (ret == 1) { System.out.println("插入成功!"); } else { System.out.println("插入失败!"); } } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(connection, statement, null); } }}

验证程序

编译器中成功显示向数据库中写入数据并插入成功了！
可以看到也我们成功将数据插入数据库中了！

3、总结

当前我们的场景中，通过写文件方式存储数据要比存入数据库更简单一些；持久化存储，不仅仅是写数据库这一种办法，写文件有的时候也是简单有效的；一般来说，如果问题场景本身就比较简单，数据格式也不复杂，数据量也不大。这种直接就写文件即可，如果问题场景比较复杂(数据需要进行一系列计算加工)，写数据库更合适~

那么，本篇博客到此就结束啦！博主已经将实现一个可前后端交互的表白墙的总体思路交给大家了，大家可以根据自己的需求加上各种图片哦，快去试试吧

上一篇：CommonSort

下一篇：centos8.0安装elasticsearch7.3.0版本