【浅学Java】Seervlet小项目——MessageWall

最新推荐文章于 2024-06-12 11:59:04 发布
最新推荐文章于 2024-06-12 11:59:04 发布
阅读量695 收藏
点赞数 1
分类专栏： JavaEE 文章标签： java javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52276036/article/details/127388224
版权

MessageWall

1. 基本思路

在这里插入图片描述

2. 前端模块

2.1 代码

<!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>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .container {
            width: 800px;
            margin: 10px auto;
        }

        .container h2 {
            text-align: center;
            margin: 30px 0px;
        }

        .row {
            height: 50px;
            display: flex;
            justify-content: center;
            margin-top: 5px;
            line-height: 50px;
        }

        .row span {
            height: 50px;
            width: 100px;
            line-height: 50px;
        }

        .row input {
            height: 50px;
            width: 300px;
            line-height: 50px;
        }

        .row button {
            width: 400px;
            height: 50px;
            color: white;
            background-color: orange;
            border: none;
            border-radius: 10px;
        }

        .row button:active {
            background-color: grey;
        }
    </style>
</head>
<body>
<!-- 这是一个顶层容器, 放其他元素 -->
<div class="container">
    <h2>表白墙</h2>
    <div class="row">
        <span>谁</span>
        <input type="text" id="from">
    </div>

    <div class="row">
        <span>对谁</span>
        <input type="text" id="to">
    </div>

    <div class="row">
        <span>说什么</span>
        <input type="text" id="message">
    </div>

    <div class="row">
        <button>提交</button>
    </div>
</div>

<!-- 引入jquery的CDN -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
        let container = document.querySelector('.container');
        let fromInput = document.querySelector('#from');
        let toInput = document.querySelector('#to');
        let messageInput = document.querySelector('#message');
        let button = document.querySelector('button');
        button.onclick = function() {
            // 1. 把用户输入的内容获取到.
            let from = fromInput.value;
            let to = toInput.value;
            let message = messageInput.value;
            if (from == '' || to == '' || message == '') {
                return;
            }
            // 2. 构造一个 div, 把这个 div 插入到 .container 的末尾
            let newDiv = document.createElement('div');
            newDiv.className = 'row';
            newDiv.innerHTML = from + " 对 " + to + " 说: " + message;
            // 3. 把 div 挂在 container 里面
            container.appendChild(newDiv);
            // 4. 把之前的输入框内容进行清空
            fromInput.value = '';
            toInput.value = '';
            messageInput.value = '';

            //5.[新的步骤] 需要把刚才输入框里面的数据，构成post请求，交给后端服务器
            let messageJson={
                "from":from,
                "to":to,
                "message":message
                //冒号前面是字符串，后面是变量
            };
            $.ajax({
                type:'post',
                //相对路径的写法
                url:'message',
                //绝对路径的写法
                // url:'/MessageWall/meaaage'
                contentType:'application/json,charset=utf8',
                data:JSON.stringify(messageJson),
                success: function(){
                    alert("提交成功");
                },
                error: function(){
                    alert("提交失败");
                }
            });
        }
        //这个函数在页面加载的时候调用，通过这个函数从服务器获取到当前的消息队列
        //并且显示到页面上。
        function load(){
            $.ajax({
                type:'get',
                url:'message',
                success:function(body){
                    //次数得到的body已经是一个js对象数组了
                    //ajax自动进行类型转换
                    //本来服务器返回的是JSON格式的字符串，ajax会自动的根据Content-Type 为 application/json
                    //对响应的body进行解析，解析成为 js 对象
                    //遍历数组的元素，把内容构造到页面上
                    let container = document.querySelector('.container');
                    for(let message of body){
                        let newDiv = document.createElement('div');
                        newDiv.className = 'row';
                        newDiv.innerHTML=message.from +" 对 "+message.to+" 说:"+message.message;
                        container.appendChild(newDiv);
                    }
                }
            });
        }
        //函数写在这里就表示页面加载的时候就进行执行
        load();
    </script>
