程序设计——前后端分离实现简单表白墙

文章目录

一、前端页面样式代码
二、前后端衔接
- 1. 后端创建 maven 项目
- 2. 针对前后端交互的解释以及后端代码的实现
- - 针对 post 请求解释前后端衔接
  - 针对 Get 请求解释前后端衔接
- 3.后端与数据库的联系以及对数据的存取
- - 单独封装数据库连接代码
  - 解释后端存储 save 数据的代码
  - 解释后端读取 load 数据代码
三、总结

本篇文章所实现的这个表白墙，是一个前后端分离的一个 web 程序。

本篇文章中整体的代码本人以及上传至 gitee 如有需要可以访问查看：整体代码

这篇文章会重点解释后端的实现，对此，前端页面样式构建的代码不会进行过多的解释，将会直接的呈现在大家面前。

一、前端页面样式代码

<!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><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 auto;}.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: wheat;background-color: #ff6600;border: none;}/* 让点击的时候有一个反馈 */.row button:active{background-color: #535350;}
</style><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"><button id = "revert">撤销</button></div></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>javascript">// 在这里实现提交操作，点击提交按钮，就可以将用户输入的内容提交到页面上来显示//在点击的时候获取三个输入框中的文本内容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 构造divlet rowDiv = document.createElement('div');rowDiv.className = 'row massage';rowDiv.innerHTML = from + '对' + to + '说' + msg;containerDiv.appendChild(rowDiv);//3.清空前面的输入for(let input of inputs){input.value = '';}// 4. [新增] 给服务器发起 post 请求, 把上述数据提交到服务器这边let body = {"from": from,"to": to,"message": msg};let strBody = JSON.stringify(body);console.log("strBody: " + strBody);$.ajax({type: 'post',url: 'message',data: strBody,contentType: "application/json; charset=utf8",success: function(body) {console.log("数据发布成功");}});}let revertButton = document.querySelector('#revert');revertButton.onclick = function(){//删除最后一条消息//选中所有的 row ，找出最后一个 rowlet rows = document.querySelectorAll('.massage');if (rows == null || rows.length == 0) {return;}containerDiv.removeChild(rows[rows.length-1]);}// [新增] 在页面加载的时候, 发送 GET 请求, 从服务器获取到数据并添加到页面中$.ajax({// 将前面获取到变量名的值 给到这边对应的 valuetype: 'get',url: 'message',success: function(body) {// 此处拿到的 body 就是一个 js 的对象数组了. // 本来服务器返回的是一个 json 格式的字符串, 但是 jquery 的 ajax 能够自动识别// 自动帮我们把 json 字符串转成 js 对象数组// 接下来遍历这个数组, 把元素取出来, 构造到页面中即可let containerDiv = document.querySelector('.container')for (let message of body) {// 针对每个元素构造一个 divlet rowDiv = document.createElement('div');rowDiv.className = 'row message';rowDiv.innerHTML = message.from + '对' + message.to + '说:' + message.message;containerDiv.appendChild(rowDiv);}}});
</script></body>
</html>

浏览器页面展示：
https://img-blog.csdnimg.cn/2ce29a1f563848fcaf4e85c594899425.png" alt="在这里插入图片描述" />

二、前后端衔接

1. 后端创建 maven 项目

创建必要的目录文件 webapp、WEB-INF、web.xml
https://img-blog.csdnimg.cn/477561bf4b0f4aec922d9426e7819f6f.png" alt="在这里插入图片描述" />
这里的 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>

调整 pom.xml
这里需要再 maven 仓库中引入三个对应的 jar 包。分别是：
servlet： 该 jar 包提供了大量后续代码需要使用的 Tomcat API。
jackson： 便于前后端使用 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>MassageWall</artifactId><version>1.0-SNAPSHOT</version><properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.target></properties><dependencies>
<!--对应的 servlet 的 jar 包--><!-- 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><!--对应的 Jackson 的 jar 包--><!-- 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><!--对应的 mysql 的 jar 包--><!-- 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>

