javaEE初阶 — 服务器版本的表白墙案例

柔光的暖阳◎ 2023-10-09 18:48 128阅读 0赞

#### 文章目录 ####

*  原来版本涉及的问题
 *  设计程序
 *   *  1 点击提交
     *  2 页面加载
 *  实现后端代码
 *   *  1 新建一个 Maven 项目。
     *  2 按照之前第一个 Servlet 程序的步骤来进行设置
     *  3 新建一个 MessageServlet 类
 *  实现前端代码
 *   *  1 点击提交的时给服务器发送一个 POST 请求
     *  2 在页面加载时发送一个 GET 请求
     *  3 将数据保存到数据库中

## 原来版本涉及的问题 ##

[表白墙链接][Link 1]

之前完成的表白墙有两个非常严重的问题：

1、如果刷新页面或者关闭重开，此时表白墙之前保存的消息就消失了

2、表白墙的数据只能在本地浏览器中看见  
  
![6f42aab0d12d40848a974463f1608ddb.png_pic_center][]  
  
此时如果刷新页面或者关闭重开，此时表白墙的数据就消失了。

解决思路

让服务器来存储用户提交的数据，有服务器保存。

当有新的浏览器打开页面的时候，从服务器获取数据。

## 设计程序 ##

实现一个 web 程序，务必要考虑前后端如何交互，要约定好前后端交互的数据格式。

比如说：  
设计前后端交互接口、请求是什么样的、响应是什么样的、浏览器什么时候发这个请求、浏览器按照什么样的格式来解析。  
  
  
有两个环节涉及到了前后端的交互：

一个是 **点击提交** 的时候，也就是浏览器把表白信息发到服务器。  
一个是 **页面加载** 的时候，也就是浏览器从服务器获取到表白信息。

### 1 点击提交 ###

**请求** 可以使用 **POST**，再使用一个 **/message** 这样的路径。

约定当前 **body** 是按照 **json** 格式来进行提供

{
        
      from: "张三",
      to: "李四",
      message: "卧槽"
    }

**响应** 可以约定为，**HTTP/1.1 200 OK**

### 2 页面加载 ###

**请求** 可以约定为 **GET**，再来一个 **/message** 路径，**响应** 也可以约定为 **HTTP/1.1 200 OK**。

只不过此时的响应要按照 **json数组** 的格式来进行解析。

[
      {
        
        from: "张三",
        to: "李四",
        message: "卧槽"
      },
      
      {
        
        from: "张三",
        to: "李四",
        message: "卧槽"
      } 
    ]

此处的约定没有固定的强制要求，只要能保证必要的需求即可。  
此处的目的就是为了前端代码和后端代码能够对上。

## 实现后端代码 ##

### 1 新建一个 Maven 项目。 ###

![85a1ae578e8a41cfb441bc95f990c38e.png_pic_center][]

### 2 按照之前第一个 Servlet 程序的步骤来进行设置 ###

[第一个Servlet 程序链接][Servlet]  
  
1、首先要引入 **Servlet、jackson、mysql 依赖**，将这三个依赖引入到 **dependencies** 标签中。

打开 **https://mvnrepository.com/**，搜索 servlet，找到 **3.1.0** 版本。  
  
![fca5a689378c44c88ebfd4d7ebb6ad82.png_pic_center][]  
  
选择如上图的 Servlet，点击进去选择 3.1.0版。  
  
![75c9d5d4e7b04a7fb634681e7ead3f26.png_pic_center][]  
  
点击进去之后将 Maven 下的代码复制到 **pom.xml** 文件的 dependencies 标签中。

**jackson 选择如下图的**  
  
![e2ff7f95bc7f46309b6723cd1ff6c06b.png_pic_center][]  
  
![c626282c8e2f4cde9c6fb65374f5b046.png_pic_center][]  
  
点击 **2.14.2** 版本，其余的步骤与 servlet 一样。

mysql 依赖选择如下图的点击  
  
![1bad9278da3448979f93a0fbb3ab6eb9.png_pic_center][]  
这里引入 mysql 依赖是因为可以使用 数据库来保存用户提交的数据。  
  
选择 **5.1.49** 版本。  
  
