情人节到了，手把手教你做一个表白墙，附有详细步骤
之前博主已经写过一个表白墙页面版的了，上次的比较简单，只是单纯地使用前端知识来完成的，有兴趣的可以看一下
??前 端 简 易 实 现 表 白 墙??
正因为只是利用前端知识来实现的，即所有数据在浏览器关闭后会丢失。这次，我们带领大家实现一个可以前后端交互的表白墙，这种表白墙的数据可以存储在服务器上，因此可以实现持久化保存~下面，让我们开始吧！
??服务器版本表白墙
- ?? 配置Maven项目
- 1. 创建Maven项目
- 2. 引入依赖
- 3. 构造目录
- ?? 约定前后端交互接口
- ?? 实现服务器端代码
- ?? 调整前端页面代码
- ?? 将数据进行持久化存储
- 1. 将数据写入文件中
- 2. 将数据保存到数据库中
- （1）引入数据库jar包
- （2）建库建表
- （3）和数据库建立连接
- 3. 总结
?? 配置Maven项目
1. 创建Maven项目
首先我们需要新建一个Maven项目，保存路径根据自己情况设置就行，其他的不用修改，这一步比较简单，就不细说了
2. 引入依赖
我们需要在pom.xm中引入两个依赖，一个是Servlet依赖，一个是Jackon依赖：
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 响应。此步是网页开发中最关键最有难度的步骤，要好好学哦！
- 第一个交互接口：当页面这里用户点击提交的时候,就要给服务器发送一个请求，把这次留言的信息传给服务器
- 第二个交互接口：当页面加载的时候，就需要给服务器发送一个请求，把之前已经保存在服务器上的信息获取下来，展示到页面上
接口格式可以约定如下：
?? 实现服务器端代码
在约定好前后端交互的接口后，我们就可以创建一个类来实现服务器端的代码了。
相关代码如下（附有注释）
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.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 List messageList = new ArrayList<>();
// 这个方法用来处理, 从服务器获取到消息数据
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("application/json;charset=utf-8");
objectMapper.writeValue(resp.getWriter(), messageList);
}
// 这个方法用来处理, 从客户端提交数据给服务器
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Message message = objectMapper.readValue(req.getInputStream(), Message.class);
messageList.add(message);
resp.setContentType("application/json;charset=utf-8");
resp.getWriter().write("{"ok": 1}");
}
}
?? 调整前端页面代码
当前服务器已经准备好接收浏览器的请求了，那么接下来我们就需要修改前端代码来真的构造出这个请求。
具体需求：
- 在页面加载的时候，访问服务器，从服务器这边获取到消息列表，并展示出来
- 点击提交按钮的时候，把当前的数据构造成一个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 + " " + message.to + " " + message.message + "
");
} 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(" ");
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 + " " + message.to + " " + message.message + "
");
} 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. 总结
当前我们的场景中，通过写文件方式存储数据要比存入数据库更简单一些；持久化存储，不仅仅是写数据库这一种办法，写文件有的时候也是简单有效的；一般来说，如果问题场景本身就比较简单，数据格式也不复杂，数据量也不大。这种直接就写文件即可，如果问题场景比较复杂(数据需要进行一系列计算加工)，写数据库更合适~
那么，本篇博客到此就结束啦！博主已经将实现一个可前后端交互的表白墙的总体思路交给大家了，大家可以根据自己的需求加上各种图片哦，快去试试吧??