</body>
</html>

2.2 提交数据(post请求)

在这里插入图片描述

2.3 加载页面时，拉取服务器端的消息数据(get请求)

在这里插入图片描述

3. 后端模块

3.1 代码

后端处理模块：

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 javax.swing.plaf.metal.MetalMenuBarUI;
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;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: 3020104637
 * Date: 2022-10-16
 * Time: 9:25
 */

// 对应前端传来的请求的body格式，要保证每个属性的名字和json里的key一样
//同时也得保证这几个属性是public或者提供public的getter方法
class Message{
    public String from;
    public String to;
    public String message;

    @Override
    public String toString() {
        return "Message{" +
                "from='" + from + '\'' +
                ", to='" + to + '\'' +
                ", message='" + message + '\'' +
                '}';
    }
}
@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    //objectMapper在多个方法中都会被使用,用来将Json的数据解析成Message类对象
    private ObjectMapper objectMapper = new ObjectMapper();
    //private List<Message>  messageList = new ArrayList<>();
    //实现客户端提交数据到服务器端
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1.把body的json数据解析出来
        Message message=objectMapper.readValue(req.getInputStream(),Message.class);
        // 2.把对象保存起来，先用最简单的做法，就是直接保存在内存中
        //messageList.add(message);
        save(message);
        System.out.println(message);
        // 3.返回保存成功的响应
        resp.setContentType("application/json;charset=utf8");
        resp.getWriter().write("{\"ok\":1}");
    }

    //实现客户端从服务器端拿到数据
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //由于约定的请求没有参数，所以不需要进行解析操作
        resp.setContentType("application/json;charset=utf8");
        List<Message> messageList = load();
        //把对象转成JSON形式的字符串
        String respString = objectMapper.writeValueAsString(messageList);
        resp.getWriter().write(respString);
    }

    //把当前的消息存在数据库当中
    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语句
            int ret = statement.executeUpdate();
            if(ret!=1){
                System.out.println("插入失败！");
            }else{
                System.out.println("插入成功！");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            //4.关闭连接
            DBUtil.close(connection,statement,null);
        }
    }

    //从数据库查询到记录
    private List<Message> load(){
        Connection connection=null;
        PreparedStatement statement=null;
        ResultSet resultSet=null;
        List<Message> messageList = new ArrayList<>();
        try {
            //1.和数据库建立连接
            connection = DBUtil.getConnection();
            //2.构造SQL语句
            String sql = "select * from message";
            statement = 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.add(message);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            //5.释放资源
            DBUtil.close(connection,statement,resultSet);
        }
        return messageList;
    }
}

数据库连接模块：

import com.mysql.cj.jdbc.MysqlDataSource;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: 3020104637
 * Date: 2022-10-16
 * Time: 12:47
 */
//通过这个类来完成数据库的连接
//建立连接需要使用Datasouce，并且一个程序有一个DataSouce实例即可，此处使用单例模式来实现
public class DBUtil {
    private static DataSource dataSource = null;
    private static DataSource getDataSource(){
        if(dataSource==null){
            dataSource = new MysqlDataSource();
            ((MysqlDataSource)dataSource).setURL("jdbc:mysql://127.0.0.1:3306/MessageWall?characterEncoding=utf8&useSSL=false");
            ((MysqlDataSource)dataSource).setUser("root");
            ((MysqlDataSource)dataSource).setPassword("06095213");//必须喻数据库的密码一样
        }
        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();
            }
        }
    }

}

3.2 将json转成自定义的类对象

用ObjectMapper
在这里插入图片描述

3.3 doPost模块

处理的整体逻辑

  1. 解析客户端过来的json数据，解析为Message类型
  2. 将解析出来的Message数据存储起来——save(message)
  3. 向客户端发出保存成功的响应

在这里插入图片描述

save方案