![1cc98664064042ae96671003d0a4f00d.png_pic_center][]  
  
其余的步骤也与 servlet 一样。  
  
  
![b34fe63b951447c09cd6f371248ffc0d.png_pic_center][]  
  
以上是三个依赖引入好的样子。  
  
  
2、接下来开始**创建目录**  
  
![545adb8518f54a1b8a089bb191d3b3e6.png_pic_center][]  
  
  
3、往web.xml 中添加一点内容  
  
![cda85b572d6b49828babf8c652bd44f8.png_pic_center][]

### 3 新建一个 MessageServlet 类 ###

这里的路径要和之前约定好的相同。  
  
![103f9c790fb44449872951740cae868f.png_pic_center][]  
  
1、重写 **doPost 和 doGet** 方法  
  
![68698b98713e444c9b641fd1455f0e19.png_pic_center][]  
  
  
2、**实现向服务器提交数据的 POST 请求**  
  
要先定义一个 Message 类，描述请求 body 的内容，方便 **jackson** 进行 json 解析。

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

先构建一个 ObjectMapper，再读取 body 里的内容，然后再解析成一个 Message 对象，  
最后就是填到 **List** 变量里。

// 暂时使用 List 变量保存所有消息 —— 比较简单粗暴
    private List<Message> messageList = new ArrayList<>();
    
    // 向服务器提交数据
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        
        // 构造一个 ObjectMapper
        ObjectMapper objectMapper = new ObjectMapper();
        // 把 body 的内容读取出来，解析成一个 Massage 对象
        Message message = objectMapper.readValue(req.getInputStream(), Message.class);
        messageList.add(message);
        // 设置状态码，不设置默认也是 200
        resp.setStatus(200);
    }

3、**实现从服务器获取数据的 GET 请求**  
  
获取数据直接从 List 变量获取即可，也就是把 List 对应的结果给转成 json 格式的字符串，返回即可。

// 从服务器获取数据
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        
        // 显示的告诉浏览器，数据格式是 json 格式，字符集是 utf-8
        resp.setContentType("application/json; charset = utf-8");
        // 第一个参数表示写到哪里，第二个参数表示写的内容是什么
        objectMapper.writeValue(resp.getWriter(), messageList);
    }

**getWriter()** 这个方法同时把 java 对象转成了 json 字符串和吧这个字符串写到响应对象中。  
  
针对 doGet，只是把 messageList 转成 json 字符串，然后返回给浏览器即可。

此时后端代码就写完了，启动服务器，然后打开 postman 发送请求验证一下。  
  
![3115453d96cc402681fd69c051ffe3bf.png_pic_center][]  
  
先选择 POST，在 body 里输入内容后点击 Send 发送一个请求。  
  
之后，切换为 GET 接收，再次点击 Send 就可以得到下面的结果了，下面是发送了三次请求的结果。  
  
![92490f8182fa49c3b2e56a31ff66ef9f.png_pic_center][]

## 实现前端代码 ##

编写前端代码，让页面能够发起请求，并解析响应。

post 是点击提交按钮的时候发起的，get 是页面加载的时候发起的。

### 1 点击提交的时给服务器发送一个 POST 请求 ###

首先要将前端代码的文件复制到 **webapp** 目录下。  
  
![805a9a58da76431cb6b62bd4599bf439.png_pic_center][]  
  
![42d05cdd53db4d2ca3ccc666db294f92.png_pic_center][]  
  
然后以 vscode 打开。  
  
![ae23d0953cbc4cf0bdff4d1455b98c17.png_pic_center][]  
  
  
首先要引入 **jQuery**  
  
搜索 **jQuery cdn**，将链接复制到 **script** 标签里的 src 属性里。

POST 是在点击提交按钮的时候触发的，点击这里的 **button** 就是点击了按钮。  
此时就会触发了 POST 请求。

let button = document.querySelector('#submit');

![4268b0cd8fba46ef836c64f311c4f8a6.png_pic_center][]  
  
当前的代码再点击提交按钮后，会触发 **onclick** 回调方法，这里的回调方法只是构造了一个新的 div。  
  
**接下来要做的就是实现一个新的步骤，把上述代码中的数据提交到服务器里。**