将前端页面拷贝到 webapp 中
https://img-blog.csdnimg.cn/1c0c2f8a5dd847f4b3765630d7c4c2ef.png" alt="在这里插入图片描述" />
要注意，这里的 html 文件必须放对地方，否则后面代码的运行就会出现问题。

2. 针对前后端交互的解释以及后端代码的实现

首先，这里我们需要在 main 文件下创建一个新的 Java 文件，并在其中创建出两个新的类，来书写我们的后端代码。如图：
https://img-blog.csdnimg.cn/2f39e3ea91264878b1e3538d49871ddb.png" alt="在这里插入图片描述" />

当前的代码是在 massageServlet 中实现的。

在所有的代码实现之前，我们都需要进行规划，来确保我们每一步都在正确的方向上。
对于这里的代码，我们首先就需要进行约定。

这里的约定，本质上就是描述一个前后端信息交互时的格式。

针对 post 请求解释前后端衔接

前端页面的 post 请求约定

这里切记一点，这里的前端页面是存放在 webapp 文件夹中的，后端代码是可以接收到其发出的 post 请求的。

在前端页面中，点击提交时就会发出一个 post 请求。
此时，就会发送一个如下图所示的 Json 字符串。这个字符串就是对应的约定格式。
https://img-blog.csdnimg.cn/51ae2ee8121549b7a3479ecc5e2cf1f5.png" alt="在这里插入图片描述" />
在前端代码中，构建这样的请求代码截取下来就是下图形式：
https://img-blog.csdnimg.cn/74e7a50428a5476b95b7656a0e05ef7f.png" alt="在这里插入图片描述" />

后端页面接受 post 请求的约定

对于后端代码，接受 post 请求实现的是 doPost 方法。在接受传入的信息之前，后端代码需要定义一个 class 来作为约定来接受信息。如图：
https://img-blog.csdnimg.cn/01a723d17e2e4b63835db9a3ad5e543c.png" alt="在这里插入图片描述" />
下半部分是 doPost 方法的实现，其中 readValue 会将获取到的 json 字符串转化为 java 对象。
后端代码这里的作用是： 将前端传递的信息进行获取并储存起来。

注： https://img-blog.csdnimg.cn/b4820dc2dc2a42dd9d18e48aeaa8ae41.png" alt="在这里插入图片描述" />
这个问题会在后面与数据库连接的代码中进行讲解。

从整体上来简单解释一下前后端 post 请求之间的配合。
https://img-blog.csdnimg.cn/6571bcaa609146f8a610f33d16eccd04.png" alt="在这里插入图片描述" />

针对 Get 请求解释前后端衔接

前端页面的 get 请求

对于前端页面，我们知道，在我们根据文件目录进行访问时，每次访问，前面的数据信息就会消失。
但是，在与后端连接时，前端页面在加载时，就会向后端服务器发送一个 get 请求获取之前的信息。
之后将其显示在浏览器的页面上。

前端连接的代码如下：
https://img-blog.csdnimg.cn/30bac6e5d926439aae2c3522103ccdd9.png" alt="在这里插入图片描述" />
这里的 ajax 会将后端传递过来的 json 格式字符串识别为 js 能够识别的数据。

后端代码实现 doGet 方法

对于后端，在得到前端 get 请求之后。就会执行 doGet 方法来实现对前端的相应。
即就是，将之前的信息进行读取并解析为 json 字符串后，将其发送到前端的 body 中。
代码如下：
https://img-blog.csdnimg.cn/23c8adc19b274ed6a7b3dd8149816800.png" alt="在这里插入图片描述" />

注：
https://img-blog.csdnimg.cn/53ddd35589c943209cdf47c8a0b625da.png" alt="在这里插入图片描述" />
同样的，这句读取代码会在后面与数据库连接时进行解释。

从整体上简单解释一下前后端在 get 请求之间的配合。大致如下：
https://img-blog.csdnimg.cn/27f7b4ab6af84dc98bee08d73679d1e9.png" alt="在这里插入图片描述" />

3.后端与数据库的联系以及对数据的存取

到这里，前后端之间的信息交互的代码已经结束了。
从这里开始，我将会进行后端对数据的存储，以及前端页面加载时数据从数据库中的读取进行解释。