这里用数据库作为存储方案
处理流程：

  1. 与数据库建立连接
  2. 构造sql语句——用客户端提交的内容
  3. 执行sql语句
  4. 关闭连接
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语句
            int ret = statement.executeUpdate();
            if(ret!=1){
                System.out.println("插入失败！");
            }else{
                System.out.println("插入成功！");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            //4.关闭连接
            DBUtil.close(connection,statement,null);
        }
    }

3.4 doGet模块

处理的整体逻辑

  1. 将存储在服务器数据库中的数据取出来构造成一个List对象
  2. 把List对象转成一个json字符串
  3. 将json字符串返回给客户端

在这里插入图片描述

加载数据库数据——load()

//从数据库查询到记录
    private List<Message> load(){
        Connection connection=null;
        PreparedStatement statement=null;
        ResultSet resultSet=null;
        List<Message> messageList = new ArrayList<>();
        try {
            //1.和数据库建立连接
            connection = DBUtil.getConnection();
            //2.构造SQL语句
            String sql = "select * from message";
            statement = 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.add(message);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            //5.释放资源
            DBUtil.close(connection,statement,resultSet);
        }
        return messageList;
    }

3. 数据库连接

代码

import com.mysql.cj.jdbc.MysqlDataSource;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: 3020104637
 * Date: 2022-10-16
 * Time: 12:47
 */
//通过这个类来完成数据库的连接
//建立连接需要使用Datasouce，并且一个程序有一个DataSouce实例即可，此处使用单例模式来实现
public class DBUtil {
    private static DataSource dataSource = null;
    private static DataSource getDataSource(){
        if(dataSource==null){
            dataSource = new MysqlDataSource();
            ((MysqlDataSource)dataSource).setURL("jdbc:mysql://127.0.0.1:3306/MessageWall?characterEncoding=utf8&useSSL=false");
            ((MysqlDataSource)dataSource).setUser("root");
            ((MysqlDataSource)dataSource).setPassword("06095213");//必须喻数据库的密码一样
        }
        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();
            }
        }
    }

}

注意

在这里插入图片描述

4. 结果展示

在这里插入图片描述