// [新增]4. 使用 ajax 构造一个 post 请求， 把上述数据提交到服务器里
     // 构造一个 body
     let body = {
        
         "from": from,
         "to": to,
         "message": message 
     }
    
     $.ajax({
        
         // 这里是要构造的请求类型
         type: 'post',
         // 这里的路径要和之前约定好的前后端交互接口一致
         url: i'message',
         // post 请求是有 body 的，所以就要设置一个 body
         data: 
     });

![436ddaca3645435ca199fc704d981981.png_pic_center][]  
  
这里设置的 body 是 定义了一个 js 对象，类似于 json 的键值对。

key 是一个字符串，也就是图中的 “from”、“to”、“message” 三个。  
value 则是 js 中的变量/常量，也就是字符串后面的值。  
  
  
在 js 中要求对象的 key 务必是字符串，因此此处的代码还可以是以下的写法：  
  
![b189550b2fe147b9a2223b1a45607577.png_pic_center][]  
  
![31823c600c0145c493257fc1b6b39e4d.png_pic_center][]  
  
**当前 body 里的 vlaue 值是由页面上的输入框读取到的内容放到变量里的。**  
  
需要注意的是当前的 js 对象不是字符串，在网络传输中，只能传字符串，不能传对象。  
接下来需要把这个对象转成一个字符串。  
  
![c87af107bedc4cfd90509d5c18e80d39.png_pic_center_pic_center][]  
  
  
**接下来进行的操作是将 js 对象转成一个 json 格式的字符串。**  
  
在 js 中内置了 json 的转换库，此时就不需要像 java 好要有第三方库 jackson 了。  
  
可以使用 **JSON.stringify** 转为 json 格式的字符串。

// 将 js 对象转为 json 格式的字符串
    let strBody = JSON.stringify(body);
    // 打印日志
    console.log("strBody:" + strBody);
    $.ajax({
        
        // 这里是要构造的请求类型
        type: 'post',
        // 这里的路径要和之前约定好的前后端交互接口一致
        url: 'message',
        // post 请求是有 body 的，所以就要设置一个 body
        data: strBody,
        // 指定 body 的具体格式
        setContentType: "application/json; charset = utf-8",
        success: function(body) {
        
            console.log("数据发布成功！")
        }
    });

**接下来启动服务器观察结果。**  
  
在启动服务器之后，就可以通过浏览器来打开表白墙的页面了。  
  
在地址栏输入路径，就可以看到表白墙页面了。  
  
![9907758e8691440ca95b696607aeecd6.png_pic_center][]  
  
  
打开 fiddler 抓包观察结果。  
  
![005f801ec0a84ad389ceb0c445c5a358.png_pic_center][]  
  
![cc32715c8fe64dfe9579b41557cbd0fb.png_pic_center][]  
  
根据前端代码的设置可以看到抓包的结果各个设置是一样的。

### 2 在页面加载时发送一个 GET 请求 ###

这里构造的就是一个 get 请求了。

// [新增] 在页面加载的时候，发送 GET 请求，从服务器获取数据并添加到页面中
     $.ajax({
        
         type: 'get',
         url: 'message',
         success: function(body) {
        
             // 这里的 body 已经是一个 js 的对象数组了 
             // 本来服务器返回的是一个 json 格式的字符串，但是 jQuery 的 ajax 自动识别并转化了
             // 接下来遍历这个数据，把元素取出来构造页面中即可
             for(let message of body) {
        
                 // 针对每一个元素构造一个 div
                 let rowDiv = document.createElement('div');
                 rowDiv.className = 'row'; // 有了一个 row 的属性
                 rowDiv.innerHTML = message.from + ' 对 ' + message.to + ' 说: ' + message.message;
                 containerDiv.appendChild(rowDiv); 
             }
         }
     });

本来需要将 json 格式的字符串转为一个 js 对象数组，但是由于 jQuery 的 ajax 自动转化了。  
因此这里的 body 已经是一个 js 对象了。

### 3 将数据保存到数据库中 ###

由于当前的数据是借助变量保存的，重启服务器后就会导致数据消失。  
因此想要永久的保存，就需要来借助数据库保存。

1、首先要创建一个数据表。  
  
