1 表白墙页面构建

在这里插入图片描述
该页面由标题、文本、三个 input 输入框与一个提交按钮构成，整体比较简单，相关样式文件和页面代码会在后面给出。

我们需要解决的核心问题，就是考虑：如何让表白信息在页面上显示出来？
显然，我们可以使用 JavaScript 中的选择器，选中三个输入框，并对提交按钮添加点击监听事件。当我们点击按钮的时候，获取三个输入框的内容，并将输入框的内容以自己定义的格式插入到 html 中，并在浏览器上显示出来~

需要注意的是，如果用户还未写完内容，即三个输入框中的内容没有输入完整，则不能进行提交~ 页面构建代码如下：

messageWall.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>
</head>
<body>
<style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 100%;}h3 {text-align: center;padding: 30px 0;font-size: 24px;}p {text-align: center;color: #999;padding: 10px 0;}.row {width: 400px;height: 50px;margin: 0 auto;display: flex;justify-content: center;align-items: center;}.row span {width: 60px;font-size: 20px;}.row input {width: 300px;height: 40px;line-height: 40px;font-size: 20px;text-indent: 0.5em;/* 去掉输入框的轮廓线 */outline: none;}.row #submit {width: 300px;height: 40px;font-size: 20px;line-height: 40px;margin: 0 auto;color: white;background-color: #fa8497;/* 去掉边框 */border: none;border-radius: 10px;}.row #submit:active {background-color: gray;}
</style>
<div class="container"><h3>小黄圆圆表白墙</h3><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><script>// 当用户点击 submit, 就会获取到 input 中的内容, 从而把内容构造成一个 div, 插入到页面末尾.let submitBtn = document.querySelector('#submit');submitBtn.onclick = function() {// 1. 获取到 3 个 input 中的内容.let inputs = document.querySelectorAll('input');let from = inputs[0].value;let to = inputs[1].value;let msg = inputs[2].value;if (from == '' || to == '' || msg == '') {// 用户还没填写完, 暂时先不提交数据.return;}// 2. 生成一个新的 div, 内容就是 input 里的内容. 把这个新的 div 加到页面中.let div = document.createElement('div');div.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;div.className = 'row';let container = document.querySelector('.container');container.appendChild(div);// 3. 清空之前输入框的内容.for (let i = 0; i < inputs.length; i++) {inputs[i].value = '';}}
</script>
</body>
</html>

来一个简单的测试~
在这里插入图片描述
至此，程序都没有什么问题。但是，当我们点击页面刷新的时候，数据（表白）信息就丢失了。原因很简单~ 没有实现数据的持久化 怎么解决呢？显然，我们可以通过服务器，来对数据实现持久化存储，这就需要用到我们的 Servlet 了。
简而言之，就是通过 Servlet 程序处理页面的请求，将请求数据中的表白信息，持久化存储到数据库中，当再次刷新页面的时候，从服务器中拉取数据~

2 Servlet 回顾

Servlet是什么？

Servlet是JavaEE规范之一，规范就是接口
Servlet是JavaWeb的三大组件之一，三大组件分别是：Servlet程序、Filter过滤器、Listener监听器
Servlet是运行在服务器上的一个java小程序，可以接收客户端发来的请求，并响应数据给客户端

其他内容，可以参考笔者的 JavaWeb 专栏的 Servlet 部分，这里不再赘述：Servlet 核心编程

与笔者前面文章不同的是，这次我们使用 maven 来导入相关的依赖，在本 Demo 中，我们主要使用了 Servlet，mysql 以及 jackson 来解析 json 数据，相关依赖核心代码如下：

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></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.12.7.1</version></dependency><!-- 引入  mysql  驱动包       --><!-- 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>

3 表白墙后端程序实现

3.1 我们需要做什么？

核心：让表白数据不丢失

我们就需要通过服务器，来保存上述程序的消息数据，做到持久化存储~

那么问题来了~ 客户端和服务端该如何交互呢？
在这里插入图片描述
试想一个场景，你来到一个陌生的国家，想要买一张回国的机票。但是，你给路人说：“你好~请问机场怎么走？” 路人：“What can I do for you?”
这里我们做出如下假设：

你不会说英语；
路人不会说中文；
你听不懂英语；
路人听不懂中文。

路人表示：“你说什么~我完全听不懂的吖。” 而如果我们想让后端服务器能够正确的提供给客户端需要的服务，就需要前后端都能听得懂，说得通。因此，有必要统一语言，即自定义应用层协议，规范请求和响应的数据组织形式~

那么，再回到问题本身。我们要写一个服务器，服务器是干什么的？既然是服务器，服务器就应该提供服务。试想一个这样的场景：你想要洗衣服，但是家里只提供给你了个智能电饭煲~ 有如下的功能：

煲汤
做饭
粥

显然，电饭煲再智能，它也是没有办法帮你洗衣服滴~ 对于前后端的交互来说，我们也需要约定好都需要什么样的功能，能提供什么样的功能，即约定好前后端交互的接口，定好相应的规范~
在这里插入图片描述

小结：约定前后端交互的接口，自定义应用层协议~

对于表白墙来说，主要提供如下两个接口：

告诉服务器，当前留言了一个怎么样的数据：当用户点击提交按钮的时候，就会给服务器发送一个 http 请求，服务器将这个消息保存下来。
从服务器获取到，当前都有哪些留言数据：当页面加载，就需要从服务器获取曾经存储的数据。

如何约定协议呢？

只需要约定好，客户端应该发送一个怎么样的 http请求服务器返回一个怎么样的 http响应。只要前后端都按照这个约定去做就好~
常见的可以使用 json 等~ 这里，我们采用的就是 json 格式：

3.2 实现细节

修改前端代码，使用 ajax 构造请求

点击提交的时候，ajax 要构造数据发送给服务器
页面加载的时候，从服务器获取消息列表，并在界面显示

JavaScript 的代码修改如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>function getMessages(){$.ajax({type: 'get',url: 'message',success: function(body){// 当前 body 已经是一个 js 对象数组了，ajax 会根据响应的 content type 自动解析// 如果服务器返回的 content-type 已经是 application/json 了，ajax 就会把 body 自动转成 js 的对象// 如果客户端没有自动转，也可以通过 JSON.parse() 手动转换// 依次来取数组中的每个元素let container = document.querySelector('.container');for(let message of body){let div = document.createElement('div');div.innerHTML = message.from + ' 对 ' + message.to + ' 说: ' + message.message;div.className = 'row';container.appendChild(div);}}})}getMessages();// 当用户点击 submit, 就会获取到 input 中的内容, 从而把内容构造成一个 div, 插入到页面末尾.let submitBtn = document.querySelector('#submit');submitBtn.onclick = function() {// 1. 获取到 3 个 input 中的内容.let inputs = document.querySelectorAll('input');let from = inputs[0].value;let to = inputs[1].value;let msg = inputs[2].value;if (from == '' || to == '' || msg == '') {// 用户还没填写完, 暂时先不提交数据.return;}// 2. 生成一个新的 div, 内容就是 input 里的内容. 把这个新的 div 加到页面中.let div = document.createElement('div');div.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;div.className = 'row';let container = document.querySelector('.container');container.appendChild(div);// 3. 清空之前输入框的内容.for (let i = 0; i < inputs.length; i++) {inputs[i].value = '';}// 4. 把当前获取到的输入框内容，构造成一个 HTTP POST 请求， 通过 ajax 发给服务器let body = {from: from,to: to,message: msg}$.ajax({type: 'post',url: 'message',contentType: 'application/json;charset=utf8',data: JSON.stringify(body),success: function(){alert("消息提交成功！");},error: function(){alert("消息提交失败！");}});}
</script>

构建相应的类，方便存储 json 对应的数据，这里需要属性和 key 名称一致，便于 jackson 自动读取数据存储到该类的对象中~

Message.java

这里使用 public 修饰完全是为了图方便，读者可以自行封装，并提供相应的 get、set 方法，结果也是一样滴~

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

创建数据库与相应的表

create database message_wall;
use message_wall;
create table message(`from` varchar(1024), `to` varchar(1024), message varchar(4096)
);

DBUtil.java
用于操作获取数据库资源的工具类，注意考虑线程安全问题~

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;/*** @author 兴趣使然黄小黄* @version 1.0* 方便与数据库之间的操作*/
@SuppressWarnings({"all"})
public class DBUtil {private static final String URL = "jdbc:mysql://127.0.0.1:3306/message_wall?characterEncoding=utf8&useSSL=false";private static final String USER_NAME = "root";private static final String PASSWORD = "123456";private volatile static DataSource dataSource = null;private static DataSource getDataSource(){if (dataSource == null){synchronized (DBUtil.class) {if (dataSource == null) {dataSource = new MysqlDataSource();((MysqlDataSource) dataSource).setURL(URL);((MysqlDataSource) dataSource).setUser(USER_NAME);((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();}}}
}

Servlet 程序的实现

具体可见代码注释~

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.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;/*** @author 兴趣使然黄小黄* @version 1.0* servlet程序， 实现表白墙后台逻辑*/
class Message{public String from;public String to;public String message;
}@SuppressWarnings({"all"})
@WebServlet("/message")
public class MessageServlet extends HttpServlet {private ObjectMapper objectMapper = new ObjectMapper(); // 用于解析 json@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 处理提交消息请求Message message = objectMapper.readValue(req.getInputStream(), Message.class); // 读取 jsonsave(message); // 存储// 通过 ContentType 来告知页面, 返回的数据是 json 格式.// 有了这样的声明, 此时 jquery ajax 就会自动的帮我们把字符串转成 js 对象.// 如果没有, jquery ajax 就只是当成字符串来处理的~~resp.setContentType("application/json; charset=utf8");resp.getWriter().write("{ \"ok\": true }");}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 获取到消息列表. 只要把消息列表中的内容整个的都返回给客户端即可// 此处需要使用 ObjectMapper 把 Java 对象, 转成 JSON 格式字符串~List<Message> messages = load(); // 获取数据String jsonString = objectMapper.writeValueAsString(messages);System.out.println("jsonString: " + jsonString);resp.setContentType("application/json; charset=utf8");resp.getWriter().write(jsonString);}/*** 将一条消息保存到数据库中* @param message 要保存的数据*/private void save(Message message){Connection connection = null;PreparedStatement statement = null;try {// 1. 和数据库连接connection = DBUtil.getConnection();// 2. 构造 sqlString 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. 执行 sqlstatement.executeUpdate();} catch (SQLException e) {e.printStackTrace();} finally {// 4. 释放资源DBUtil.close(connection, statement, null);}}/*** 从数据库中获取到所有的表白信息* @return 返回一个List，存储的就是表白信息*/private List<Message> load(){List<Message> messages = new ArrayList<>();Connection connection = null;PreparedStatement statement = null;ResultSet resultSet = null;try {// 1. 和数据库连接connection = DBUtil.getConnection();// 2. 构造 sqlString sql = "select * from message";statement = connection.prepareStatement(sql);// 3. 执行 sqlresultSet = statement.executeQuery();// 4. 存储while (resultSet.next()){Message message = new Message();message.from = resultSet.getString("from");message.to = resultSet.getString("to");message.message = resultSet.getString("message");messages.add(message);}} catch (SQLException e) {e.printStackTrace();} finally {// 4. 释放资源DBUtil.close(connection, statement, resultSet);}return messages;}
}