JavaEE-实现一个服务器版本的“表白墙”

最新推荐文章于 2024-09-09 23:01:22 发布
最新推荐文章于 2024-09-09 23:01:22 发布
阅读量845 收藏
点赞数 1
文章标签： 服务器 java-ee servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61341342/article/details/129559202
版权

目录

实现一个服务器版本的“表白墙”

实现的这个表白墙，就通过服务器，来保存这里的消息数据。
从而进一步的做到“持久化”存储~~

在实现这个程序的时候，就需要先考虑清楚，客户端和服务器如何进行交互~
约定前后端交互的接口~
(自定义应用层协议)

既然是搞一个服务器，服务器就得提供一些服务，具体是提供啥样的服务？以及这些服务该如何触发？

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

  1. 告诉服务器，当前留言了一条啥样的数据~(当用户点击提交按钮的时候，就会给服务器发送一个HTTP请求，让服务器把这个消息给存储下来)
  2. 从服务器获取到，当前都有哪些留言数据~(当页面加载，就需要从服务器获取到曾经存储的这些消息内容)

第一个接口

约定好，为了实现这个效果，客户端要发送一个啥样的HTTP请求，服务器返回一个啥样的HTTP响应~

请求：
POST /message
{
	from: "黑猫",
	to: "白猫",
	message: "喵" 
}

或者

POST /messageWall
from=黑猫&to=白猫&message=喵

或者

GET /message?from=黑猫&to=白猫&message=喵

或者

POST /message
	{
		f: "黑猫",
		t: "白猫",
		m: "喵" 
	}

按照上述的思路发散开，有无数种方式来约定请求格式！
方法可以变，路径可以变，参数的名字可以变~

这么多的约定方式，到底采取哪一种？
哪种都可以！只要能够明确下来其中的一种，并且在后续编写前端/后端代码的时候能够严格执行，就是ok的。
这也是约定前后端接口的意义！
自定义协议！(约束程序员的自由，不能随便乱写代码~)

当前就是用第一种方式！

请求：
POST /message
{
	from: "黑猫",
	to: "白猫",
	message: "喵" 
}

响应：
HTTP/1.1 200 OK
{
	ok: true
}

第二个接口

请求：
GET /message

响应：
HTTP/1.1 200 OK
Content-Type:application/json
[
	{
		from: "黑猫",
		to: "白猫", 
		message: "喵",
	},
	{
		from: "黑猫",
		to: "白猫", 
		message: "喵",
	},
	{
		from: "黑猫",
		to: "白猫", 
		message: "喵",
	},
]

确定接口之后，就可以编写代码了~

后端开发

先进行准备工作.

1.创建项目(maven)

在这里插入图片描述

2.引入依赖

引入Servlet，去中央仓库找~
在这里插入图片描述
在这里插入图片描述
接下来就是jackson
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.创建目录结构

在这里插入图片描述

<!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>

4.编写代码

在这里插入图片描述
这个和前面约定的前后端交互接口是匹配的~

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;

@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 处理提交消息请求
        resp.getWriter().write("hello post");
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 获取消息列表
        resp.getWriter().write("hello get");
    }
}

5/6. 打包和部署

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7. 验证

在这里插入图片描述

初步后端代码

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.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();

    private List<Message> messages = new ArrayList<>();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 处理提交消息请求
        Message message = objectMapper.readValue(req.getInputStream(), Message.class);
        // 最简单的保存方法就是保存在内存中
        messages.add(message);
        // 通过 ContentType 来告知页面，返回的数据是 json格式
        // 有了这样的声明，此时 jquery ajax 就会自动的帮我们把字符串转成 js 对象
        // 如果没有， jquery ajax 就只是当成字符串来处理
        resp.setContentType("application/json; charset=utf8");
        resp.getWriter().write("{  \"ok\":true }");
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 获取消息列表,只要把消息列表中的内容整个返回给客户端即可
        // 此处需要使用 ObjectMapper 把 Java 对象，转成 JSON 格式字符串
        String jsonString = objectMapper.writeValueAsString(messages);
        System.out.println("jsonString: " +jsonString);
        resp.getWriter().write(jsonString);
    }
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
当前我们已经把后端逻辑编写完毕，接下来来写前端代码