单独封装数据库连接代码

首先在 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;//通过这个类将数据库连接封装一下
// 此处这个类作为一个工具类，提供 static 方法供以调用
public class DBUtil {//静态成员跟随类对象，类对象在整个进程中只有一份//静态成员相当于是唯一的事例。(单例模式，饿汉模式)private static DataSource dataSource = new MysqlDataSource();//这里的代码在类加载的时间就会被创建出来static{//使用静态代码块，针对 DataSource 进行初始化//这里与 JDBC 有相似之处，需要将连接的信息建立起来((MysqlDataSource)dataSource).setURL("jdbc:mysql://127.0.0.1:3306/wall?characterEncoding=utf8&useSSL=false");((MysqlDataSource)dataSource).setUser("root");((MysqlDataSource)dataSource).setPassword("wjh123456");}//通过这个方法来建立连接public static Connection getConnection() throws SQLException {return dataSource.getConnection();}//通过这个方法断开连接，释放资源//connection    就是指连接的状态//statement     是指当前正在执行的 sql 语句//resultSet     是指当前正在获取 sql 语句执行的结果public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet){// 此处的三个 try catch 分开写更好, 避免前面的异常导致后面的代码不能执行.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();}}}
}

这里的代码还是比较好理解的，大致分为两部分：
1、实现一个连接方法，将代码和数据库的连接独立出来，在其他方法请求时立即反应并进行连接。(饿汉模式)。

这里的 static 使得代码在类加载时就已经生产出来了，也就是说一直在等待着被连接。

2、实现一个关闭方法，断开连接，并注意异常的处理。

注意事项：https://img-blog.csdnimg.cn/1cbeda95a2884459952cbcbedb1178d7.png" alt="这里是引用" />

解释后端存储 save 数据的代码

https://img-blog.csdnimg.cn/52029050bd6a4f308c66afd5f566c90c.png" alt="在这里插入图片描述" />
这里解释的就是在 doPost 中的 save 方法。

这里的 save 与 JDBC 中的存储非常相似，代码不难理解，大致分为四步：
1、建立连接
2、构造 SQL 语句
3、执行 SQL 语句
4、断开连接

代码如下：

java">    private void save(Message message){//JDBC 操作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. 执行 sqlstatement.executeUpdate();} catch (SQLException e) {e.printStackTrace();}finally {// 4. 关闭连接.保证代码一定可以执行到DBUtil.close(connection, statement, null);}}

注意事项：
https://img-blog.csdnimg.cn/55dfc71df01f41bd8794857f5e211523.png" alt="在这里插入图片描述" />

解释后端读取 load 数据代码

https://img-blog.csdnimg.cn/6fff8be1e50f4852b67f1c8b4b3ed0fa.png" alt="在这里插入图片描述" />
这里解释的就是 doGet 中的 load 方法。

同样的，这里的代码与 JDBC 中的操作很是相似，代码同样不难理解，大致分为下面四步：
1、与数据库建立连接
2、构造 SQL 语句
3、执行 SQL 语句
4、遍历结果集合，并存放到链表中进行返回
5、断开与数据库连接

java">    //从数据库中获取所有消息private List<Message> load(){List<Message> messageList = 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");messageList.add(message);}} catch (SQLException e) {e.printStackTrace();} finally {// 5. 需要释放资源, 断开连接DBUtil.close(connection, statement, resultSet);}return messageList;}

三、总结

到这里，前后端分离的实现就已经大功告成了。

整体的运行展示：
1.启动服务器
https://img-blog.csdnimg.cn/d1fe84421aab469ca1f34b12d49d0b8c.png" alt="在这里插入图片描述" />
2.访问网页页面
https://img-blog.csdnimg.cn/5c0fdd31d06640b68b5e740bcd5f43a1.png" alt="在这里插入图片描述" />

从整体的逻辑上看，前端，后端，数据库三者之间的联系，大致如下图所示：
https://img-blog.csdnimg.cn/968284cd33ef4573a00984a8fe746565.png" alt="在这里插入图片描述" />
码子不易，您小小的点赞是对我最大的鼓励！！！