![8d39844fe2bb46dd940c9bdbea85fa6b.png_pic_center][]  
  
当前已创建完成。  
  
  
2、创建一个 **DBUtil** 类。  
  
需要注意的是 **jdbc:mysql://127.0.0.1:3306/web?characterEncoding=utf8&useSSL=false**。  
这条语句里的 web 是我的数据库名，在这里要根据实际情况来更改。

// 通过这个类把数据库连接过程封装一下
    // 此处把 DBUtil 作为一个工具类，提供 static 方法来供其他代码调用
    public class DBUtil {
        
        private static DataSource dataSource = new MysqlDataSource();
        
        static {
        
            // 使用静态代码块,针对 dataSource 进行初始化操作
            ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/web?characterEncoding=utf8&useSSL=false");
            ((MysqlDataSource)dataSource).setUser("root");
             // 密码是什么，写什么
            ((MysqlDataSource)dataSource).setPassword("000000");
        }
    
        // 通过这个方法来建立连接
        public static Connection getConnection() throws SQLException {
        
            return (Connection)dataSource.getConnection();
        }
    
        // 通过这个方法来释放资源
        public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet) {
        
            // 此处的 三个 try catch 分开写，避免前面的异常导致后面的代码不能运行
            if (resultSet != null) {
        
                try {
        
                    connection.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();
                }
            }
        }
    }

3、提供一对方法来保存数据  
  
**save** 方法是用来往数据库中存数据。

private void save(Message messageWall) {
        
            // JDBC 操作
            Connection connection = null;
            PreparedStatement statement = null;
            try {
        
                // 1.建立连接
                connection = DBUtil.getConnection();
                // 2.构造 sql 语句
                String sql = "insert into messagewall values(?, ?, ?)";
                statement = (PreparedStatement)connection.prepareStatement(sql);
                // 将上面的三个 ? 占位符替换为 from to message
                statement.setString(1, messageWall.from);
                statement.setString(2, messageWall.to);
                statement.setString(3, messageWall.message);
                // 3.执行 sql
                statement.executeUpdate();
            } catch (SQLException e) {
        
                e.printStackTrace();
            } finally {
        
                // 4.关闭连接
                DBUtil2.close(connection, statement, null);
            }
        }

**load** 方法是用来从数据库中拿数据。

private List<Message> load() {
        
    
            List<Message> messageList = new ArrayList<>();
    
            Connection connection = null;
            ResultSet resultSet = null;
            PreparedStatement statement = null;
            try {
        
                // 1.和数据库建立连接
                connection = DBUtil.getConnection();
                // 2.构造 sql 语句
                String sql = "select * from messagewall";
                statement = (PreparedStatement)connection.prepareStatement(sql);
                // 3.执行 sql
                resultSet = 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 中
                    messageList.add(message);
                }
            } catch (SQLException e) {
        
                e.printStackTrace();
            } finally {
        
                // 5.断开连接
                DBUtil2.close(connection, statement, resultSet);
            }
            return messageList;
        }