前端代码

在webapp里面放~
在这里插入图片描述

<!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>
    <div class="container">
        <h1>表白墙</h1> 
        <p>输入后点击提交, 会将信息显示在表格中</p> 
        <div class="row">
            <span>谁: </span> 
            <input class="edit" type="text">     
        </div>     
        <div class="row">
            <span>对谁: </span>
            <input class="edit" type="text">
        </div>

        <div class="row">
            <span>说什么: </span>
            <input class="edit" type="text">
        </div>

        <div class="row">
            <input type="button" value="提交" class="submit">
        </div>
    </div>
    <style>

        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 400px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            padding: 20px 0;
        }
        p {
            color: #666;
            text-align: center;
            font-size: 14px;
            padding: 10px 0;
        }
        .row {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        span {
            width: 100px;
            line-height: 40px;
        }
        .edit {
            width: 200px;
            height: 30px;
        }
        .submit {
            width: 304px;
            height: 40px;
            color: white;
            background-color: orange;
            border: none;
        }
    </style>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>
        // 加入 ajax 的代码，此处要加入的逻辑有两个部分
        // 点击按钮提交的时候，ajax 要构造数据发送到服务器
        // 页面加载的时候，从服务器获取消息列表，并在界面上直接显示

        function getMessage() {
            $.ajax({
               type: 'get',
               url: 'message',
               success: function(body) {
                // 当前 body 已经是 一个 js对象数组了，ajax 会根据响应的 content type 来在自动解析
                // 如果服务器返回的 content type 已经是 application/json了， ajax 就会把body自动转成 js 的对象
                // 如果客户端没有自动转，也可以通过 JSON.parse() 这个函数来手动转
                // 依次来取数组中的每个元素
                for (let message of body) {
                    let row =document.createElement('div');
                        row.className='row';
                        row.innerHTML=message.from+'对'+message.to+'说:'+message.message;
                        container.appendChild(row);
                }
               } 
            });
        }

        // 加上函数调用
        getMessage();

        // 给点击按钮注册点击事件
        let submit = document.querySelector('.submit');
        submit.onclick = function () {
            // 1. 获取到编辑框内容
            let edits = document.querySelectorAll('.edit');
            let from = edits[0].value;
            let to = edits[1].value;
            let message = edits[2].value;
            console.log(from + "," + to + "," + message);
            if (from == '' || to == '' || message == '') {
                return;
            }
            // 2. 构造 html 元素
            let row = document.createElement('div');
            row.className = 'row';
            row.innerHTML = from + '对' + to + '说: ' + message;
            // 3. 把构造好的元素添加进去
            let container = document.querySelector('.container');
            container.appendChild(row);
            // 4. 同时清理之前输入框的内容
            for (var i = 0; i < 3; i++) {
                edits[i].value = '';
            }

            // 4. 把当前获取到的输入框内容，构造成以一个 HTTP POST 请求，通过 ajax 发送给服务器
            let body = {
                from: from,
                to: to,
                message: msg
            };
            $.ajax({
                type: "post",
                url: "message",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(body),
                success: function(body) {
                    alert("消息提交成功！");
                },
                error: function() {
                    alert("消息提交失败！");
                }
            })
        }
    </script>
</body>
</html>

在这里插入图片描述
当页面加载的时候，我们就能够看到有一个这个ajax请求，这个请求就是从服务器获取消息列表的~

在这里插入图片描述
此处看到是空着了，刚才不是明明往服务器上提交了三条记录？
在这里插入图片描述
刚刚这个代码是把消息保存到了list中，内容中的数据我们一旦程序重启就会丢失。
因此，上述逻辑，只能保证页面刷新后数据不丢失，而不能保证服务器重启后数据不丢失~
当然，要想更加彻底解决这个问题，就需要把数据保存到硬盘上(可以是文件，也可以是数据库)
在这里插入图片描述
当前确实可以证明，即使页面关闭之后，之前提交的消息是不丢失的~
(页面加载的时候，从服务器获取到了消息列表，并显示在了浏览器页面中)

后端代码优化

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;
import java.util.UUID;

public class DBUtil {
    private static final String URL = "jdbc:mysql://127.0.0.1:3306/java107?characterEncoding=utf8&useSSL=false";
    private static final String USERNAME = "root";
    private static final String PASSWORD = "1234";

    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(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();
            }
        }
    }
}



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.io.Reader;
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 doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 处理提交消息请求
        Message message = objectMapper.readValue(req.getInputStream(), Message.class);
        // 最简单的保存方法就是保存在内存中
        //messages.add(message);
        // 通过 ContentType 来告知页面，返回的数据是 json格式
        // 有了这样的声明，此时 jquery ajax 就会自动的帮我们把字符串转成 js 对象
        // 如果没有， jquery ajax 就只是当成字符串来处理
        save(message);
        resp.setContentType("application/json;charset=utf8");
        resp.getWriter().write("{ \"ok\":true }");
    }

    @Override
    protected 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);
    }

    private void save(Message message) {
        // 把一条消息保存到数据库中
        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
            statement.executeUpdate();
        } catch (SQLException e) {
            throw new RuntimeException(e);
        } finally {
            DBUtil.close(connection, statement, null);
        }
    }

    private List<Message> load() {
        // 从数据库中获取到所有的消息
        List<Message> messages = new ArrayList<>();
        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");
                messages.add(message);
            }
        } catch (SQLException e) {
            throw new RuntimeException(e);
        } finally {
            DBUtil.close(connection, statement, resultSet);
        }
        return messages;
    }
}
摸鱼王胖嘟嘟
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
javaee-api-7.0.jar
05-22
javaweb/javaEE常用jar包，亲测可用，导入到java工程中使用
javaee-api-8.0-javadoc.jar
10-12
javaee-api-8.0-javadoc.jar，这是javaee1.8api的jar包，解压后可用javadoc2chm制作成chm帮助文档。
javaEE初阶 — 服务器版本的表白墙案例
超烦豆先森
04-29 844
设计程序、实现后端代码、实现前端代码
小小项目-博客系统 - 服务器版本 - javaEE初阶 - 细节狂魔
DarkAndGrey的博客
06-10 2447
我们再来稍微回顾一下前面讲的表白墙的实现步骤：         下面我们就把前面写的博客页面给拷贝到当前项目的 webapp 路径下面 记住！千万不要放错位置了！！！ 一定要是 webapp 目录底下！！！！  现在我们需要基于上面的需求来思考：需要设计那些表呢？在main目录底下，创建一个sql文件，用于编写 建库建表的 SQL。 为了后面测试方便，我们来给用户表插入几条数据。下面我们来打开MySQL来看一下效果    进一步来说：就是使用实体类来表示数据库中的一条记录       小结
实现第一个服务器版本的表白墙程序
薯条和番茄酱的博客
05-17 842
基于MySQL数据库和servlet实现的前后端交互的服务器版本表白墙。在页面输入表白内容，在本地通过数据库存储历次表白内容，保证网页刷新重进时数据仍存在。以下为打开表白墙效果展示： 我们可以在输入框输入表白对象，表白内容然后提交就能显示到新动态中，提交之后输入框自动清空内容。完整项目代码可以通过我的gitee获取MessageWall我们在idea里面点击new project创建一个maven项目，然后一路next选择好项目位置以及命名即可。 在创建完maven项目之后我们需要加载依赖，部分同学可能由
【JavaEE】简单前后端分离小项目-表白墙
Carefree_State的博客
06-02 1383
对之前的表白墙进行一定的优化！并且文中设计前后端代码，尤其是前后端是如何对json进行处理的，都很值得学习！本文通过动图和图片演示生动形象！
JavaEE-多线程
QUIXOTIC_的博客
08-13 797
多线程、线程安全、锁、线程池、阻塞队列、单例模式、定时器、synchronized、CAS、JUC
初阶JavaEE（14）表白墙程序
m0_74343467的博客
11-05 597
初阶JavaEE（14）表白墙程序
JavaEE - Servlet
YeZh1Yong 的博客
05-18 522
万字解析Servlet~~
【JavaEE+Servlet】练习小项目：服务器版表白墙
xqs196301的博客
06-13 496
【JavaEE+Servlet】练习小项目：服务器版表白墙
javaEE - 24（ 22000 字 Servlet 入门 - 2 ）
weixin_73232539的博客
02-05 1551
22000 字 Servlet 入门第二篇
JAVAEE-实现简易聊天室
09-28
1. 利用servlet技术实现一个简单的聊天室，实现多人同时交流。当发送聊天信息时，信息窗口刷新。 2、聊天室窗口实时显示当前聊天室的聊天人数以及各个成员的名称，可以轻松快捷地进行观察以及管理。 3、使用Servlet...
javaee_api.zip_JavaEE_Javaee的api_Javax.javaee-api_javaee api 文档_
09-14
这个"javaee_api.zip"文件包含的是JavaEE的官方英文版API文档，以ZIP格式压缩，对于开发者来说，这是一个非常重要的参考资料。如果你对JavaEE的API有需求，可以将这个ZIP文件解压后转换成CHM（Microsoft编译的帮助...
ojdbc7jar+javaee-api-8.0.jar.rar
05-08
标题中的"ojdbc7jar+javaee-api-8.0.jar.rar"是一个压缩包文件，包含两个关键组件：ojdbc7.jar和javaee-api-8.0.jar。这两个组件在Java开发和WebLogic服务器部署中扮演着重要角色。 1. **ojdbc7.jar**: ojdbc7.jar...
Linux 大文件和大量小文件的复制策略
qq_41505080的博客
09-07 1435
在Linux上复制大文件或大量小文件时，可以根据文件的类型、数量以及硬件配置（如硬盘类型、CPU、内存）选择不同的复制策略，以提高复制效率。
USB驱动程序知识介绍
HJQD777的博客
09-07 793
USB驱动程序是操作系统与USB设备之间通信的核心组件，负责设备识别、数据传输、电源管理等关键任务。它使得操作系统能够与广泛的USB设备（如键盘、鼠标、存储设备等）高效、可靠地进行交互。
linux~~目录结构&&远程登录教程（xshell+xftp）
binhyun的博客
09-04 1181
1.目录结构 2.远程登录xshell 2.1所需工具 2.2了解虚拟机IP 2.3查看是否正常连接 2.4xshell进行连接 3.文件传输xftp7 3.1xftp6安装 3.2相关设置 3.3效果展示 3.4文件之间的传输过程
Netty权威指南：Netty总结-编解码与序列化
最新发布
Oceáno的博客
09-09 1244
TCP是流协议，也就是没有界限的的一串数据，底层并不知道上层业务数据的具体含义，也就是说一个完整的包可能会被拆分成多个包进行发送，也可能把几个小包封装成一个大的数据包发送。这就是拆包和粘包。
JavaEE-图书管理系统数据库代码
05-08
JavaEE-图书管理系统通常需要包含以下数据库表： 1. 用户表(user)：包括用户ID、用户名、密码、邮箱等字段。 2. 图书表(book)：包括图书ID、图书名称、作者、出版社、ISBN号等字段。 3. 借阅记录表(borrow_record)...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

摸鱼王胖嘟嘟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值