Flying`
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅学字节序——字节序大小端，主机字节序，网络字节序的理解
07-08
对字节序的一些理解。
Java程序设计基础课件超实用
06-19
一份相当不错的Java大学基础教程 课件中还附有源代码，浅学易懂。
浅学JAVA 集合——Set
m0_64267256的博客
05-02 421
Set接口： 1.无序 数据添加和取出顺序不相等 2.不允许重复 最多存在一个null 3.不存在索引的概念 方法： 其实就是遵循增删改差引申的一些方法 增加 .add 删除 .remove 查.contains import java.util.*; public class Setprac { public static void main(String[] args) { //Set接口的方法 ...
System Verilog浅学——7.typedef——union
Hod's中文博客(域名：honev.blog.csdn.net)
02-25 441
对union类型的变量进行赋值时，要注意多驱动。‘0是位全0，'1是位全1。
浅学C#（4）——C#基础
衡与墨的博客
01-19 277
C#开发.NET应用程序的步骤 下载Visual studio 新建C#项目 使用C#编写代码 编译运行 C#源程序文件、vs解决方案文件、Web项目文件、C#项目文件的后缀名 第一个简单的C#应用程序 新建一个控制台应用程序 using System; using System.Collections.Generic; using System.Text; namespace HelloWo...
浅学C#（25）——任务Task
衡与墨的博客
01-26 497
任务Task 任务在后台使用ThreadPool 在安排需要完成的工作时，任务提供了非常大的灵活性。 可以定义连续的工作，在一个任务完成后需要执行什么工作 可以在层次结构中安排任务，例如父任务可以创建新的子任务，这可以创建一种依赖关系 启动任务 可以使用TaskFactory类或Task类的构造函数和Start()方法 static void TaskMethod() { Console....
浅学C#（26）——异步委托
衡与墨的博客
01-26 209
异步委托 委托使用线程池完成异步任务 轮询 等待句柄 使用与IAsyncResult相关的等待句柄 使用AsyncWaitHandle属性可以访问等待句柄，这个属性返回一个WaitHandle类型的对象，可以等待委托线程完成任务 异步回调 ...
浅学C#（7）——索引器
衡与墨的博客
01-21 252
索引器 使用索引器的目的是为了能够像数组一样访问类中的数组型的对象 通过对对象元素的下标进行索引，可以访问指定的对象 索引器类似于属性，不同的是索引器有索引参数 索引参数可以使用任何数据类型，但常用的是uint、int、ushort、short、string等 不能使用foreach循环访问索引器 using System; class ArrClass //没有索引器的类 { pri...
浅学C#（8）——委托
衡与墨的博客
01-22 344
委托 委托是函数的封装，它代表一类函数，它们都符合一定的签名：拥有相同的参数列表和返回值类型。同时，委托也可以看成是对函数的抽象，是函数的”类”。 此时，委托的实例将代表一个具体的函数。 一个委托声明、定义了一个引用类型可以用来封装具有一定签名的方法。一个委托实例可用来封装一个静态或实例方法。 一旦为委托分配了方法，委托将与该方法具有完全相同的行为。委托方法的使用可以像其他任何方法一样，具有参数和...
浅学Java基础自我总结关键字
Abner_G的博客
04-24 303
@JAVA关键字（基础） * interface 接口中使用：public interface 接口名称{ //接口内容 } * implements 接口实现类：public class 实现类名称 implements 接口名称{ //… } * super 只能出现在子类中 1.子类的方法 2.构造方法；必须写在第一句 * this 这个类中 * extends 继承...
浅学C#（22）——多线程技术
衡与墨的博客
01-26 291
多线程技术 程序中的多任务 在使用文字处理软件时，用户在输入文字的同时，软件能同步进行拼写检查而不需要用户的等待 多线程工作方式 单处理器计算机上的并发性 抢先式多任务处理 时间片轮转 进程的概念 进程是应用程序的一次动态执行，包括程序代码在内存中的映像以及进程所需的系统资源 System.Diagnostics下的Process类可以访问和管理当前系统中的进程 线程的概念 线程包括堆栈、CPU...
xml浅学笔记
05-15
2、xml标记是严格区分大小写，开始和结束必须一致 3、XML的标记也允许被嵌套，注意嵌套顺序 4、每个标记都允许自定义属性，格式与HTML一致，但属性值，必须用""括起来 5、每个XML文档中必须要有一个跟元素 3、...
浅学二极管与三极管
06-24
二极管，三极管，PN接
浅学RC充放电电路
06-24
浅学RC充放电电路
简单的项目部署脚本（转载）
u010230019的博客
06-09 654
有些项目团队喜欢使用docker启动java服务,那么我们同样可以将上述脚本稍做改造,来实现基于shell+docker的简单项目部署能力。可以将核心节点的错误或者失败内容通过webhook发送到对应的告警平台,比如钉钉、飞书机器人等。把~/.ssh/id_rsa.pub内容添加到远程仓库的ssh秘钥中。执行start.sh脚本打包部署。start.sh脚本内容。
Java——简单图书管理系统
m0_74100417的博客
06-09 1464
数据类型变量iffor数组方法类和对象封装继承多态抽象类和接口今天就是把上述知识点全部都用起来 图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理系统图书管理
修改菜品——后端Java
weixin_53717695的博客
06-09 468
修改菜品——后端Java
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
最新发布
lx_nhs的博客
06-12 446
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
静态方法中使用jdbctemplate_JdbcTemplate浅学
06-13
```java import org.springframework.jdbc.core.JdbcTemplate; import org.springframework.jdbc.datasource.DriverManagerDataSource; public class MyDao { private static JdbcTemplate jdbcTemplate; static...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值