[Link 1]: https://editor.csdn.net/md/?articleId=129679113
[6f42aab0d12d40848a974463f1608ddb.png_pic_center]: https://img-blog.csdnimg.cn/6f42aab0d12d40848a974463f1608ddb.png#pic_center
[85a1ae578e8a41cfb441bc95f990c38e.png_pic_center]: https://img-blog.csdnimg.cn/85a1ae578e8a41cfb441bc95f990c38e.png#pic_center
[Servlet]: https://editor.csdn.net/md/?articleId=130022817
[fca5a689378c44c88ebfd4d7ebb6ad82.png_pic_center]: https://img-blog.csdnimg.cn/fca5a689378c44c88ebfd4d7ebb6ad82.png#pic_center
[75c9d5d4e7b04a7fb634681e7ead3f26.png_pic_center]: https://img-blog.csdnimg.cn/75c9d5d4e7b04a7fb634681e7ead3f26.png#pic_center
[e2ff7f95bc7f46309b6723cd1ff6c06b.png_pic_center]: https://img-blog.csdnimg.cn/e2ff7f95bc7f46309b6723cd1ff6c06b.png#pic_center
[c626282c8e2f4cde9c6fb65374f5b046.png_pic_center]: https://img-blog.csdnimg.cn/c626282c8e2f4cde9c6fb65374f5b046.png#pic_center
[1bad9278da3448979f93a0fbb3ab6eb9.png_pic_center]: https://img-blog.csdnimg.cn/1bad9278da3448979f93a0fbb3ab6eb9.png#pic_center
[1cc98664064042ae96671003d0a4f00d.png_pic_center]: https://img-blog.csdnimg.cn/1cc98664064042ae96671003d0a4f00d.png#pic_center
[b34fe63b951447c09cd6f371248ffc0d.png_pic_center]: https://img-blog.csdnimg.cn/b34fe63b951447c09cd6f371248ffc0d.png#pic_center
[545adb8518f54a1b8a089bb191d3b3e6.png_pic_center]: https://img-blog.csdnimg.cn/545adb8518f54a1b8a089bb191d3b3e6.png#pic_center
[cda85b572d6b49828babf8c652bd44f8.png_pic_center]: https://img-blog.csdnimg.cn/cda85b572d6b49828babf8c652bd44f8.png#pic_center
[103f9c790fb44449872951740cae868f.png_pic_center]: https://img-blog.csdnimg.cn/103f9c790fb44449872951740cae868f.png#pic_center
[68698b98713e444c9b641fd1455f0e19.png_pic_center]: https://img-blog.csdnimg.cn/68698b98713e444c9b641fd1455f0e19.png#pic_center
[3115453d96cc402681fd69c051ffe3bf.png_pic_center]: https://img-blog.csdnimg.cn/3115453d96cc402681fd69c051ffe3bf.png#pic_center
[92490f8182fa49c3b2e56a31ff66ef9f.png_pic_center]: https://img-blog.csdnimg.cn/92490f8182fa49c3b2e56a31ff66ef9f.png#pic_center
[805a9a58da76431cb6b62bd4599bf439.png_pic_center]: https://img-blog.csdnimg.cn/805a9a58da76431cb6b62bd4599bf439.png#pic_center
[42d05cdd53db4d2ca3ccc666db294f92.png_pic_center]: https://img-blog.csdnimg.cn/42d05cdd53db4d2ca3ccc666db294f92.png#pic_center
[ae23d0953cbc4cf0bdff4d1455b98c17.png_pic_center]: https://img-blog.csdnimg.cn/ae23d0953cbc4cf0bdff4d1455b98c17.png#pic_center
[4268b0cd8fba46ef836c64f311c4f8a6.png_pic_center]: https://img-blog.csdnimg.cn/4268b0cd8fba46ef836c64f311c4f8a6.png#pic_center
[436ddaca3645435ca199fc704d981981.png_pic_center]: https://img-blog.csdnimg.cn/436ddaca3645435ca199fc704d981981.png#pic_center
[b189550b2fe147b9a2223b1a45607577.png_pic_center]: https://img-blog.csdnimg.cn/b189550b2fe147b9a2223b1a45607577.png#pic_center
[31823c600c0145c493257fc1b6b39e4d.png_pic_center]: https://img-blog.csdnimg.cn/31823c600c0145c493257fc1b6b39e4d.png#pic_center
[c87af107bedc4cfd90509d5c18e80d39.png_pic_center_pic_center]: https://img-blog.csdnimg.cn/c87af107bedc4cfd90509d5c18e80d39.png#pic_center#pic_center
[9907758e8691440ca95b696607aeecd6.png_pic_center]: https://img-blog.csdnimg.cn/9907758e8691440ca95b696607aeecd6.png#pic_center
[005f801ec0a84ad389ceb0c445c5a358.png_pic_center]: https://img-blog.csdnimg.cn/005f801ec0a84ad389ceb0c445c5a358.png#pic_center
[cc32715c8fe64dfe9579b41557cbd0fb.png_pic_center]: https://img-blog.csdnimg.cn/cc32715c8fe64dfe9579b41557cbd0fb.png#pic_center
[8d39844fe2bb46dd940c9bdbea85fa6b.png_pic_center]: https://img-blog.csdnimg.cn/8d39844fe2bb46dd940c9bdbea85fa6b.png#pic_center